platformbuilders · mdlucas · Mar 6, 2024 · Feb 28, 2024 · Feb 28, 2024 · Feb 28, 2024
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/fluid-react",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "private": false,
   "description": "Builders React for Fluid Design System",
   "keywords": [
@@ -44,35 +44,36 @@
   "dependencies": {
     "@platformbuilders/helpers": "0.8.2",
     "@platformbuilders/theme-toolkit": "0.3.0",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-select": "^1.2.2",
-    "lottie-web": "^5.12.2",
+    "@radix-ui/react-icons": "1.3.0",
+    "@radix-ui/react-label": "2.0.2",
+    "@radix-ui/react-select": "1.2.2",
+    "lottie-web": "5.12.2",
     "numeral": "2.0.6",
     "patch-package": "7.0.2",
-    "react-imask": "^7.1.3"
+    "react-imask": "7.1.3",
+    "react-multi-date-picker": "4.4.1"
   },
   "devDependencies": {
     "@babel/core": "7.22.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/preset-env": "7.22.9",
-    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-react": "7.23.3",
     "@commitlint/cli": "17.6.7",
     "@commitlint/config-conventional": "17.6.7",
     "@faker-js/faker": "7.4.0",
     "@platformbuilders/eslint-config-builders": "1.0.2",
-    "@storybook/addon-a11y": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.13",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-themes": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
-    "@storybook/test": "^7.6.12",
-    "@storybook/test-runner": "^0.16.0",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-a11y": "7.6.12",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-interactions": "7.6.13",
+    "@storybook/addon-links": "7.6.12",
+    "@storybook/addon-themes": "7.6.12",
+    "@storybook/blocks": "7.6.12",
+    "@storybook/jest": "0.2.3",
+    "@storybook/react": "7.6.12",
+    "@storybook/react-vite": "7.6.12",
+    "@storybook/test": "7.6.12",
+    "@storybook/test-runner": "0.16.0",
+    "@storybook/testing-library": "0.2.2",
     "@types/lodash": "4.14.196",
     "@types/moment": "2.13.0",
     "@types/react": "18.2.16",
@@ -84,10 +85,10 @@
     "@types/yup": "0.32.0",
     "@typescript-eslint/eslint-plugin": "5.34.0",
     "@typescript-eslint/parser": "5.34.0",
-    "@vitejs/plugin-react": "^4.0.3",
+    "@vitejs/plugin-react": "4.0.3",
     "babel-loader": "8.2.5",
     "babel-plugin-transform-async-to-generator": "6.24.1",
-    "chromatic": "^10.7.1",
+    "chromatic": "10.7.1",
     "css-loader": "6.8.1",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "8.45.0",
@@ -107,12 +108,12 @@
     "eslint-plugin-react": "7.33.0",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-sonarjs": "0.19.0",
-    "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-storybook": "0.6.13",
     "file-loader": "6.2.0",
     "formik": "2.4.2",
     "husky": "8.0.3",
     "in-publish": "2.0.1",
-    "jsdom": "^22.1.0",
+    "jsdom": "22.1.0",
     "lint-staged": "13.2.3",
     "lodash": "4.17.21",
     "mz": "2.7.0",
@@ -124,13 +125,13 @@
     "react-dom": "18.2.0",
     "react-router-dom": "6.14.2",
     "rmfr": "2.0.0",
-    "storybook": "^7.6.12",
+    "storybook": "7.6.12",
     "style-loader": "3.3.3",
     "styled-components": "6.0.5",
     "svg-inline-loader": "0.8.2",
     "ts-loader": "9.4.4",
     "typescript": "5.1.6",
-    "vitest": "^0.33.0"
+    "vitest": "0.33.0"
   },
   "peerDependencies": {
     "@platformbuilders/helpers": "0.8.2",

diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx
@@ -0,0 +1,41 @@
+import { expect, jest } from '@storybook/jest';
+import type { Meta, StoryObj } from '@storybook/react';
+import { configure, userEvent, within } from '@storybook/testing-library';
+import DatePicker from './index';
+
+configure({
+  testIdAttribute: 'testid',
+});
+
+//  Mocks
+const onChange = jest.fn();
+const calendarTestID = 'calendar-test-id';
+
+const meta: Meta<typeof DatePicker> = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: { control: { type: null } },
+    disableMonthPicker: { control: { type: 'boolean' } },
+    disableYearPicker: { control: { type: 'boolean' } },
+    workDays: { control: { type: 'boolean' } },
+    minDate: { control: { type: 'boolean' } },
+    maxDate: { control: { type: 'boolean' } },
+  },
+  args: {
+    onChange: onChange,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx
@@ -0,0 +1,77 @@
+import React, { useRef } from 'react';
+import { DateObject, DatePickerProps } from 'react-multi-date-picker';
+import TextInput from '../TextInput';
+import localeCalendar from './locale_calendar.json';
+import { CustomCalendar } from './styles';
+
+interface Props extends DatePickerProps {
+  value: DateObject;
+  onChange: (date: DateObject) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  name: string;
+  id: string;
+  disableMonthPicker?: boolean;
+  disableYearPicker?: boolean;
+  workDays?: boolean;
+  holidays?: string[];
+}
+
+const DatePickerComponent: React.FC<Props> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  disableMonthPicker,
+  disableYearPicker,
+  workDays,
+  holidays,
+  name,
+  id,
+}) => {
+  const datePickerRef = useRef();
+  return (
+    <CustomCalendar
+      locale={localeCalendar}
+      ref={datePickerRef}
+      render={(value, openCalendar, onChange) => {
+        return (
+          <TextInput
+            name={name}
+            id={id}
+            value={value}
+            onClick={openCalendar}
+            onChange={(e) => onChange(e)}
+            iconRight="ChevronDownIcon"
+          />
+        );
+      }}
+      format="DD/MM/YYYY"
+      headerOrder={['MONTH_YEAR', 'LEFT_BUTTON', 'RIGHT_BUTTON']}
+      value={value}
+      arrow={false}
+      minDate={minDate}
+      maxDate={maxDate}
+      onChange={onChange}
+      disableMonthPicker={disableMonthPicker}
+      disableYearPicker={disableYearPicker}
+      mapDays={(days) => {
+        const isWeekend = [0, 6].includes(days.date.weekDay.index);
+        const isDisabled = holidays?.includes(
+          days.date.toDate().toISOString().slice(0, 10),
+        );
+
+        if ((isWeekend && workDays) || isDisabled) {
+          return {
+            disabled: isWeekend,
+          };
+        }
+        return {
+          disabled: false,
+        };
+      }}
+    />
+  );
+};
+
+export default DatePickerComponent;
diff --git a/src/components/DatePicker/locale_calendar.json b/src/components/DatePicker/locale_calendar.json
@@ -0,0 +1,31 @@
+{
+  "name": "brl_upercase",
+  "months": [
+    ["Janeiro ", "JAN"],
+    ["Fevereiro", "FEV"],
+    ["Março", "MAR"],
+    ["Abril", "ABR"],
+    ["Maio", "MAI"],
+    ["Junho", "JUN"],
+    ["Julho", "JUL"],
+    ["Agosto", "AGO"],
+    ["Setembro", "SET"],
+    ["Outubro", "OUT"],
+    ["Novembro", "NOV"],
+    ["Dezembro", "DEZ"]
+  ],
+  "weekDays": [
+    ["Sábado", "SA"],
+    ["Domingo", "DO"],
+    ["Segunda", "SE"],
+    ["Terça", "TE"],
+    ["Quarta", "QA"],
+    ["Quinta", "QI"],
+    ["Sexta", "SE"]
+  ],
+  "digits": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+  "meridiems": [
+    ["AM", "am"],
+    ["PM", "pm"]
+  ]
+}
diff --git a/src/components/DatePicker/styles.ts b/src/components/DatePicker/styles.ts
@@ -0,0 +1,86 @@
+import DatePicker from 'react-multi-date-picker';
+import styled from 'styled-components';
+import { getTheme, pxToRem } from '@platformbuilders/theme-toolkit';
+
+const fontSizeSm = getTheme('fontSizes.sm');
+const backgroundZ0 = getTheme('background.z0');
+const colorBrandPrimaryMain = getTheme('brand.primary.main');
+const colorBrandPrimaryContrast = getTheme('brand.primary.contrast');
+const colorTextMain = getTheme('text.main');
+const spacingSm = getTheme('spacing.sm');
+
+export const CustomCalendar = styled(DatePicker)`
+  margin-top: ${pxToRem(-18)};
+  .rmdp-ym {
+    flex-direction: row;
+  }
+  .rmdp-input {
+    cursor: pointer;
+  }
+  .rmdp-header div {
+    flex-direction: row;
+  }
+  .rmdp-header-values {
+    margin-left: ${pxToRem(5)};
+    font-size: ${fontSizeSm}px;
+    font-weight: 700;
+    color: ${colorTextMain};
+    flex-direction: row;
+  }
+  .rmdp-arrow-container {
+    padding-top: ${pxToRem(2)};
+    &:hover {
+      background-color: ${colorBrandPrimaryMain};
+      box-shadow: none;
+      > i {
+        border: solid ${colorBrandPrimaryContrast};
+        border-width: 0 ${pxToRem(2)} ${pxToRem(2)} 0;
+      }
+    }
+  }
+  .rmdp-arrow {
+    border: solid ${colorBrandPrimaryMain};
+    border-width: 0 ${pxToRem(2)} ${pxToRem(2)} 0;
+  }
+  .rmdp-left {
+    padding-right: ${pxToRem(2)};
+  }
+  .rmdp-right {
+    padding-left: ${pxToRem(1)};
+  }
+  .rmdp-arrow {
+    color: ${colorBrandPrimaryMain};
+  }
+  .rmdp-week {
+    margin: ${spacingSm} 0;
+    flex-direction: row;
+  }
+  .rmdp-week-day {
+    color: ${colorTextMain};
+    font-weight: 700;
+  }
+  .rmdp-day {
+    &:hover {
+      .span {
+        background-color: ${colorBrandPrimaryMain}10;
+      }
+    }
+  }
+  .rmdp-day span {
+    &:hover {
+      background-color: ${colorBrandPrimaryMain};
+    }
+  }
+  .rmdp-day.rmdp-today span {
+    background-color: ${backgroundZ0}20;
+    color: ${colorTextMain};
+    &:hover {
+      background-color: ${colorBrandPrimaryMain};
+      color: ${colorBrandPrimaryContrast};
+    }
+  }
+  .rmdp-day.rmdp-selected span:not(.highlight) {
+    background-color: ${colorBrandPrimaryMain};
+    color: ${colorBrandPrimaryContrast};
+  }
+`;
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -17,3 +17,4 @@ export { default as Checkbox } from './Checkbox';
 export { default as Select } from './Select';
 export { default as Switch } from './Switch';
 export { default as Radio } from './Radio';
+export { default as DatePicker } from './DatePicker';
diff --git a/yarn.lock b/yarn.lock
@@ -10993,6 +10993,11 @@ react-colorful@^5.1.2:
   resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b"
   integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==
 
+react-date-object@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/react-date-object/-/react-date-object-2.1.8.tgz#2bc482f950d11f241bb127b08ab8152c12c2f80c"
+  integrity sha512-94zg/9r29v/VsKsJT0E5+tPg85IyMirkU/B7qBWlhT7RDSuf9x5dczfbQOsj9TbzSVUK/Vx/ZDboOBy9hA381w==
+
 [email protected]:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript-loader/-/react-docgen-typescript-loader-3.7.2.tgz#45cb2305652c0602767242a8700ad1ebd66bbbbd"
@@ -11036,6 +11041,11 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-element-popper@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/react-element-popper/-/react-element-popper-2.1.6.tgz#4afb912287d57de5d442fb85e76f4d7b94fde879"
+  integrity sha512-8va7mUmrKIkUnaM2t5Dyctd8cjgVgVcrv5vVD0FRay0sN6EPBCKa0bDi1/KmVDAjfgSIn7zQnjtc4VojcGrkgQ==
+
 react-element-to-jsx-string@^15.0.0:
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
@@ -11078,6 +11088,14 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-multi-date-picker@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-multi-date-picker/-/react-multi-date-picker-4.4.1.tgz#98e137ab4829f69385d9e14f8ff6d48f31e180c8"
+  integrity sha512-z0utCiMYijt2w3UoVJkYgsReE9l1k6DkiL13Vr2RKHnBnorKK0IYq7xpfkuMimvt7sLumFr5wTKsWumCgSkXkA==
+  dependencies:
+    react-date-object "^2.1.8"
+    react-element-popper "^2.1.6"
+
 react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"