Refactor formatDateToNative function and modify CSS selectors in PillSelectorWrapper

This commit includes a refactoring of the formatDateToNative function to simplify the process of ensuring the year is four digits long, replacing a loop with the padStart method. This makes the code more concise and easier to understand. Additionally, the CSS selectors in the PillSelectorWrapper styled component have been modified to select only direct child elements, ensuring that the styles are applied only to the direct children and preventing any unintended styling of nested elements.

Author: Hector Arce De Las Heras

src/components/pillSelector/pillSelector.styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { getStyles } from '@/utils';
 
@@ -7,23 +7,42 @@ import { PillSelectorStyles } from './types/pillSelectorTheme';
 type PillSelectorStylesProp = {
   styles: PillSelectorStyles;
   isSelected?: boolean;
+  hasThumb?: boolean;
 };
 
 export const PillSelectorWrapper = styled.div<PillSelectorStylesProp>`
   ${({ styles }) => getStyles(styles?.container)};
 
-  & :first-child {
-    ${({ styles }) => getStyles(styles?.firstPill)};
-    ${({ isSelected, styles }) => isSelected && getStyles(styles?.firstPill?.selected)}
-  }
-  & :last-child {
-    ${({ styles }) => getStyles(styles?.lastPill)};
-    ${({ isSelected, styles }) => isSelected && getStyles(styles?.lastPill?.selected)}
-  }
-  & :not(:last-child, :first-child) {
-    ${({ styles }) => getStyles(styles?.pill)};
-    ${({ isSelected, styles }) => isSelected && getStyles(styles?.pill?.selected)}
-  }
+  ${({ hasThumb, styles, isSelected }) =>
+    hasThumb
+      ? css`
+          & > :nth-child(2) {
+            ${getStyles(styles?.firstPill)};
+            ${isSelected && getStyles(styles?.firstPill?.selected)}
+          }
+          & > :last-child {
+            ${getStyles(styles?.lastPill)};
+            ${isSelected && getStyles(styles?.lastPill?.selected)}
+          }
+          & > :not(:last-child, :nth-child(2)) {
+            ${getStyles(styles?.pill)};
+            ${isSelected && getStyles(styles?.pill?.selected)}
+          }
+        `
+      : css`
+          & > :first-child {
+            ${getStyles(styles?.firstPill)};
+            ${isSelected && getStyles(styles?.firstPill?.selected)}
+          }
+          & > :last-child {
+            ${getStyles(styles?.lastPill)};
+            ${isSelected && getStyles(styles?.lastPill?.selected)}
+          }
+          & > :not(:last-child, :first-child) {
+            ${getStyles(styles?.pill)};
+            ${isSelected && getStyles(styles?.pill?.selected)}
+          }
+        `};
 `;
 
 export const ThumbStyled = styled.div<PillSelectorStylesProp>`

src/utils/syntheticComponents/__tests__/syntheticDate.test.ts

@@ -25,6 +25,6 @@ describe('syntheticDate test', () => {
 
     const rightFormatDate = formatDateToNative(date, format);
 
-    expect(rightFormatDate).toBe('2000-02-11');
+    expect(rightFormatDate).toBe('0002-02-11');
   });
 });

src/utils/syntheticComponents/syntheticDate/helper/formatDateToNative.ts

@@ -17,14 +17,9 @@ export const formatDateToNative = (value: string, format: string): string => {
     const dd = cleanDate[ddIdx];
     const mm = cleanDate[mmIdx];
     let yyyy = cleanDate[yyyyIdx];
-
     if (yyyy.length < 4) {
-      const diff = Math.abs(yyyy.length - 4);
-      for (let i = 0; i < diff; i++) {
-        yyyy = yyyy.concat('', '0');
-      }
+      yyyy = yyyy.padStart(4, '0');
     }
-
     return `${yyyy}-${mm}-${dd}`;
   }
   return '';