@indico-data/design-system 2.36.4 → 2.38.0

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { DateRange, DayPicker, Mode, OnSelectHandler } from 'react-day-picker';
+import { DatePickerProps } from './types';
+import { getCommonProps } from './contants';
+
+export const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>((props) => {
+  const {
+    mode = 'single',
+    className,
+    captionLayout = 'dropdown',
+    selected,
+    id,
+    month,
+    defaultMonth,
+    startMonth,
+    endMonth,
+    components,
+    numberOfMonths,
+    isDisabled,
+    formatters,
+    weekStartsOn,
+    firstWeekContainsDate,
+    today,
+    isRequired,
+    min,
+    max,
+    onSelect,
+    onMonthChange,
+    onNextClick,
+    onPrevClick,
+    onDayClick,
+    ...rest
+  } = props;
+
+  const commonProps = getCommonProps(props);
+
+  const modeMap: {
+    [key: string]: {
+      mode: Mode | undefined;
+      selected: any;
+      onSelect: any;
+      numberOfMonths: number | undefined;
+    };
+  } = {
+    single: {
+      mode: 'single',
+      numberOfMonths: numberOfMonths ?? 1,
+      selected: selected as Date | undefined,
+      onSelect: onSelect as OnSelectHandler<Date>,
+    },
+    multiple: {
+      mode: 'multiple',
+      numberOfMonths: numberOfMonths ?? 1,
+      selected: selected as Date[] | undefined,
+      onSelect: onSelect as OnSelectHandler<Date[]> | undefined,
+    },
+    range: {
+      mode: 'range',
+      numberOfMonths: numberOfMonths ?? 2,
+      selected: selected as DateRange | undefined,
+      onSelect: onSelect as OnSelectHandler<DateRange>,
+    },
+  };
+
+  const modeProps = modeMap[mode];
+
+  return <DayPicker {...modeProps} {...commonProps} {...rest} />;
+});

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

@@ -0,0 +1,22 @@
+import { CommonProps } from './types';
+
+export const getCommonProps = (props: CommonProps) => ({
+  className: props.className,
+  id: props.id,
+  month: props.month,
+  captionLayout: props.captionLayout,
+  defaultMonth: props.defaultMonth,
+  startMonth: props.startMonth,
+  endMonth: props.endMonth,
+  components: props.components,
+  isDisabled: props.isDisabled,
+  formatters: props.formatters,
+  weekStartsOn: props.weekStartsOn,
+  firstWeekContainsDate: props.firstWeekContainsDate,
+  today: props.today,
+  required: props.isRequired,
+  onMonthChange: props.onMonthChange,
+  onNextClick: props.onNextClick,
+  onPrevClick: props.onPrevClick,
+  onDayClick: props.onDayClick,
+});

package/src/components/forms/date/datePicker/styles/DatePicker.scss

@@ -0,0 +1,85 @@
+@import 'react-day-picker/style.css';
+
+:root [data-theme='light'] {
+  --pf-date-picker-background-color: var(--pf-white-color);
+  --pf-date-picker-selected-date-background-color: var(--pf-primary-color);
+  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
+
+  .rdp-root {
+    --rdp-accent-color: var(--pf-link-color);
+    --rdp-font-family: var(--pf-font-family-base);
+
+    // range
+    --rdp-range_middle-background-color: var(--pf-primary-color-300);
+  }
+}
+
+:root [data-theme='dark'] {
+  // months
+  --pf-date-picker-background-color: var(--pf-primary-color-400);
+
+  // day
+  --pf-date-picker-selected-date-background-color: var(--pf-secondary-color-300);
+  --pf-date-picker-selected-date-font-color: var(--pf-white-color);
+
+  .rdp-root {
+    --rdp-accent-color: var(--pf-link-color);
+    --rdp-accent-background-color: var(--pf-primary-color-200);
+    --rdp-font-family: var(--pf-font-family-base);
+
+    // range
+    --rdp-range_middle-background-color: var(--pf-primary-color-600);
+  }
+}
+
+// Navigation
+
+.rdp-chevron {
+  margin-left: var(--pf-margin-1);
+}
+
+// Calendar
+
+.rdp-months {
+  background-color: var(--pf-date-picker-background-color);
+  padding: var(--pf-padding-3);
+  border-radius: var(--pf-rounded);
+  border: solid var(--pf-border-thin) var(--pf-border-color);
+  .rdp-nav {
+    margin-top: var(--pf-margin-3);
+    margin-right: var(--pf-margin-3);
+  }
+  .rdp-month_caption {
+    padding-left: var(--pf-margin-3);
+  }
+}
+
+.rdp-week {
+  margin-bottom: var(--pf-margin-4);
+}
+
+.rdp-day {
+  .rdp-day_button {
+    border: none;
+  }
+
+  &.rdp-today {
+    .rdp-day_button {
+      background-color: var(--pf-primary-color-300);
+      color: var(--pf-date-picker-selected-date-font-color);
+    }
+  }
+
+  &.rdp-selected {
+    .rdp-day_button {
+      background-color: var(--pf-date-picker-selected-date-background-color);
+      color: var(--pf-date-picker-selected-date-font-color);
+    }
+  }
+
+  &.rdp-range_middle {
+    .rdp-day_button {
+      background-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+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/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as IconTriggerDatePicker from './IconTriggerDatePicker.stories';
+import { Row, Col } from '../../../grid/index';
+
+<Meta title="Forms/DatePicker/IconTriggerDatePicker" name="IconTriggerDatePicker" />
+
+# IconTriggerDatePicker
+The No Input Date Picker is to be used when we need to open the datepicker with a simple icon and dont care about the user typing in a value. It leverages our DatePicker component inside of a popper window. 
+<Canvas of={IconTriggerDatePicker.Default}  />
+
+## Props
+In addition to the props listed below, it also accepts all props listed [here](story=?path=/docs/forms-datepicker--datepicker)
+<Controls of={IconTriggerDatePicker.Default} />
+
+
+## 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/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx

@@ -0,0 +1,201 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { IconTriggerDatePicker } from '@/components/forms/date/iconTriggerDatePicker';
+import { DateRange } from 'react-day-picker';
+
+const meta: Meta<typeof IconTriggerDatePicker> = {
+  component: IconTriggerDatePicker,
+  title: 'Forms/DatePicker/IconTriggerDatePicker',
+  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',
+        },
+      },
+    },
+    month: {
+      control: 'date',
+      description: 'The month to display.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date',
+        },
+      },
+    },
+    triggerIcon: {
+      control: 'text',
+      description: 'The icon to use as a trigger.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'IconName',
+        },
+      },
+    },
+    triggerIconSize: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'The size of the trigger icon.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'IconSizes',
+        },
+      },
+    },
+    isOpen: {
+      control: false,
+      description: 'Whether the date picker is open.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    selected: {
+      control: 'date',
+      description: 'The selected day(s).',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'Date | Date[] | DateRange | undefined',
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+    clearOnClose: {
+      control: 'boolean',
+      description: 'Clear the selected date(s) when the date picker closes.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
+      },
+    },
+    onSelect: {
+      control: false,
+      description: 'Event handler when a day is selected.',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: 'OnSelectHandler<Date> | OnSelectHandler<DateRange>',
+        },
+      },
+      action: 'onSelect',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof IconTriggerDatePicker>;
+
+export const Default: Story = {
+  args: {
+    id: 'date-picker',
+    label: 'Pick a date:',
+    ariaLabel: 'Select a date',
+    isDisabled: false,
+    isOpen: false,
+    triggerIcon: 'calendar',
+    triggerIconSize: 'lg',
+    clearOnClose: true,
+  },
+  render: (args) => {
+    const [{ selected }, updateArgs] = useArgs();
+    const handleSelect = (date: Date | DateRange | Date[] | undefined) => {
+      updateArgs({ selected: date });
+    };
+
+    return <IconTriggerDatePicker {...args} selected={selected} onSelect={handleSelect} />;
+  },
+};

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import { DateRange, OnSelectHandler, Mode } from 'react-day-picker';
+import { IconName, IconSizes } from '@/types';
+import { FloatUI, Icon } from '@/components';
+import { DatePicker } from '@/components/forms/date/datePicker/DatePicker';
+
+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 const IconTriggerDatePicker = (props: Props) => {
+  const {
+    ariaLabel,
+    className,
+    isDisabled,
+    disableBeforeDate,
+    disableAfterDate,
+    month,
+    id,
+    label,
+    onSelect,
+    selected,
+    triggerIcon,
+    triggerIconSize,
+    mode,
+    isOpen,
+    clearOnClose,
+    ...rest
+  } = props;
+
+  const [localSelected, setLocalSelected] = useState<Date | DateRange | Date[] | undefined>(
+    selected || undefined,
+  );
+
+  const handleSelect: OnSelectHandler<Date> = (date) => {
+    if (!date) {
+      onSelect && onSelect(undefined);
+      setLocalSelected(undefined);
+    } else {
+      onSelect && onSelect(date);
+      setLocalSelected(date);
+    }
+  };
+
+  // clear selection if clear on close is true
+  useEffect(() => {
+    if (!isOpen && clearOnClose) {
+      setLocalSelected(undefined);
+    }
+  }, [isOpen, clearOnClose]);
+
+  return (
+    <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+      <Icon
+        aria-label="Open date picker"
+        name={triggerIcon}
+        size={triggerIconSize}
+        className="date__picker__trigger"
+        data-testid={`datepicker-trigger-for-${id}`}
+      />
+
+      <DatePicker
+        isDisabled={isDisabled}
+        mode={mode}
+        month={month}
+        selected={localSelected as Date | DateRange | undefined}
+        onSelect={handleSelect}
+        startMonth={disableBeforeDate}
+        endMonth={disableAfterDate}
+        {...rest}
+      />
+    </FloatUI>
+  );
+};

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

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

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

@@ -0,0 +1,18 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as SingleInputDatePicker from './SingleInputDatePicker.stories';
+import { Row, Col } from '../../../grid/index';
+
+<Meta title="Forms/DatePicker/SingleInputDatePicker" name="SingleInputDatePicker" />
+
+# Single Input Date Picker
+The Single Input Date 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={SingleInputDatePicker.SingleInput}  />
+
+## Props
+In addition to the props listed below, it also accepts all props listed [here](story=?path=/docs/forms-datepicker--datepicker)
+<Controls of={SingleInputDatePicker.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.