@indico-data/design-system 3.19.0 → 3.20.0

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

@@ -1,16 +1,16 @@
-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';
-import { InputDateRangePickerText } from './types';
 
 const DEFAULT_TEXT: Required<InputDateRangePickerText> = {
   fromDate: 'From Date',
@@ -65,13 +65,15 @@ interface InputDateRangePickerProps {
 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,
@@ -93,7 +95,6 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     fromTabIndex,
     portalOptions,
     floatingOptions,
-    isPortal,
     text: textProp,
     ...rest
   } = props;
@@ -169,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}

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/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. */
@@ -55,10 +58,7 @@ export interface SingleInputDateTimePickerProps {
 export function SingleInputDateTimePicker(props: SingleInputDateTimePickerProps) {
   const {
     ariaLabel,
-    className,
     isDisabled,
-    disableBeforeDate,
-    disableAfterDate,
     captionLayout,
     initialMonth,
     id,
@@ -82,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;
 

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.');
           }}
         />

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

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Input, InputProps } from './Input';
-import { SetStateAction, useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type SetStateAction, useEffect, useState } from 'react';
+
 import { inputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
+import { Input, type InputProps } from './Input';
+
+
 const meta: Meta = {
   title: 'Forms/Input',
   component: Input,

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

@@ -1,10 +1,10 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
 import { Icon } from '../../../components/icons/Icon';
-import { IconName } from '../../../components/icons/types';
-import { withLabel, LabelProps } from '../subcomponents/Label';
+import { type IconName } from '../../../components/icons/types';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import { withLabel, type LabelProps } from '../subcomponents/Label';
 
 export interface BaseInputProps {
   id?: string;

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

@@ -1,7 +1,9 @@
-import { render, screen, act } from '@testing-library/react';
-import { Input } from '@/components/forms/input/Input';
-import { ChangeEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { type ChangeEvent } from 'react';
+
+import { Input } from '@/components/forms/input/Input';
+
 
 const handleOnChange = jest.fn();
 

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

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { NumberInput, NumberInputProps } from './NumberInput';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
+
 import { labelArgTypes, inputArgTypes } from '@/storybook/formArgTypes';
 
+import { NumberInput, type NumberInputProps } from './NumberInput';
+
+
 const meta: Meta = {
   title: 'Forms/Number Input',
   component: NumberInput,

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

@@ -1,10 +1,12 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
 import { Icon } from '@/components/icons/Icon';
-import { LabelProps, withLabel } from '../subcomponents/Label';
+
+import { type BaseInputProps } from '../input/Input';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
-import { BaseInputProps } from '../input/Input';
+import { type LabelProps, withLabel } from '../subcomponents/Label';
+
 
 export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
   /** The value for the input field */

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

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { NumberInput, NumberInputProps } from '../NumberInput';
+
+import { NumberInput, type NumberInputProps } from '../NumberInput';
 
 const handleOnChange = jest.fn();
 

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

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

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

@@ -1,8 +1,11 @@
+import classNames from 'classnames';
 import React, { useState } from 'react';
+
 import { Icon } from '@/components/icons/Icon';
-import { withLabel, LabelProps } from '../subcomponents/Label';
+
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
-import classNames from 'classnames';
+import { withLabel, type LabelProps } from '../subcomponents/Label';
+
 
 export interface PasswordInputProps extends LabelProps {
   ref?: React.LegacyRef<HTMLInputElement>;

package/src/components/forms/passwordInput/__tests__/PasswordInput.test.tsx

@@ -1,10 +1,9 @@
-import { render, screen, act } from '@testing-library/react';
-import { PasswordInput } from '@/components/forms/passwordInput/PasswordInput';
-import { ChangeEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { PasswordInput } from '@/components/forms/passwordInput/PasswordInput';
+
 const handleOnChange = jest.fn();
-const handleShowPassword = jest.fn();
 
 describe('Input', () => {
   it('renders the input field', () => {

package/src/components/forms/radio/Radio.stories.tsx

@@ -1,7 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Radio } from './Radio';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Col, Row } from '@/components/grid';
 
+import { Radio } from './Radio';
+
+
 const meta: Meta = {
   title: 'Forms/Radio',
   component: Radio,

package/src/components/forms/radio/__tests__/Radio.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen, act } from '@testing-library/react';
-import { Radio } from '@/components/forms/radio/Radio';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Radio } from '@/components/forms/radio/Radio';
+
 const handleOnChange = jest.fn();
 
 describe('radio', () => {

package/src/components/forms/select/Select.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Select, SelectProps } from './Select';
-import { SelectOption } from './types';
-import { LabelProps } from '../subcomponents/Label';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Select, type SelectProps } from './Select';
+import { type SelectOption } from './types';
+import { type LabelProps } from '../subcomponents/Label';
 
 const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
   title: 'Forms/Select',

package/src/components/forms/select/Select.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
-import ReactSelect, { Props as ReactSelectProps, components, OptionProps } from 'react-select';
-import { SelectOption, SelectText } from './types';
+import React from 'react';
+import ReactSelect, { type Props as ReactSelectProps, components, type OptionProps } from 'react-select';
+
+import { type SelectOption, type SelectText } from './types';
 import { withLabel } from '../subcomponents/Label';
 
 const DEFAULT_TEXT: Required<SelectText> = {
@@ -49,9 +50,9 @@ const Select = React.forwardRef(
       classNamePrefix = 'select',
       className,
       components: customComponents,
-      label,
-      hasHiddenLabel,
-      name,
+      label: _label,
+      hasHiddenLabel: _hasHiddenLabel,
+      name: _name,
       text: textProp,
       ...props
     }: SelectProps<OptionType>,

package/src/components/forms/select/__tests__/Select.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+import { type OptionProps } from 'react-select';
 
 import { Select } from '../Select';
-import { SelectOption } from '../types';
-import { OptionProps, components } from 'react-select';
+import { type SelectOption } from '../types';
 
 const options: SelectOption[] = [
   { value: 'option1', label: 'Option 1' },

package/src/components/forms/select/types.ts

@@ -1,5 +1,6 @@
-import { ReactNode } from 'react';
-import { FormLabelText } from '../subcomponents/Label';
+import { type ReactNode } from 'react';
+
+import { type FormLabelText } from '../subcomponents/Label';
 
 export type SelectOption = {
   label: string;

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

@@ -1,5 +1,8 @@
-import React, { forwardRef } from 'react';
-import { FormLabelText } from './types';
+import { forwardRef } from 'react';
+
+import { type FormLabelText } from './types';
+
+import type React from 'react';
 
 export type { FormLabelText } from './types';
 

package/src/components/forms/subcomponents/__tests__/Label.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Label, withLabel } from '@/components/forms/subcomponents/Label';
 
 // Mock component to wrap with HOC

package/src/components/forms/textarea/Textarea.stories.tsx

@@ -1,8 +1,11 @@
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { labelArgTypes, inputArgTypes, baseInputArgTypes } from '@/storybook/formArgTypes';
+
+import { labelArgTypes, baseInputArgTypes } from '@/storybook/formArgTypes';
+
 import { Textarea } from './Textarea';
 
+
 const meta: Meta = {
   title: 'Forms/Textarea',
   component: Textarea,

package/src/components/forms/textarea/Textarea.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
-import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import { withLabel, type LabelProps } from '../subcomponents/Label';
 
 export interface TextareaProps extends LabelProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
@@ -33,7 +33,7 @@ export interface TextareaProps extends LabelProps {
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
-      label,
+      label: _label,
       name,
       placeholder,
       value,
@@ -43,7 +43,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       isDisabled,
       errorMessage,
       helpText,
-      hasHiddenLabel,
+      hasHiddenLabel: _hasHiddenLabel,
       rows,
       cols,
       readonly,

package/src/components/forms/textarea/__tests__/Textarea.test.tsx

@@ -1,8 +1,8 @@
-import { render, screen, act } from '@testing-library/react';
-import { Textarea } from '@/components/forms/textarea/Textarea';
-import { ChangeEvent } from 'react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Textarea } from '@/components/forms/textarea/Textarea';
+
 const handleOnChange = jest.fn();
 
 describe('Textarea', () => {

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

@@ -1,8 +1,10 @@
-import { TimePicker } from './TimePicker';
-import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
+
+import { TimePicker } from './TimePicker';
 import { Col, Row } from '../../grid';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof TimePicker> = {
   title: 'Forms/TimePicker',
   component: TimePicker,

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

@@ -1,9 +1,10 @@
-import { ChangeEvent, useState, FocusEvent } from 'react';
-import { Input } from '../input/Input';
-import { FloatUI } from '../../floatUI/FloatUI';
-import { formatTimeValue, validateInputValue } from './helpers';
 import { offset, flip, shift } from '@floating-ui/react';
-import { TimePickerText } from './types';
+import { type ChangeEvent, useState, type FocusEvent } from 'react';
+
+import { formatTimeValue, validateInputValue } from './helpers';
+import { type TimePickerText } from './types';
+import { FloatUI } from '../../floatUI/FloatUI';
+import { Input } from '../input/Input';
 
 const DEFAULT_TEXT: Required<TimePickerText> = {
   validationError: 'Time validation error',

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

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { TimePicker } from '@/components/forms/timePicker/TimePicker';
 import userEvent from '@testing-library/user-event';
 
+import { TimePicker } from '@/components/forms/timePicker/TimePicker';
+
 describe('TimePicker', () => {
   // TODO -- fix this when we decide on a validation strategy
 

package/src/components/forms/toggle/Toggle.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Toggle } from './Toggle';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Toggle } from './Toggle';
+
 const meta: Meta = {
   title: 'Forms/Toggle',
   component: Toggle,

package/src/components/forms/toggle/__tests__/Toggle.test.tsx

@@ -1,7 +1,8 @@
-import { render, screen, act } from '@testing-library/react';
-import { Toggle } from '@/components/forms/toggle/Toggle';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import { Toggle } from '@/components/forms/toggle/Toggle';
+
 const handleOnChange = jest.fn();
 
 describe('Toggle', () => {

package/src/components/grid/col/Col.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Container, Row } from 'react-grid-system';
+
 import { Col } from '@/components';
 
 const meta: Meta = {

package/src/components/grid/col/Col.tsx

@@ -1,4 +1,4 @@
-import { Col as RgsCol, ColProps } from 'react-grid-system';
+import { Col as RgsCol, type ColProps } from 'react-grid-system';
 
 export const Col = ({ ref: _ref, ...rest }: ColProps) => {
   return <RgsCol {...rest} />;

package/src/components/grid/container/Container.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Container, Row, Col } from '@/components';
 
 const meta: Meta = {

package/src/components/grid/container/Container.tsx

@@ -1,4 +1,4 @@
-import { Container as RgsContainer, ContainerProps } from 'react-grid-system';
+import { Container as RgsContainer, type ContainerProps } from 'react-grid-system';
 
 export const Container = ({ ref: _ref, ...rest }: ContainerProps) => {
   return <RgsContainer {...rest} />;

package/src/components/grid/row/Row.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Row, Col, Container } from '@/components';
 
 const meta: Meta = {

package/src/components/grid/row/Row.tsx

@@ -1,4 +1,4 @@
-import { Row as RgsRow, RowProps } from 'react-grid-system';
+import { Row as RgsRow, type RowProps } from 'react-grid-system';
 
 export const Row = ({ ref: _ref, ...rest }: RowProps) => {
   return <RgsRow {...rest} />;

package/src/components/icons/Icon.stories.tsx

@@ -1,11 +1,18 @@
-import React, { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Icon, Row, Col, Button } from '@/components';
-import { IconName, IconProps, IconSizes } from './types';
 import { fas } from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Icon, Row, Col, Button } from '@/components';
 import { registerFontAwesomeIcons } from '@/index';
 import { fontAwesomeIconNames, iconNames, indiconIconNames } from '@/storybook/iconNames';
+
 import { indiconDefinitions } from './indicons';
+import { type IconName, type IconProps, type IconSizes } from './types';
+
+import type React from 'react';
+
+
+
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);