@indico-data/design-system 2.9.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.stories.tsx

@@ -27,7 +27,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     name: {
       control: 'text',
@@ -38,7 +37,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     placeholder: {
       control: 'text',
@@ -49,7 +47,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     value: {
       control: 'text',
@@ -60,7 +57,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     isRequired: {
       control: 'boolean',
@@ -104,7 +100,6 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-      defaultValue: { summary: '' },
     },
     hasHiddenLabel: {
       control: 'boolean',