@indico-data/design-system 2.10.0 → 2.11.0

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

@@ -0,0 +1,413 @@
+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 * as z from 'zod';
+import { Button } from '../../button/Button';
+import { PasswordInput } from '../passwordInput';
+import { Textarea } from '../textarea';
+import { Col, Row, Container } from '../../grid';
+import { Checkbox } from '../checkbox';
+import { Radio } from '../radio';
+import { Toggle } from '../toggle';
+
+const meta: Meta = {
+  title: 'Forms/Form',
+  component: Form,
+  argTypes: {
+    onSubmit: {
+      control: false,
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: '() => void',
+        },
+      },
+    },
+    children: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    className: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    action: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    method: {
+      control: 'select',
+      options: ['get', 'post', 'dialog', 'delete', 'put'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'get | post | dialog | delete | put',
+        },
+      },
+      defaultValue: { summary: 'post' },
+    },
+    target: {
+      control: 'select',
+      options: ['_blank', '_self', '_parent', '_top'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: '_blank | _self | _parent | _top',
+        },
+      },
+      defaultValue: { summary: '_self' },
+    },
+    autocomplete: {
+      control: 'select',
+      options: ['on', 'off'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'on | off',
+        },
+      },
+      defaultValue: { summary: 'on' },
+    },
+    noValidate: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+      },
+      defaultValue: { summary: false },
+    },
+    enctype: {
+      control: 'select',
+      options: ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'],
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'application/x-www-form-urlencoded | multipart/form-data | text/plain',
+        },
+      },
+      defaultValue: { summary: 'application/x-www-form-urlencoded' },
+    },
+    rel: {
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Form>;
+
+export const Controlled: Story = {
+  args: {},
+  render: (args) => {
+    const { control, handleSubmit } = useForm({
+      defaultValues: {
+        firstName: 'test',
+      },
+    });
+
+    interface FormValues {
+      firstName: string;
+    }
+
+    const onSubmit: SubmitHandler<FormValues> = (data) => {
+      console.log(data);
+    };
+    return (
+      <Container>
+        <Row>
+          <Col sm={4}>
+            <Form {...args} onSubmit={() => handleSubmit(onSubmit)}>
+              <Controller
+                name="firstName"
+                control={control}
+                render={({ field }) => <Input label={'Label'} placeholder={'PH'} {...field} />}
+              />
+              <input type="submit" />
+            </Form>
+          </Col>
+          <Col sm={4}></Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const Uncontrolled: Story = {
+  args: {},
+  render: (args) => {
+    const schema = z
+      .object({
+        firstName: z.string().min(1, 'First name is required').max(10),
+        lastName: z.string().min(1, 'Last name is required').max(10),
+        email: z.string().min(1, 'Email is required').email(), // todo -- leave a note on this min1
+        password: z
+          .string()
+          .min(1, 'Password is required')
+          .max(100)
+          .regex(
+            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
+            'Password must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character (@, $, !, %, *, ?, &).',
+          ),
+        confirmPassword: z.string().min(1, 'Password is required').max(100),
+        description: z.string().max(255).optional(),
+        terms: z.boolean(),
+        rpgClass: z.enum(['Rogue', 'Warrior', 'Mage']),
+        toggle: z.boolean(),
+      })
+      .refine((data) => data.password === data.confirmPassword, {
+        message: "Passwords don't match",
+        path: ['confirmPassword'],
+      });
+
+    interface FormValues {
+      firstName: string;
+      lastName: string;
+      email: string;
+      password: string;
+      confirmPassword: string;
+      description: string;
+      terms: boolean;
+      rpgClass: string;
+      toggle: boolean;
+    }
+
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm<FormValues>({ mode: 'onChange', resolver: zodResolver(schema) });
+
+    const onSubmit: SubmitHandler<FormValues> = (data) => data;
+
+    return (
+      <Container>
+        <Row>
+          <Col offset={{ sm: 4 }} sm={4}>
+            <Form {...args} onSubmit={() => handleSubmit(onSubmit)}>
+              <Input
+                placeholder={'Please enter your first name.'}
+                label="First name"
+                isRequired
+                errorMessage={errors.firstName ? errors.firstName.message?.toString() : ''}
+                {...register('firstName')}
+              />
+              <Input
+                placeholder={'Please enter your last name.'}
+                label="Last name"
+                isRequired
+                errorMessage={errors.lastName ? errors.lastName.message?.toString() : ''}
+                {...register('lastName')}
+              />
+              <Input
+                placeholder={'Please enter your email.'}
+                label="Email"
+                isRequired
+                errorMessage={errors.email ? errors.email.message?.toString() : ''}
+                {...register('email')}
+              />
+              <PasswordInput
+                placeholder={'Please enter your password.'}
+                label="Password"
+                isRequired
+                errorMessage={errors.password ? errors.password.message?.toString() : ''}
+                {...register('password')}
+              />
+              <PasswordInput
+                placeholder={'Please enter your password again.'}
+                label="Confirm Password"
+                isRequired
+                errorMessage={
+                  errors.confirmPassword ? errors.confirmPassword.message?.toString() : ''
+                }
+                {...register('confirmPassword')}
+              />
+
+              <Textarea
+                label="Description"
+                placeholder="Please enter a description"
+                {...register('description')}
+              />
+
+              <div className="radio-group mb-5">
+                <h2 className="mb-4">Select a class</h2>
+                <Radio label="Rogue" value="Rogue" id="rogue" {...register('rpgClass')} />
+                <Radio label="Warrior" value="Warruir" id="warrior" {...register('rpgClass')} />
+                <Radio label="Mage" value="Mage" id="mage" {...register('rpgClass')} />
+                <Radio label="Monk" value="Monk" id="monk" {...register('rpgClass')} />
+              </div>
+
+              <Checkbox label="Do you accept the terms?" id={'one'} {...register('terms')} />
+
+              <Toggle label="Party On?" id={'Toggle'} {...register('toggle')} />
+
+              <Button type="submit" ariaLabel={'Submit Form'}>
+                Submit Form
+              </Button>
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};
+
+export const UncontrolledPreFilled: Story = {
+  args: {},
+  render: (args) => {
+    const schema = z
+      .object({
+        firstName: z.string().min(1, 'First name is required').max(10),
+        lastName: z.string().min(1, 'Last name is required').max(10),
+        email: z.string().min(1, 'Email is required').email(), // todo -- leave a note on this min1
+        password: z
+          .string()
+          .min(1, 'Password is required')
+          .max(100)
+          .regex(
+            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/,
+            'Password must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, one number, and one special character (@, $, !, %, *, ?, &).',
+          ),
+        confirmPassword: z.string().min(1, 'Password is required').max(100),
+        description: z.string().max(255).optional(),
+        terms: z.boolean(),
+        rpgClass: z.enum(['Rogue', 'Warrior', 'Mage']),
+        toggle: z.boolean(),
+      })
+      .refine((data) => data.password === data.confirmPassword, {
+        message: "Passwords don't match",
+        path: ['confirmPassword'],
+      });
+
+    const {
+      register,
+      handleSubmit,
+      formState: { errors },
+    } = useForm<any>({ mode: 'onChange', resolver: zodResolver(schema) });
+    interface FormValues {
+      firstName: string;
+      lastName: string;
+      email: string;
+      password: string;
+      confirmPassword: string;
+      description: string;
+      terms: boolean;
+      rpgClass: string;
+      toggle: boolean;
+    }
+
+    const onSubmit: SubmitHandler<FormValues> = (data) => data;
+
+    return (
+      <Container>
+        <Row>
+          <Col offset={{ sm: 3 }} sm={4}>
+            <Form {...args} onSubmit={() => handleSubmit(onSubmit)}>
+              <Input
+                placeholder={'Please enter your first name.'}
+                label="First name"
+                isRequired
+                errorMessage={errors.firstName ? errors.firstName.message?.toString() : ''}
+                {...register('firstName')}
+                defaultValue="John"
+              />
+              <Input
+                placeholder={'Please enter your last name.'}
+                label="Last name"
+                isRequired
+                errorMessage={errors.lastName ? errors.lastName.message?.toString() : ''}
+                {...register('lastName')}
+                defaultValue="Rambo"
+              />
+              <Input
+                placeholder={'Please enter your email.'}
+                label="Email"
+                isRequired
+                errorMessage={errors.email ? errors.email.message?.toString() : ''}
+                {...register('email')}
+                defaultValue="john.rambo@indico.io"
+              />
+              <PasswordInput
+                placeholder={'Please enter your password.'}
+                label="Password"
+                isRequired
+                errorMessage={errors.password ? errors.password.message?.toString() : ''}
+                {...register('password')}
+                defaultValue="Password1!"
+              />
+              <PasswordInput
+                placeholder={'Please enter your password again.'}
+                label="Confirm Password"
+                isRequired
+                errorMessage={
+                  errors.confirmPassword ? errors.confirmPassword.message?.toString() : ''
+                }
+                {...register('confirmPassword')}
+                defaultValue="Password1!"
+              />
+
+              <Textarea
+                label="Description"
+                placeholder="Please enter a description"
+                {...register('description')}
+                defaultValue="I'm Batman!"
+              />
+
+              <div className="radio-group mb-5">
+                <h2 className="mb-4">Select a class</h2>
+                <Radio label="Rogue" value="Rogue" id="rogue" {...register('rpgClass')} />
+                <Radio
+                  label="Warrior"
+                  value="Warruir"
+                  id="warrior"
+                  {...register('rpgClass')}
+                  defaultChecked
+                />
+                <Radio label="Mage" value="Mage" id="mage" {...register('rpgClass')} />
+                <Radio label="Monk" value="Monk" id="monk" {...register('rpgClass')} />
+              </div>
+
+              <Checkbox
+                label="Do you accept the terms?"
+                id={'one'}
+                {...register('terms')}
+                defaultChecked
+              />
+
+              <Toggle label="Party On?" id={'Toggle'} {...register('toggle')} defaultChecked />
+
+              <Button type="submit" ariaLabel={'Submit Form'}>
+                Submit Form
+              </Button>
+            </Form>
+          </Col>
+        </Row>
+      </Container>
+    );
+  },
+};

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

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export interface FormProps {
+  children: React.ReactNode;
+  className?: string;
+  action?: string;
+  method?: 'get' | 'post' | 'dialog' | 'delete' | 'put';
+  target?: '_blank' | '_self' | '_parent' | '_top';
+  autocomplete?: 'on' | 'off';
+  noValidate?: boolean;
+  enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+  rel?: string;
+  onSubmit?: (formObject: Record<string, string>) => void;
+}
+
+export const Form = ({
+  children,
+  onSubmit,
+  action,
+  method,
+  target,
+  autocomplete,
+  noValidate,
+  enctype,
+  rel,
+  ...rest
+}: FormProps) => {
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault(); // Prevent the default form submission
+
+    // Create a FormData object, passing in the form (e.currentTarget)
+    const formData = new FormData(e.currentTarget);
+
+    // Convert FormData into a plain object
+    const formObject = Array.from(formData.entries()).reduce<Record<string, string>>(
+      (obj, [key, value]) => {
+        obj[key] = value.toString();
+        return obj;
+      },
+      {},
+    );
+
+    // Call the onSubmit prop, if provided, passing the form object instead of the event
+    if (onSubmit) {
+      onSubmit(formObject); // Modified to pass formObject instead of e
+    }
+  };
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      action={action}
+      method={method}
+      target={target}
+      autoComplete={autocomplete}
+      noValidate={noValidate}
+      encType={enctype}
+      rel={rel}
+      {...rest}
+    >
+      {children}
+    </form>
+  );
+};

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

@@ -0,0 +1,35 @@
+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 { Button } from '../../../button';
+
+const onSubmit = jest.fn();
+
+describe('form', () => {
+  it('renders the form field', async () => {
+    render(
+      <Form onSubmit={onSubmit}>
+        <Input
+          placeholder={'Please enter your first name.'}
+          label="First name"
+          isRequired
+          name="first name"
+          value="first name"
+          onChange={function (e: ChangeEvent<HTMLInputElement>): void {
+            throw new Error('Function not implemented.');
+          }}
+        />
+        <Button type="submit" data-testid="submit" ariaLabel={'submit'}>
+          Submit
+        </Button>
+      </Form>,
+    );
+    const submitButton = screen.getByTestId('submit');
+    expect(submitButton).toBeInTheDocument();
+    await userEvent.click(submitButton);
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit).toHaveBeenCalledWith({ 'first name': 'first name' });
+  });
+});

package/src/components/forms/form/styles/Form.scss

@@ -0,0 +1,3 @@
+form {
+  width: 100%;
+}

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

@@ -2,87 +2,88 @@ import React from 'react';
 import { Icon } from '@/components/icons';
 import { IconName } from '@/types';
 import { Label } from '../subcomponents/Label';
-import { ErrorList } from '../subcomponents/ErrorList';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
 export interface InputProps {
-  ref?: React.LegacyRef<HTMLInputElement>;
   label: string;
   name: string;
+  value?: string | undefined;
   placeholder: string;
-  value: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isRequired?: boolean;
   isDisabled?: boolean;
-  errorList?: string[];
+  errorMessage?: string | undefined;
   helpText?: string;
   hasHiddenLabel?: boolean;
   iconName?: IconName;
   isClearable?: boolean;
   className?: string;
+  defaultValue?: string;
 }
 
-export const Input = ({
-  ref,
-  label,
-  name,
-  placeholder,
-  value,
-  onChange,
-  isRequired,
-  isDisabled,
-  errorList,
-  helpText,
-  iconName,
-  hasHiddenLabel,
-  isClearable,
-  className = '',
-  ...rest
-}: InputProps) => {
-  const hasErrors = errorList && errorList.length > 0;
-  const handleClear = () => {
-    onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
-  };
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      name,
+      placeholder,
+      onChange,
+      isRequired,
+      isDisabled,
+      isClearable,
+      errorMessage,
+      helpText,
+      iconName,
+      hasHiddenLabel,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.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' : ''} ${className}`}
-          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"
+    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}
+            placeholder={placeholder}
+            onChange={onChange}
+            className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`}
+            aria-invalid={hasErrors ? true : undefined}
+            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 && <DisplayFormError message={errorMessage} />}
+        {helpText && (
+          <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+            {helpText}
+          </div>
         )}
       </div>
-      {hasErrors && <ErrorList errorList={errorList} name={name} />}
-      {helpText && (
-        <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
-          {helpText}
-        </div>
-      )}
-    </div>
-  );
-};
+    );
+  },
+);