WIP: Reusable form

.eslintrc.json

@@ -68,6 +68,7 @@
     //   }
     // ],
     "react/jsx-props-no-spreading": "off",
+    "react/react-in-jsx-scope": "off",
     "no-unused-vars": "off",
     //    TODO: reinsert it once setup is complete
     //    "@typescript-eslint/no-unused-vars": ["error"],

package.json

@@ -18,11 +18,13 @@
   },
   "dependencies": {
     "formik": "^2.2.9",
+    "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.4.0",
     "react-select": "^5.4.0",
-    "sass": "^1.46.0"
+    "sass": "^1.46.0",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",

src/shared-resources/components/Button/Button.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import Spinner from '../Spinner/Spinner';
 
 interface Props {
-  type?: 'button' | 'submit';
+  type?: 'button' | 'submit' | 'reset';
   className?: string;
   onClick?: (e?: any) => void;
   children?: React.ReactNode;

src/shared-resources/components/Form/Form.d.ts

@@ -0,0 +1,18 @@
+import { SchemaOf } from 'yup';
+import { FormikInputProps } from '../Input/FormikInput';
+import { FormikSelectProps } from '../Select/FormikSelect';
+
+export type FieldType = 'text' | 'number' | 'select';
+
+export type FormField<
+  T extends number | string = string,
+  P extends FormikInputProps | FormikSelectProps = FormikInputProps
+> = {
+  name: string;
+  initialValue?: T;
+  type: FieldType;
+  validation?: SchemaOf<T>;
+  componentProps: P;
+  row?: number;
+  order?: number;
+};

src/shared-resources/components/Form/Form.stories.tsx

@@ -0,0 +1,37 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { string } from 'yup';
+
+import { FormikInputProps } from '../Input/FormikInput';
+import Form from './Form';
+import { FormField } from './Form.d';
+
+export default {
+  title: 'Form',
+  component: Form,
+} as ComponentMeta<typeof Form>;
+
+const Template: ComponentStory<typeof Form> = (args) => <Form {...args} />;
+
+const FullName: FormField<string, FormikInputProps> = {
+  name: 'fullName',
+  type: 'text',
+  validation: string().required('Full Name is required').nullable(),
+  componentProps: { placeholder: 'Full Name', name: 'fullName' },
+  row: 2,
+};
+
+const LastName: FormField<string, FormikInputProps> = {
+  name: 'lastName',
+  type: 'text',
+  validation: string().required('Last Name is required').nullable(),
+  componentProps: { placeholder: 'Last Name', name: 'lastName' },
+  row: 1,
+};
+
+export const Basic = Template.bind({});
+
+Basic.args = {
+  fields: [FullName, LastName],
+  handleSubmit: console.log,
+  className: 'w-48',
+};

src/shared-resources/components/Form/Form.tsx

@@ -0,0 +1,87 @@
+import {
+  Form as FormikForm,
+  Formik,
+  FormikHelpers,
+  FormikValues,
+} from 'formik';
+import { FC, Fragment, useMemo } from 'react';
+import { object, SchemaOf } from 'yup';
+
+import Button from '../Button/Button';
+
+import { FormField } from './Form.d';
+import { getFieldByType } from './helper';
+
+interface FormProps {
+  fields: FormField[];
+  handleSubmit: (
+    values: FormikValues,
+    helper: FormikHelpers<Record<string, any>>
+  ) => void;
+  className: string;
+}
+
+const Form: FC<FormProps> = (props) => {
+  const { fields: initialFields, handleSubmit, className } = props;
+
+  const fields = useMemo(() => {
+    const sorted = initialFields.sort((a, b) => {
+      if ((a.row || 0) > (b.row || 0)) return 1;
+      return -1;
+    });
+    console.log('[sorted]', sorted);
+    return initialFields;
+  }, [initialFields]);
+
+  const initialValues = useMemo(
+    () =>
+      fields.reduce((acc: FormikValues, curr: FormField) => {
+        acc[curr.name] = curr.initialValue ?? null;
+        return acc;
+      }, {}),
+    [fields]
+  );
+
+  const validationSchema = useMemo(
+    () =>
+      object().shape(
+        fields
+          .filter((field: FormField) => !!field.validation)
+          .reduce((acc: Record<string, SchemaOf<any>>, field) => {
+            acc[field.name] = field.validation!;
+            return acc;
+          }, {})
+      ),
+    [fields]
+  );
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={handleSubmit}
+    >
+      {() => (
+        <FormikForm className={className}>
+          {fields.map((field) => (
+            <Fragment key={field.name}>{getFieldByType(field)}</Fragment>
+          ))}
+
+          <div className='flex items-center justify-center w-full mt-4 space-x-2'>
+            <Button
+              type='reset'
+              className='text-gray-800 bg-white border-gray-400 rounded shadow hover:bg-gray-100'
+            >
+              Cancel
+            </Button>
+            <Button type='submit' className='text-white'>
+              Submit
+            </Button>
+          </div>
+        </FormikForm>
+      )}
+    </Formik>
+  );
+};
+
+export default Form;

src/shared-resources/components/Form/helper.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import FormikInput, { FormikInputProps } from '../Input/FormikInput';
+import FormikSelectMenu, { FormikSelectProps } from '../Select/FormikSelect';
+import { FormField } from './Form.d';
+
+export const getFieldByType = (field: FormField): ReactNode => {
+  switch (field.type) {
+    case 'number':
+    case 'text':
+      return (
+        <FormikInput
+          {...(field.componentProps as FormikInputProps)}
+          name={field.name}
+        />
+      );
+    case 'select':
+      return (
+        <FormikSelectMenu
+          {...(field.componentProps as FormikSelectProps)}
+          name={field.name}
+        />
+      );
+    default:
+      return null;
+  }
+};

src/shared-resources/components/Input/FormikInput.tsx

@@ -3,7 +3,8 @@ import React from 'react';
 import { InputProps } from 'shared-resources/types/Input.type';
 import Input from './Input';
 
-interface FormikInputProps extends Omit<InputProps, 'onChange' | 'value'> {
+export interface FormikInputProps
+  extends Omit<InputProps, 'onChange' | 'value'> {
   name: string;
 }
 

src/shared-resources/components/Select/FormikSelect.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import InputHelper from '../Inputhelper/InputHelper';
 import Select, { SelectProps } from './Select';
 
-interface FormikSelectProps extends Omit<SelectProps, 'onChange'> {
+export interface FormikSelectProps extends Omit<SelectProps, 'onChange'> {
   name: string;
 }