@indico-data/design-system 2.9.0 → 2.11.0

package/lib/src/components/forms/checkbox/Checkbox.d.ts

@@ -8,5 +8,6 @@ export interface CheckboxProps {
     isChecked?: boolean | undefined;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
+    defaultChecked?: boolean;
 }
-export declare const Checkbox: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/lib/src/components/forms/form/Form.d.ts

@@ -0,0 +1,14 @@
+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 declare const Form: ({ children, onSubmit, action, method, target, autocomplete, noValidate, enctype, rel, ...rest }: FormProps) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/forms/form/Form.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Form } from './Form';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Controlled: Story;
+export declare const Uncontrolled: Story;
+export declare const UncontrolledPreFilled: Story;

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

@@ -1,18 +1,19 @@
 import React from 'react';
 import { IconName } from '@/types';
 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 declare const Input: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, iconName, hasHiddenLabel, isClearable, ...rest }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface PasswordInputProps {
+    ref?: React.LegacyRef<HTMLInputElement>;
+    label: string;
+    value?: string | undefined;
+    name: string;
+    placeholder: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    errorMessage?: string | undefined;
+    helpText?: string;
+    hasHiddenLabel?: boolean;
+    hasShowPassword?: boolean;
+    defaultValue?: string;
+}
+export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

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

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

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

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

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

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

@@ -7,5 +7,6 @@ export interface RadioProps {
     value?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
+    defaultChecked?: boolean;
 }
-export declare const Radio: ({ ref, id, label, name, value, onChange, isDisabled, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Radio: React.ForwardRefExoticComponent<Omit<RadioProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,5 @@
+interface DisplayFormErrorProps {
+    message: string | undefined;
+}
+export declare const DisplayFormError: ({ message }: DisplayFormErrorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -4,11 +4,11 @@ export interface TextareaProps {
     label: string;
     name: string;
     placeholder: string;
-    value: string;
+    value?: string | undefined;
     onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
     isRequired?: boolean;
     isDisabled?: boolean;
-    errorList?: string[];
+    errorMessage?: string | undefined;
     helpText?: string;
     hasHiddenLabel?: boolean;
     rows?: number;
@@ -18,5 +18,6 @@ export interface TextareaProps {
     form?: string;
     maxLength?: number;
     autofocus?: boolean;
+    defaultValue?: string;
 }
-export declare const Textarea: ({ ref, label, name, placeholder, value, onChange, isRequired, isDisabled, errorList, helpText, hasHiddenLabel, rows, cols, readonly, wrap, form, maxLength, autofocus, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/lib/src/components/forms/toggle/Toggle.d.ts

@@ -8,5 +8,6 @@ export interface ToggleProps {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     isDisabled?: boolean;
     isChecked?: boolean;
+    defaultChecked?: boolean;
 }
-export declare const Toggle: ({ ref, id, label, name, value, onChange, isDisabled, isChecked, ...rest }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -6,3 +6,5 @@ export { Input } from './forms/input';
 export { Radio } from './forms/radio';
 export { Checkbox } from './forms/checkbox';
 export { Toggle } from './forms/toggle';
+export { Textarea } from './forms/textarea';
+export { PasswordInput } from './forms/passwordInput';

package/lib/src/index.d.ts

@@ -11,3 +11,5 @@ export { Input } from './components/forms/input';
 export { Radio as RadioInput } from './components/forms/radio';
 export { Checkbox } from './components/forms/checkbox';
 export { Toggle as ToggleInput } from './components/forms/toggle';
+export { Textarea } from './components/forms/textarea';
+export { PasswordInput } from './components/forms/passwordInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -32,6 +32,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@hookform/resolvers": "^3.9.0",
     "@indico-data/utils": "^0.0.5",
     "@popperjs/core": "^2.11.8",
     "@react-aria/radio": "^3.10.3",
@@ -49,6 +50,7 @@
     "react-data-table-component": "^7.6.2",
     "react-day-picker": "^8.10.1",
     "react-grid-system": "^8.2.0",
+    "react-hook-form": "^7.52.1",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-stately": "^3.31.0",
@@ -59,7 +61,8 @@
     "uuid": "^9.0.1",
     "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.0.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Checkbox, CheckboxProps } from './Checkbox';
-import { SetStateAction, useState } from 'react';
+import { Checkbox } from './Checkbox';
+import { useState } from 'react';
 
 const meta: Meta = {
   title: 'Forms/Checkbox',

package/src/components/forms/checkbox/Checkbox.tsx

@@ -1,4 +1,3 @@
-import { isChecked } from '@indico-data/utils/dist/validators';
 import React from 'react';
 
 export interface CheckboxProps {
@@ -10,46 +9,38 @@ export interface CheckboxProps {
   isChecked?: boolean | undefined;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   isDisabled?: boolean;
+  defaultChecked?: boolean;
 }
 
-export const Checkbox = ({
-  ref,
-  id,
-  label,
-  name,
-  value,
-  onChange,
-  isDisabled,
-  isChecked = false,
-  ...rest
-}: CheckboxProps) => {
-  return (
-    <div className="form-control">
-      <div className="checkbox-wrapper">
-        <input
-          data-testid={`form-checkbox-input-${name}`}
-          className="checkbox-input"
-          type="checkbox"
-          id={id}
-          checked={isChecked}
-          name={name}
-          value={value}
-          disabled={isDisabled}
-          ref={ref}
-          onChange={onChange}
-          tabIndex={0}
-          aria-describedby={id}
-          aria-label={label}
-          {...rest}
-        />
-        <label
-          htmlFor={id}
-          className="checkbox-input-label"
-          data-testid={`label-checkbox-input-${name}`}
-        >
-          {label}
-        </label>
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ id, label, name, value, onChange, isDisabled, isChecked = false, ...rest }, ref) => {
+    return (
+      <div className="form-control">
+        <div className="checkbox-wrapper">
+          <input
+            data-testid={`form-checkbox-input-${name}`}
+            className="checkbox-input"
+            type="checkbox"
+            id={id}
+            name={name}
+            value={value}
+            disabled={isDisabled}
+            ref={ref}
+            onChange={onChange}
+            tabIndex={0}
+            aria-describedby={id}
+            aria-label={label}
+            {...rest}
+          />
+          <label
+            htmlFor={id}
+            className="checkbox-input-label"
+            data-testid={`label-checkbox-input-${name}`}
+          >
+            {label}
+          </label>
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  },
+);

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

@@ -0,0 +1,134 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as Form from './Form.stories';
+
+<Meta title="Forms/Form" name="Form" />
+
+# Form
+
+The Form component is a wrapper for the html form element. It has the added value that it will apply the `onSubmit` event to the form element and prevent the default behavior of the form submission. This will allow you to handle the form submission in a more controlled manner. We also leverage two third party libraries in this source code demo, however, they are not baked into the form component. They mainly serve as an example of how we would build a form in our applications.
+
+
+<Canvas
+  of={Form.Uncontrolled}
+  source={{
+    code: `
+    // This sets the form validation
+  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(),
+  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().optional(),
+  rpgClass: z.enum(['Rogue', 'Warrior', 'Mage']).optional(),
+  toggle: z.boolean().optional(),
+})
+.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) });
+
+<Form 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>
+    `,
+  }}
+/>
+
+<Controls of={Form.Uncontrolled} />
+
+## Libraries
+- [React Hook Form](https://react-hook-form.com/) - We will leverage this to simplify our form state
+- [Zod](https://www.freecodecamp.org/news/react-form-validation-zod-react-hook-form/) - We will leverage this to validate our form data
+
+## Quick tips
+- Use the `zodResolver` to validate your form data
+- Use the `useForm` hook to manage your form state for uncontrolled forms and the `Controller` component for controlled forms
+- Use the `onSubmit` event to handle your form submission
+- Zod and React Hook Form manage your errors. Only one error may be displayed at once. In the case a value is required and it exceeds the max length, since the required has been met, it will warn you about max length. However if the value is empty, since required was the first error it will display that error.
+- In order to set a form field to required, you will need to set the `isRequired` prop to true on the input component AND set the `min` value to 1 in the zod schema. This is because the zod schema will not validate the required field if the value is empty. This is a library decision and not a bug. This is the best workaround we have.