@sebgroup/green-react 3.29.0 → 3.29.1-rc.20250730100346308

package/src/lib/form/form.spec.tsx

@@ -0,0 +1,195 @@
+import React from 'react'
+import { act, fireEvent, render, screen } from '@testing-library/react'
+
+import { FormItems, RadioGroup, TextInput } from '.'
+import Form from './form'
+import * as FormContext from './formContext'
+import { Checkbox, RadioButton } from './input/input'
+
+type MockComponentProps = {
+  /* eslint-disable-next-line */
+  mockOnSubmit?: (values: any) => void
+}
+
+const MockComponent = ({ mockOnSubmit }: MockComponentProps) => (
+  <Form onFormSubmit={mockOnSubmit}>
+    <FormItems
+      name="text"
+      validate={{
+        message: 'fill in blank',
+        indicator: 'error',
+        rules: { type: 'Required' },
+      }}
+    >
+      <TextInput label="Text field" placeholder="eg: cat" value={''} />
+    </FormItems>
+    <button type="submit">submit</button>
+    <button type="reset">reset</button>
+  </Form>
+)
+
+describe('Form component', () => {
+  it('Should renders', () => {
+    render(<MockComponent />)
+    expect(screen.getByText('Text field')).toBeVisible()
+  })
+
+  it('Should render correct form direction', () => {
+    const { container } = render(<Form direction="horizontal">i am form</Form>)
+    expect(
+      container.querySelector('form')?.className.includes('horizontal'),
+    ).toBe(true)
+  })
+
+  it('Should render larger form size', () => {
+    const { container } = render(<Form formSize="lg">i am form</Form>)
+    expect(container.querySelector('form')?.className.includes('lg')).toBe(true)
+  })
+
+  it('Should show error message when input value is empty', () => {
+    const { container } = render(<MockComponent />)
+    expect(screen.queryByText('fill in blank')).toBeNull()
+    fireEvent.change(container.querySelector('input') as HTMLInputElement, {
+      target: { value: 'value' },
+    })
+    fireEvent.change(container.querySelector('input') as HTMLInputElement, {
+      target: { value: '' },
+    })
+    expect(screen.queryByText('fill in blank')).toBeVisible()
+  })
+
+  it('Should validate when form is submitted', async () => {
+    render(<MockComponent />)
+    expect(screen.queryByText('fill in blank')).toBeNull()
+    await act(async () => await fireEvent.click(screen.getByText('submit')))
+    expect(screen.queryByText('fill in blank')).toBeVisible()
+  })
+
+  it('Should reset forms input value', async () => {
+    const { container } = render(<MockComponent />)
+    await act(() =>
+      fireEvent.change(container.querySelector('input') as HTMLInputElement, {
+        target: { value: 'value' },
+      }),
+    )
+    expect(container.querySelector('input')?.value).toBe('value')
+    fireEvent.click(screen.getByText('reset'))
+    expect(container.querySelector('input')?.value).toBe('')
+  })
+
+  it('Should reset forms input error', async () => {
+    render(<MockComponent />)
+    expect(screen.queryByText('fill in blank')).toBeNull()
+    await act(() => fireEvent.click(screen.getByText('submit')))
+    expect(screen.queryByText('fill in blank')).not.toBeNull()
+    await act(() => fireEvent.click(screen.getByText('reset')))
+    expect(screen.queryByText('fill in blank')).toBeNull()
+  })
+
+  it('Should call onSubmitForm fn', async () => {
+    /* eslint-disable-next-line */
+    const mockFn: jest.Mock = jest
+      .fn()
+      .mockImplementation((value: any) => value)
+    render(<MockComponent mockOnSubmit={mockFn} />)
+    await act(() =>
+      fireEvent.change(screen.getByPlaceholderText('eg: cat'), {
+        target: { value: 'cat cat' },
+      }),
+    )
+    await act(() => fireEvent.click(screen.getByText('submit')))
+    expect(mockFn).toHaveBeenCalled()
+    expect(mockFn).toHaveBeenLastCalledWith({ text: 'cat cat' })
+  })
+
+  it('Should call not onSubmitForm fn when input empty', async () => {
+    /* eslint-disable-next-line */
+    const mockFn: jest.Mock = jest
+      .fn()
+      .mockImplementation((value: any) => value)
+    render(<MockComponent mockOnSubmit={mockFn} />)
+    await act(() => fireEvent.click(screen.getByText('submit')))
+    expect(mockFn).not.toBeCalled()
+  })
+
+  it('Should validate checkbox', async () => {
+    render(
+      <Form>
+        <FormItems
+          name="checkbox"
+          validate={{
+            message: 'required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <Checkbox label="checkbox" checked />
+        </FormItems>
+      </Form>,
+    )
+    expect(screen.queryByText('required')).toBeNull()
+    await act(() => fireEvent.click(screen.getByText('checkbox')))
+    expect(screen.queryByText('required')).not.toBeNull()
+  })
+
+  it('Should validate radio group', async () => {
+    render(
+      <Form>
+        <FormItems
+          name="checkbox"
+          validate={{
+            message: 'required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <RadioGroup label="Radio Group">
+            <RadioButton label="Radio Button 1" value="button1" />
+            <RadioButton label="Radio Button 2" value="button2" />
+          </RadioGroup>
+        </FormItems>
+        <button type="submit">submit</button>
+      </Form>,
+    )
+    expect(screen.queryByText('required')).toBeNull()
+    await act(() => fireEvent.click(screen.getByText('submit')))
+    expect(screen.queryByText('required')).not.toBeNull()
+  })
+
+  it('Should remove inputs and useEffect cleanup should run', async () => {
+    const mockFn: jest.Mock = jest.fn().mockImplementation((value) => value())
+    const mockFormContext: jest.SpyInstance = jest.spyOn(
+      FormContext,
+      'useFormContext',
+    )
+    mockFormContext.mockImplementation(() => ({
+      setValues: mockFn,
+      setErrors: mockFn,
+      setFields: mockFn,
+      errors: undefined,
+      values: undefined,
+    }))
+    const MockComponent = () => {
+      const [hide, setHide] = React.useState(true)
+      return (
+        <Form>
+          {hide && (
+            <FormItems name="blah">
+              <TextInput label="text" />
+            </FormItems>
+          )}
+          <button type="button" onClick={() => setHide(false)}>
+            click
+          </button>
+        </Form>
+      )
+    }
+
+    render(<MockComponent />)
+    expect(mockFn).toBeCalledTimes(1)
+    expect(screen.getByText('text')).toBeVisible()
+    await act(() => fireEvent.click(screen.getByText('click')))
+    expect(screen.queryByText('text')).toBeNull()
+    expect(mockFn).toBeCalledTimes(4)
+  })
+})

package/src/lib/form/form.stories.tsx

@@ -0,0 +1,171 @@
+import AlertRibbon from '../alert-ribbon/alert-ribbon'
+import {
+  Button,
+  ButtonGroup,
+  Checkbox,
+  EmailInput,
+  Form,
+  FormItems,
+  NumberInput,
+  RadioButton,
+  RadioGroup,
+  Text,
+  TextInput,
+} from './'
+
+const Styles = () => (
+  <style>
+    {`
+    form{
+      padding: 1rem 2rem;
+      background-color: white
+    }
+    .row .col-12 .form-group{
+      width: 100%;
+    }
+    .row .col-6 .form-group{
+      width: 100%;
+    }
+    .row .col-12 button{
+      width: 100%
+    }
+    .row{
+      margin-bottom: 1.2rem;
+    }
+    div[role='alert']{
+      width: 100%
+    }
+  `}
+  </style>
+)
+
+const Template = ({ children, ...props }) => (
+  <Form {...props}>
+    <Styles />
+    <h1>Form example</h1>
+    <div className="row">
+      <div className="col-12">
+        <AlertRibbon type="info" header="" isCloseable={false}>
+          Alert content placed inside a paragraph. Inline link will inherit
+          color from alert to make sure contrast is applied.
+        </AlertRibbon>
+      </div>
+    </div>
+    <h2>Inputs</h2>
+    <div className="row mb-0">
+      <div className="col-6 ">
+        <FormItems
+          name="text"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <TextInput id="namedField" label="Person name" />
+        </FormItems>
+      </div>
+      <div className="col-6">
+        <FormItems
+          name="number"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <NumberInput label="Numeric field" min={-1} max={10} step={2} />
+        </FormItems>
+      </div>
+      <div className="col-12">
+        <FormItems
+          name="email"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <EmailInput label="Email field" />
+        </FormItems>
+      </div>
+    </div>
+    <div className="row">
+      <div className="col-6">
+        <h2>Checkbox</h2>
+        <FormItems
+          name="checkbox"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <Checkbox label="Some checkbox" value="checkme" />
+        </FormItems>
+      </div>
+      <div className="col-6">
+        <h2 className="mb-3">Text</h2>
+        <Text>Static text</Text>
+      </div>
+    </div>
+    <div className="row mb-0">
+      <div className="col-12 mb-5">
+        <h2>Button Group</h2>
+      </div>
+      <div className="col-6">
+        <ButtonGroup>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+        </ButtonGroup>
+      </div>
+    </div>
+    <div className="row mb-0">
+      <div className="col-12 mb-5">
+        <h2>Radio Group</h2>
+      </div>
+      <div className="col-6">
+        <FormItems
+          name="radiobtnGroup"
+          validate={{
+            message: 'Required',
+            indicator: 'error',
+            rules: { type: 'Required' },
+          }}
+        >
+          <RadioGroup label="Groups">
+            <RadioButton label="Radio Button 1" value="button1" />
+            <RadioButton label="Radio Button 2" value="button2" />
+          </RadioGroup>
+        </FormItems>
+      </div>
+    </div>
+    <div className="row mb-0">
+      <div className="col-12 mb-5">
+        <h2>Buttons</h2>
+      </div>
+      <div className="col-12 mb-5">
+        <Button type="reset">Reset</Button>
+      </div>
+      <div className="col-12 mb-5">
+        <Button type="submit">Submit</Button>
+      </div>
+    </div>
+  </Form>
+)
+
+export default {
+  title: 'Components/Form',
+  component: Form,
+}
+
+export const Default = {
+  render: Template.bind({}),
+  name: 'Form',
+
+  args: {
+    onFormSubmit: (values) => {
+      alert('You have submitted these values: ' + JSON.stringify(values))
+    },
+  },
+}

package/src/lib/form/form.tsx

@@ -0,0 +1,18 @@
+import { HTMLProps, ReactNode } from 'react'
+
+import { FormDirection, Size } from '@sebgroup/extract'
+import { FormProvider } from './formContext'
+
+export interface FormProps extends HTMLProps<HTMLFormElement> {
+  children?: ReactNode
+  direction?: FormDirection
+  formSize?: Size
+  /* eslint-disable-next-line */
+  onFormSubmit?: (values: any) => void
+}
+
+export const Form: React.FC<FormProps> = (props: FormProps) => {
+  return <FormProvider {...props} />
+}
+
+export default Form

package/src/lib/form/formContext.spec.tsx

@@ -0,0 +1,71 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+
+import { FormItems, TextInput } from '.'
+import { FormProvider } from './formContext'
+
+const MockComponent = () => {
+  return (
+    <div>
+      <FormItems
+        name="text"
+        validate={{
+          message: 'fill in',
+          indicator: 'error',
+          rules: { type: 'Required' },
+        }}
+      >
+        <TextInput label="Text input" />
+      </FormItems>
+      <button type="submit">submit</button>
+      <button type="reset">reset</button>
+    </div>
+  )
+}
+
+describe('FormContext', () => {
+  it('Should render', () => {
+    render(
+      <FormProvider>
+        <MockComponent />
+      </FormProvider>,
+    )
+    expect(screen.getByText('Text input')).not.toBeNull()
+  })
+
+  it('Should call validateInput and setError when click submit', () => {
+    render(
+      <FormProvider>
+        <MockComponent />
+      </FormProvider>,
+    )
+    expect(screen.queryByText('fill in')).toBeNull()
+    fireEvent.click(screen.getByText('submit'))
+    expect(screen.queryByText('fill in')).not.toBeNull()
+  })
+
+  it('Should remove error after text onchange', () => {
+    const { container } = render(
+      <FormProvider>
+        <MockComponent />
+      </FormProvider>,
+    )
+    fireEvent.click(screen.getByText('submit'))
+    expect(screen.queryByText('fill in')).not.toBeNull()
+    fireEvent.change(container.querySelector('input') as HTMLInputElement, {
+      target: { value: 'i am value' },
+    })
+    expect(screen.queryByText('fill in')).toBeNull()
+  })
+
+  it('Should reset form', () => {
+    render(
+      <FormProvider>
+        <MockComponent />
+      </FormProvider>,
+    )
+    fireEvent.click(screen.getByText('submit'))
+    expect(screen.queryByText('fill in')).not.toBeNull()
+    fireEvent.click(screen.getByText('reset'))
+    expect(screen.queryByText('fill in')).toBeNull()
+  })
+})

package/src/lib/form/formContext.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+
+import { FormProps } from './form'
+import { validateInputValue } from './validateInput'
+
+interface FormContextReturnType {
+  /* eslint-disable-next-line */
+  setValues: React.Dispatch<React.SetStateAction<Record<string, any>>>
+  /* eslint-disable-next-line */
+  setErrors: React.Dispatch<React.SetStateAction<Record<string, any>>>
+  /* eslint-disable-next-line */
+  setFields: React.Dispatch<React.SetStateAction<Record<string, any>>>
+  /* eslint-disable-next-line */
+  errors?: Record<string, any>
+  /* eslint-disable-next-line */
+  values?: Record<string, any>
+}
+
+export const FormContext = React.createContext<FormContextReturnType>(
+  {} as FormContextReturnType,
+)
+
+export const useFormContext = () => {
+  return React.useContext(FormContext)
+}
+
+export const FormProvider = ({
+  children,
+  direction = 'vertical',
+  formSize = 'md',
+  onSubmit,
+  onFormSubmit,
+  ...props
+}: React.PropsWithChildren<FormProps>) => {
+  /* eslint-disable-next-line */
+  const [values, setValues] = React.useState<Record<string, any>>()
+  /* eslint-disable-next-line */
+  const [errors, setErrors] = React.useState<Record<string, any>>()
+  /* eslint-disable-next-line */
+  const [fields, setFields] = React.useState<Record<string, any>>({})
+
+  const formSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    let hasError = false
+    event.preventDefault()
+
+    Object.keys(fields).forEach((key: string) => {
+      const errorMessage: string = validateInputValue(
+        { name: key, value: values?.[key] },
+        fields[key],
+        setErrors,
+      ) as string
+      hasError = hasError || !!errorMessage
+    })
+
+    if (!hasError) {
+      onFormSubmit && onFormSubmit(values)
+    }
+  }
+
+  const resetForm = () => {
+    setValues({})
+    setErrors({})
+  }
+
+  return (
+    <FormContext.Provider
+      value={{ setValues, setErrors, setFields, errors, values }}
+    >
+      <form
+        className={[direction, `size-${formSize}`].join(' ')}
+        onSubmit={formSubmit}
+        {...props}
+        onReset={resetForm}
+      >
+        {children}
+      </form>
+    </FormContext.Provider>
+  )
+}

package/src/lib/form/formItems.spec.tsx

@@ -0,0 +1,80 @@
+import {
+  act,
+  findByLabelText,
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { FormItems, TextInput } from '.'
+import * as FormContext from './formContext'
+
+describe('FormItems Component', () => {
+  const mockFormContext: jest.SpyInstance = jest.spyOn(
+    FormContext,
+    'useFormContext',
+  )
+
+  beforeEach(() => {
+    mockFormContext.mockImplementation(() => ({
+      setValues: jest.fn(),
+      setErrors: jest.fn(),
+      setFields: jest.fn(),
+      errors: null,
+      values: null,
+    }))
+  })
+
+  it('Should render', async () => {
+    const { container } = render(
+      <FormItems name="text">
+        <TextInput label="Some field" />
+      </FormItems>,
+    )
+
+    const textInput = await findByLabelText(container, 'Some field')
+    expect(textInput).not.toBeNull()
+    expect(container.querySelector('input')?.getAttribute('name')).toBe('text')
+  })
+
+  it('Should fire onChangeText', async () => {
+    const mockFn: jest.Mock = jest.fn()
+    mockFormContext.mockImplementation(() => ({
+      setValues: mockFn,
+      setFields: jest.fn(),
+      setErrors: mockFn,
+    }))
+    const { container } = render(
+      <FormItems name="text">
+        <TextInput label="Some field" />
+      </FormItems>,
+    )
+
+    const input = await findByLabelText(container, 'Some field')
+
+    await act(async () => {
+      fireEvent.change(input as HTMLInputElement, {
+        target: { value: 'new value' },
+      })
+    })
+
+    expect(mockFn).toBeCalledTimes(2)
+  })
+
+  it('Should propagate onChange event to callback when provided', async () => {
+    const inputText = 'new value'
+    const user = userEvent.setup()
+    const mockFn: jest.Mock = jest.fn()
+    render(
+      <FormItems name="text" onChange={mockFn}>
+        <TextInput label="Some field" />
+      </FormItems>,
+    )
+    expect(mockFn).not.toBeCalled()
+    await act(async () => {
+      await user.type(screen.getByRole('textbox'), inputText)
+    })
+    expect(mockFn).toBeCalledTimes(inputText.length)
+  })
+})