PROD-500 create intake - PROD-265_work-intake

src/App.tsx

@@ -5,14 +5,14 @@ import { toast, ToastContainer } from 'react-toastify'
 import { EnvironmentConfig } from './config'
 import { Header } from './header'
 import { analyticsInitialize, logInitialize, ProfileProvider } from './lib'
-import { RouteContext, RouteContextData } from './lib/route-provider'
+import { routeContext, RouteContextData } from './lib/route-provider'
 
 analyticsInitialize(EnvironmentConfig)
 logInitialize(EnvironmentConfig)
 
 const App: FC<{}> = () => {
 
-    const { allRoutes }: RouteContextData = useContext(RouteContext)
+    const { allRoutes }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => {

src/header/tool-selectors/tool-selectors-narrow/ToolSelectorsNarrow.tsx

@@ -1,14 +1,14 @@
 import classNames from 'classnames'
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { IconOutline, RouteContext, RouteContextData } from '../../../lib'
+import { IconOutline, routeContext, RouteContextData } from '../../../lib'
 
 import { ToolSelectorNarrow } from './tool-selector-narrow'
 import styles from './ToolSelectorsNarrow.module.scss'
 
 const ToolSelectorsNarrow: FC<{}> = () => {
 
-    const { toolsRoutes }: RouteContextData = useContext(RouteContext)
+    const { toolsRoutes }: RouteContextData = useContext(routeContext)
     const [isOpen, setIsOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     const closed: JSX.Element = <IconOutline.MenuIcon />

src/header/tool-selectors/tool-selectors-wide/ToolSelectorsWide.tsx

@@ -1,13 +1,13 @@
 import { FC, useContext } from 'react'
 
-import { RouteContext, RouteContextData } from '../../../lib'
+import { routeContext, RouteContextData } from '../../../lib'
 
 import { ToolSelectorWide } from './tool-selector-wide'
 import styles from './ToolSelectorsWide.module.scss'
 
 const ToolSelectorsWide: FC<{}> = () => {
 
-    const { toolsRoutes }: RouteContextData = useContext(RouteContext)
+    const { toolsRoutes }: RouteContextData = useContext(routeContext)
 
     const selectors: Array<JSX.Element> = toolsRoutes
         .map(route => <ToolSelectorWide key={route.title} route={route} />)

src/header/utility-selectors/UtilitySelector/ProfileSelector/ProfileSelector.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react'
 
-import { ProfileContext, ProfileContextData } from '../../../../lib'
+import { profileContext, ProfileContextData } from '../../../../lib'
 import '../../../../lib/styles/index.scss'
 
 import { ProfileLoggedIn } from './profile-logged-in'
@@ -12,7 +12,7 @@ const ProfileSelector: FC<{}> = () => {
     const {
         initialized,
         profile,
-    }: ProfileContextData = useContext(ProfileContext)
+    }: ProfileContextData = useContext(profileContext)
 
     // if we're not initialized, don't render anything
     if (!initialized) {

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/ProfileLoggedIn.tsx

@@ -1,13 +1,19 @@
 import { Dispatch, FC, SetStateAction, useContext, useState } from 'react'
 
-import { Avatar, IconOutline, logInfo , ProfileContext, ProfileContextData } from '../../../../../lib'
+import {
+    Avatar,
+    IconOutline,
+    logInfo,
+    profileContext,
+    ProfileContextData,
+} from '../../../../../lib'
 
 import { ProfilePanel } from './profile-panel'
 import styles from './ProfileLoggedIn.module.scss'
 
 const ProfileLoggedIn: FC<{}> = () => {
 
-    const { profile }: ProfileContextData = useContext(ProfileContext)
+    const { profile }: ProfileContextData = useContext(profileContext)
     const [profilePanelOpen, setProfilePanelOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     if (!profile) {

src/header/utility-selectors/UtilitySelector/ProfileSelector/profile-logged-in/profile-panel/ProfilePanel.tsx

@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom'
 
 import {
     authUrlLogout,
-    ProfileContext,
+    profileContext,
     ProfileContextData,
-    RouteContext,
+    routeContext,
     RouteContextData,
 } from '../../../../../../lib'
 
@@ -17,8 +17,8 @@ interface ProfilePanelProps {
 
 const ProfilePanel: FC<ProfilePanelProps> = (props: ProfilePanelProps) => {
 
-    const { profile }: ProfileContextData = useContext(ProfileContext)
-    const { getPath  }: RouteContextData = useContext(RouteContext)
+    const { profile }: ProfileContextData = useContext(profileContext)
+    const { getPath  }: RouteContextData = useContext(routeContext)
 
     if (!profile) {
         // this should never happen

src/lib/button/Button.tsx

@@ -4,16 +4,20 @@ import { Link } from 'react-router-dom'
 
 import styles from './Button.module.scss'
 
-interface ButtonProps {
-    readonly buttonStyle?: 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl'
+export type ButtonStyle = 'primary' | 'secondary' | 'tertiary' | 'text'
+export type ButtonType = 'button' | 'submit'
+
+export interface ButtonProps {
+    readonly buttonStyle?: ButtonStyle
     readonly className?: string
     readonly disable?: boolean
     readonly label: string
     readonly onClick?: (event?: any) => void
     readonly route?: string
-    readonly size?: 'sm' | 'md' | 'lg' | 'xl'
+    readonly size?: ButtonSize
     readonly tabIndex: number
-    readonly type?: 'button' | 'submit'
+    readonly type?: ButtonType
     readonly url?: string
 }
 

src/lib/button/Buttons.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Button />', () => {
+
+    test('it should render the content', () => { })
+})

src/lib/button/index.ts

@@ -1 +1,6 @@
-export {  default as Button } from './Button'
+export { default as Button } from './Button'
+export type {
+    ButtonSize,
+    ButtonStyle,
+    ButtonType
+} from './Button'

src/lib/form/Form.module.scss

@@ -0,0 +1,12 @@
+@import '../../lib/styles';
+
+.form-fields {
+    display: grid;
+    grid-template-columns: .5fr;
+    justify-content: flex-end;
+
+    @include ltemd {
+        grid-template-columns: 1fr;
+        justify-content: center;
+    }
+}

src/lib/form/Form.test.tsx

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom'
+
+describe('<Form />', () => {
+
+    test('it should render the form', () => {})
+})

src/lib/form/Form.tsx

@@ -0,0 +1,126 @@
+import { Dispatch, FormEvent, SetStateAction, useState } from 'react'
+
+import { Button } from '../button'
+import '../styles/index.scss'
+
+import { FormDefinition } from './form-definition.model'
+import {
+    FormErrorMessage,
+    formGetInputModel,
+    formInitializeValues,
+    formReset,
+    formSubmitAsync,
+    formValidateAndUpdate,
+} from './form-functions'
+import { FormInputModel } from './form-input.model'
+import styles from './Form.module.scss'
+import { TextInput } from './text-input'
+
+interface FormProps<ValueType, RequestType> {
+    readonly formDef: FormDefinition
+    readonly formValues?: ValueType
+    readonly requestGenerator: (inputs: ReadonlyArray<FormInputModel>) => RequestType
+    readonly resetOnError: boolean
+    readonly save: (value: RequestType) => Promise<void>
+}
+
+const Form: <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => JSX.Element
+    = <ValueType extends any, RequestType extends any>(props: FormProps<ValueType, RequestType>) => {
+
+        const [disableSave, setDisableSave]: [boolean, Dispatch<SetStateAction<boolean>>]
+            = useState<boolean>(true)
+
+        const [formDef, setFormDef]: [FormDefinition, Dispatch<SetStateAction<FormDefinition>>]
+            = useState<FormDefinition>({ ...props.formDef })
+
+        const [formKey, setFormKey]: [number, Dispatch<SetStateAction<number>>]
+            = useState<number>(Date.now())
+
+        function onChange(event: FormEvent<HTMLFormElement>): void {
+            const isValid: boolean = formValidateAndUpdate(event, formDef.inputs)
+            setFormDef({ ...formDef })
+            setDisableSave(!isValid)
+        }
+
+        function onReset(): void {
+            setFormDef({ ...formDef })
+            formReset(props.formDef.inputs, props.formValues)
+            setFormKey(Date.now())
+        }
+
+        async function onSubmit(event: FormEvent<HTMLFormElement>): Promise<void> {
+            const values: RequestType = props.requestGenerator(formDef.inputs)
+            formSubmitAsync<RequestType, void>(event, formDef.inputs, props.formDef.title, values, props.save, setDisableSave)
+                .then(() => {
+                    setFormKey(Date.now())
+                    formReset(formDef.inputs, props.formValues)
+                    setFormDef({ ...formDef })
+                })
+                .catch((error: FormErrorMessage) => {
+                    // only reset on save errors
+                    if (props.resetOnError && error === FormErrorMessage.save) {
+                        formReset(formDef.inputs, props.formValues)
+                        setFormKey(Date.now())
+                    }
+                    setFormDef({ ...formDef })
+                })
+        }
+
+        formInitializeValues(formDef.inputs, props.formValues)
+
+        const formInputs: Array<JSX.Element> = props.formDef.inputs
+            .map(input => formGetInputModel(props.formDef.inputs, input.name))
+            .map((inputModel, index) => {
+                return (
+                    <TextInput
+                        {...inputModel}
+                        key={inputModel.name}
+                        tabIndex={inputModel.notTabbable ? -1 : index + 1}
+                        type={inputModel.type || 'text'}
+                        value={inputModel.value}
+                    />
+                )
+            })
+
+        const buttons: Array<JSX.Element> = props.formDef.buttons
+            .map((button, index) => {
+                // if this is a reset button, set its onclick to reset
+                if (!!button.isReset) {
+                    button = {
+                        ...button,
+                        onClick: onReset,
+                    }
+                }
+                return (
+                    <Button
+                        {...button}
+                        disable={button.isSave && disableSave}
+                        key={button.label}
+                        tabIndex={button.notTabble ? -1 : index + props.formDef.inputs.length}
+                    />
+                )
+            })
+
+        return (
+            <form
+                action={''}
+                key={formKey}
+                onChange={onChange}
+                onSubmit={onSubmit}
+            >
+
+                <h6>{props.formDef.title}</h6>
+
+                <div className={styles['form-fields']}>
+                    {formInputs}
+                </div>
+
+                <div className='button-container'>
+                    {buttons}
+                </div>
+
+            </form>
+        )
+    }
+
+export default Form

src/lib/form/form-button.model.ts

@@ -0,0 +1,14 @@
+import { ButtonSize, ButtonStyle, ButtonType } from '../button'
+
+export interface FormButton {
+    readonly buttonStyle?: ButtonStyle
+    readonly isReset?: boolean
+    readonly isSave?: boolean
+    readonly label: string
+    readonly notTabble?: boolean
+    readonly onClick?: (event?: any) => void
+    route?: string
+    readonly size?: ButtonSize
+    readonly type?: ButtonType
+    readonly url?: string
+}

src/lib/form/form-definition.model.ts

@@ -0,0 +1,8 @@
+import { FormButton } from './form-button.model'
+import { FormInputModel } from './form-input.model'
+
+export interface FormDefinition {
+    readonly buttons: ReadonlyArray<FormButton>
+    readonly inputs: ReadonlyArray<FormInputModel>
+    readonly title: string
+}

src/lib/form-elements/form-field-wrapper/Form-Field-Wrapper.tsx → src/lib/form/form-field-wrapper/Form-Field-Wrapper.tsx

@@ -6,13 +6,13 @@ import { IconSolid } from '../../svgs'
 import styles from './Form-Field-Wrapper.module.scss'
 
 interface FormFieldWrapperProps {
-    children: ReactNode
-    dirty?: boolean
-    disabled: boolean
-    error?: string
-    hint?: string
-    label: string
-    name: string
+    readonly children: ReactNode
+    readonly dirty?: boolean
+    readonly disabled: boolean
+    readonly error?: string
+    readonly hint?: string
+    readonly label: string
+    readonly name: string
 }
 
 const FormFieldWrapper: FC<FormFieldWrapperProps> = (props: FormFieldWrapperProps) => {