@indico-data/design-system 2.33.1 → 2.34.0

package/lib/src/components/forms/input/Input.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconName } from '@/types';
-import { WithLabelProps } from '../subcomponents/Label';
-export interface InputProps extends WithLabelProps {
+import { LabelProps } from '../subcomponents/Label';
+export interface BaseInputProps {
     value?: string | undefined;
     placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -13,5 +13,7 @@ export interface InputProps extends WithLabelProps {
     className?: string;
     defaultValue?: string;
 }
-declare const LabeledInput: React.ForwardRefExoticComponent<Omit<InputProps & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export interface InputProps extends BaseInputProps, LabelProps {
+}
+declare const LabeledInput: React.ForwardRefExoticComponent<Omit<InputProps & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledInput as Input };

package/lib/src/components/forms/numberInput/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LabelProps } from '../subcomponents/Label';
+import { BaseInputProps } from '../input/Input';
+export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+    value?: number | '';
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const LabeledNumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledNumberInput as NumberInput };

package/lib/src/components/forms/numberInput/NumberInput.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NumberInput } from './NumberInput';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const Errors: Story;
+export declare const HiddenLabel: Story;
+export declare const HelpText: Story;
+export declare const Clearable: Story;
+export declare const Icon: Story;
+export declare const Required: Story;

package/lib/src/components/forms/numberInput/__tests__/NumberInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/forms/numberInput/index.d.ts

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

package/lib/src/components/forms/passwordInput/PasswordInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithLabelProps } from '../subcomponents/Label';
-export interface PasswordInputProps extends WithLabelProps {
+import { LabelProps } from '../subcomponents/Label';
+export interface PasswordInputProps extends LabelProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     value?: string | undefined;
     placeholder?: string;
@@ -11,5 +11,5 @@ export interface PasswordInputProps extends WithLabelProps {
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-declare const LabeledPasswordInput: React.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+declare const LabeledPasswordInput: React.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledPasswordInput as PasswordInput };

package/lib/src/components/forms/subcomponents/Label.d.ts

@@ -3,9 +3,7 @@ export interface LabelProps {
     label: string;
     name: string;
     isRequired?: boolean;
-}
-export interface WithLabelProps extends LabelProps {
     hasHiddenLabel?: boolean;
 }
 export declare const Label: ({ label, name, isRequired }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-export declare function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithLabelProps> & React.RefAttributes<any>>;
+export declare function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & LabelProps> & React.RefAttributes<any>>;

package/lib/src/components/forms/textarea/Textarea.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithLabelProps } from '../subcomponents/Label';
-export interface TextareaProps extends WithLabelProps {
+import { LabelProps } from '../subcomponents/Label';
+export interface TextareaProps extends LabelProps {
     ref?: React.LegacyRef<HTMLTextAreaElement>;
     placeholder?: string;
     value?: string | undefined;
@@ -17,5 +17,5 @@ export interface TextareaProps extends WithLabelProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledTextarea as Textarea };

package/lib/src/storybook/formArgTypes.d.ts

@@ -0,0 +1,5 @@
+import { ArgTypes } from '@storybook/react';
+declare const labelArgTypes: ArgTypes;
+declare const baseInputArgTypes: ArgTypes;
+declare const inputArgTypes: ArgTypes;
+export { labelArgTypes, baseInputArgTypes, inputArgTypes };

package/package.json

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

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

@@ -1,107 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Input, InputProps } from './Input';
 import { SetStateAction, useEffect, useState } from 'react';
-import { iconNames } from 'build/generated/iconTypes';
-import labelArgTypes from '@/storybook/labelArgTypes';
+import { inputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
 const meta: Meta = {
   title: 'Forms/Input',
   component: Input,
   argTypes: {
-    onChange: {
-      control: false,
-      description: 'onChange event handler',
-      table: {
-        category: 'Callbacks',
-        type: {
-          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
-        },
-      },
-      type: { name: 'function', required: true },
-      action: 'onChange',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'The placeholder for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      type: { name: 'string', required: false },
-    },
-    value: {
-      control: 'text',
-      description: 'The value for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      type: { name: 'string', required: false },
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Toggles the disabled state of the input',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Error message',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    helpText: {
-      control: 'text',
-      description: 'The help text for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    iconName: {
-      control: 'select',
-      options: iconNames,
-      description: 'Adds an icon to the left hand side of the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    isClearable: {
-      control: 'boolean',
-      description: 'Adds a clear x icon to the right hand side of the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
-    ref: {
-      table: {
-        disable: true,
-      },
-    },
+    ...inputArgTypes,
     ...labelArgTypes,
   },
 };

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

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 
 import { Icon } from '@/components/icons';
 import { IconName } from '@/types';
-import { withLabel, WithLabelProps } from '../subcomponents/Label';
+import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface InputProps extends WithLabelProps {
+export interface BaseInputProps {
   value?: string | undefined;
   placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -19,6 +19,8 @@ export interface InputProps extends WithLabelProps {
   defaultValue?: string;
 }
 
+export interface InputProps extends BaseInputProps, LabelProps {}
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
@@ -70,7 +72,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             aria-required={isRequired}
             {...rest}
           />
-          {isClearable && (
+          {isClearable && !isDisabled && (
             <Icon
               name="x-close"
               data-testid={`${name}-clearable-icon`}

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

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as NumberInput from './NumberInput.stories';
+
+<Meta title="Forms/Number Input" name="Number Input" />
+
+# Number Input
+
+The `NumberInput` component is a specialized input field designed to handle numeric values. It supports features such as min and max constraints, step increments, and optional icons or clear buttons. This component is intended to be used within forms where numeric input is required.
+
+<Canvas
+  of={NumberInput.Default}
+  source={{
+    code: `
+<NumberInput
+  label="Enter a number"
+  name="number_input"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  hasHiddenLabel={false}
+  isClearable
+  iconName="fa-calculator"
+  isDisabled={false}
+  errorMessage=""
+  value={0}
+  onChange={() => {}}
+/>
+    `,
+  }}
+/>
+
+<Controls of={NumberInput.Default} />

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

@@ -0,0 +1,215 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NumberInput, NumberInputProps } from './NumberInput';
+import { useEffect, useState } from 'react';
+import { iconNames } from 'build/generated/iconTypes';
+import { labelArgTypes, inputArgTypes } from '@/storybook/formArgTypes';
+
+const meta: Meta = {
+  title: 'Forms/Number Input',
+  component: NumberInput,
+  argTypes: {
+    ...labelArgTypes,
+    ...inputArgTypes,
+    value: {
+      control: 'number',
+      description: 'The value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number | ""',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    min: {
+      control: 'number',
+      description: 'The minimum value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    max: {
+      control: 'number',
+      description: 'The maximum value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    step: {
+      control: 'number',
+      description: 'The step value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberInput>;
+
+const defaultArgs: NumberInputProps = {
+  label: 'Enter a number',
+  name: 'number_input',
+  placeholder: 'Please enter a value',
+  onChange: () => {},
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+    iconName: 'fa-calculator',
+    helpText: 'This Is Help Text',
+    isClearable: true,
+    hasHiddenLabel: false,
+    isDisabled: false,
+    errorMessage: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    errorMessage: 'This field requires a number.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    ...defaultArgs,
+    hasHiddenLabel: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    ...defaultArgs,
+    helpText: 'In order to submit the form, this field is required.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    ...defaultArgs,
+    isClearable: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(args.value || '');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    ...defaultArgs,
+    iconName: 'fa-calculator',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '@/components/icons';
+import { LabelProps, withLabel } from '../subcomponents/Label';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import { BaseInputProps } from '../input/Input';
+
+export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+  value?: number | '';
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      name,
+      onChange,
+      isRequired,
+      isDisabled,
+      isClearable,
+      errorMessage,
+      helpText,
+      iconName,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.length > 0;
+
+    const handleClear = () => {
+      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    const inputClasses = classNames(
+      'number-input',
+      {
+        error: hasErrors,
+        'number-input--has-icon': iconName,
+        'number-input--is-clearable': isClearable,
+      },
+      className,
+    );
+
+    return (
+      <>
+        <div className="number-input-wrapper">
+          {iconName && (
+            <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+          )}
+          <input
+            ref={ref}
+            data-testid={`form-number-input-${name}`}
+            name={name}
+            type="number"
+            disabled={isDisabled}
+            onChange={onChange}
+            className={inputClasses}
+            aria-invalid={hasErrors ? true : undefined}
+            aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
+            aria-required={isRequired}
+            {...rest}
+          />
+          {isClearable && !isDisabled && (
+            <Icon
+              name="x-close"
+              data-testid={`${name}-clearable-icon`}
+              onClick={handleClear}
+              className="clearable-icon"
+              size="sm"
+            />
+          )}
+        </div>
+        {hasErrors && <DisplayFormError message={errorMessage} />}
+        {helpText && !hasErrors && (
+          <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+            {helpText}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+const LabeledNumberInput = withLabel(NumberInput);
+LabeledNumberInput.displayName = 'NumberInput';
+export { LabeledNumberInput as NumberInput };

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

@@ -0,0 +1,94 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NumberInput, NumberInputProps } from '../NumberInput';
+
+const handleOnChange = jest.fn();
+
+const defaultProps: NumberInputProps = {
+  isRequired: true,
+  label: 'Enter a number',
+  helpText: 'In order to submit the form, this field is required.',
+  name: 'number',
+  placeholder: 'Please enter a value',
+  iconName: 'fa-calculator',
+  isClearable: true,
+  onChange: handleOnChange,
+};
+
+describe('NumberInput', () => {
+  beforeEach(jest.clearAllMocks);
+
+  it('renders the number input field', () => {
+    render(<NumberInput {...defaultProps} />);
+    expect(screen.getByText('Enter a number')).toBeInTheDocument();
+  });
+
+  it('shows an x clear icon when the number input is clearable', () => {
+    render(<NumberInput {...defaultProps} />);
+    const icon = screen.getByTestId('number-clearable-icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toBeVisible();
+  });
+
+  it('does not show an x when the number input is not clearable', () => {
+    render(<NumberInput {...defaultProps} isClearable={false} />);
+    const icon = screen.queryByTestId('number-clearable-icon');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it('clicking on the x clears the value', async () => {
+    render(<NumberInput {...defaultProps} value={42} />);
+    const input = screen.getByTestId('form-number-input-number');
+    const icon = screen.getByTestId('number-clearable-icon');
+    expect(input).toHaveValue(42);
+    await userEvent.click(icon);
+    expect(handleOnChange).toHaveBeenCalledWith(expect.objectContaining({ target: { value: '' } }));
+  });
+
+  it('renders an icon on the left when one exists', () => {
+    render(<NumberInput {...defaultProps} />);
+    const icon = screen.getByTestId('number-embedded-icon');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toBeVisible();
+  });
+
+  it('does not render an embedded icon when one does not exist', () => {
+    render(<NumberInput {...defaultProps} iconName={undefined} />);
+    const icon = screen.queryByTestId('number-embedded-icon');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  it('adds the error class when errors exist', () => {
+    render(
+      <NumberInput {...defaultProps} errorMessage="You require a numeric value." value={42} />,
+    );
+    const input = screen.getByTestId('form-number-input-number');
+    expect(input).toHaveClass('error');
+  });
+
+  it('does not highlight the input when no errors exist', () => {
+    render(<NumberInput {...defaultProps} value={42} />);
+    const input = screen.getByTestId('form-number-input-number');
+    expect(input).not.toHaveClass('error');
+  });
+
+  it('renders help text when help text exists', () => {
+    render(<NumberInput {...defaultProps} value={42} />);
+    const helpText = screen.getByText('In order to submit the form, this field is required.');
+    expect(helpText).toBeInTheDocument();
+    expect(helpText).toBeVisible();
+  });
+
+  it('does not render help text when help text does not exist', () => {
+    render(<NumberInput {...defaultProps} helpText={undefined} value={42} />);
+    const helpText = screen.queryByTestId('number-help-text');
+    expect(helpText).not.toBeInTheDocument();
+  });
+
+  it('emits the value when user types', async () => {
+    render(<NumberInput {...defaultProps} />);
+    const input = screen.getByTestId('form-number-input-number');
+    await userEvent.type(input, '42');
+    expect(handleOnChange).toHaveBeenCalled();
+  });
+});