Separate DatePicker and DatePickerRange

src/components/forms/controls/DatePicker/DatePicker.module.scss

@@ -188,9 +188,5 @@ $navigation-distance: 1rem;
     display: flex;
     flex-direction: row;
     align-items: center;
-
-    .bk-date-picker__date {
-      text-align: right;
-    }
   }
 }

src/components/forms/controls/DatePicker/DatePicker.stories.tsx

@@ -13,7 +13,6 @@ type DatePickerArgs = React.ComponentProps<typeof DatePicker>;
 type Story = StoryObj<DatePickerArgs>;
 
 export default {
-  // TODO: Why this error???
   component: DatePicker,
   parameters: {
     layout: 'centered',
@@ -45,53 +44,3 @@ export const DatePickerStory: Story = {
     );
   }
 };
-
-export const DatePickerStoryWithRange: Story = {
-  name: 'Date Picker with Dates Range',
-  render: (args) => {
-    const [startDate, setStartDate] = React.useState<Date | null>(new Date());
-    const [endDate, setEndDate] = React.useState<Date | null>(new Date());
-    const onChange = (dates: (Date | null)[]) => {
-      let [start, end] = dates;
-      // TODO: should I make sure start and end are not undefined in a different way?
-      // apparently linter thinks they can be undefined because of the destructuring.
-      if (start !== undefined && end !== undefined) {
-        setStartDate(start);
-        setEndDate(end);
-      }
-    };
-
-    return (
-      <div style={{height: '500px'}}>
-        <DatePicker
-          {...args}
-          // TODO: same error as previous story
-          selected={startDate}
-          onChange={onChange}
-          startDate={startDate}
-          endDate={endDate}
-          selectsRange={true}
-          inline={true}
-        />
-      </div>
-    );
-
-    // const [startDate, setStartDate] = React.useState(new Date());
-    // const [endDate, setEndDate] = React.useState(null);
-    // const onChange = (dates: any) => {
-    //   const [start, end] = dates;
-    //   setStartDate(start);
-    //   setEndDate(end);
-    // };
-    // return (
-    //   <DatePicker
-    //     selected={startDate}
-    //     onChange={onChange}
-    //     startDate={startDate}
-    //     endDate={endDate}
-    //     selectsRange
-    //     inline
-    //   />
-    // );
-  }
-};

src/components/forms/controls/DatePicker/DatePicker.tsx

@@ -5,24 +5,37 @@
 import * as React from 'react';
 import ReactDatePicker from 'react-datepicker';
 
-import { classNames as cx, type ClassNameArgument } from '../../../../util/componentUtil.ts';
+import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import cl from './DatePicker.module.scss';
 
 import { Input } from '../Input/Input.tsx';
 
 
-// Omit<ComponentPropsWithoutRef<typeof ReactDatePicker>, 'onChange'> & {
-export type DatePickerProps = typeof ReactDatePicker & {
+// TODO: eventually move this to a separate file, as this tends to be repeated on every component?
+type GenericProps = {
   /** Whether this component should be unstyled. */
   unstyled?: undefined | boolean,
 
   /** An optional class name to be appended to the class list. */
   className?: ClassNameArgument,
+}
+
+// copying props from react-datepicker and restricting them to specific versions
+// TODO: I would like to reuse this on DatePickerRange.tsx, how can I reuse it there without exporting it?
+type GenericReactDatePickerOmittedProps = Omit<ComponentProps<typeof ReactDatePicker>, 'selectsRange' | 'selectsMultiple' | 'onChange'>;
+
+type ReactDatePickerProps = GenericReactDatePickerOmittedProps & {
+  // TODO: considering we omitted them, do we still need to include it's properties as "never" (as defined on original library),
+  // or in this case is it redundant?
+  // selectsRange?: never,
+  // selectsMultiple?: never,
+  onChange?: (date: Date | null, event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void,
 };
 
-/** A wrapper for ReactDatePicker */
+export type DatePickerProps = GenericProps & ReactDatePickerProps;
+
 export const DatePicker = (props: DatePickerProps) => {
   const {
     unstyled = false,

src/components/forms/controls/DatePicker/DatePickerRange.stories.tsx

@@ -0,0 +1,53 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+
+import { DatePickerRange } from './DatePickerRange.tsx';
+
+
+type DatePickerRangeArgs = React.ComponentProps<typeof DatePickerRange>;
+type Story = StoryObj<DatePickerRangeArgs>;
+
+export default {
+  component: DatePickerRange,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {},
+  decorators: [
+    Story => <form onSubmit={event => { event.preventDefault(); }}><Story/></form>,
+  ],
+} satisfies Meta<DatePickerRangeArgs>;
+
+export const DatePickerRangeStory: Story = {
+  name: 'Date Picker with Dates Range',
+  render: (args) => {
+    const [startDate, setStartDate] = React.useState(new Date());
+    const [endDate, setEndDate] = React.useState(new Date());
+    const onChange = (dates: [Date, Date]) => {
+      const [start, end] = dates;
+      setStartDate(start);
+      setEndDate(end);
+    };
+
+    return (
+      <div style={{height: '500px'}}>
+        <DatePickerRange
+          {...args}
+          selected={startDate}
+          onChange={onChange}
+          startDate={startDate}
+          endDate={endDate}
+          inline={true}
+        />
+      </div>
+    );
+  }
+};

src/components/forms/controls/DatePicker/DatePickerRange.tsx

@@ -0,0 +1,72 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* 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 ReactDatePicker from 'react-datepicker';
+
+import { classNames as cx, type ClassNameArgument, type ComponentProps } from '../../../../util/componentUtil.ts';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import cl from './DatePicker.module.scss';
+
+import { Input } from '../Input/Input.tsx';
+
+
+// TODO: eventually move this to a separate file, as this tends to be repeated on every component?
+type GenericProps = {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+
+  /** An optional class name to be appended to the class list. */
+  className?: ClassNameArgument,
+}
+
+// copying props from react-datepicker and restricting them to specific versions
+// TODO: I would like to reuse this from DatePicker.tsx, how can I reuse it from there without exporting it?
+// Or maybe the solution is to define all variants from the same file?
+type GenericReactDatePickerOmittedProps = Omit<ComponentProps<typeof ReactDatePicker>, 'selectsRange' | 'selectsMultiple' | 'onChange'>;
+
+type ReactDatePickerRangeProps = GenericReactDatePickerOmittedProps & {
+  // not including selectsRange because we will pass that manually to react-datepicker
+  // selectsMultiple?: never,
+  // TODO: it seems like react-datepicker has a bug? the onChange accepts always "Date | null" or variations -
+  // in this case, an array of exactly two elements of Date | null)
+  // but then the startDate and endDate parameters do NOT take null.
+  // therefore I think it'd make sense to handle them as [Date, Date] and
+  // somehow make it accept (as our more strict variant is within what they accept)
+  onChange?: (date: [Date, Date], event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void,
+};
+
+export type DatePickerRangeProps = GenericProps & ReactDatePickerRangeProps;
+
+export const DatePickerRange = (props: DatePickerRangeProps) => {
+  // TODO how could I reuse DatePicker component only passing the props that I want? Something as simple as
+  // <DatePicker selectsRange={true} {...propsRest} />
+
+  const {
+    unstyled = false,
+    className,
+    ...propsRest
+  } = props;
+
+  return (
+    <div className={cx(
+      'bk',
+      { [cl['bk-datepicker']]: !unstyled },
+      className,
+    )}>
+      <ReactDatePicker
+        selectsRange={true}
+        // everything else is the same
+        className={cx(
+          cl['bk-date-picker__date'],
+        )}
+        dateFormat="MM/dd/yyyy"
+        placeholderText="MM/DD/YYYY"
+        customInput={<Input />}
+        {...propsRest}
+      />
+    </div>
+  );
+};