@indico-data/design-system 2.4.2 → 2.6.0

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { IconName } from '@/types';
+export interface InputProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    label: string;
+    name: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorList?: string[];
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    iconName?: IconName;
+    isClearable?: boolean;
+}
+export declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input } from './Input';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Input>;
+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/input/__tests__/Input.test.d.ts

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

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

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

package/lib/src/components/forms/radio/Radio.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface RadioProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    id: string;
+    label: string;
+    name: string;
+    value?: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isDisabled?: boolean;
+}
+export declare const Radio: ({ ref, id, label, name, value, onChange, isDisabled, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/radio/Radio.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Radio } from './Radio';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Radio>;
+export declare const Default: Story;

package/lib/src/components/forms/radio/__tests__/Radio.test.d.ts

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

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

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

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

@@ -0,0 +1,6 @@
+interface ErrorListProps {
+    name: string;
+    errorList: string[];
+}
+export declare const ErrorList: ({ errorList, name }: ErrorListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+interface LabelProps {
+    label: string;
+    name: string;
+    isRequired?: boolean;
+    hasHiddenLabel?: boolean;
+}
+export declare const Label: ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/src/components/forms/subcomponents/__tests__/ErrorList.test.d.ts

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

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

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

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

@@ -2,3 +2,5 @@ export { Container, Col, Row } from './grid';
 export { Button } from './button';
 export { Icon } from './icons';
 export { Table } from './table';
+export { Input } from './forms/input';
+export { Radio } from './forms/radio';

package/lib/src/index.d.ts

@@ -7,3 +7,5 @@ export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
 export { Table } from './components/table';
+export { Input } from './components/forms/input';
+export { Radio as RadioInput } from './components/forms/radio';

package/package.json

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

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

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Input from './Input.stories';
+
+<Meta title="Forms/Input" name="Input" />
+
+# Input
+
+The input component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+
+<Canvas
+  of={Input.Default}
+  source={{
+    code: `
+    <Input name="first_name" required={true} isRequired helpText="This Is Help Text" isClearable label="Label Name" iconName="user" />
+    `,
+  }}
+/>
+
+<Controls of={Input.Default} />

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

@@ -0,0 +1,301 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input, InputProps } from './Input';
+import { useState } from 'react';
+import { iconNames } from 'build/generated/iconTypes';
+
+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',
+        },
+      },
+      action: 'onChange',
+    },
+    label: {
+      control: 'text',
+      description: 'The label for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    name: {
+      control: 'text',
+      description: 'The name for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    placeholder: {
+      control: 'text',
+      description: 'The placeholder for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    value: {
+      control: 'text',
+      description: 'The value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Toggles the required astherisc on the label',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Toggles the disabled state of the input',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    errorList: {
+      control: false,
+      description: 'An array of error messages',
+      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',
+        },
+      },
+      defaultValue: { summary: '' },
+    },
+    hasHiddenLabel: {
+      control: 'boolean',
+      description: 'Hides the label visually (retains it for screen readers)',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: 'false' },
+    },
+    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,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+const defaultArgs = {
+  label: 'Enter your name',
+  name: 'first_name',
+  placeholder: 'Please enter a value',
+} as InputProps;
+
+export const Default: Story = {
+  args: {
+    isRequired: true,
+    iconName: 'user',
+    helpText: 'This Is Help Text',
+    isClearable: true,
+    label: 'Label Name',
+    name: 'firsT_name',
+    placeholder: 'Please enter a value',
+    hasHiddenLabel: false,
+    isDisabled: false,
+    errorList: [],
+    value: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    errorList: ['You require a username value.'],
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    ...defaultArgs,
+    hasHiddenLabel: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    ...defaultArgs,
+    helpText: 'In order to submit the form, this field is required.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    ...defaultArgs,
+    isClearable: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    ...defaultArgs,
+    iconName: 'user',
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState('');
+    return (
+      <Input
+        {...args}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+        }}
+      />
+    );
+  },
+};

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Icon } from '@/components/icons';
+import { IconName } from '@/types';
+import { Label } from '../subcomponents/Label';
+import { ErrorList } from '../subcomponents/ErrorList';
+
+export interface InputProps {
+  ref?: React.LegacyRef<HTMLInputElement>;
+  label: string;
+  name: string;
+  placeholder: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  errorList?: string[];
+  helpText?: string;
+  hasHiddenLabel?: boolean;
+  iconName?: IconName;
+  isClearable?: boolean;
+}
+
+export const Input = ({
+  ref,
+  label,
+  name,
+  placeholder,
+  value,
+  onChange,
+  isRequired,
+  isDisabled,
+  errorList,
+  helpText,
+  iconName,
+  hasHiddenLabel,
+  isClearable,
+  ...rest
+}: InputProps) => {
+  const hasErrors = errorList && errorList.length > 0;
+  const handleClear = () => {
+    onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  return (
+    <div className="form-control">
+      <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <div className="input-wrapper">
+        {iconName && (
+          <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+        )}
+        <input
+          ref={ref}
+          data-testid={`form-input-${name}`}
+          name={name}
+          type="text"
+          disabled={isDisabled}
+          required={isRequired}
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''}`}
+          aria-invalid={hasErrors}
+          aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
+          aria-required={isRequired}
+          aria-label={label}
+          {...rest}
+        />
+        {isClearable && (
+          <Icon
+            name="x-close"
+            data-testid={`${name}-clearable-icon`}
+            size="sm"
+            onClick={handleClear}
+            className="clearable-icon"
+          />
+        )}
+      </div>
+      {hasErrors && <ErrorList errorList={errorList} name={name} />}
+      {helpText && (
+        <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+          {helpText}
+        </div>
+      )}
+    </div>
+  );
+};