@indico-data/design-system 2.54.0 → 2.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.54.0",
+  "version": "2.55.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

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

@@ -284,7 +284,7 @@ export const Default: Story = {
     numberOfMonths: 1,
     isRequired: false,
     isDisabled: false,
-    hasTimePicker: true,
+    hasTimePicker: false,
     timeValue: '00:00',
   },
   render: (args) => {
@@ -313,7 +313,7 @@ export const Single: Story = {
     isRequired: false,
     isDisabled: false,
     mode: 'single',
-    hasTimePicker: true,
+    hasTimePicker: false,
   },
   render: (args) => {
     const [{ selected }, updateArgs] = useArgs();
@@ -329,7 +329,7 @@ export const Range: Story = {
     isRequired: false,
     isDisabled: false,
     mode: 'range',
-    hasTimePicker: true,
+    hasTimePicker: false,
   },
   render: (args) => {
     const [{ selected, timeValue }, updateArgs] = useArgs();
@@ -358,7 +358,7 @@ export const Multi: Story = {
     isRequired: false,
     isDisabled: false,
     mode: 'multiple',
-    hasTimePicker: true,
+    hasTimePicker: false,
   },
   render: (args) => {
     const [{ selected }, updateArgs] = useArgs();

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

@@ -1,7 +1,5 @@
-import React, { ChangeEventHandler, useState } from 'react';
 import { DateRange, DayPicker, Mode, OnSelectHandler } from 'react-day-picker';
 import 'react-day-picker/style.css';
-
 import { DatePickerProps } from './types';
 import { getCommonProps } from './contants';
 import { TimePicker } from '../../timePicker/TimePicker';

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as SingleInputDateTimePicker from './SingleInputDateTimePicker.stories';
+import { Row, Col } from '../../../grid/index';
+
+<Meta title="Forms/DatePicker/SingleInputDateTimePicker" name="SingleInputDateTimePicker" />
+
+# Single Input Date Time Picker
+The Single Input Date Time Picker is a visual representation of an input field that allows you to enter a date and time value to the input or select a date and time from the date picker. It leverages our DatePicker and TimePicker components inside of a FloatingUI window.
+
+<Canvas of={SingleInputDateTimePicker.SingleInput}  />
+
+## Props
+In addition to the props listed below, it also accepts all props listed [here](story=?path=/docs/forms-datepicker--datepicker)
+<Controls of={SingleInputDateTimePicker.SingleInput} />
+
+## Usage
+This input is identical to the Single Input Date Picker with the exception that it also allows you to select a time value. There are only two values you need to provide, the `timeValue` and the `onTimeChange` callback function. The time input field is also readonly.
+
+## 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/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx

@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  SingleInputDateTimePicker,
+  SingleInputDateTimePickerProps,
+} from './SingleInputDateTimePicker';
+import { useArgs } from '@storybook/preview-api';
+import { indiconDefinitions } from '@/components/icons/indicons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
+registerFontAwesomeIcons(...indiconDefinitions);
+
+const meta: Meta<typeof SingleInputDateTimePicker> = {
+  component: SingleInputDateTimePicker,
+  title: 'Forms/DatePicker/SingleInputDateTimePicker',
+  decorators: [
+    (Story) => (
+      <div style={{ height: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    timeValue: {
+      control: 'text',
+      description: 'The time value to display.',
+      table: {
+        category: 'Props',
+      },
+    },
+    onTimeChange: {
+      action: 'timeChanged',
+      description: 'Callback function that is called when the time is changed.',
+      table: {
+        category: 'Events',
+      },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'A label for assistive technologies.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+    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',
+        },
+      },
+    },
+    initialMonth: {
+      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 SingleInputDateTimePicker>;
+
+export const SingleInput: Story = {
+  args: {
+    id: 'date-picker',
+    label: 'Pick a date:',
+    inputPlaceholder: 'MM/DD/YYYY',
+    inputIconName: 'calendar',
+    isClearable: true,
+    isDisabled: false,
+    clearOnClose: false,
+    timeValue: '12:00 PM',
+    onTimeChange: () => {},
+    errorMessage: '',
+    ariaLabel: 'Date Picker',
+    selected: new Date(),
+  },
+  render: (args) => {
+    const [{ selected, timeValue }, updateArgs] = useArgs<SingleInputDateTimePickerProps>();
+
+    const handleSelect = (date: Date | undefined) => {
+      updateArgs({ selected: date });
+    };
+
+    const handleTimeChange = (time: string) => {
+      updateArgs({ timeValue: time });
+    };
+
+    return (
+      <>
+        <h1>Single Input Date Time Picker</h1>
+        <p>Date: {selected?.toLocaleDateString()}</p>
+        <p>Time: {timeValue}</p>
+        <SingleInputDateTimePicker
+          {...args}
+          selected={selected}
+          timeValue={timeValue}
+          onSelect={handleSelect}
+          onTimeChange={handleTimeChange}
+        />
+      </>
+    );
+  },
+};

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx

@@ -0,0 +1,141 @@
+import { useId, useState, useEffect } from 'react';
+import { isValid, parse } from 'date-fns';
+import { DatePicker } from '../datePicker/DatePicker';
+import { Input } from '../../input';
+import type { IconName } from '../../../icons/types';
+import { FloatUI } from '../../../floatUI';
+import { formatDateAsString } from './helpers';
+import { TimePicker } from '../../timePicker/TimePicker';
+import { Row, Col } from '../../../grid';
+
+export interface SingleInputDateTimePickerProps {
+  ariaLabel: string;
+  disableBeforeDate?: Date;
+  disableAfterDate?: Date;
+  isDisabled?: boolean;
+  captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+  id?: string;
+  label?: string;
+  onSelect: (selected: Date | undefined) => void;
+  initialMonth?: Date;
+  selected?: Date;
+  isOpen?: boolean;
+  clearOnClose?: boolean;
+  className?: string;
+  inputIconName?: IconName;
+  isClearable?: boolean;
+  inputPlaceholder?: string;
+  errorMessage?: string | undefined;
+  'data-testid'?: string;
+  timeValue?: string;
+  onTimeChange?: (time: string) => void;
+}
+
+export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps) {
+  const {
+    ariaLabel,
+    className,
+    isDisabled,
+    disableBeforeDate,
+    disableAfterDate,
+    captionLayout,
+    initialMonth,
+    id,
+    label,
+    selected,
+    isOpen,
+    inputPlaceholder,
+    clearOnClose,
+    inputIconName,
+    isClearable,
+    errorMessage,
+    onSelect,
+    timeValue,
+    onTimeChange,
+    ...rest
+  } = props;
+
+  const inputId = useId();
+
+  // The text value is assumed to be unneeded by the consumer.
+  const [localTextValue, setLocalTextValue] = useState<string>(
+    selected ? formatDateAsString(selected) : '',
+  );
+
+  const [localMonth, setLocalMonth] = useState<Date>(initialMonth ?? selected ?? new Date());
+
+  // When the day picker is selected, update the text value.
+  const handleDayPickerSelect = (date: Date | undefined) => {
+    if (!date) {
+      setLocalTextValue('');
+      onSelect(undefined);
+    } else {
+      setLocalTextValue(formatDateAsString(date));
+      onSelect(date);
+    }
+  };
+
+  // When the text input is changed, update the selected date.
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setLocalTextValue(e.target.value); // keep the input value in sync
+
+    const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
+
+    if (isValid(parsedDate)) {
+      onSelect(parsedDate);
+    } else {
+      onSelect(undefined);
+    }
+  };
+
+  // clear selection if clear on close is true
+  useEffect(() => {
+    if (!isOpen && clearOnClose) {
+      onSelect(undefined);
+      setLocalTextValue('');
+    }
+  }, [isOpen, clearOnClose]);
+
+  const handleTimeChange = (time: string) => {
+    onTimeChange?.(time);
+  };
+
+  return (
+    <Row>
+      <Col>
+        <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
+          <Input
+            id={inputId}
+            value={localTextValue}
+            placeholder={inputPlaceholder}
+            isDisabled={isDisabled}
+            iconName={inputIconName}
+            isClearable={isClearable}
+            onChange={handleInputChange}
+            errorMessage={errorMessage}
+            hasHiddenLabel
+            label={'Single Date Picker'}
+            name={`${id}-date-picker`}
+          />
+          <DatePicker
+            captionLayout={captionLayout}
+            mode="single"
+            selected={selected}
+            onSelect={handleDayPickerSelect}
+            month={localMonth}
+            onMonthChange={setLocalMonth}
+            {...rest}
+          />
+        </FloatUI>
+      </Col>
+      <Col xs="content">
+        <TimePicker
+          timeValue={timeValue}
+          name={`${id}-time-picker`}
+          hasHiddenLabel
+          onTimeChange={handleTimeChange}
+        />
+      </Col>
+    </Row>
+  );
+}

package/src/components/forms/date/inputDateTimePicker/helpers.ts

@@ -0,0 +1,3 @@
+import { format } from 'date-fns';
+
+export const formatDateAsString = (date: Date) => format(date, 'MM/dd/yyyy');

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

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

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

@@ -97,7 +97,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             />
           )}
         </div>
-        {hasErrors && <DisplayFormError message={errorMessage} />}
+        {hasErrors && <DisplayFormError data-testid={`${name}-error`} message={errorMessage} />}
         {helpText && (
           <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
             {helpText}

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { PasswordInput, PasswordInputProps } from './PasswordInput';
 import { SetStateAction, useEffect, useState } from 'react';
-import { baseInputArgTypes, inputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
+import { baseInputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
 const meta: Meta = {
   title: 'Forms/PasswordInput',

package/src/components/forms/subcomponents/DisplayFormError.tsx

@@ -1,7 +1,12 @@
 interface DisplayFormErrorProps {
   message: string | undefined;
+  [key: string]: any;
 }
 
-export const DisplayFormError = ({ message }: DisplayFormErrorProps) => {
-  return <p className="form-errors">{message}</p>;
+export const DisplayFormError = ({ message, ...rest }: DisplayFormErrorProps) => {
+  return (
+    <p className="form-errors" {...rest}>
+      {message}
+    </p>
+  );
 };

package/src/components/forms/timePicker/TimePicker.mdx

@@ -5,33 +5,9 @@ import { Row, Col } from '../../grid/index';
 <Meta title="Forms/TimePicker" name="TimePicker" />
 
 # TimePicker
-The time picker component may be used as a stand alone time selector or as part of a date picker component.
-<Canvas of={TimePicker.Default} 
-source={{
-  code: `
-const handleInputChange = (value: any) => {
-  setTime(value.time + ' ' + value.period);
-};
-const [time, setTime] = useState('');
-return 
-    <Row>
-      <Col xs={12} className="mb-4">
-        <h1>Time Picker</h1>
-        <p>Time Value returned: {time}</p>
-      </Col>
-      <Col xs={12}>
-        <TimePicker 
-          onInputChange={handleInputChange} 
-          defaultValue={{
-            time: '12:00',
-            period: 'AM'
-          }} 
-        />
-      </Col>
-    </Row>
-  `,
-}}
- />
+The time picker component is a simple time input field that validates the user's input and formats it if the value is valid. If the value is invalid, it will display an error message and not fire the callback.
+
+<Canvas of={TimePicker.Default} />
 
 <Controls of={TimePicker.Default} />
 

package/src/components/forms/timePicker/TimePicker.stories.tsx

@@ -7,13 +7,29 @@ const meta: Meta<typeof TimePicker> = {
   title: 'Forms/TimePicker',
   component: TimePicker,
   argTypes: {
+    hasHiddenLabel: {
+      control: 'boolean',
+      description: 'Hides the input label in an accessible way (visually hides the label)',
+      defaultValue: false,
+      table: {
+        category: 'Props',
+      },
+    },
+    name: {
+      control: 'text',
+      description: 'The name of the input field',
+      defaultValue: 'time-picker',
+      table: {
+        category: 'Props',
+      },
+    },
     onTimeChange: {
       control: false,
       description: 'returns an object with the time and errors if they exist',
       table: {
         category: 'Callbacks',
         type: {
-          summary: '{ time: string, period: string, errors: Record<string, string> }',
+          summary: '{ time: string } => void',
         },
       },
     },
@@ -55,6 +71,8 @@ export const Default: Story = {
   args: {
     timeValue: '12:00 AM',
     label: 'Time Picker',
+    name: 'time-picker',
+    hasHiddenLabel: true,
   },
 
   render: (args) => {