@indico-data/design-system 2.36.4 → 2.38.0

package/lib/src/components/forms/date/datePicker/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DatePickerProps } from './types';
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;

package/lib/src/components/forms/date/datePicker/DatePicker.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const Default: Story;
+export declare const Single: Story;
+export declare const Range: Story;
+export declare const Multi: Story;

package/lib/src/components/forms/date/datePicker/contants.d.ts

@@ -0,0 +1,21 @@
+import { CommonProps } from './types';
+export declare const getCommonProps: (props: CommonProps) => {
+    className: string | undefined;
+    id: string | undefined;
+    month: Date | undefined;
+    captionLayout: "label" | "dropdown" | "dropdown-months" | "dropdown-years" | undefined;
+    defaultMonth: Date | undefined;
+    startMonth: Date | undefined;
+    endMonth: Date | undefined;
+    components: Partial<import("react-day-picker").CustomComponents> | undefined;
+    isDisabled: import("react-day-picker").Matcher | import("react-day-picker").Matcher[] | undefined;
+    formatters: Partial<import("react-day-picker").Formatters> | undefined;
+    weekStartsOn: 0 | 5 | 2 | 4 | 3 | 1 | 6 | undefined;
+    firstWeekContainsDate: 4 | 1 | undefined;
+    today: Date | undefined;
+    required: any;
+    onMonthChange: import("react-day-picker").MonthChangeEventHandler | undefined;
+    onNextClick: import("react-day-picker").MonthChangeEventHandler | undefined;
+    onPrevClick: import("react-day-picker").MonthChangeEventHandler | undefined;
+    onDayClick: import("react-day-picker").DayEventHandler<import("react").MouseEvent<Element, MouseEvent>> | undefined;
+};

package/lib/src/components/forms/date/datePicker/types.d.ts

@@ -0,0 +1,48 @@
+import { CustomComponents, DateRange, DayEventHandler, Formatters, Matcher, Mode, MonthChangeEventHandler, OnSelectHandler } from 'react-day-picker';
+export interface DatePickerProps {
+    selected?: Date | DateRange | undefined;
+    onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
+    mode?: Mode;
+    className?: string;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    id?: string;
+    month?: Date;
+    defaultMonth?: Date;
+    startMonth?: Date | undefined;
+    endMonth?: Date;
+    components?: Partial<CustomComponents>;
+    numberOfMonths?: number;
+    isDisabled?: Matcher | Matcher[] | undefined;
+    formatters?: Partial<Formatters>;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    firstWeekContainsDate?: 1 | 4;
+    today?: Date;
+    isRequired?: any;
+    min?: number;
+    max?: number;
+    onMonthChange?: MonthChangeEventHandler;
+    onNextClick?: MonthChangeEventHandler;
+    onPrevClick?: MonthChangeEventHandler;
+    onDayClick?: DayEventHandler<React.MouseEvent>;
+}
+export interface CommonProps {
+    className?: string;
+    id?: string;
+    month?: Date;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    defaultMonth?: Date;
+    startMonth?: Date | undefined;
+    endMonth?: Date;
+    components?: Partial<CustomComponents>;
+    numberOfMonths?: number;
+    isDisabled?: Matcher | Matcher[] | undefined;
+    formatters?: Partial<Formatters>;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined;
+    firstWeekContainsDate?: 1 | 4;
+    isRequired?: any;
+    today?: Date;
+    onMonthChange?: MonthChangeEventHandler;
+    onNextClick?: MonthChangeEventHandler;
+    onPrevClick?: MonthChangeEventHandler;
+    onDayClick?: DayEventHandler<React.MouseEvent>;
+}

package/lib/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.d.ts

@@ -0,0 +1,22 @@
+import { DateRange, Mode } from 'react-day-picker';
+import { IconName, IconSizes } from '@/types';
+interface Props {
+    mode?: Mode;
+    ariaLabel: string;
+    disableBeforeDate?: Date;
+    disableAfterDate?: Date;
+    isDisabled?: boolean;
+    id: string;
+    label?: string;
+    onSelect?: (selected: Date | DateRange | Date[] | undefined) => void;
+    month?: Date;
+    selected?: Date | DateRange | Date[] | undefined;
+    triggerIcon: IconName;
+    triggerIconSize: IconSizes;
+    isOpen?: boolean;
+    clearOnClose?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const IconTriggerDatePicker: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconTriggerDatePicker } from '@/components/forms/date/iconTriggerDatePicker';
+declare const meta: Meta<typeof IconTriggerDatePicker>;
+export default meta;
+type Story = StoryObj<typeof IconTriggerDatePicker>;
+export declare const Default: Story;

package/lib/src/components/forms/date/iconTriggerDatePicker/index.d.ts

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

package/lib/src/components/forms/date/inputDatePicker/SingleInputDatePicker.d.ts

@@ -0,0 +1,23 @@
+import { IconName } from '@/types';
+import { DateRange } from 'react-day-picker';
+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 declare function SingleInputDatePicker(props: SingleInputDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SingleInputDatePicker } from './SingleInputDatePicker';
+declare const meta: Meta<typeof SingleInputDatePicker>;
+export default meta;
+type Story = StoryObj<typeof SingleInputDatePicker>;
+export declare const SingleInput: Story;

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

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

package/lib/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.d.ts

@@ -0,0 +1,23 @@
+import { IconName } from '@/types';
+import { DateRange } from 'react-day-picker';
+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 declare function InputDateRangePicker(props: InputDateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputDateRangePicker } from './InputDateRangePicker';
+declare const meta: Meta<typeof InputDateRangePicker>;
+export default meta;
+type Story = StoryObj<typeof InputDateRangePicker>;
+export declare const SingleInput: Story;

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

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

package/lib/src/components/forms/input/Input.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { IconName } from '@/types';
 import { LabelProps } from '../subcomponents/Label';
 export interface BaseInputProps {
+    id?: string;
     value?: string | undefined;
     placeholder?: string;
     isDisabled?: boolean;

package/lib/src/components/index.d.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';

package/lib/src/components/skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 type Props = {
     className?: string;
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     isCircle?: boolean;
     isFullHeight?: boolean;
 };

package/lib/src/components/skeleton/Skeleton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Skeleton>;
 export declare const Default: Story;
+export declare const PercentageDimensions: Story;
 export declare const Circle: Story;
 export declare const Square: Story;
 export declare const Composition: Story;

package/lib/src/index.d.ts

@@ -2,7 +2,7 @@ import './styles/index.scss';
 export * from '@floating-ui/react-dom';
 export { GlobalStyles } from './legacy/styles/globals/index';
 export { ANIMATION, BREAKPOINT, COLORS, MATH, MEDIA_QUERIES, MARGINS, PADDINGS, SPACING, TYPOGRAPHY, } from './legacy/tokens';
-export { AbstractRadio, AbstractRadioGroup, Accordion, BarSpinner, BorderSelect, Button as LegacyButton, CirclePulse, CircleSpinner, ConfirmModal, DatePicker, EditableInput, IconButton, ListTable, LoadingAwareContainer, LoadingList, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, TextInput, TextTruncate, Toggle, Tooltip, } from './legacy/components';
+export { AbstractRadio, AbstractRadioGroup, Accordion, BarSpinner, BorderSelect, Button as LegacyButton, CirclePulse, CircleSpinner, ConfirmModal, EditableInput, IconButton, ListTable, LoadingAwareContainer, LoadingList, ModalBase, MultiCombobox, NumberInput, Pagination, PercentageRing, Radio, RadioGroup, RandomLoadingMessage, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, TextInput, TextTruncate, Toggle, Tooltip, } from './legacy/components';
 export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
@@ -15,6 +15,9 @@ export { Toggle as ToggleInput } from './components/forms/toggle';
 export { Textarea } from './components/forms/textarea';
 export { PasswordInput } from './components/forms/passwordInput';
 export { Select as SelectInput } from './components/forms/select';
+export { DatePicker } from './components/forms/date/datePicker/DatePicker';
+export { IconTriggerDatePicker } from './components/forms/date/iconTriggerDatePicker';
+export { SingleInputDatePicker } from './components/forms/date/inputDatePicker';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';

package/lib/src/legacy/components/index.d.ts

@@ -2,7 +2,7 @@ export { Accordion } from './Accordion';
 export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
 export { Button, IconButton } from './buttons';
 export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
-export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, DatePicker, NoInputDatePicker, } from './inputs';
+export { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, } from './inputs';
 export { BarSpinner, CirclePulse, CircleSpinner, LoadingList, PercentageRing, RandomLoadingMessage, LoadingIndicator, } from './loading-indicators';
 export { ListTable } from './ListTable';
 export { Pagination } from './Pagination';

package/lib/src/legacy/components/inputs/index.d.ts

@@ -4,5 +4,3 @@ export { SearchInput } from './SearchInput';
 export { TextInput } from './TextInput';
 export { Radio, RadioGroup } from './RadioButtons';
 export { AbstractRadio, AbstractRadioGroup } from './RadioGroup';
-export { DatePicker } from './DatePicker';
-export { NoInputDatePicker } from './NoInputDatePicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.36.4",
+  "version": "2.38.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -49,7 +49,7 @@
     "prop-types": "^15.8.1",
     "react-aria-components": "^1.2.1",
     "react-data-table-component": "^7.6.2",
-    "react-day-picker": "^8.10.1",
+    "react-day-picker": "9.1.3",
     "react-grid-system": "^8.2.0",
     "react-hook-form": "^7.52.1",
     "react-modal": "^3.16.1",

package/src/components/forms/date/datePicker/DatePicker.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as DatePicker from './DatePicker.stories';
+import { Row, Col } from '../../../grid/index';
+
+<Meta title="Forms/DatePicker" name="DatePicker" />
+
+# DatePicker
+The Date Picker component is wrapped around the library React-Day-Picker and is used to select a date from a calendar. It accepts the props listed below and you can also pass in props from the official library. Full library documentation can be found [here](https://daypicker.dev/).
+<Canvas of={DatePicker.Default}  />
+<Controls of={DatePicker.Default} />
+
+## Modes
+This Date Picker comes in various modes, which can be used to select a single date, a range of dates, or multiple dates.
+
+<Row>
+  <Col sm={12} md={4}>
+### Single Date
+The default mode of the Date Picker is to select a single date. This mode is used when you only need to select one date.
+<Canvas of={DatePicker.Single} />
+  </Col>
+  <Col sm={12} md={4}>
+  ### Range
+The range mode of the Date Picker is used to select a range of dates. This mode is used when you need to select a start and end date.
+    <Canvas of={DatePicker.Range} />
+  </Col>
+  <Col sm={12} md={4}>
+  ### Multiple Dates
+The multiple dates mode of the Date Picker is used to select multiple dates. This mode is used when you need to select multiple dates.
+<Canvas of={DatePicker.Multi} />
+  </Col>
+</Row>
+
+
+
+
+
+
+
+## ToDo
+- Baked in DateTime support.
+- Baked in formatting support.

package/src/components/forms/date/datePicker/DatePicker.stories.tsx

@@ -0,0 +1,307 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { DatePicker } from './DatePicker';
+
+const meta: Meta = {
+  title: 'Forms/DatePicker',
+  component: DatePicker,
+  argTypes: {
+    captionLayout: {
+      control: 'select',
+      options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
+      description:
+        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'dropdown | dropdown-months | dropdown-years | label',
+        },
+      },
+    },
+    onSelect: {
+      control: false,
+      description: 'Event handler when a day is selected.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: 'OnSelectHandler<Date> | OnSelectHandler<DateRange>',
+        },
+      },
+      action: 'onSelect',
+    },
+    selected: {
+      control: 'date',
+      description: 'The selected day(s).',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date | Date[] | DateRange | undefined',
+        },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Accepts a CSS class name',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    mode: {
+      control: 'select',
+      options: ['single', 'range', 'multiple'],
+      description: 'Allows you to select a single day, a range of days, or multiple days.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'single | range | multiple',
+        },
+      },
+      defaultValue: { summary: 'single' },
+    },
+    id: {
+      control: false,
+      description: 'id',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    month: {
+      control: 'date',
+      description: 'The month displayed in the calendar.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    defaultMonth: {
+      control: 'date',
+      description: 'The initial month to show in the calendar. Default is the current month.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    startMonth: {
+      control: 'date',
+      description: 'The earliest month to start the navigation.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    endMonth: {
+      control: 'date',
+      description: 'The latest month to end the navigation.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    components: {
+      control: false,
+      description:
+        'Components you can pass to the DayPicker to override defaults [Full Components Documentation](https://daypicker.dev/guides/custom-components)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.Node',
+        },
+      },
+    },
+    numberOfMonths: {
+      control: 'number',
+      description: 'The number of displayed months. Default is 1.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disables selecton, more info [here](https://daypicker.dev/guides/disabled)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Matcher | Matcher[]',
+        },
+      },
+    },
+    formatters: {
+      control: false,
+      description:
+        'Use the formatters prop to customize the formatting of dates, week numbers, day names, and more. [Full Formatters Documentation](https://daypicker.dev/guides/formatters)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Formatters',
+        },
+      },
+    },
+    weekStartsOn: {
+      control: 'select',
+      options: [0, 1, 2, 3, 4, 5, 6],
+      description:
+        "The index of the first day of the week (0 - Sunday). Overrides the locale's one.",
+      table: {
+        category: 'Props',
+        type: {
+          summary: '0 | 1 | 2 | 3 | 4 | 5 | 6',
+        },
+      },
+    },
+    firstWeekContainsDate: {
+      control: 'date',
+      description:
+        "The firstWeekContainsDate prop sets the first day of the year's initial week, which is used to calculate week numbers. Acceptable values are 1 for Monday and 4 for Thursday.",
+      table: {
+        category: 'Props',
+        type: {
+          summary: '1 | 4',
+        },
+      },
+    },
+    today: {
+      control: 'date',
+      description:
+        'The today’s date. Default is the current date. This date will get the today modifier to style the day.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'When true, the selection is required.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    onMonthChange: {
+      control: false,
+      description: 'Callback when the month changes.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: 'OnMonthChangeHandler',
+        },
+      },
+    },
+    onNextClick: {
+      control: false,
+
+      description: 'Callback when the next month is clicked.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: 'OnNextClickHandler',
+        },
+      },
+    },
+    onPrevClick: {
+      control: false,
+      description: 'Callback when the previous month is clicked.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: 'OnPrevClickHandler',
+        },
+      },
+    },
+    onDayClick: {
+      control: false,
+      description: 'Callback when a day is clicked.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: 'OnDayClickHandler',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+export const Default: Story = {
+  args: {
+    numberOfMonths: 1,
+    isRequired: false,
+    isDisabled: false,
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date) => {
+      updateArgs({ selected: date });
+    };
+    return <DatePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};
+
+export const Single: Story = {
+  args: {
+    numberOfMonths: 1,
+    isRequired: false,
+    isDisabled: false,
+    mode: 'single',
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date) => {
+      updateArgs({ selected: date });
+    };
+    return <DatePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};
+
+export const Range: Story = {
+  args: {
+    isRequired: false,
+    isDisabled: false,
+    mode: 'range',
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date) => {
+      updateArgs({ selected: date });
+    };
+    return <DatePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};
+
+export const Multi: Story = {
+  args: {
+    numberOfMonths: 1,
+    isRequired: false,
+    isDisabled: false,
+    mode: 'multiple',
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date) => {
+      updateArgs({ selected: date });
+    };
+    return <DatePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};