@indico-data/design-system 2.52.0 → 2.53.0

package/package.json

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

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

@@ -6,6 +6,41 @@ const meta: Meta = {
   title: 'Forms/DatePicker',
   component: DatePicker,
   argTypes: {
+    timeValue: {
+      control: 'text',
+      description: 'The time value to display in the date picker.',
+      table: {
+        category: 'Props',
+      },
+    },
+    onTimeChange: {
+      control: false,
+      description: 'Callback when the time changes.',
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    hasTimePicker: {
+      control: 'boolean',
+      description: 'Whether to show the time picker.',
+      table: {
+        category: 'Props',
+      },
+    },
+    min: {
+      control: 'date',
+      description: 'The minimum date that can be selected.',
+      table: {
+        category: 'Props',
+      },
+    },
+    max: {
+      control: 'date',
+      description: 'The maximum date that can be selected.',
+      table: {
+        category: 'Props',
+      },
+    },
     captionLayout: {
       control: 'select',
       options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
@@ -249,13 +284,26 @@ export const Default: Story = {
     numberOfMonths: 1,
     isRequired: false,
     isDisabled: false,
+    hasTimePicker: true,
+    timeValue: '00:00',
   },
   render: (args) => {
-    const [{ selected }, updateArgs] = useArgs();
+    const [{ selected, timeValue }, updateArgs] = useArgs();
     const handleSelect = (date: Date) => {
       updateArgs({ selected: date });
     };
-    return <DatePicker {...args} selected={selected} onSelect={handleSelect} />;
+    const handleTimeChange = (time: string) => {
+      updateArgs({ timeValue: time });
+    };
+    return (
+      <DatePicker
+        {...args}
+        selected={selected}
+        onSelect={handleSelect}
+        timeValue={timeValue}
+        onTimeChange={handleTimeChange}
+      />
+    );
   },
 };
 
@@ -265,6 +313,7 @@ export const Single: Story = {
     isRequired: false,
     isDisabled: false,
     mode: 'single',
+    hasTimePicker: true,
   },
   render: (args) => {
     const [{ selected }, updateArgs] = useArgs();
@@ -280,13 +329,26 @@ export const Range: Story = {
     isRequired: false,
     isDisabled: false,
     mode: 'range',
+    hasTimePicker: true,
   },
   render: (args) => {
-    const [{ selected }, updateArgs] = useArgs();
+    const [{ selected, timeValue }, updateArgs] = useArgs();
+
     const handleSelect = (date: Date) => {
       updateArgs({ selected: date });
     };
-    return <DatePicker {...args} selected={selected} onSelect={handleSelect} />;
+
+    return (
+      <DatePicker
+        {...args}
+        selected={selected}
+        onTimeChange={() => {
+          console.log('hit time change');
+        }}
+        onSelect={handleSelect}
+        timeValue={timeValue}
+      />
+    );
   },
 };
 
@@ -296,6 +358,7 @@ export const Multi: Story = {
     isRequired: false,
     isDisabled: false,
     mode: 'multiple',
+    hasTimePicker: true,
   },
   render: (args) => {
     const [{ selected }, updateArgs] = useArgs();

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

@@ -1,9 +1,11 @@
-import React from 'react';
+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';
+import { Col, Row } from '../../../grid';
 
 export const DatePicker = (props: DatePickerProps) => {
   const {
@@ -11,6 +13,7 @@ export const DatePicker = (props: DatePickerProps) => {
     className,
     captionLayout = 'dropdown',
     selected,
+    hasTimePicker = false,
     id,
     month,
     defaultMonth,
@@ -23,9 +26,11 @@ export const DatePicker = (props: DatePickerProps) => {
     weekStartsOn,
     firstWeekContainsDate,
     today,
+    timeValue,
     isRequired,
     min,
     max,
+    onTimeChange,
     onSelect,
     onMonthChange,
     onNextClick,
@@ -72,6 +77,27 @@ export const DatePicker = (props: DatePickerProps) => {
   const modeProps = modeMap[mode];
   const commonProps = getCommonProps(props);
 
+  const handleTimeChange = (time: string) => {
+    onTimeChange?.(time);
+  };
+
   const finalProps = { ...commonProps, ...rest, ...modeProps };
-  return <DayPicker {...finalProps} />;
+
+  return (
+    <>
+      {hasTimePicker && (
+        <div className="time-picker-wrapper">
+          <Row align="center">
+            <Col xs="content">
+              <p className="ma-0">Select Time</p>
+            </Col>
+            <Col>
+              <TimePicker timeValue={timeValue ?? ''} onTimeChange={handleTimeChange} />
+            </Col>
+          </Row>
+        </div>
+      )}
+      <DayPicker {...finalProps} />
+    </>
+  );
 };

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

@@ -85,3 +85,12 @@
     }
   }
 }
+
+.time-picker-wrapper {
+  margin-bottom: var(--pf-margin-3);
+  width: 348px;
+
+  .form-control {
+    margin-bottom: 0;
+  }
+}

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

@@ -19,6 +19,8 @@ export interface DatePickerProps {
   month?: Date;
   defaultMonth?: Date;
   startMonth?: Date | undefined;
+  hasTimePicker?: boolean;
+  timeValue?: string;
   endMonth?: Date;
   components?: Partial<CustomComponents>;
   numberOfMonths?: number;
@@ -30,6 +32,7 @@ export interface DatePickerProps {
   isRequired?: any;
   min?: number;
   max?: number;
+  onTimeChange?: (time: string) => void;
   onMonthChange?: MonthChangeEventHandler;
   onNextClick?: MonthChangeEventHandler;
   onPrevClick?: MonthChangeEventHandler;

package/src/components/forms/form/styles/Form.scss

@@ -37,6 +37,7 @@ form {
 }
 
 // Common input/textarea form element styles
+.time-input-wrapper,
 .input-wrapper,
 .number-input-wrapper,
 .password-input-wrapper,

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

@@ -12,10 +12,11 @@ export interface BaseInputProps {
   placeholder?: string;
   isDisabled?: boolean;
   readonly?: boolean;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   errorMessage?: string | undefined;
+  maxLength?: number;
   helpText?: string;
   iconName?: IconName;
   isClearable?: boolean;
@@ -37,6 +38,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       isClearable,
       errorMessage,
       helpText,
+      maxLength,
       iconName,
       onChange,
       onBlur,
@@ -48,7 +50,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ) => {
     const hasErrors = errorMessage && errorMessage.length > 0;
     const handleClear = () => {
-      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+      onChange?.({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
     };
 
     const inputClasses = classNames(
@@ -77,6 +79,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             readOnly={readonly}
             onChange={onChange}
             onBlur={onBlur}
+            maxLength={maxLength}
             onKeyDown={onKeyDown}
             className={inputClasses}
             aria-invalid={hasErrors ? true : undefined}

package/src/components/forms/numberInput/NumberInput.tsx

@@ -34,7 +34,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
     const hasErrors = errorMessage && errorMessage.length > 0;
 
     const handleClear = () => {
-      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+      onChange?.({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
     };
 
     const inputClasses = classNames(

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

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TimePicker from './TimePicker.stories';
+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>
+  `,
+}}
+ />
+
+<Controls of={TimePicker.Default} />
+
+## Usage
+The goal for this component is to return an object you can then parse and format as needed. It will automatically format the input to a human readable value. It will validate the input and display an error message if the value is incorrect.

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

@@ -0,0 +1,79 @@
+import { TimePicker } from './TimePicker';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { Col, Row } from '../../grid';
+
+const meta: Meta<typeof TimePicker> = {
+  title: 'Forms/TimePicker',
+  component: TimePicker,
+  argTypes: {
+    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> }',
+        },
+      },
+    },
+    timeValue: {
+      control: 'text',
+      description: 'The time value to be displayed in the input field',
+      defaultValue: '12:00 AM',
+      table: {
+        category: 'Props',
+      },
+    },
+    label: {
+      table: {
+        category: 'Props',
+      },
+      control: 'text',
+      description: 'The label for the time picker',
+      defaultValue: 'Time Picker',
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div
+        style={{
+          height: '500px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimePicker>;
+
+export const Default: Story = {
+  args: {
+    timeValue: '12:00 AM',
+    label: 'Time Picker',
+  },
+
+  render: (args) => {
+    const [{ timeValue }, updateArgs] = useArgs();
+    const handleTimeChange = (time: string) => {
+      updateArgs({ timeValue: time });
+    };
+    return (
+      <div>
+        <Row>
+          <Col xs={12} className="mb-4">
+            <h1>Time Picker</h1>
+            <p>Time Value returned: {timeValue}</p>
+          </Col>
+          <Col xs={12}>
+            <TimePicker {...args} onTimeChange={handleTimeChange} timeValue={timeValue} />
+          </Col>
+        </Row>
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import { Select } from '../select/Select';
+import { Input } from '../input/Input';
+import { Col, Row } from '../../grid';
+import { FloatUI } from '../..';
+import { hourOptions, minuteOptions, periodOptions } from './constants';
+import { parseTimeValue } from './helpers';
+import { SelectOption } from '../select/types';
+import { SingleValue, MultiValue } from 'react-select';
+
+interface TimePickerProps {
+  timeValue?: string;
+  label?: string;
+  onTimeChange?: (time: string) => void;
+}
+
+export const TimePicker = ({
+  timeValue = '',
+  label = 'Time Picker',
+  onTimeChange,
+}: TimePickerProps) => {
+  const initialTime = parseTimeValue(timeValue);
+  const [hours, setHours] = useState(initialTime.hours);
+  const [minutes, setMinutes] = useState(initialTime.minutes);
+  const [period, setPeriod] = useState(initialTime.period);
+
+  const handleHourChange = (option: SingleValue<SelectOption>) => {
+    setHours(option?.value || '12');
+    onTimeChange?.(`${option?.value || '12'}:${minutes} ${period.toUpperCase()}`);
+  };
+
+  const handleMinuteChange = (option: SelectOption) => {
+    setMinutes(option?.value || '00');
+    onTimeChange?.(`${hours}:${option?.value || '00'} ${period.toUpperCase()}`);
+  };
+
+  const handlePeriodChange = (option: SelectOption) => {
+    setPeriod(option?.value || 'am');
+    onTimeChange?.(`${hours}:${minutes} ${(option?.value || 'am').toUpperCase()}`);
+  };
+
+  return (
+    <div className="time-input-wrapper">
+      <FloatUI ariaLabel={label}>
+        <Input
+          data-testid="time-picker-input"
+          name="hours"
+          label={label}
+          hasHiddenLabel
+          value={`${hours}:${minutes} ${period.toUpperCase()}`}
+          readonly
+          className="time-picker-input"
+        />
+        <Row gutterWidth={0} className="time-picker-row">
+          <Col xs="content">
+            <Select
+              menuIsOpen
+              className="hour-menu"
+              components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
+              name="hours"
+              value={{ label: hours, value: hours }}
+              onChange={
+                handleHourChange as (
+                  newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
+                ) => void
+              }
+              options={hourOptions}
+            />
+          </Col>
+          <Col xs="content">
+            <Select
+              className="minute-menu"
+              components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
+              name="minutes"
+              options={minuteOptions}
+              menuIsOpen
+              value={{ label: minutes.padStart(2, '0'), value: minutes }}
+              onChange={
+                handleMinuteChange as (
+                  newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
+                ) => void
+              }
+            />
+          </Col>
+          <Col xs="content">
+            <Select
+              menuIsOpen
+              className="period-menu"
+              components={{ DropdownIndicator: () => null, IndicatorSeparator: () => null }}
+              name="period"
+              options={periodOptions}
+              value={{ label: period.toUpperCase(), value: period }}
+              onChange={
+                handlePeriodChange as (
+                  newValue: SingleValue<SelectOption> | MultiValue<SelectOption>,
+                ) => void
+              }
+            />
+          </Col>
+        </Row>
+      </FloatUI>
+    </div>
+  );
+};

package/src/components/forms/timePicker/__tests__/TimePicker.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import { TimePicker } from '@/components/forms/timePicker/TimePicker';
+import userEvent from '@testing-library/user-event';
+
+describe('TimePicker', () => {
+  it('updates the time when the hour is changed', async () => {
+    render(<TimePicker />);
+    const timePickerInput = screen.getByTestId('time-picker-input');
+    await userEvent.click(timePickerInput);
+
+    const hourOption = screen.getByRole('option', { name: '1' });
+    await userEvent.click(hourOption);
+
+    expect(timePickerInput).toHaveValue('1:00 AM');
+
+    const minuteOption = screen.getByRole('option', { name: '01' });
+    await userEvent.click(minuteOption);
+
+    expect(timePickerInput).toHaveValue('1:01 AM');
+
+    const periodOption = screen.getByRole('option', { name: 'PM' });
+    await userEvent.click(periodOption);
+
+    expect(timePickerInput).toHaveValue('1:01 PM');
+  });
+});

package/src/components/forms/timePicker/constants.ts

@@ -0,0 +1,21 @@
+const hourOptions = Array.from({ length: 12 }, (_, i) => {
+  const num = `${i + 1}`;
+  return {
+    label: num,
+    value: num,
+  };
+});
+
+const minuteOptions = Array.from({ length: 60 }, (_, i) => {
+  const num = `${i}`.padStart(2, '0');
+  return {
+    label: num,
+    value: num,
+  };
+});
+
+const periodOptions = [
+  { label: 'AM', value: 'am' },
+  { label: 'PM', value: 'pm' },
+];
+export { hourOptions, minuteOptions, periodOptions };

package/src/components/forms/timePicker/helpers.ts

@@ -0,0 +1,14 @@
+// Parse initial time value
+export const parseTimeValue = (time: string) => {
+  if (!time) return { hours: '12', minutes: '00', period: 'am' };
+
+  const match = time.match(/(\d{1,2}):(\d{2})\s*(am|pm)/i);
+  if (!match) return { hours: '12', minutes: '00', period: 'am' };
+
+  const [, hours, minutes, period] = match;
+  return {
+    hours: hours,
+    minutes: minutes,
+    period: period.toLowerCase(),
+  };
+};

package/src/components/forms/timePicker/index.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/src/components/forms/timePicker/styles/TimePicker.scss

@@ -0,0 +1,51 @@
+.time-picker-input {
+  cursor: pointer;
+}
+.time-picker-row {
+  width: 150px;
+
+  .select__value-container {
+    text-align: center;
+    cursor: pointer;
+  }
+  .select-wrapper {
+    width: 50px;
+    .select__items {
+      justify-content: center;
+    }
+    .select__menu {
+      height: 230px;
+      padding-bottom: 0;
+      margin-bottom: 0;
+    }
+  }
+  .select__menu-list {
+    max-height: 100%;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari and Opera */
+    }
+    overflow-y: scroll;
+  }
+
+  .hour-menu {
+    .select__menu {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .minute-menu {
+    .select__menu {
+      border-radius: 0;
+      border-right: none;
+      border-left: none;
+    }
+  }
+  .period-menu {
+    .select__menu {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

package/src/index.ts

@@ -18,6 +18,7 @@ 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 { TimePicker } from './components/forms/timePicker';
 export { IconTriggerDatePicker } from './components/forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './components/forms/date/inputDatePicker';
 export { Form } from './components/forms/form';

package/src/styles/index.scss

@@ -21,11 +21,12 @@
 @import '../components/menu/styles/Menu.scss';
 @import '../components/floatUI/styles/FloatUI.scss';
 @import '../components/forms/date/datePicker/styles/DatePicker.scss';
+@import '../components/forms/timePicker/styles/TimePicker.scss';
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
 @import '../components/pagination/styles/Pagination.scss';
 @import '../components/tanstackTable/styles/table.scss';
-
+@import '../components/forms/timePicker/styles/TimePicker.scss';
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it
 @import 'typography';