@indico-data/design-system 3.18.0 → 3.20.0

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

@@ -1,47 +1,57 @@
-import { DateRange, DayPicker, Mode, OnSelectHandler } from 'react-day-picker';
+import { useEffect, useRef } from 'react';
+import { type DateRange, DayPicker, type Mode, type 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 { type DatePickerProps, type DatePickerText } from './types';
 import { Col, Row } from '../../../grid';
-import { useEffect, useRef } from 'react';
+import { TimePicker } from '../../timePicker/TimePicker';
+
+const DEFAULT_TEXT: Required<DatePickerText> = {
+  selectTime: 'Select Time',
+};
 
 export const DatePicker = (props: DatePickerProps) => {
   const {
     mode = 'single',
-    className,
-    captionLayout = 'dropdown',
     selected,
     hasTimePicker = false,
-    id,
-    month,
-    defaultMonth,
-    startMonth,
     endMonth,
-    components,
     numberOfMonths,
-    isDisabled,
-    formatters,
-    weekStartsOn,
-    firstWeekContainsDate,
-    today,
     timeValue,
-    isRequired,
-    min,
-    max,
     onTimeChange,
     onSelect,
-    onMonthChange,
-    onNextClick,
-    onPrevClick,
-    onDayClick,
     isReadOnly,
     ref,
     timeTabIndex,
-    dateTabIndex,
+    text: textProp,
+    // Destructure props handled by getCommonProps to prevent them from
+    // leaking through ...rest and overriding the transformed values
+    className: _className,
+    captionLayout: _captionLayout,
+    id: _id,
+    month: _month,
+    defaultMonth: _defaultMonth,
+    startMonth: _startMonth,
+    components: _components,
+    isDisabled: _isDisabled,
+    formatters: _formatters,
+    weekStartsOn: _weekStartsOn,
+    firstWeekContainsDate: _firstWeekContainsDate,
+    today: _today,
+    isRequired: _isRequired,
+    min: _min,
+    max: _max,
+    onMonthChange: _onMonthChange,
+    onNextClick: _onNextClick,
+    onPrevClick: _onPrevClick,
+    onDayClick: _onDayClick,
+    dateTabIndex: _dateTabIndex,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   const futureDateByYear = (year: number) => new Date(new Date().getFullYear() + year, 11, 31);
   const endMonthDefault = endMonth ?? futureDateByYear(5);
 
@@ -116,7 +126,7 @@ export const DatePicker = (props: DatePickerProps) => {
         <div className="time-picker-wrapper">
           <Row align="center">
             <Col xs="content">
-              <p className="ma-0">Select Time</p>
+              <p className="ma-0">{text.selectTime}</p>
             </Col>
             <Col>
               <TimePicker

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

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { DatePicker } from '../DatePicker';
 
 describe('DatePicker', () => {

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

@@ -1,4 +1,4 @@
-import { CommonProps } from './types';
+import { type CommonProps } from './types';
 
 export const getCommonProps = (props: CommonProps) => ({
   className: props.className,

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

@@ -1,14 +1,20 @@
 import {
-  CustomComponents,
-  DateRange,
-  DayEventHandler,
-  Formatters,
-  Matcher,
-  Mode,
-  MonthChangeEventHandler,
-  OnSelectHandler,
+  type CustomComponents,
+  type DateRange,
+  type DayEventHandler,
+  type Formatters,
+  type Matcher,
+  type Mode,
+  type MonthChangeEventHandler,
+  type OnSelectHandler,
 } from 'react-day-picker';
 
+/** Customizable text for DatePicker. */
+export interface DatePickerText {
+  /** Label for "Select Time" text. Default: "Select Time" */
+  selectTime?: string;
+}
+
 export interface DatePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
   /** The selected day(s). */
@@ -51,6 +57,8 @@ export interface DatePickerProps {
   isReadOnly?: boolean;
   timeTabIndex?: number;
   dateTabIndex?: number;
+  /** Customizable display text. */
+  text?: DatePickerText;
 }
 
 export interface CommonProps {

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

@@ -1,7 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
+import { type DateRange } from 'react-day-picker';
+
 import { IconTriggerDatePicker } from '@/components/forms/date/iconTriggerDatePicker';
-import { DateRange } from 'react-day-picker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+
 
 const meta: Meta<typeof IconTriggerDatePicker> = {
   component: IconTriggerDatePicker,
@@ -175,6 +179,16 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
       },
       action: 'onSelect',
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ triggerIcon?: string }',
+        },
+      },
+    },
   },
 };
 

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

@@ -1,11 +1,18 @@
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
 import { useEffect, useState } from 'react';
-import { DateRange, OnSelectHandler, Mode } from 'react-day-picker';
-import { IconName, IconSizes } from '../../../icons/types';
+import { type DateRange, type OnSelectHandler, type Mode } from 'react-day-picker';
+
+import { type IconTriggerDatePickerText } from './types';
 import { FloatUI } from '../../../floatUI';
-import { DatePicker } from '../datePicker/DatePicker';
 import { Icon } from '../../../icons/Icon';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
-import { PortalOptions } from '../datePicker/types';
+import { type IconName, type IconSizes } from '../../../icons/types';
+import { DatePicker } from '../datePicker/DatePicker';
+import { type PortalOptions } from '../datePicker/types';
+
+const DEFAULT_TEXT: Required<IconTriggerDatePickerText> = {
+  triggerIcon: 'Open date picker',
+};
+
 interface Props {
   /** Allows you to select a single day, a range of days, or multiple days. */
   mode?: Mode;
@@ -42,17 +49,20 @@ interface Props {
   isPortal?: boolean;
   /** The floating options for the date picker. Follows floating-ui options. */
   floatingOptions?: UseFloatingOptions;
+  /** Customizable display text. */
+  text?: IconTriggerDatePickerText;
 }
 
 export const IconTriggerDatePicker = (props: Props) => {
   const {
     ariaLabel,
-    className,
     isDisabled,
     disableBeforeDate,
     disableAfterDate,
     id,
-    label,
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className,
+    label: _label,
     onSelect,
     selected,
     triggerIcon,
@@ -64,9 +74,12 @@ export const IconTriggerDatePicker = (props: Props) => {
     portalOptions,
     floatingOptions,
     isPortal,
+    text: textProp,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   const [localMonth, setLocalMonth] = useState<Date>(initialMonth ?? new Date());
 
   const handleSelect: OnSelectHandler<Date> = (date) => {
@@ -93,7 +106,7 @@ export const IconTriggerDatePicker = (props: Props) => {
       floatingOptions={floatingOptions}
     >
       <Icon
-        aria-label="Open date picker"
+        aria-label={text.triggerIcon}
         name={triggerIcon}
         size={triggerIconSize}
         className="date__picker__trigger"

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

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { IconTriggerDatePicker } from '../IconTriggerDatePicker';
 import userEvent from '@testing-library/user-event';
 
+import { IconTriggerDatePicker } from '../IconTriggerDatePicker';
+
 describe('DatePicker', () => {
   it('The date picker opens when the icon is clicked', async () => {
     render(

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

@@ -0,0 +1,5 @@
+/** Customizable text for IconTriggerDatePicker. */
+export interface IconTriggerDatePickerText {
+  /** Aria label for the trigger icon. Default: "Open date picker" */
+  triggerIcon?: string;
+}

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SingleInputDatePicker, SingleInputDatePickerProps } from './SingleInputDatePicker';
 import { useArgs } from '@storybook/preview-api';
 
+import { SingleInputDatePicker, type SingleInputDatePickerProps } from './SingleInputDatePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof SingleInputDatePicker> = {
   component: SingleInputDatePicker,
   title: 'Forms/DatePicker/SingleInputDatePicker',

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

@@ -1,12 +1,15 @@
-import { useId, useState, useEffect } from 'react';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
 import { isValid, parse } from 'date-fns';
-import { DatePicker } from '../datePicker/DatePicker';
+import { useId, useState, useEffect } from 'react';
+
+import { formatDateAsString } from './helpers';
+import { FloatUI } from '../../../floatUI';
 import { Input } from '../../input';
+import { DatePicker } from '../datePicker/DatePicker';
+import { type PortalOptions } from '../datePicker/types';
+
 import type { IconName } from '../../../icons/types';
-import { FloatUI } from '../../../floatUI';
-import { formatDateAsString } from './helpers';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
-import { PortalOptions } from '../datePicker/types';
+
 export interface SingleInputDatePickerProps {
   /** A label for assistive technologies. */
   ariaLabel: string;
@@ -16,7 +19,8 @@ export interface SingleInputDatePickerProps {
   /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
-  label?: string;
+  /** The label for the input field. */
+  label: string;
   onSelect: (selected: Date | undefined) => void;
   initialMonth?: Date;
   selected?: Date;
@@ -46,13 +50,9 @@ export interface SingleInputDatePickerProps {
 export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
   const {
     ariaLabel,
-    className,
     isDisabled,
-    disableBeforeDate,
-    disableAfterDate,
     captionLayout,
     initialMonth,
-    id,
     label,
     selected,
     isOpen,
@@ -69,6 +69,11 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     portalOptions,
     floatingOptions,
     isPortal,
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className,
+    disableBeforeDate: _disableBeforeDate,
+    disableAfterDate: _disableAfterDate,
+    id: _id,
     ...rest
   } = props;
 
@@ -131,9 +136,9 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
         isClearable={isClearable}
         onChange={handleInputChange}
         errorMessage={errorMessage}
-        label={'Single Date Picker'}
+        label={label}
         tabIndex={tabIndex}
-        name={'Date Picker'}
+        name={label}
         ref={ref}
         readonly={isReadOnly}
       />

package/src/components/forms/date/inputDatePicker/__tests__/SingleInputDatePicker.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { SingleInputDatePicker } from '../SingleInputDatePicker';
 import { format, addDays } from 'date-fns';
 
+import { SingleInputDatePicker } from '../SingleInputDatePicker';
+
 const mockOnSelect = jest.fn();
 
 describe('SingleInputDatePicker', () => {
@@ -30,6 +30,7 @@ describe('SingleInputDatePicker', () => {
     render(
       <SingleInputDatePicker
         ariaLabel="Single Input Date Picker"
+        label="Date Picker"
         data-testid="datepicker-testid"
         captionLayout="label"
         onSelect={mockOnSelect}
@@ -70,6 +71,7 @@ describe('SingleInputDatePicker', () => {
     render(
       <SingleInputDatePicker
         ariaLabel="Single Input Date Picker"
+        label="Date Picker"
         captionLayout="label"
         data-testid="datepicker-testid"
         onSelect={mockOnSelect}

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -1,8 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { InputDateRangePicker } from './InputDateRangePicker';
 import { useArgs } from '@storybook/preview-api';
-import { DateRange } from 'react-day-picker';
-import { useEffect, useState } from 'react';
+import { type DateRange } from 'react-day-picker';
+
+import { InputDateRangePicker } from './InputDateRangePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof InputDateRangePicker> = {
   component: InputDateRangePicker,
@@ -261,6 +262,16 @@ const meta: Meta<typeof InputDateRangePicker> = {
         disable: true,
       },
     },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
+      table: {
+        category: 'i18n Text',
+        type: {
+          summary: '{ fromDate?: string; toDate?: string }',
+        },
+      },
+    },
   },
 };
 

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -1,15 +1,22 @@
-import { useId, useState, useEffect } from 'react';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
 import { isValid, parse } from 'date-fns';
-import { DatePicker } from '../datePicker/DatePicker';
-import { Input } from '../../input';
-import { IconName } from '../../../icons/types';
-import { DateRange } from 'react-day-picker';
+import { useId, useState, useEffect } from 'react';
+import { type DateRange } from 'react-day-picker';
+
+import { type InputDateRangePickerText } from './types';
 import { FloatUI } from '../../../floatUI';
 import { Col, Row } from '../../../grid';
+import { type IconName } from '../../../icons/types';
+import { Input } from '../../input';
+import { DatePicker } from '../datePicker/DatePicker';
+import { type PortalOptions } from '../datePicker/types';
 import { formatDateAsString } from '../inputDatePicker/helpers';
-import { Button } from '../../../button';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
-import { PortalOptions } from '../datePicker/types';
+
+const DEFAULT_TEXT: Required<InputDateRangePickerText> = {
+  fromDate: 'From Date',
+  toDate: 'To Date',
+};
+
 interface InputDateRangePickerProps {
   /** A label for assistive technologies. */
   ariaLabel: string;
@@ -51,18 +58,22 @@ interface InputDateRangePickerProps {
   floatingOptions?: UseFloatingOptions;
   /** Whether the date picker is a portal. */
   isPortal?: boolean;
+  /** Customizable display text. */
+  text?: InputDateRangePickerText;
 }
 
 export function InputDateRangePicker(props: InputDateRangePickerProps) {
   const {
     ariaLabel,
-    className,
     isDisabled,
-    disableBeforeDate,
-    disableAfterDate,
     captionLayout,
-    month,
-    id,
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className,
+    disableBeforeDate: _disableBeforeDate,
+    disableAfterDate: _disableAfterDate,
+    month: _month,
+    id: _id,
+    isPortal: _isPortal,
     onSelect,
     selected,
     isOpen,
@@ -84,10 +95,12 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     fromTabIndex,
     portalOptions,
     floatingOptions,
-    isPortal,
+    text: textProp,
     ...rest
   } = props;
 
+  const text = { ...DEFAULT_TEXT, ...textProp };
+
   const inputId = useId();
 
   // Hold the input values in state
@@ -157,13 +170,6 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     }
   }, [isOpen, clearOnClose]);
 
-  // Handle set date button click
-  const handleSetDate = () => {
-    if (setIsOpen) {
-      setIsOpen(false);
-    }
-  };
-
   return (
     <FloatUI
       isOpen={isOpen}
@@ -183,7 +189,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             onChange={(e) => handleInputChange(e, 'from')}
             errorMessage={fromErrorMessage}
             label={fromLabel}
-            name={'From Date'}
+            name={text.fromDate}
             data-testid="date-picker-from"
             hasHiddenLabel={hasHiddenLabel}
             ref={ref}
@@ -201,7 +207,7 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
             onChange={(e) => handleInputChange(e, 'to')}
             errorMessage={toErrorMessage}
             label={toLabel}
-            name={'To Date'}
+            name={text.toDate}
             data-testid="date-picker-to"
             hasHiddenLabel={hasHiddenLabel}
             ref={ref}

package/src/components/forms/date/inputDateRangePicker/__tests__/InputDateRangePicker.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { InputDateRangePicker } from '../InputDateRangePicker';
 import { format } from 'date-fns';
 
+import { InputDateRangePicker } from '../InputDateRangePicker';
+
 const mockOnSelect = jest.fn();
 
 describe('InputDateRangePicker', () => {

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

@@ -0,0 +1,7 @@
+/** Customizable text for InputDateRangePicker. */
+export interface InputDateRangePickerText {
+  /** Label for the "from" date input. Default: "From Date" */
+  fromDate?: string;
+  /** Label for the "to" date input. Default: "To Date" */
+  toDate?: string;
+}

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

@@ -1,12 +1,16 @@
-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';
 
+import {
+  SingleInputDateTimePicker,
+  type SingleInputDateTimePickerProps,
+} from './SingleInputDateTimePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+
 registerFontAwesomeIcons(...indiconDefinitions);
 
 const meta: Meta<typeof SingleInputDateTimePicker> = {

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

@@ -1,14 +1,17 @@
-import { useId, useState, useEffect } from 'react';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
 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 { useId, useState, useEffect } from 'react';
+
 import { formatDateAsString } from './helpers';
-import { TimePicker } from '../../timePicker/TimePicker';
+import { FloatUI } from '../../../floatUI';
 import { Row, Col } from '../../../grid';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
-import { PortalOptions } from '../datePicker/types';
+import { Input } from '../../input';
+import { TimePicker } from '../../timePicker/TimePicker';
+import { DatePicker } from '../datePicker/DatePicker';
+import { type PortalOptions } from '../datePicker/types';
+
+import type { IconName } from '../../../icons/types';
+
 
 export interface SingleInputDateTimePickerProps {
   /** A label for assistive technologies. */
@@ -18,7 +21,8 @@ export interface SingleInputDateTimePickerProps {
   isDisabled?: boolean;
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
-  label?: string;
+  /** The label for the date input field. */
+  label: string;
   onSelect: (selected: Date | undefined) => void;
   initialMonth?: Date;
   selected?: Date;
@@ -54,10 +58,7 @@ export interface SingleInputDateTimePickerProps {
 export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps) {
   const {
     ariaLabel,
-    className,
     isDisabled,
-    disableBeforeDate,
-    disableAfterDate,
     captionLayout,
     initialMonth,
     id,
@@ -81,6 +82,10 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
     portalOptions,
     floatingOptions,
     isPortal,
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className,
+    disableBeforeDate: _disableBeforeDate,
+    disableAfterDate: _disableAfterDate,
     ...rest
   } = props;
 
@@ -153,7 +158,7 @@ export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps)
             onChange={handleInputChange}
             errorMessage={errorMessage}
             hasHiddenLabel={hasHiddenLabel}
-            label={'Single Date Picker'}
+            label={label}
             name={`${id}-date-picker`}
             tabIndex={dateTabIndex}
           />

package/src/components/forms/form/Form.stories.tsx

@@ -1,15 +1,16 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Form } from './Form';
-import { Input } from '../input/Input';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useForm, Controller, type SubmitHandler } from 'react-hook-form';
 import * as z from 'zod';
+
+import { Form } from './Form';
 import { Button } from '../../button/Button';
-import { PasswordInput } from '../passwordInput';
-import { Textarea } from '../textarea';
 import { Col, Row, Container } from '../../grid';
 import { Checkbox } from '../checkbox';
+import { Input } from '../input/Input';
+import { PasswordInput } from '../passwordInput';
 import { Radio } from '../radio';
+import { Textarea } from '../textarea';
 import { Toggle } from '../toggle';
 
 const meta: Meta = {

package/src/components/forms/form/Form.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface FormProps {
   children: React.ReactNode;

package/src/components/forms/form/__tests__/Form.test.tsx

@@ -1,9 +1,12 @@
 import { render, screen } from '@testing-library/react';
-import { Form } from '@/components/forms/form/Form';
 import userEvent from '@testing-library/user-event';
-import { Input } from '../../input';
-import { ChangeEvent } from 'react';
+import { type ChangeEvent } from 'react';
+
+import { Form } from '@/components/forms/form/Form';
+
 import { Button } from '../../../button';
+import { Input } from '../../input';
+
 
 const onSubmit = jest.fn();
 
@@ -17,7 +20,7 @@ describe('form', () => {
           isRequired
           name="first name"
           value="first name"
-          onChange={function (e: ChangeEvent<HTMLInputElement>): void {
+          onChange={function (_e: ChangeEvent<HTMLInputElement>): void {
             throw new Error('Function not implemented.');
           }}
         />