Merge pull request #96 from fortanix/feature/gh-63-upgrade-react-date…

…picker Update react-datepicker and remove workaround
fortanix · Jan 9, 2025 · 4113a09 · 4113a09
2 parents 845652b + f9523fd
commit 4113a09
Show file tree

Hide file tree

Showing 9 changed files with 336 additions and 379 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,8 +72,8 @@
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-svg-icons": "^2.0.1",
     "typescript": "^5.7.2",
-    "@types/node": "^22.10.1",
-    "stylelint": "^16.11.0",
+    "@types/node": "^22.10.5",
+    "stylelint": "^16.12.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "@biomejs/biome": "^1.9.4",
     "vitest": "^2.1.8",
@@ -91,31 +91,31 @@
     "@storybook/addon-links": "^8.4.7",
     "@storybook/addon-storysource": "^8.4.7",
     "@storybook/addon-designs": "^8.0.4",
-    "chromatic": "^11.20.0",
-    "@chromatic-com/storybook": "^3.2.2",
+    "chromatic": "^11.22.0",
+    "@chromatic-com/storybook": "^3.2.3",
     "storybook-dark-mode": "^4.0.2",
-    "@percy/cli": "^1.30.4",
+    "@percy/cli": "^1.30.6",
     "@percy/storybook": "^6.0.3",
     "vite-css-modules": "^1.6.0",
     "typescript-plugin-css-modules": "^5.0.1",
-    "sass-embedded": "^1.83.0",
+    "sass-embedded": "^1.83.1",
     "lightningcss": "^1.28.2",
-    "@types/react": "^19.0.1",
-    "@types/react-dom": "^19.0.1"
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2"
   },
   "dependencies": {
     "date-fns": "^4.1.0",
     "message-tag": "^0.10.0",
     "classnames": "^2.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-error-boundary": "^4.1.2",
+    "react-error-boundary": "^5.0.0",
     "@floating-ui/react": "^0.26.28",
     "react-toastify": "^10.0.6",
-    "effect": "^3.11.3",
-    "react-hook-form": "^7.54.0",
-    "optics-ts": "^2.4.1",
-    "react-datepicker": "^7.5.0"
+    "react-datepicker": "^7.6.0",
+    "effect": "^3.12.1",
+    "react-hook-form": "^7.54.2",
+    "optics-ts": "^2.4.1"
   },
   "peerDependencies": {
     "react": ">= 19.0.0",

diff --git a/package.json.js b/package.json.js
@@ -116,8 +116,8 @@ const packageConfig = {
 
     // Static analysis
     'typescript': '^5.7.2',
-    '@types/node': '^22.10.1',
-    'stylelint': '^16.11.0',
+    '@types/node': '^22.10.5',
+    'stylelint': '^16.12.0',
     'stylelint-config-standard-scss': '^14.0.0',
     '@biomejs/biome': '^1.9.4',
 
@@ -139,22 +139,22 @@ const packageConfig = {
     '@storybook/addon-links': '^8.4.7',
     '@storybook/addon-storysource': '^8.4.7',
     '@storybook/addon-designs': '^8.0.4',
-    'chromatic': '^11.20.0',
-    '@chromatic-com/storybook': '^3.2.2', // Chromatic integration for Storybook
+    'chromatic': '^11.22.0',
+    '@chromatic-com/storybook': '^3.2.3', // Chromatic integration for Storybook
     //'storybook-addon-pseudo-states': '^3.1.1',
     'storybook-dark-mode': '^4.0.2',
-    '@percy/cli': '^1.30.4',
+    '@percy/cli': '^1.30.6',
     '@percy/storybook': '^6.0.3',
 
     // Styling
     'vite-css-modules': '^1.6.0',
     'typescript-plugin-css-modules': '^5.0.1',
-    'sass-embedded': '^1.83.0',
+    'sass-embedded': '^1.83.1',
     'lightningcss': '^1.28.2',
 
     // React
-    '@types/react': '^19.0.1',
-    '@types/react-dom': '^19.0.1',
+    '@types/react': '^19.0.3',
+    '@types/react-dom': '^19.0.2',
   },
 
   // Dependencies needed when running the generated build
@@ -167,17 +167,17 @@ const packageConfig = {
     'classnames': '^2.5.1',
     'react': '^19.0.0',
     'react-dom': '^19.0.0',
-    'react-error-boundary': '^4.1.2',
+    'react-error-boundary': '^5.0.0',
     //'@uidotdev/usehooks': '^2.4.1',
 
     '@floating-ui/react': '^0.26.28',
     'react-toastify': '^10.0.6',
+    'react-datepicker': '^7.6.0',
 
-    'effect': '^3.11.3',
-    'react-hook-form': '^7.54.0',
+    'effect': '^3.12.1',
+    'react-hook-form': '^7.54.2',
 
     'optics-ts': '^2.4.1',
-    "react-datepicker": "^7.5.0",
   },
   peerDependencies: {
     'react': '>= 19.0.0',

diff --git a/src/components/forms/controls/DatePicker/DatePicker.tsx b/src/components/forms/controls/DatePicker/DatePicker.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react';
 import ReactDatePicker from 'react-datepicker';
 
-import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
+import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
 
 import { Icon } from '../../../graphics/Icon/Icon.tsx';
 import { Input } from '../Input/Input.tsx';
@@ -14,15 +14,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import cl from './DatePicker.module.scss';
 
 
-type GenericProps = {
-  /** Whether this component should be unstyled. */
-  unstyled?: undefined | boolean,
-
-  /** An optional class name to be appended to the class list. */
-  className?: undefined | ClassNameArgument,
-};
-
-type ReactDatePickerProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'> & {
+type DatePickerProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'> & {
   // Note: need to disable the following features in order to use `ReactDatePicker` as a plain date picker.
   selectsRange?: never,
   selectsMultiple?: never,
@@ -31,11 +23,11 @@ type ReactDatePickerProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChan
   selected: Date | null,
 };
 
-export type DatePickerProps = GenericProps & ReactDatePickerProps;
-
+/**
+ * Date picker form control.
+ */
 export const DatePicker = (props: DatePickerProps) => {
   const {
-    unstyled = false,
     className,
     dateFormat = 'MM/dd/yyyy',
     placeholderText = 'MM/DD/YYYY',
@@ -45,20 +37,20 @@ export const DatePicker = (props: DatePickerProps) => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
   return (
-    <div className={cx(
-      'bk',
-      { [cl['bk-date-picker']]: !unstyled },
-      className,
-    )}>
+    <div
+      className={cx(
+        'bk',
+        cl['bk-date-picker'],
+        className,
+      )}
+    >
       <ReactDatePicker
         dateFormat={dateFormat}
         placeholderText={placeholderText}
         showIcon
         icon={<Icon icon="calendar"/>}
         customInput={
-          <Input className={cx(
-            { [cl['bk-date-picker--input']]: !unstyled },
-          )}/>
+          <Input className={cx([cl['bk-date-picker--input']])}/>
         }
         onCalendarClose={() => setIsOpen(false)}
         onCalendarOpen={() => setIsOpen(true)}

diff --git a/src/components/forms/controls/DatePickerRange/DatePickerRange.stories.tsx b/src/components/forms/controls/DatePickerRange/DatePickerRange.stories.tsx
@@ -43,13 +43,8 @@ export const Standard: Story = {
           {...args}
           selected={startDate}
           onChange={onChange}
-          // There is a bug for startDate and endDate on the original library;
-          // it was already merged to master, but not released yet.
-          // https://github.com/Hacker0x01/react-datepicker/pull/5260
-          // biome-ignore lint/suspicious/noExplicitAny: bug in library, see above
-          startDate={startDate as any}
-          // biome-ignore lint/suspicious/noExplicitAny: bug in library, see above
-          endDate={endDate as any}
+          startDate={startDate}
+          endDate={endDate}
           inline={true}
         />
         {/* with a fixed width to avoid content moving around while selecting */}

diff --git a/src/components/forms/controls/DatePickerRange/DatePickerRange.tsx b/src/components/forms/controls/DatePickerRange/DatePickerRange.tsx
@@ -3,66 +3,51 @@
 |* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react';
+import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
 import ReactDatePicker from 'react-datepicker';
 
-import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
+import { Input } from '../Input/Input.tsx';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import cl from './DatePickerRange.module.scss';
 
-import { Input } from '../Input/Input.tsx';
-
-
-type GenericProps = {
-  /** Whether this component should be unstyled. */
-  unstyled?: undefined | boolean,
 
-  /** An optional class name to be appended to the class list. */
-  className?: ClassNameArgument,
-};
-
-type ReactDatePickerRangeProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'> & {
+export type DatePickerRangeProps = Omit<ComponentProps<typeof ReactDatePicker>, 'onChange'> & {
   // Note: need to disable the following features in order to use `ReactDatePicker` as a plain date picker.
   selectsRange?: never,
   selectsMultiple?: never,
   showMonthYearDropdown?: never,
-  onChange: ((date: [Date | null, Date | null], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | undefined) => void),
-  // There is a bug for startDate and endDate on the original library;
-  // it was already merged to master, but not released yet.
-  // https://github.com/Hacker0x01/react-datepicker/pull/5260
-  startDate?: Date | null,
-  endDate?: Date | null,
+  onChange: (
+    date: [null | Date, null | Date],
+    event?: undefined | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+  ) => void,
 };
-
-export type DatePickerRangeProps = GenericProps & ReactDatePickerRangeProps;
-
+/**
+ * Similar to `DatePicker`, but allows selecting a range (start and end).
+ */
 export const DatePickerRange = (props: DatePickerRangeProps) => {
   const {
-    unstyled = false,
     className,
     dateFormat = 'MM/dd/yyyy',
     placeholderText = 'MM/DD/YYYY',
     ...propsRest
   } = props;
 
   return (
-    <div className={cx(
-      'bk',
-      { [cl['bk-date-picker-range']]: !unstyled },
-      className,
-    )}>
+    <div
+      className={cx(
+        'bk',
+        cl['bk-date-picker-range'],
+        className,
+      )}
+    >
       <ReactDatePicker
         selectsRange
-        // everything else is the same
         dateFormat={dateFormat}
         placeholderText={placeholderText}
         customInput={<Input className={cl['bk-date-picker-range--input']}/>}
         {...propsRest}
         onChange={props.onChange}
-        // biome-ignore lint/suspicious/noExplicitAny: bug in library, see above
-        startDate={props.startDate as any}
-        // biome-ignore lint/suspicious/noExplicitAny: bug in library, see above
-        endDate={props.endDate as any}
       />
     </div>
   );

diff --git a/src/components/forms/controls/DateTimePicker/DateTimePicker.stories.tsx b/src/components/forms/controls/DateTimePicker/DateTimePicker.stories.tsx
@@ -28,15 +28,15 @@ export default {
 
 export const Standard: Story = {
   render: (args) => {
-    const [date, setDate] = React.useState<Date | null>(new Date(2024, 10, 12, 9, 41));
+    const [date, setDate] = React.useState<null | Date>(new Date(2024, 10, 12, 9, 41));
 
     return (
       // with a fixed height to avoid hiding the bottom part of the calendar
-      <div style={{height: '500px'}}>
+      <div style={{ height: '500px' }}>
         <DateTimePicker
           {...args}
           date={date}
-          onChange={(date: Date | null) => setDate(date)}
+          onChange={(date: null | Date) => setDate(date)}
         />
         <p>Date selected: {date?.toDateString()} - {date?.toTimeString()}</p>
       </div>