@synetics/ui 0.7.0-alpha

package/src/components/organisms/stepper/adapters/atomosFormAdapter.ts

@@ -0,0 +1,163 @@
+/**
+ * Atomos FormProvider Adapter
+ * Connects Atomos FormProvider to the generic Stepper FormAdapter interface
+ */
+
+import { FormAdapter, FormState } from '../core/formAdapter'
+
+/**
+ * Atomos FormContext interface (from @atomos/ui contexts/form)
+ */
+interface AtomosFormContext {
+    state: {
+        data: Array<{
+            name: string
+            value: string | number | boolean | null
+            touched?: boolean
+        }>
+        originalData: Array<{
+            name: string
+            value: string | number | boolean | null
+        }>
+        isValid: boolean
+        isLoading: boolean
+    }
+    fields: Array<{
+        name: string
+        value: string | number | boolean | null
+        label: string
+        isValid: boolean
+        touched?: boolean
+    }>
+    errors: Record<string, string>
+    isValid: boolean
+    isLoading: boolean
+    getFieldValue: (name: string) => string | number | boolean | null
+    getFieldError: (name: string) => string | undefined
+    setFieldValue: (name: string, value: string | number | boolean | null) => void
+    setFieldError: (name: string, error: string) => void
+    validateField: (name: string) => boolean
+    validateAll: () => boolean
+    handleBlur: (name: string) => void
+    handleChange: (name: string, value: string | number | boolean | null) => void
+    reset: () => void
+    setLoading: (loading: boolean) => void
+}
+
+/**
+ * Creates a FormAdapter for Atomos FormProvider
+ * @param formContext - Atomos form context from useFormContext()
+ * @returns FormAdapter compatible with Stepper
+ */
+export const createAtomosFormAdapter = (formContext: AtomosFormContext): FormAdapter => {
+    return {
+        getFormState: (): FormState => {
+            // Build errors object from Atomos errors
+            const errors: Record<string, any> = {}
+            Object.entries(formContext.errors).forEach(([name, message]) => {
+                if (message) {
+                    errors[name] = { message, type: 'validation' }
+                }
+            })
+
+            // Build touched fields object
+            const touchedFields: Record<string, boolean> = {}
+            formContext.fields.forEach(field => {
+                if (field.touched) {
+                    touchedFields[field.name] = true
+                }
+            })
+
+            // Build dirty fields object (fields different from original)
+            const dirtyFields: Record<string, boolean> = {}
+            formContext.state.data.forEach(field => {
+                const original = formContext.state.originalData.find(o => o.name === field.name)
+                if (original && original.value !== field.value) {
+                    dirtyFields[field.name] = true
+                }
+            })
+
+            return {
+                errors,
+                touchedFields,
+                dirtyFields,
+                isValidating: formContext.isLoading,
+                defaultValues: formContext.state.originalData.reduce((acc, field) => ({
+                    ...acc,
+                    [field.name]: field.value
+                }), {})
+            }
+        },
+
+        trigger: async (fields?: string[]): Promise<boolean> => {
+            if (!fields || fields.length === 0) {
+                // Validate all fields
+                return formContext.validateAll()
+            }
+            
+            // Validate specific fields
+            let allValid = true
+            for (const fieldName of fields) {
+                const isValid = formContext.validateField(fieldName)
+                if (!isValid) {
+                    allValid = false
+                }
+            }
+            return allValid
+        },
+
+        getValues: (name?: string | string[]): any => {
+            if (!name) {
+                // Return all values as object
+                return formContext.fields.reduce((acc, field) => ({
+                    ...acc,
+                    [field.name]: field.value
+                }), {})
+            }
+            
+            if (Array.isArray(name)) {
+                // Return multiple values as array
+                return name.map(n => formContext.getFieldValue(n))
+            }
+            
+            // Return single value
+            return formContext.getFieldValue(name)
+        },
+
+        setValue: (name: string, value: any): void => {
+            formContext.setFieldValue(name, value)
+        },
+
+        resetField: (name: string): void => {
+            const original = formContext.state.originalData.find(f => f.name === name)
+            if (original) {
+                formContext.setFieldValue(name, original.value)
+                formContext.setFieldError(name, '')
+            }
+        },
+
+        clearErrors: (name?: string | string[]): void => {
+            if (!name) {
+                // Clear all errors - reset all field errors
+                formContext.fields.forEach(field => {
+                    formContext.setFieldError(field.name, '')
+                })
+                return
+            }
+            
+            if (Array.isArray(name)) {
+                // Clear multiple field errors
+                name.forEach(n => formContext.setFieldError(n, ''))
+            } else {
+                // Clear single field error
+                formContext.setFieldError(name, '')
+            }
+        },
+
+        reset: (): void => {
+            formContext.reset()
+        }
+
+        // Note: Atomos FormProvider doesn't have setFocus, so we omit it
+    }
+}

package/src/components/organisms/stepper/adapters/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Form Adapters Export
+ */
+
+export type { FormAdapter, FormState, SetValueOptions } from '../core/formAdapter';
+export { createAtomosFormAdapter } from './atomosFormAdapter';
+export { createRHFAdapter } from './rhfAdapter';

package/src/components/organisms/stepper/adapters/rhfAdapter.ts

@@ -0,0 +1,54 @@
+/**
+ * React Hook Form Adapter
+ * Wraps React Hook Form to work with the generic FormAdapter interface
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { UseFormReturn } from 'react-hook-form'
+
+import { FormAdapter, FormState, SetValueOptions } from '../core/formAdapter'
+
+/**
+ * Creates a FormAdapter from a React Hook Form instance
+ * @param useForm - The useForm object from React Hook Form
+ * @returns FormAdapter compatible with Stepper
+ */
+export const createRHFAdapter = (useForm: UseFormReturn<any, any>): FormAdapter => {
+    return {
+        getFormState: (): FormState => ({
+            errors: useForm.formState.errors,
+            touchedFields: useForm.formState.touchedFields,
+            dirtyFields: useForm.formState.dirtyFields,
+            isValidating: useForm.formState.isValidating,
+            defaultValues: useForm.formState.defaultValues
+        }),
+
+        trigger: async (fields?: string[]): Promise<boolean> => {
+            return await useForm.trigger(fields)
+        },
+
+        getValues: (name?: string | string[]): any => {
+            return useForm.getValues(name as any)
+        },
+
+        setValue: (name: string, value: any, options?: SetValueOptions): void => {
+            useForm.setValue(name, value, options)
+        },
+
+        resetField: (name: string): void => {
+            useForm.resetField(name)
+        },
+
+        clearErrors: (name?: string | string[]): void => {
+            useForm.clearErrors(name as any)
+        },
+
+        reset: (values?: any): void => {
+            useForm.reset(values)
+        },
+
+        setFocus: (name: string): void => {
+            useForm.setFocus(name)
+        }
+    }
+}

package/src/components/organisms/stepper/components/StepperDebug.syn

@@ -0,0 +1,454 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+/* eslint-disable sonarjs/no-duplicate-string */
+import './stepperDebug.css'
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from 'react'
+import { FileWithPath } from 'react-dropzone'
+
+import { defaultMockValues } from 'modules/services/accidentReport/mock/AccidentReportMock'
+
+import { StepperActionsKind } from '../core/actions'
+import { newStepAction } from '../core/helpers'
+import { StepField, StepItem, StepperDefaultValue, StepperError } from '../core/models'
+import { useStepperContext } from '../Stepper'
+
+/**
+ *StepperDebug description:
+ */
+const StepperDebug = (): JSX.Element => {
+    const [open, setOpen] = useState<boolean>(false)
+    const { currentState, goToStep, dispatch, validate, formAdapter } = useStepperContext()
+
+    const stepperState = currentState()
+
+    const fillUpHandleClick = () => {
+        fillUpTo(8)
+    }
+
+    const handleClick = () => {
+        setOpen((o) => (o = !o))
+    }
+
+
+    const goToField = (name: string) => {
+        formAdapter?.setFocus?.(name)
+        document.getElementById(`#${name}`)?.scroll()
+    }
+
+
+
+
+
+
+
+
+    const fillUpTo = async (stepId: number) => {
+
+
+        const allValues = Object.entries(defaultMockValues).map((values) => {
+            return { name: values[0], value: values[1] }
+        })
+
+
+        stepperState.steps.forEach((s) => {
+            if (s.id > stepId) return
+
+            setTimeout(() => {
+                s.fields.forEach((o) => {
+                    formAdapter?.setFocus?.(o.name)
+                    document.getElementById(`#${o.name}`)?.scroll()
+
+                    const val = allValues.find((el) => {
+                        if (el.name === o.name) {
+                            return el.value
+                        }
+                    })
+                    if (val) formAdapter.setValue(val.name, val.value, { shouldDirty: true, shouldTouch: true, shouldValidate: true })
+                })
+                setTimeout(() => {
+                    dispatch(newStepAction(StepperActionsKind.NAVIGATION_REQUEST, s.id + 1, 'goto'))
+                    validate('all')
+                }, 100)
+            }, 200)
+
+        })
+    }
+
+    const fillAllValues = (fields: StepField[], stepId: number) => {
+        formAdapter.clearErrors(fields.map((o) => o.name))
+        dispatch(newStepAction(StepperActionsKind.CLEAR_ALL_ERRORS, stepId, undefined))
+        fields.forEach((o) => setTimeout(() => fillValue(o.name, stepId, true), 1000))
+    }
+
+    const fillValue = (name: string, stepId: number, isMany: boolean) => {
+        if (!isMany) formAdapter.clearErrors(name)
+
+        if (
+            stepperState &&
+            stepperState.steps &&
+            stepperState.steps.find((o) => o.id === stepId)?.isVisible === false
+        )
+            return
+
+        const val = Object.entries(defaultMockValues).find((element) => {
+            if (element[0] === name) {
+                return element[1]
+            }
+        })
+        if (!val) return
+        formAdapter.setValue(name, val[1], { shouldDirty: true, shouldTouch: true, shouldValidate: true })
+        //trigger(name)
+    }
+
+    const resetStep = (fields: StepField[], stepId: number) => {
+        formAdapter.clearErrors(fields.map((o) => o.name))
+        fields.forEach((o) => {
+            formAdapter.resetField(o.name)
+        })
+        dispatch(newStepAction(StepperActionsKind.CLEAR_ALL_ERRORS, stepId, undefined))
+    }
+
+    const parseValue = (fieldName: string) => {
+        const val = formAdapter.getValues(fieldName)
+        if (val && val instanceof Date) {
+            return new Date(val).toLocaleDateString()
+        } else if ((val && val === true) || val === false) {
+            return (val as boolean) === true
+                ? 'true'
+                : (val as boolean) === false
+                    ? 'false'
+                    : 'undefined'
+        } else if (val && (val as FileWithPath) && (val as FileWithPath).name !== undefined) {
+            const file = val as FileWithPath
+            return file.name
+        } else {
+            return val
+        }
+    }
+
+
+
+    const customStepperDefaultValue = () =>
+        stepperState.defaultValue &&
+        stepperState.defaultValue.map((defaultValue: StepperDefaultValue, index: number) => {
+            return (
+                <div
+                    key={`${defaultValue.name}-${index}`}
+                    style={{
+                        background: '#a3ff7e',
+                        color: '#000000',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'flex-start',
+                        flexDirection: 'row'
+                    }}
+                >
+                    <div
+                        style={{
+                            color: '#ffffff',
+                            background: '#1d5e03',
+
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifySelf: 'flex-start',
+                            marginRight: '20px'
+                        }}
+                    >
+                        {defaultValue.name}
+                    </div>
+                    <div
+                        style={{
+                            color: '#000000',
+                            display: 'flex',
+
+                            alignItems: 'center',
+                            justifySelf: 'flex-start',
+                            marginRight: '20px'
+                        }}
+                    >
+                        {typeof defaultValue.value === 'object'
+                            ? JSON.stringify(defaultValue.value)
+                            : defaultValue.value}
+                    </div>
+                </div>
+            )
+        })
+
+    const errors = (id: number) =>
+        stepperState.errors &&
+        stepperState.errors
+            .filter((o) => o.stepId === id)
+            .map((error: StepperError, index: number) => {
+                return (
+                    <div
+                        key={`${error.stepId}-${id}-${index}`}
+                        style={{
+                            background: '#a82929',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-start',
+                            flexDirection: 'row'
+                        }}
+                    >
+                        <div
+                            style={{
+                                color: '#ede133',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifySelf: 'flex-start',
+                                marginRight: '20px'
+                            }}
+                        >
+                            step:{error.stepId}
+                        </div>
+                        <div
+                            style={{
+                                color: '#cacaca',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifySelf: 'flex-start',
+                                marginRight: '20px'
+                            }}
+                        >
+                            {error.fieldName}
+                        </div>
+                        <div
+                            style={{
+                                color: '#cacaca',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifySelf: 'flex-end',
+                                marginRight: '20px'
+                            }}
+                        >
+                            {error.error?.message}
+                        </div>
+                    </div>
+                )
+            })
+
+    const values = () =>
+        stepperState.steps &&
+        stepperState.steps.map((step: StepItem, index: number) => {
+            return (
+                <div
+                    key={`${step.id}${index}`}
+                    style={{
+                        cursor: 'pointer',
+                        borderColor: step.isActive ? '#ff00002' : '#582121',
+                        borderStyle: 'solid',
+                        borderWidth: step.isActive ? '1px' : '0px'
+                    }}
+                    onClick={() => goToStep(step.id)}
+                >
+                    <div
+                        style={{
+                            padding: '3px',
+                            color: step.isVisible ? ' #ffffff' : '#767676',
+                            background: step.isVisible ? '#c90202' : '#2f2f2f',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            flexDirection: 'row'
+                        }}
+                    >
+                        {step.id} {step.label}
+                        {stepperState.errors &&
+                            stepperState.errors.filter((o) => o.stepId === step.id)?.length}
+                        <div
+                            style={{
+                                position: 'relative',
+                                display: 'flex',
+                                minWidth: '10px',
+                                minHeight: '10px',
+                                borderRadius: '100%',
+                                background: stepperState?.isValid ? '#8fcb85' : '#b69898'
+                            }}
+                        ></div>
+
+                        {step.isVisible && (
+                            <>
+                                <button onClick={() => fillAllValues(step.fields, step.id)}>
+                                    fill all
+                                </button>
+                                <button onClick={() => resetStep(step.fields, step.id)}>
+                                    reset
+                                </button>
+                                <div
+                                    style={{
+                                        color: '#ffffff',
+                                        background:
+                                            step.isValid === true
+                                                ? '#399d11'
+                                                : step.isValid === false
+                                                    ? '#8f2323'
+                                                    : '#ffbb00',
+                                        position: 'relative',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        minWidth: '20px',
+                                        minHeight: '20px',
+                                        borderRadius: '100%'
+                                    }}
+                                >
+                                    {step.isValid === true ? 'V' : <></>}
+                                </div>
+                                <div
+                                    style={{
+                                        color: '#fafafa',
+                                        background:
+                                            step.isDirty === true ? '#886808' : 'transparent',
+                                        position: 'relative',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        minWidth: '20px',
+                                        minHeight: '20px',
+                                        borderRadius: '100%'
+                                    }}
+                                >
+                                    {step.isDirty === true ? 'D' : <></>}
+                                </div>
+                                <div
+                                    style={{
+                                        color: '#fafafa',
+                                        background:
+                                            step.isTouched === true ? '#124a5f' : 'transparent',
+                                        position: 'relative',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        minWidth: '20px',
+                                        minHeight: '20px',
+                                        borderRadius: '100%'
+                                    }}
+                                >
+                                    {step.isTouched === true ? 'T' : <></>}
+                                </div>
+                                <div
+                                    style={{
+                                        color: '#ffffff',
+                                        background:
+                                            step.isLocked === true ? '#3a1046' : 'transparent',
+                                        position: 'relative',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        minWidth: '20px',
+                                        minHeight: '20px',
+                                        borderRadius: '100%'
+                                    }}
+                                >
+                                    {step.isLocked === true ? 'L' : <></>}
+                                </div>
+
+                            </>
+                        )}
+                        <button onClick={() => fillUpTo(step.id)}>
+                            fill up to here
+                        </button>
+                    </div>
+
+                    <div>
+                        {step.fields?.map((field: StepField, sfindex: number) => {
+                            const hasError =
+                                stepperState.errors &&
+                                stepperState.errors.find((o) => o.fieldName === field.name) !==
+                                undefined
+                            return (
+                                <div
+                                    style={{
+                                        width: '100%',
+                                        background: hasError ? '#d9a0a0' : '#ffffff',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'stretch'
+                                    }}
+                                    key={`${field.name}${sfindex}`}
+                                >
+                                    <div
+                                        style={{
+                                            marginLeft: '5px',
+                                            marginRight: '5px',
+                                            width: '200px',
+                                            overflow: 'hidden',
+                                            background: hasError ? '#e89c9c' : 'transparent',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-start'
+                                        }}
+                                    >
+                                        {field.name}
+                                    </div>
+                                    <div
+                                        style={{
+                                            marginLeft: '5px',
+                                            marginRight: '5px',
+                                            width: '300px',
+                                            overflow: 'hidden',
+                                            background: hasError ? '#ffc2c2' : 'transparent',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-start'
+                                        }}
+                                    >
+                                        {parseValue(field.name)}
+                                    </div>
+                                    <div
+                                        style={{
+                                            marginLeft: '5px',
+                                            width: '50px',
+                                            overflow: 'hidden',
+                                            background: hasError ? '#ffda53' : 'transparent',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'flex-start'
+                                        }}
+                                    >
+                                        {field.defaultValue && JSON.stringify(field.defaultValue)}
+                                    </div>
+                                    <button onClick={() => goToField(field.name)}>goto</button>
+                                    <button onClick={() => fillValue(field.name, step.id, false)}>
+                                        fill
+                                    </button>
+                                </div>
+                            )
+                        })}
+                    </div>
+                    <div style={{ borderBottom: '1px black solid', background: '#f5f5f52' }}>
+                        ERRORS
+                    </div>
+                    <div>{errors(step.id)}</div>
+                    {index === 0 && (
+                        <>
+                            <div
+                                style={{ borderBottom: '1px black solid', background: '#f5f5f52' }}
+                            >
+                                DEFAULT STEPPER VALUES
+                            </div>
+                            <div> {customStepperDefaultValue()}</div>{' '}
+                        </>
+                    )}
+                </div>
+            )
+        })
+
+    return (
+        <>
+            <div className="setp-fillAll-toggle" onClick={fillUpHandleClick}>
+                fill all
+            </div>
+            <div className="setp-debug-toggle" onClick={handleClick}>
+                Debug
+            </div>
+            {open && (
+                <div className="stepper-debug">
+                    {values()}
+                </div>
+            )}
+        </>
+    )
+}
+export default StepperDebug