@indico-data/design-system 2.36.4 → 2.38.0

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx

@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SingleInputDatePicker } from './SingleInputDatePicker';
+import { useArgs } from '@storybook/preview-api';
+
+const meta: Meta<typeof SingleInputDatePicker> = {
+  component: SingleInputDatePicker,
+  title: 'Forms/DatePicker/SingleInputDatePicker',
+  decorators: [
+    (Story) => (
+      <div style={{ height: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+      description: 'A label for assistive technologies.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Accepts a CSS class name',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    id: {
+      control: 'text',
+      description: 'The id of the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    onSelect: {
+      action: 'selected',
+      description: 'Callback function that is called when a date is selected.',
+      table: {
+        category: 'Events',
+        type: {
+          summary: 'function',
+        },
+      },
+    },
+    selected: {
+      control: 'date',
+      description: 'The selected date.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    inputPlaceholder: {
+      control: 'text',
+      description: 'The placeholder text for the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    inputIconName: {
+      control: 'text',
+      description: 'The icon to display in the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Whether the input field should be clearable.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    isOpen: {
+      control: false,
+      description: 'Whether the date picker is open.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    clearOnClose: {
+      control: 'boolean',
+      description: 'Whether the input field should be cleared when the date picker is closed.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'An error message to display.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    disableAfterDate: {
+      control: 'date',
+      description: 'Disable dates after this date.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    disableBeforeDate: {
+      control: 'date',
+      description: 'Disable dates before this date.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable the date picker.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    month: {
+      control: 'date',
+      description: 'The month to display.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SingleInputDatePicker>;
+
+export const SingleInput: Story = {
+  args: {
+    id: 'date-picker',
+    label: 'Pick a date:',
+    inputPlaceholder: 'MM/DD/YYYY',
+    inputIconName: 'calendar',
+    isClearable: true,
+    isDisabled: false,
+    clearOnClose: false,
+    errorMessage: '',
+    ariaLabel: 'Date Picker',
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date | undefined) => {
+      updateArgs({ selected: date });
+    };
+
+    return <SingleInputDatePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx

@@ -0,0 +1,117 @@
+import { useId, useState, useEffect } from 'react';
+import { format, isValid, parse } from 'date-fns';
+import { DatePicker } from '../datePicker/DatePicker';
+import { Input } from '../../input';
+import { IconName } from '@/types';
+import { DateRange } from 'react-day-picker';
+import { FloatUI } from '../../../floatUI';
+
+interface SingleInputDatePickerProps {
+  ariaLabel: string;
+  disableBeforeDate?: Date;
+  disableAfterDate?: Date;
+  isDisabled?: boolean;
+  id?: string;
+  label?: string;
+  onSelect?: (selected: Date | undefined) => void;
+  month?: Date;
+  selected?: Date | DateRange | Date[] | undefined;
+  isOpen?: boolean;
+  clearOnClose?: boolean;
+  className?: string;
+  inputIconName?: IconName;
+  isClearable?: boolean;
+  inputPlaceholder?: string;
+  errorMessage?: string | undefined;
+  'data-testid'?: string;
+}
+
+export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
+  const {
+    ariaLabel,
+    className,
+    isDisabled,
+    disableBeforeDate,
+    disableAfterDate,
+    month,
+    id,
+    label,
+    onSelect,
+    selected,
+    isOpen,
+    inputPlaceholder,
+    clearOnClose,
+    inputIconName,
+    isClearable,
+    errorMessage,
+    ...rest
+  } = props;
+
+  const inputId = useId();
+
+  // Hold the month in state to control the calendar when the input changes
+  const [localMonth, setLocalMonth] = useState(new Date());
+
+  // Hold the selected date in state
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+
+  // Hold the input value in state
+  const [inputValue, setInputValue] = useState('');
+
+  const handleDayPickerSelect = (date: Date | undefined) => {
+    if (!date) {
+      setInputValue('');
+      setSelectedDate(undefined);
+    } else {
+      setSelectedDate(date);
+      setLocalMonth(date);
+      setInputValue(format(date, 'MM/dd/yyyy'));
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value); // keep the input value in sync
+
+    const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
+
+    if (isValid(parsedDate)) {
+      setSelectedDate(parsedDate);
+      setLocalMonth(parsedDate);
+    } else {
+      setSelectedDate(undefined);
+    }
+  };
+
+  // clear selection if clear on close is true
+  useEffect(() => {
+    if (!isOpen && clearOnClose) {
+      setSelectedDate(undefined);
+      setInputValue('');
+    }
+  }, [isOpen, clearOnClose]);
+
+  return (
+    <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+      <Input
+        id={inputId}
+        value={inputValue}
+        placeholder={inputPlaceholder}
+        isDisabled={isDisabled}
+        iconName={inputIconName}
+        isClearable={isClearable}
+        onChange={handleInputChange}
+        errorMessage={errorMessage}
+        label={'Single Date Picker'}
+        name={'Date Picker'}
+      />
+      <DatePicker
+        month={localMonth}
+        onMonthChange={setLocalMonth}
+        mode="single"
+        selected={selectedDate}
+        onSelect={handleDayPickerSelect}
+        {...rest}
+      />
+    </FloatUI>
+  );
+}

package/src/components/forms/date/inputDatePicker/index.ts

@@ -0,0 +1 @@
+export { SingleInputDatePicker } from './SingleInputDatePicker';

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.mdx

@@ -0,0 +1,18 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as InputDateRangePicker from './InputDateRangePicker.stories';
+import { Row, Col } from '../../../grid/index';
+
+<Meta title="Forms/DatePicker/InputDateRangePicker" name="InputDateRangePicker" />
+
+# Input Date Range Picker
+The Input Date Range Picker is a visual representation of an input field that allows you to enter a date value to the input or select a date from the date picker. It leverages our DatePicker component inside of a FloatingUI window.
+
+<Canvas of={InputDateRangePicker.SingleInput}  />
+
+## Props
+In addition to the props listed below, it also accepts all props listed [here](story=?path=/docs/forms-datepicker--datepicker)
+<Controls of={InputDateRangePicker.SingleInput} />
+
+
+## ToDo
+- Create single component for all dropdown date pickers that accept an react element as the trigger, such as an icon, button, component, input, etc.

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputDateRangePicker } from './InputDateRangePicker';
+import { useArgs } from '@storybook/preview-api';
+
+const meta: Meta<typeof InputDateRangePicker> = {
+  component: InputDateRangePicker,
+  title: 'Forms/DatePicker/InputDateRangePicker',
+  decorators: [
+    (Story) => (
+      <div style={{ height: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    ariaLabel: {
+      control: 'text',
+      description: 'A label for assistive technologies.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Accepts a CSS class name',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    id: {
+      control: 'text',
+      description: 'The id of the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    onSelect: {
+      action: 'selected',
+      description: 'Callback function that is called when a date is selected.',
+      table: {
+        category: 'Events',
+        type: {
+          summary: 'function',
+        },
+      },
+    },
+    selected: {
+      control: 'date',
+      description: 'The selected date.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    inputPlaceholder: {
+      control: 'text',
+      description: 'The placeholder text for the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    inputIconName: {
+      control: 'text',
+      description: 'The icon to display in the input field.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    isClearable: {
+      control: 'boolean',
+      description: 'Whether the input field should be clearable.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    isOpen: {
+      control: false,
+      description: 'Whether the date picker is open.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    clearOnClose: {
+      control: 'boolean',
+      description: 'Whether the input field should be cleared when the date picker is closed.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'An error message to display.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    disableAfterDate: {
+      control: 'date',
+      description: 'Disable dates after this date.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    disableBeforeDate: {
+      control: 'date',
+      description: 'Disable dates before this date.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disable the date picker.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    month: {
+      control: 'date',
+      description: 'The month to display.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InputDateRangePicker>;
+
+export const SingleInput: Story = {
+  args: {
+    id: 'date-picker',
+    label: 'Pick a date:',
+    inputPlaceholder: 'MM/DD/YYYY',
+    inputIconName: 'calendar',
+    isClearable: true,
+    isDisabled: false,
+    clearOnClose: false,
+    errorMessage: '',
+    ariaLabel: 'Date Picker',
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date | undefined) => {
+      updateArgs({ selected: date });
+    };
+
+    return <InputDateRangePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -0,0 +1,117 @@
+import { useId, useState, useEffect } from 'react';
+import { format, isValid, parse } from 'date-fns';
+import { DatePicker } from '../datePicker/DatePicker';
+import { Input } from '../../input';
+import { IconName } from '@/types';
+import { DateRange } from 'react-day-picker';
+import { FloatUI } from '../../../floatUI';
+
+interface InputDateRangePickerProps {
+  ariaLabel: string;
+  disableBeforeDate?: Date;
+  disableAfterDate?: Date;
+  isDisabled?: boolean;
+  id?: string;
+  label?: string;
+  onSelect?: (selected: Date | undefined) => void;
+  month?: Date;
+  selected?: Date | DateRange | Date[] | undefined;
+  isOpen?: boolean;
+  clearOnClose?: boolean;
+  className?: string;
+  inputIconName?: IconName;
+  isClearable?: boolean;
+  inputPlaceholder?: string;
+  errorMessage?: string | undefined;
+  'data-testid'?: string;
+}
+
+export function InputDateRangePicker(props: InputDateRangePickerProps) {
+  const {
+    ariaLabel,
+    className,
+    isDisabled,
+    disableBeforeDate,
+    disableAfterDate,
+    month,
+    id,
+    label,
+    onSelect,
+    selected,
+    isOpen,
+    inputPlaceholder,
+    clearOnClose,
+    inputIconName,
+    isClearable,
+    errorMessage,
+    ...rest
+  } = props;
+
+  const inputId = useId();
+
+  // Hold the month in state to control the calendar when the input changes
+  const [localMonth, setLocalMonth] = useState(new Date());
+
+  // Hold the selected date in state
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+
+  // Hold the input value in state
+  const [inputValue, setInputValue] = useState('');
+
+  const handleDayPickerSelect = (date: Date | undefined) => {
+    if (!date) {
+      setInputValue('');
+      setSelectedDate(undefined);
+    } else {
+      setSelectedDate(date);
+      setLocalMonth(date);
+      setInputValue(format(date, 'MM/dd/yyyy'));
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value); // keep the input value in sync
+
+    const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
+
+    if (isValid(parsedDate)) {
+      setSelectedDate(parsedDate);
+      setLocalMonth(parsedDate);
+    } else {
+      setSelectedDate(undefined);
+    }
+  };
+
+  // clear selection if clear on close is true
+  useEffect(() => {
+    if (!isOpen && clearOnClose) {
+      setSelectedDate(undefined);
+      setInputValue('');
+    }
+  }, [isOpen, clearOnClose]);
+
+  return (
+    <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+      <Input
+        id={inputId}
+        value={inputValue}
+        placeholder={inputPlaceholder}
+        isDisabled={isDisabled}
+        iconName={inputIconName}
+        isClearable={isClearable}
+        onChange={handleInputChange}
+        errorMessage={errorMessage}
+        label={'Single Date Picker'}
+        name={'Date Picker'}
+      />
+      <DatePicker
+        month={localMonth}
+        onMonthChange={setLocalMonth}
+        mode="single"
+        selected={selectedDate}
+        onSelect={handleDayPickerSelect}
+        {...rest}
+      />
+    </FloatUI>
+  );
+}

package/src/components/forms/date/inputDateRangePicker/index.ts

@@ -0,0 +1 @@
+export { InputDateRangePicker } from './InputDateRangePicker';

package/src/components/forms/input/Input.tsx

@@ -7,6 +7,7 @@ import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
 export interface BaseInputProps {
+  id?: string;
   value?: string | undefined;
   placeholder?: string;
   isDisabled?: boolean;
@@ -26,6 +27,7 @@ export interface InputProps extends BaseInputProps, LabelProps {}
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
+      id,
       name,
       placeholder,
       isRequired,
@@ -64,6 +66,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           )}
           <input
             ref={ref}
+            id={id}
             data-testid={`form-input-${name}`}
             name={name}
             type="text"

package/src/components/index.ts

@@ -14,3 +14,6 @@ export { Skeleton } from './skeleton';
 export { Card } from './card';
 export { FloatUI } from './floatUI';
 export { Menu } from './menu';
+export { DatePicker } from './forms/date/datePicker/DatePicker';
+export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
+export { SingleInputDatePicker } from './forms/date/inputDatePicker';