From 2677d1253c4388de130bd56d363c1d93e6349677 Mon Sep 17 00:00:00 2001 From: Lucas Date: Wed, 28 Feb 2024 12:49:54 -0300 Subject: [PATCH 1/4] create datepicker component --- package.json | 3 +- .../DatePicker/DatePicker.stories.tsx | 41 +++++++++ src/components/DatePicker/index.tsx | 75 ++++++++++++++++ .../DatePicker/locale_calendar.json | 31 +++++++ src/components/DatePicker/styles.ts | 88 +++++++++++++++++++ src/components/index.ts | 1 + yarn.lock | 18 ++++ 7 files changed, 256 insertions(+), 1 deletion(-) create mode 100644 src/components/DatePicker/DatePicker.stories.tsx create mode 100644 src/components/DatePicker/index.tsx create mode 100644 src/components/DatePicker/locale_calendar.json create mode 100644 src/components/DatePicker/styles.ts diff --git a/package.json b/package.json index d390df2..503ee1e 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,8 @@ "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", diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000..130a8c2 --- /dev/null +++ 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 = { + 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; + +export const Default: Story = { + args: {}, +}; diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx new file mode 100644 index 0000000..03e7044 --- /dev/null +++ b/src/components/DatePicker/index.tsx @@ -0,0 +1,75 @@ +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; + disableMonthPicker?: boolean; + disableYearPicker?: boolean; + workDays?: boolean; + holidays?: string[]; +} + +const DatePickerComponent: React.FC = ({ + value, + onChange, + minDate, + maxDate, + disableMonthPicker, + disableYearPicker, + workDays, + holidays, +}) => { + const datePickerRef = useRef(); + return ( + { + return ( + 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 new file mode 100644 index 0000000..5dcc0ed --- /dev/null +++ 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 new file mode 100644 index 0000000..6a0c244 --- /dev/null +++ b/src/components/DatePicker/styles.ts @@ -0,0 +1,88 @@ +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)` + &.custom-date-picker { + 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 index 982f121..6ceb8d1 100644 --- 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 index 98da275..56a6a10 100644 --- 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== + react-docgen-typescript-loader@3.7.2: 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 @@ react-dom@18.2.0: 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" From 69c17f4b9eceb31475d5c17247a8873bea7a97b6 Mon Sep 17 00:00:00 2001 From: Lucas Date: Wed, 28 Feb 2024 12:50:25 -0300 Subject: [PATCH 2/4] up version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 503ee1e..508c1da 100644 --- 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": [ From cb2b551e7f714922dbe63f88ac79da4021c52178 Mon Sep 17 00:00:00 2001 From: Lucas Date: Wed, 28 Feb 2024 12:52:25 -0300 Subject: [PATCH 3/4] remove ^ from package.json --- package.json | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 508c1da..44af399 100644 --- a/package.json +++ b/package.json @@ -44,36 +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-multi-date-picker": "^4.4.1" + "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", @@ -85,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", @@ -108,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", @@ -125,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", From e21f361ad2b4f18d2d2f561b3d0695f6fbaa4fa9 Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 5 Mar 2024 17:27:51 -0300 Subject: [PATCH 4/4] added name and id --- src/components/DatePicker/index.tsx | 10 ++- src/components/DatePicker/styles.ts | 130 ++++++++++++++-------------- 2 files changed, 70 insertions(+), 70 deletions(-) diff --git a/src/components/DatePicker/index.tsx b/src/components/DatePicker/index.tsx index 03e7044..8ef2262 100644 --- a/src/components/DatePicker/index.tsx +++ b/src/components/DatePicker/index.tsx @@ -9,6 +9,8 @@ interface Props extends DatePickerProps { onChange: (date: DateObject) => void; minDate?: Date; maxDate?: Date; + name: string; + id: string; disableMonthPicker?: boolean; disableYearPicker?: boolean; workDays?: boolean; @@ -24,19 +26,19 @@ const DatePickerComponent: React.FC = ({ disableYearPicker, workDays, holidays, + name, + id, }) => { const datePickerRef = useRef(); return ( { return ( onChange(e)} diff --git a/src/components/DatePicker/styles.ts b/src/components/DatePicker/styles.ts index 6a0c244..fdb53df 100644 --- a/src/components/DatePicker/styles.ts +++ b/src/components/DatePicker/styles.ts @@ -10,79 +10,77 @@ const colorTextMain = getTheme('text.main'); const spacingSm = getTheme('spacing.sm'); export const CustomCalendar = styled(DatePicker)` - &.custom-date-picker { - 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; - } + 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-day span { - &:hover { - background-color: ${colorBrandPrimaryMain}; + } + .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.rmdp-today span { - background-color: ${backgroundZ0}20; - color: ${colorTextMain}; - &:hover { - background-color: ${colorBrandPrimaryMain}; - color: ${colorBrandPrimaryContrast}; - } + } + .rmdp-day span { + &:hover { + background-color: ${colorBrandPrimaryMain}; } - .rmdp-day.rmdp-selected span:not(.highlight) { + } + .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}; + } `;