@indico-data/design-system 2.54.0 → 2.55.0

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

@@ -1,104 +1,61 @@
-import { useState } from 'react';
-import { Select } from '../select/Select';
+import { ChangeEvent, useState, FocusEvent } from 'react';
 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';
+import { formatTimeValue, validateInputValue } from './helpers';
 
 interface TimePickerProps {
   timeValue?: string;
   label?: string;
+  name?: string;
+  hasHiddenLabel?: boolean;
   onTimeChange?: (time: string) => void;
 }
 
 export const TimePicker = ({
   timeValue = '',
   label = 'Time Picker',
+  name = 'time-picker',
+  hasHiddenLabel = false,
   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 [validationError, setValidationError] = useState('');
+  const [inputValue, setInputValue] = useState(timeValue);
 
-  const handleHourChange = (option: SingleValue<SelectOption>) => {
-    setHours(option?.value || '12');
-    onTimeChange?.(`${option?.value || '12'}:${minutes} ${period.toUpperCase()}`);
-  };
+  const handleTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    const error = validateInputValue(newValue);
+    setInputValue(newValue);
+    setValidationError(error);
 
-  const handleMinuteChange = (option: SelectOption) => {
-    setMinutes(option?.value || '00');
-    onTimeChange?.(`${hours}:${option?.value || '00'} ${period.toUpperCase()}`);
+    // Only send valid values to parent component
+    if (!error || error === '') {
+      onTimeChange?.(newValue);
+    }
   };
 
-  const handlePeriodChange = (option: SelectOption) => {
-    setPeriod(option?.value || 'am');
-    onTimeChange?.(`${hours}:${minutes} ${(option?.value || 'am').toUpperCase()}`);
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const currentValue = e.target.value;
+
+    // Only format if there's no validation error
+    if (validationError === '' && currentValue.trim() !== '') {
+      const formattedValue = formatTimeValue(currentValue);
+      setInputValue(formattedValue);
+      onTimeChange?.(formattedValue);
+    }
   };
 
   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>
+      <Input
+        data-testid={`${name}-input`}
+        label={label}
+        hasHiddenLabel={hasHiddenLabel}
+        value={inputValue}
+        maxLength={8}
+        onChange={handleTimeChange}
+        onBlur={handleBlur}
+        name={name}
+        errorMessage={validationError}
+      />
     </div>
   );
 };

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

@@ -3,24 +3,46 @@ 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 />);
+  it('renders an error when the input is invalid', async () => {
+    render(
+      <TimePicker
+        name="time-picker"
+        label="Time Picker"
+        hasHiddenLabel
+        data-testid="time-picker-input"
+      />,
+    );
+
     const timePickerInput = screen.getByTestId('time-picker-input');
     await userEvent.click(timePickerInput);
 
-    const hourOption = screen.getByRole('option', { name: '1' });
-    await userEvent.click(hourOption);
+    await userEvent.type(timePickerInput, '13:00');
+
+    const timePickerError = screen.getByTestId('time-picker-error');
+    expect(timePickerError).toBeInTheDocument();
+  });
+
+  it('formats the time input when the value is valid and a user clicks away from the input', async () => {
+    render(
+      <TimePicker
+        name="time-picker"
+        label="Time Picker"
+        hasHiddenLabel
+        data-testid="time-picker-input"
+      />,
+    );
 
-    expect(timePickerInput).toHaveValue('1:00 AM');
+    const timePickerInput = screen.getByTestId('time-picker-input');
+    await userEvent.click(timePickerInput);
 
-    const minuteOption = screen.getByRole('option', { name: '01' });
-    await userEvent.click(minuteOption);
+    await userEvent.type(timePickerInput, '1:00pm');
 
-    expect(timePickerInput).toHaveValue('1:01 AM');
+    const timePickerError = screen.queryByTestId('time-picker-error');
+    expect(timePickerError).not.toBeInTheDocument();
 
-    const periodOption = screen.getByRole('option', { name: 'PM' });
-    await userEvent.click(periodOption);
+    await userEvent.click(document.body);
 
-    expect(timePickerInput).toHaveValue('1:01 PM');
+    expect(timePickerInput).toHaveValue('1:00 PM');
+    expect(timePickerError).not.toBeInTheDocument();
   });
 });

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

@@ -1,14 +1,62 @@
-// 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(),
-  };
+export const formatTimeValue = (value: string): string => {
+  if (!value || value.trim() === '') {
+    return '';
+  }
+
+  // Normalize the input
+  const normalizedValue = value.trim().toLowerCase();
+
+  // Extract time components using regex
+  const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
+  const matches = normalizedValue.match(timeRegex);
+
+  if (matches) {
+    const hours = parseInt(matches[1], 10);
+    const minutes = parseInt(matches[2], 10);
+    const period = matches[4].toUpperCase(); // Convert am/pm to AM/PM
+
+    // Format as hh:mm AM/PM
+    return `${hours}:${minutes < 10 ? '0' + minutes : minutes} ${period}`;
+  }
+
+  return value; // Return original if no match (shouldn't happen with valid inputs)
+};
+
+export const validateInputValue = (value: string): string => {
+  if (!value || value.trim() === '') {
+    return ''; // Empty input is allowed
+  }
+
+  // Normalize the input (remove extra spaces, convert to lowercase)
+  const normalizedValue = value.trim().toLowerCase();
+
+  // Regular expression for valid time formats: 1:10 pm, 01:10 pm, 1:10pm, 01:10pm
+  const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(\s*)([ap]m)$/i;
+
+  if (!timeRegex.test(normalizedValue)) {
+    // Check if the issue might be a 24-hour format
+    const hour24Regex = /^([13-9]|1[3-9]|2[0-3]):/i;
+    if (hour24Regex.test(normalizedValue)) {
+      return 'Please enter time in 12-hour format (e.g., 1:10 pm)';
+    }
+
+    return 'Please enter a valid time format (e.g., 1:10 pm)';
+  }
+
+  // Extract hours and minutes for additional validation
+  const matches = normalizedValue.match(timeRegex);
+  if (matches) {
+    const hours = parseInt(matches[1], 10);
+    const minutes = parseInt(matches[2], 10);
+
+    if (hours < 1 || hours > 12) {
+      return 'Hours must be between 1 and 12';
+    }
+
+    if (minutes < 0 || minutes > 59) {
+      return 'Minutes must be between 0 and 59';
+    }
+  }
+
+  return ''; // Valid time format
 };

package/src/styles/index.scss

@@ -21,12 +21,10 @@
 @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 '../components/tooltip/styles/Tooltip.scss';
 @import '../components/loading-indicators/BarSpinner/styles/BarSpinner.scss';

package/lib/components/forms/timePicker/constants.d.ts

@@ -1,13 +0,0 @@
-declare const hourOptions: {
-    label: string;
-    value: string;
-}[];
-declare const minuteOptions: {
-    label: string;
-    value: string;
-}[];
-declare const periodOptions: {
-    label: string;
-    value: string;
-}[];
-export { hourOptions, minuteOptions, periodOptions };

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

@@ -1,21 +0,0 @@
-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/styles/TimePicker.scss

@@ -1,51 +0,0 @@
-.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;
-    }
-  }
-}