@hyphen/hyphen-components 2.9.0

package/src/components/Formik/Formik.stories.tsx

@@ -0,0 +1,307 @@
+import React, { ChangeEvent } from 'react';
+import { Field, Form, Formik } from 'formik';
+import { FormikTextInput } from './FormikTextInput/FormikTextInput';
+import { FormikCheckboxInput } from './FormikCheckboxInput/FormikCheckboxInput';
+import { FormikSelectInput } from './FormikSelectInput/FormikSelectInput';
+import { FormikSelectInputNative } from './FormikSelectInputNative/FormikSelectInputNative';
+import { FormikRadioGroup } from './FormikRadioGroup/FormikRadioGroup';
+import { FormikTextareaInput } from './FormikTextareaInput/FormikTextareaInput';
+import { DateInput } from '../DateInput/DateInput';
+import { FormikToggle } from './FormikToggle/FormikToggle';
+import { Button } from '../Button/Button';
+import { Box } from '../Box/Box';
+import { FormikTimePickerNative } from './FormikTimePickerNative/FormikTimePickerNative';
+import { FormikSelectInputInset } from './FormikSelectInputInset/FormikSelectInputInset';
+import { FormikTextareaInputInset } from './FormikTextareaInputInset/FormikTextareaInputInset';
+import { FormikTextInputInset } from './FormikTextInputInset/FormikTextInputInset';
+import { allModes } from '../../modes';
+
+const meta = {
+  title: 'Patterns/Formik Form',
+  parameters: {
+    chromatic: {
+      modes: {
+        light: allModes['light'],
+        dark: allModes['dark'],
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const FormikForm = () =>
+  (() => {
+    const flavorOptions = [
+      { value: 'chocolate', label: 'Chocolate' },
+      { value: 'strawberry', label: 'Strawberry' },
+      { value: 'vanilla', label: 'Vanilla' },
+    ];
+    const colorOptions = [
+      { value: 'red', label: 'red' },
+      { value: 'orange', label: 'orange' },
+      { value: 'yellow', label: 'yellow' },
+      { value: 'green', label: 'green' },
+      { value: 'blue', label: 'blue' },
+      { value: 'indigo', label: 'indigo' },
+      { value: 'violet', label: 'violet' },
+    ];
+    const sizeOptions = [
+      { id: 'small', value: 'small', label: 'Small' },
+      { id: 'medium', value: 'medium', label: 'Medium' },
+      { id: 'large', value: 'large', label: 'Large' },
+    ];
+    const handleValidation = (values: Record<string, any>) => {
+      const errors: Record<string, string> = {};
+      if (!values.firstName) {
+        errors.firstName = 'required';
+      }
+      if (!values.lastName) {
+        errors.lastName = 'required';
+      }
+      if (!values.areTermsChecked) {
+        errors.areTermsChecked = 'required';
+      }
+      if (!values.areTermsChecked2) {
+        errors.areTermsChecked2 = 'required';
+      }
+      if (!values.email) {
+        errors.email = 'required';
+      } else if (
+        !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
+      ) {
+        errors.email = 'Invalid email address';
+      }
+      if (!values.flavor) {
+        errors.flavor = 'required';
+      }
+      if (!values.sizes) {
+        errors.sizes = 'required';
+      }
+      if (!values.timePicker) {
+        errors.timePicker = 'required';
+      }
+      if (!values.dateInput) {
+        errors.dateInput = 'required';
+      }
+      if (!values.colors2) {
+        errors.colors2 = 'required';
+      }
+      if (!values.message) {
+        errors.message = 'required';
+      }
+      if (!values.country) {
+        errors.country = 'required';
+      }
+      return errors;
+    };
+    const handleSubmit = (
+      values: Record<string, any>,
+      { setSubmitting }: any
+    ) => {
+      // Make API calls here
+      setTimeout(() => {
+        setSubmitting(false);
+        alert(
+          // eslint-disable-line no-alert
+          `Submitted Successfully ->  ${JSON.stringify(values, null, 2)}`
+        );
+      }, 2000);
+    };
+    const formatOutput = (
+      values: Record<string, any>,
+      isSubmitting?: boolean
+    ) => {
+      return { ...values, isSubmitting };
+    };
+    return (
+      <Box maxWidth="500px" margin="lg auto" background="primary" padding="2xl">
+        <Formik
+          initialValues={{
+            firstName: '',
+            lastName: '',
+            email: '',
+            phone: '',
+            areTermsChecked: false,
+            areTermsChecked2: false,
+            flavor: null,
+            flavor2: null,
+            colors: [],
+            colors2: '',
+            sizes: null,
+            timePicker: null,
+            timePickerNative: null,
+            dateInput: '',
+            message: '',
+            country: '',
+          }}
+          validate={handleValidation}
+          validateOnChange={false}
+          onSubmit={handleSubmit}
+        >
+          {({ isSubmitting, values, setFieldValue, handleBlur, errors }) => (
+            <Form noValidate>
+              <Box gap="3xl">
+                <Field
+                  type="text"
+                  label="First Name"
+                  name="firstName"
+                  id="firstName"
+                  component={FormikTextInput}
+                  // With a custom onChange.
+                  // We preserve Formik's convention and relegate state form management back to the user.
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    setFieldValue('firstName', event.target.value);
+                  }}
+                  isRequired
+                />
+                <Field
+                  type="text"
+                  label="Last Name"
+                  name="lastName"
+                  id="lastName"
+                  component={FormikTextInput}
+                  isRequired
+                />
+                <Field
+                  label="Country"
+                  name="country"
+                  id="country"
+                  component={FormikTextInputInset}
+                  isRequired
+                />
+                <Field
+                  label="Email"
+                  name="email"
+                  id="email"
+                  component={FormikTextInput}
+                  isRequired
+                />
+                <Field
+                  label="Phone"
+                  name="phone"
+                  id="phone"
+                  component={FormikTextInput}
+                  type="tel"
+                />
+                <Field
+                  label="Flavor with Custom onChange"
+                  name="flavor"
+                  id="flavor"
+                  options={flavorOptions}
+                  component={FormikSelectInputNative}
+                  // With a custom onChange.
+                  // We preserve Formik's convention and relegate form state management back to the user.
+                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                    setFieldValue('flavor', event.target.value);
+                  }}
+                  isRequired
+                />
+                <Field
+                  label="Flavor without custom onChange"
+                  name="flavor2"
+                  id="flavor2"
+                  options={flavorOptions}
+                  component={FormikSelectInputNative}
+                />
+                <Field
+                  label="Multi-select Colors"
+                  name="colors"
+                  id="colors"
+                  isMulti
+                  options={colorOptions}
+                  component={FormikSelectInput}
+                />
+                <Field
+                  label="Describe your perfect meal"
+                  name="meal"
+                  id="meal"
+                  component={FormikTextareaInput}
+                />
+                <Field
+                  title="Sizes"
+                  name="sizes"
+                  id="sizes"
+                  options={sizeOptions}
+                  component={FormikRadioGroup}
+                  isRequired
+                />
+                <Field
+                  label="Select Time With Native Select"
+                  name="timePicker"
+                  id="timePicker"
+                  component={FormikTimePickerNative}
+                  isRequired
+                />
+                <Field
+                  label="Terms and Conditions"
+                  name="areTermsChecked"
+                  id="areTermsChecked"
+                  component={FormikCheckboxInput}
+                  isRequired
+                />
+                <Field
+                  label="Terms and Conditions Toggle"
+                  name="areTermsChecked2"
+                  id="areTermsChecked2"
+                  component={FormikToggle}
+                  isRequired
+                />
+                <Field
+                  label="Colors"
+                  name="colors2"
+                  id="colors2"
+                  options={colorOptions}
+                  component={FormikSelectInputInset}
+                  isRequired
+                />
+                <Field
+                  label="Message"
+                  name="message"
+                  id="message"
+                  component={FormikTextareaInputInset}
+                  isRequired
+                />
+                <DateInput
+                  datePickerProps={{
+                    onChange: (date) => {
+                      setFieldValue('dateInput', date as Date);
+                    },
+                    selected: values.dateInput as unknown as Date,
+                  }}
+                  textInputProps={{
+                    label: 'Date Input',
+                    name: 'dateInput',
+                    id: 'dateInput',
+                    error: errors.dateInput,
+                    isRequired: true,
+                    onClear: () => {
+                      setFieldValue('dateInput', null);
+                    },
+                    onBlur: handleBlur,
+                  }}
+                />
+                <Button type="submit" isLoading={isSubmitting}>
+                  Submit
+                </Button>
+                <pre className="font-family-monospace">
+                  {JSON.stringify(
+                    formatOutput(values, isSubmitting),
+                    undefined,
+                    2
+                  )}
+                </pre>
+                <pre className="font-family-monospace">
+                  {JSON.stringify(
+                    formatOutput(errors, undefined),
+                    undefined,
+                    2
+                  )}
+                </pre>
+              </Box>
+            </Form>
+          )}
+        </Formik>
+      </Box>
+    );
+  })();

package/src/components/Formik/FormikCheckboxInput/FormikCheckboxInput.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  act,
+} from '@testing-library/react';
+import { Formik, Form, Field, getIn, setIn, FormikValues } from 'formik';
+import { FormikCheckboxInput } from './FormikCheckboxInput';
+
+const testLabelName = 'test checkbox';
+
+const handleValidation = (testValueKey: string) => (values: FormikValues) =>
+  getIn(values, testValueKey)
+    ? {}
+    : setIn({}, testValueKey, 'Checkbox is required');
+
+const renderForm = (
+  initialValue: any,
+  props: any,
+  testValueKey = testLabelName
+) => (
+  <Formik
+    initialValues={{
+      [testLabelName]: initialValue,
+    }}
+    onSubmit={props.handleSubmit} // eslint-disable-line
+    validate={props.isRequired ? handleValidation(testValueKey) : undefined} // eslint-disable-line
+  >
+    {() => (
+      <Form noValidate>
+        <Field
+          label={testValueKey}
+          name={testValueKey}
+          id={testValueKey}
+          component={FormikCheckboxInput}
+          {...props}
+        />
+        <button type="submit">submit</button>
+      </Form>
+    )}
+  </Formik>
+);
+
+describe('FormikCheckboxInput', () => {
+  describe('States', () => {
+    describe('With default props', () => {
+      test('renders not disabled, checked, or invalid by default', () => {
+        const { getByLabelText } = render(renderForm(false, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+
+        expect(checkbox.checked).toBe(false);
+        expect(checkbox.disabled).toBe(false);
+        expect(checkbox.getAttribute('aria-invalid')).toBe('false');
+      });
+    });
+
+    describe('With initial value true', () => {
+      test('input is rendered checked when instantiated with isChecked true', () => {
+        const { getByLabelText } = render(renderForm(true, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        expect(checkbox.checked).toEqual(true);
+      });
+    });
+
+    describe('With initial value false', () => {
+      test('input is rendered unchecked when instantiated with isChecked false', () => {
+        const { getByLabelText } = render(renderForm(false, {}));
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        expect(checkbox.checked).toEqual(false);
+      });
+    });
+
+    describe('Disabled', () => {
+      test('input is rendered with the disabled attrbute when isDisabled is true', () => {
+        const { getByLabelText } = render(
+          renderForm(false, { isDisabled: true })
+        );
+        const checkbox = getByLabelText(testLabelName);
+        expect(checkbox).toBeDisabled();
+      });
+    });
+
+    describe('Correctly supplies aria-labelledby', () => {
+      test('assigns the "aria-labelledby" attribute and renders label with correct id, when label is provided', () => {
+        const { getByLabelText } = render(renderForm(false, {}));
+        expect(getByLabelText(testLabelName)).toHaveAttribute(
+          'aria-labelledby',
+          `${testLabelName}Label`
+        );
+        expect(
+          document.getElementById(`${testLabelName}Label`)
+        ).toBeInTheDocument();
+      });
+    });
+
+    describe('With Error', () => {
+      test('correctly renders the checkbox with an error message underneath', async () => {
+        const { getByText } = render(renderForm(false, { isRequired: true }));
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('Checkbox is required')).toBeInTheDocument()
+        );
+      });
+
+      test('correctly renders the checkbox with an error message in nested object', async () => {
+        const { getByText } = render(
+          renderForm(
+            { outer: { nested: false } },
+            { isRequired: true },
+            `${testLabelName}.outer.nested`
+          )
+        );
+        const submitButton = getByText('submit');
+
+        fireEvent.click(submitButton);
+        await waitFor(() =>
+          expect(screen.getByText('Checkbox is required')).toBeInTheDocument()
+        );
+      });
+    });
+  });
+
+  describe('Callback Handling', () => {
+    describe('onChange', () => {
+      test("Custom onChange event fires callback function, overwriting Formik's onChange", () => {
+        let value = false;
+        const mockedHandleChange = jest.fn((event) => {
+          value = event.target.checked;
+        });
+
+        const { getByLabelText } = render(
+          renderForm(value, { onChange: mockedHandleChange })
+        );
+        const checkbox = getByLabelText(testLabelName);
+
+        act(() => {
+          fireEvent.click(checkbox);
+        });
+
+        expect(mockedHandleChange).toHaveBeenCalledTimes(1);
+        expect(value).toBe(true);
+      });
+
+      test('Standard Formik onChange modifies the target value', async () => {
+        const { getByLabelText, getByText, queryByText } = render(
+          renderForm(false, { isRequired: true })
+        );
+        const submitButton = getByText('submit');
+        const checkbox = getByLabelText(testLabelName) as HTMLInputElement;
+        expect(checkbox.checked).toBe(false);
+
+        fireEvent.click(submitButton);
+        // expect(mockedHandleSubmit).toHaveBeenCalledTimes(0);
+        await waitFor(() =>
+          expect(getByText('Checkbox is required')).toBeInTheDocument()
+        );
+
+        act(() => {
+          fireEvent.click(checkbox);
+        });
+        expect(checkbox.checked).toBe(true);
+        await waitFor(() =>
+          expect(queryByText('Checkbox is required')).not.toBeInTheDocument()
+        );
+      });
+    });
+  });
+});

package/src/components/Formik/FormikCheckboxInput/FormikCheckboxInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  FormikTouched,
+  FormikErrors,
+  FieldAttributes,
+  FormikValues,
+  getIn,
+} from 'formik';
+import {
+  CheckboxInput,
+  CheckboxInputProps,
+} from '../../CheckboxInput/CheckboxInput';
+
+export interface FormikCheckboxInputProps
+  extends Omit<CheckboxInputProps, 'onChange'> {
+  field: FieldAttributes<HTMLInputElement>;
+  form: {
+    touched: FormikTouched<FormikValues>;
+    errors: FormikErrors<FormikValues>;
+  };
+  onChange?: CheckboxInputProps['onChange'];
+}
+
+export const FormikCheckboxInput: React.FC<FormikCheckboxInputProps> = ({
+  field: { name, onBlur, onChange: formikOnChange, value },
+  form: { touched, errors },
+  onChange,
+  id,
+  label,
+  ...props
+}) => (
+  <CheckboxInput
+    {...props}
+    id={id}
+    label={label}
+    error={getIn(touched, name) && getIn(errors, name)}
+    isChecked={value}
+    onBlur={onBlur}
+    onChange={onChange ?? formikOnChange} // eslint-disable-line
+  />
+);