From 40f36104f352de9ff1b313550d8e58daf1b552be Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Fri, 8 Mar 2024 16:20:03 -0500 Subject: [PATCH] feat(ui): upgrade react-datepicker and date-fns, fix datepicker not working --- package.json | 1 + packages/ui/package.json | 5 +- .../ui/src/elements/DatePicker/DatePicker.tsx | 17 +++--- .../ui/src/elements/DatePicker/index.scss | 3 + packages/ui/src/elements/DatePicker/index.tsx | 4 +- .../WhereBuilder/Condition/Date/index.tsx | 8 +-- .../elements/WhereBuilder/Condition/index.tsx | 4 +- .../ui/src/forms/fields/DateTime/index.tsx | 2 +- .../utilities/buildComponentMap/mapFields.tsx | 1 + packages/ui/src/utilities/formatDate/index.ts | 2 +- pnpm-lock.yaml | 61 +++++++++++++++---- 11 files changed, 74 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index d46548cf1a..1bf71783ac 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +", "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +", "dev": "cross-env node --no-deprecation ./test/dev.js", + "devsafe": "rm -rf .next && cross-env node --no-deprecation ./test/dev.js", "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts", "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts", "dev:postgres": "pnpm --filter payload run dev:postgres", diff --git a/packages/ui/package.json b/packages/ui/package.json index 02aafe329a..231bd219b8 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -51,6 +51,7 @@ "@types/body-scroll-lock": "^3.1.0", "@types/qs": "6.9.7", "@types/react": "18.2.15", + "@types/react-datepicker": "4.11.2", "@types/react-dom": "18.2.7", "@types/uuid": "8.3.4", "payload": "workspace:*" @@ -65,14 +66,14 @@ "@payloadcms/translations": "workspace:*", "body-scroll-lock": "4.0.0-beta.0", "bson-objectid": "2.0.4", - "date-fns": "2.30.0", + "date-fns": "3.3.1", "deep-equal": "2.2.2", "flatley": "5.2.0", "md5": "2.3.0", "object-to-formdata": "4.5.1", "qs": "6.11.2", "react-animate-height": "2.1.2", - "react-datepicker": "4.16.0", + "react-datepicker": "6.2.0", "react-image-crop": "10.1.8", "react-select": "5.7.4", "react-toastify": "10.0.4", diff --git a/packages/ui/src/elements/DatePicker/DatePicker.tsx b/packages/ui/src/elements/DatePicker/DatePicker.tsx index 6d85ae650e..cb9ef4c5f5 100644 --- a/packages/ui/src/elements/DatePicker/DatePicker.tsx +++ b/packages/ui/src/elements/DatePicker/DatePicker.tsx @@ -1,6 +1,10 @@ +import type { ReactDatePickerProps } from 'react-datepicker' + import * as Locales from 'date-fns/locale' import React from 'react' -import DatePicker, { registerLocale } from 'react-datepicker' +import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker' +const ReactDatePicker = (ReactDatePickerDefaultImport.default || + ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default import 'react-datepicker/dist/react-datepicker.css' import type { Props } from './types.js' @@ -61,7 +65,7 @@ const DateTime: React.FC = (props) => { if (typeof onChangeFromProps === 'function') onChangeFromProps(newDate) } - const dateTimePickerProps = { + const dateTimePickerProps: ReactDatePickerProps = { customInputRef: 'ref', dateFormat, disabled: readOnly, @@ -72,6 +76,7 @@ const DateTime: React.FC = (props) => { monthsShown: Math.min(2, monthsToShow), onChange, placeholderText, + popperPlacement: 'bottom-start', selected: value && new Date(value), showMonthYearPicker: pickerAppearance === 'monthOnly', showPopperArrow: false, @@ -100,16 +105,10 @@ const DateTime: React.FC = (props) => {
- diff --git a/packages/ui/src/elements/DatePicker/index.scss b/packages/ui/src/elements/DatePicker/index.scss index 347ffe105d..4014e67063 100644 --- a/packages/ui/src/elements/DatePicker/index.scss +++ b/packages/ui/src/elements/DatePicker/index.scss @@ -198,6 +198,9 @@ $cal-icon-width: 18px; } &__month-text { + padding: base(0.3); + margin: base(0.15); + font-size: base(0.55); &:hover { background: var(--theme-elevation-100); } diff --git a/packages/ui/src/elements/DatePicker/index.tsx b/packages/ui/src/elements/DatePicker/index.tsx index dca51bc7bd..a90245011f 100644 --- a/packages/ui/src/elements/DatePicker/index.tsx +++ b/packages/ui/src/elements/DatePicker/index.tsx @@ -6,10 +6,8 @@ import { ShimmerEffect } from '../ShimmerEffect/index.js' const DatePicker = lazy(() => import('./DatePicker.js')) -const DatePickerField: React.FC = (props) => ( +export const DatePickerField: React.FC = (props) => ( }> ) - -export default DatePickerField diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx b/packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx index 080f360cf6..519fe6e082 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx +++ b/packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx @@ -2,18 +2,16 @@ import React from 'react' import type { Props } from './types.js' -import DatePicker from '../../../DatePicker/index.js' +import { DatePickerField } from '../../../DatePicker/index.js' const baseClass = 'condition-value-date' -const DateField: React.FC = ({ admin, disabled, onChange, value }) => { +export const DateField: React.FC = ({ admin, disabled, onChange, value }) => { const { date } = admin || {} return (
- +
) } - -export default DateField diff --git a/packages/ui/src/elements/WhereBuilder/Condition/index.tsx b/packages/ui/src/elements/WhereBuilder/Condition/index.tsx index 757eef78c4..ebdb3ff86d 100644 --- a/packages/ui/src/elements/WhereBuilder/Condition/index.tsx +++ b/packages/ui/src/elements/WhereBuilder/Condition/index.tsx @@ -7,7 +7,7 @@ import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/i import useDebounce from '../../../hooks/useDebounce.js' import { Button } from '../../Button/index.js' import ReactSelect from '../../ReactSelect/index.js' -import Date from './Date/index.js' +import { DateField } from './Date/index.js' import Number from './Number/index.js' import Relationship from './Relationship/index.js' import { Select } from './Select/index.js' @@ -15,7 +15,7 @@ import Text from './Text/index.js' import './index.scss' const valueFields = { - Date, + DateField, Number, Relationship, Select, diff --git a/packages/ui/src/forms/fields/DateTime/index.tsx b/packages/ui/src/forms/fields/DateTime/index.tsx index 6c60067b26..0da8d5d425 100644 --- a/packages/ui/src/forms/fields/DateTime/index.tsx +++ b/packages/ui/src/forms/fields/DateTime/index.tsx @@ -6,7 +6,7 @@ import React, { useCallback } from 'react' import type { Props } from './types.js' -import DatePickerField from '../../../elements/DatePicker/index.js' +import { DatePickerField } from '../../../elements/DatePicker/index.js' import { useTranslation } from '../../../providers/Translation/index.js' import useField from '../../useField/index.js' import { fieldBaseClass } from '../shared.js' diff --git a/packages/ui/src/utilities/buildComponentMap/mapFields.tsx b/packages/ui/src/utilities/buildComponentMap/mapFields.tsx index a5e2ad9281..0b3b258faa 100644 --- a/packages/ui/src/utilities/buildComponentMap/mapFields.tsx +++ b/packages/ui/src/utilities/buildComponentMap/mapFields.tsx @@ -205,6 +205,7 @@ export const mapFields = (args: { // TODO: fix types // label: 'label' in field ? field.label : undefined, blocks, + date: 'admin' in field && 'date' in field.admin ? field.admin.date : undefined, fieldPermissions, hasMany: 'hasMany' in field ? field.hasMany : undefined, max: 'max' in field ? field.max : undefined, diff --git a/packages/ui/src/utilities/formatDate/index.ts b/packages/ui/src/utilities/formatDate/index.ts index ed4b129a5d..83130cf408 100644 --- a/packages/ui/src/utilities/formatDate/index.ts +++ b/packages/ui/src/utilities/formatDate/index.ts @@ -1,5 +1,5 @@ import { format, formatDistanceToNow } from 'date-fns' -import * as Locale from 'date-fns/locale/index.js' +import * as Locale from 'date-fns/locale' import { getSupportedDateLocale } from './getSupportedDateLocale.js' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2e525e7584..d92fa75efc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -199,10 +199,10 @@ importers: specifier: 10.2.0 version: 10.2.0 playwright: - specifier: file:C:\code\payload\playwright-1.43.0-next.tgz + specifier: file:/Users/alessio/Documents/GitHub/payload/playwright-1.43.0-next.tgz version: file:playwright-1.43.0-next.tgz playwright-core: - specifier: file:C:\code\payload\playwright-core-1.43.0-next.tgz + specifier: file:/Users/alessio/Documents/GitHub/payload/playwright-core-1.43.0-next.tgz version: file:playwright-core-1.43.0-next.tgz prettier: specifier: ^3.0.3 @@ -1288,8 +1288,8 @@ importers: specifier: 2.0.4 version: 2.0.4 date-fns: - specifier: 2.30.0 - version: 2.30.0 + specifier: 3.3.1 + version: 3.3.1 deep-equal: specifier: 2.2.2 version: 2.2.2 @@ -1315,8 +1315,8 @@ importers: specifier: 2.1.2 version: 2.1.2(react-dom@18.2.0)(react@18.2.0) react-datepicker: - specifier: 4.16.0 - version: 4.16.0(react-dom@18.2.0)(react@18.2.0) + specifier: 6.2.0 + version: 6.2.0(react-dom@18.2.0)(react@18.2.0) react-image-crop: specifier: 10.1.8 version: 10.1.8(react@18.2.0) @@ -1345,6 +1345,9 @@ importers: '@types/react': specifier: 18.2.15 version: 18.2.15 + '@types/react-datepicker': + specifier: 4.11.2 + version: 4.11.2(react-dom@18.2.0)(react@18.2.0) '@types/react-dom': specifier: 18.2.7 version: 18.2.7 @@ -3579,6 +3582,30 @@ packages: '@floating-ui/utils': 0.2.1 dev: false + /@floating-ui/react-dom@2.0.8(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==} + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + dependencies: + '@floating-ui/dom': 1.6.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@floating-ui/react@0.26.9(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-p86wynZJVEkEq2BBjY/8p2g3biQ6TlgT4o/3KgFKyTWoJLU1GZ8wpctwRqtkEl2tseYA+kw7dBAIDFcednfI5w==} + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + dependencies: + '@floating-ui/react-dom': 2.0.8(react-dom@18.2.0)(react@18.2.0) + '@floating-ui/utils': 0.2.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tabbable: 6.2.0 + dev: false + /@floating-ui/utils@0.2.1: resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} dev: false @@ -4691,6 +4718,7 @@ packages: /@popperjs/core@2.11.8: resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} + dev: true /@react-email/render@0.0.7: resolution: {integrity: sha512-hMMhxk6TpOcDC5qnKzXPVJoVGEwfm+U5bGOPH+MyTTlx0F02RLQygcATBKsbP7aI/mvkmBAZoFbgPIHop7ovug==} @@ -8093,6 +8121,11 @@ packages: engines: {node: '>=0.11'} dependencies: '@babel/runtime': 7.24.0 + dev: true + + /date-fns@3.3.1: + resolution: {integrity: sha512-y8e109LYGgoQDveiEBD3DYXKba1jWf5BA8YU1FL5Tvm0BTdEfy54WLCwnuYWZNnzzvALy/QQ4Hov+Q9RVRv+Zw==} + dev: false /dateformat@4.6.3: resolution: {integrity: sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==} @@ -13855,20 +13888,19 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /react-datepicker@4.16.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-hNQ0PAg/LQoVbDUO/RWAdm/RYmPhN3cz7LuQ3hqbs24OSp69QCiKOJRrQ4jk1gv1jNR5oYu8SjjgfDh8q6Q1yw==} + /react-datepicker@6.2.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-GzEOiE6yLfp9P6XNkOhXuYtZHzoAx3tirbi7/dj2WHlGM+NGE1lefceqGR0ZrYsYaqsNJhIJFTgwUpzVzA+mjw==} peerDependencies: react: ^18.2.0 react-dom: ^18.2.0 dependencies: - '@popperjs/core': 2.11.8 + '@floating-ui/react': 0.26.9(react-dom@18.2.0)(react@18.2.0) classnames: 2.5.1 - date-fns: 2.30.0 + date-fns: 3.3.1 prop-types: 15.8.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-onclickoutside: 6.13.0(react-dom@18.2.0)(react@18.2.0) - react-popper: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.2.0)(react@18.2.0) dev: false /react-diff-viewer-continued@3.2.6(react-dom@18.2.0)(react@18.2.0): @@ -13917,6 +13949,7 @@ packages: /react-fast-compare@3.2.2: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} + dev: true /react-image-crop@10.1.8(react@18.2.0): resolution: {integrity: sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==} @@ -13959,6 +13992,7 @@ packages: react-dom: 18.2.0(react@18.2.0) react-fast-compare: 3.2.2 warning: 4.0.3 + dev: true /react-router-dom@5.3.4(react@18.2.0): resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==} @@ -15191,6 +15225,10 @@ packages: resolution: {integrity: sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==} dev: false + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} + dev: false + /tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -16022,6 +16060,7 @@ packages: resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} dependencies: loose-envify: 1.4.0 + dev: true /watchpack@2.4.0: resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}