@synetics/ui 0.7.0-alpha

package/src/components/organisms/stepper/core/reducer/goToStep.ts

@@ -0,0 +1,143 @@
+/* eslint-disable prefer-const */
+/* eslint-disable sonarjs/cognitive-complexity */
+import { newError } from '../../components/StepperTab'
+import { StepItem, StepperError, StepperState } from '../models'
+
+/** OCCURS When we JUMP TO a step  */
+export const goToStep = (state: StepperState): StepperState | undefined => {
+    if (
+        !state.sibling ||
+        !state.steps ||
+        state.steps.length === 0 ||
+        state.navigationRequest === 'unset'
+    )
+        return state
+
+    const siblings = state.sibling
+
+    let targetStep: StepItem | undefined
+    let canGo = false
+    let navigationRequestGoto = state.navigationRequestGoto
+    // get the first stepId which has errors in order to compare with the navigation request
+    // get all stepIDs having issues
+    const stepsIdHavingIssues = [
+        ...new Set(state.errors.map((o) => o.stepId).sort((a, b) => a - b))
+    ]
+
+    if (state.navigationRequest === 'back') {
+        targetStep = siblings.previousStep
+        canGo =
+            siblings.previousStep && siblings.currentStep
+                ? siblings.previousStep.id < siblings.currentStep.id &&
+                  siblings.previousStep.isVisible
+                : false
+    }
+
+    if (state.navigationRequest === 'next') {
+        targetStep = siblings.nextStep
+        canGo =
+            !(siblings?.currentStep && stepsIdHavingIssues.includes(siblings.currentStep?.id)) &&
+            siblings.canGoNext
+    }
+
+    if (state.navigationRequest === 'goto' && navigationRequestGoto !== undefined) {
+        // get first (that must/can be accessed) so we avoid to lock it ???
+        const firstErrorId = stepsIdHavingIssues[0]
+
+        if (
+            siblings.canGoNext &&
+            siblings.nextStep &&
+            siblings.nextStep.id < navigationRequestGoto &&
+            siblings.nextStep.isValid === undefined
+        ) {
+            navigationRequestGoto = siblings.nextStep.id
+        } else if (
+            firstErrorId !== undefined &&
+            firstErrorId !== state.navigationRequestGoto &&
+            Number(state.navigationRequestGoto) > firstErrorId
+        ) {
+            navigationRequestGoto = firstErrorId
+        }
+
+        targetStep = state.steps.find((o) => o.id === navigationRequestGoto)
+        canGo =
+            (targetStep &&
+                siblings &&
+                siblings?.currentStep &&
+                targetStep.id < siblings.currentStep.id &&
+                targetStep?.isVisible) ||
+            (targetStep?.isVisible && !targetStep.isLocked)
+                ? true
+                : false
+    }
+
+    if (!canGo || !targetStep) {
+        return {
+            ...state,
+            navigationRequest: 'unset',
+            navigationRequestGoto: undefined
+        } as StepperState
+    }
+
+    const errors: StepperError[] = []
+
+    if (targetStep.isLocked) {
+        // check if targetstep is valid or not
+        errors.push(
+            newError(
+                targetStep.id,
+                'step',
+                'step locked',
+                `unable to reach step ${targetStep.id} it is locked`
+            )
+        )
+    }
+    // check if current step is valid or not
+    if (
+        siblings?.currentStep &&
+        targetStep.id > siblings?.currentStep?.id &&
+        siblings?.currentStep?.isValid !== undefined &&
+        !siblings?.currentStep?.isValid
+    ) {
+        errors.push(
+            newError(
+                targetStep.id,
+                'step',
+                'step invalid',
+                `current step requires your attention it is not valid`
+            )
+        )
+    }
+
+    if (errors && errors.length > 0) {
+        return {
+            ...state,
+            navigationRequest: 'unset',
+            navigationRequestGoto: undefined
+        } as StepperState
+    }
+
+    const resetSelection = [
+        ...state.steps
+            .filter((o) => targetStep?.id !== o.id)
+            .map((_o: StepItem) => {
+                return {
+                    ..._o,
+                    isActive: false
+                }
+            })
+    ] as StepItem[]
+
+    targetStep.isActive = true
+
+    const finalSteps = [...resetSelection, targetStep].sort((a, b) => a.id - b.id)
+
+    return {
+        ...state,
+        previousStepId: state.currentStepId,
+        currentStepId: targetStep?.id,
+        navigationRequest: 'unset',
+        navigationRequestGoto: undefined,
+        steps: finalSteps
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/init.ts

@@ -0,0 +1,7 @@
+import { Payload, StepperState } from '../models'
+
+/** OCCURS when the stepper is initialized */
+export const init = (state: StepperState, payload: Payload): StepperState | undefined => {
+    const initState = payload.value as StepperState
+    return { ...state, ...initState } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/navigationRequest.ts

@@ -0,0 +1,16 @@
+import { Payload, StepperNavigationRequest, StepperState } from '../models'
+
+/** OCCURS When we request a navigation */
+export const navigationRequest = (
+    state: StepperState,
+    payload: Payload
+): StepperState | undefined => {
+    if (!payload.value) return state as StepperState
+    const navRequestType = payload.value as StepperNavigationRequest
+    if (!navRequestType) return state as StepperState
+    return {
+        ...state,
+        navigationRequest: navRequestType,
+        navigationRequestGoto: navRequestType === 'unset' ? undefined : payload.stepId
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/removeAllErrors.ts

@@ -0,0 +1,26 @@
+import { Payload, StepperState } from '../models'
+
+/** OCCURS When we remove all errors out of the stepper */
+export const removeAllErrors = (
+    state: StepperState,
+    payload: Payload
+): StepperState | undefined => {
+    const errors =
+        payload.stepId === -1 ? [] : state.errors.filter((o) => o.stepId !== payload.stepId)
+
+    const newSteps =
+        payload.stepId === -1
+            ? [...state.steps]
+            : [...state.steps.filter((o) => o.id === payload.stepId)]
+
+    const stepsOutput =
+        payload.stepId === -1
+            ? [...newSteps]
+            : [...state.steps.filter((o) => o.id !== payload.stepId), ...newSteps]
+
+    return {
+        ...state,
+        steps: stepsOutput.sort((a, b) => a.id - b.id),
+        errors
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/removeError.ts

@@ -0,0 +1,12 @@
+import { Payload, StepperState } from '../models'
+
+/** OCCURS When we add errors to the stepper */
+export const removeError = (state: StepperState, payload: Payload): StepperState | undefined => {
+    const errorToRemove = payload.value as string
+    return {
+        ...state,
+        errors: [
+            ...state.errors.filter((o) => o.fieldName !== errorToRemove && o.stepId !== payload.stepId)
+        ]
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/reset.ts

@@ -0,0 +1,44 @@
+import { StepItem, StepperState } from '../models'
+import { computeSiblingStatus } from './computeSiblingStatus'
+
+export const reset = (state: StepperState): StepperState | undefined => {
+    const clearedSteps = state.steps?.map((o) => {
+        return {
+            fields: o.fields,
+            isActive: o.id === 0,
+            isLocked: false,
+            isVisible: true,
+            isValid: undefined,
+            id: o.id,
+            label: o.label,
+            order: o.id,
+            isDirty: false,
+            isTouched: false,
+            hasBeenValidated: false
+        } as StepItem
+    })
+
+    const resetData: StepperState = {
+        steps: clearedSteps,
+        errors: [],
+        sibling: undefined,
+        data: '',
+        submissionTimes: 0,
+        previousStepId: undefined,
+        currentStepId: 0,
+        navigationRequest: 'unset',
+        navigationRequestGoto: undefined,
+        customValidators: undefined,
+        touchedFields: [],
+        dirtyFields: [],
+        loaded: false,
+        isValid: false,
+        defaultValue: [],
+        submitRequest: false,
+        ready: false
+    }
+
+    const computedState = computeSiblingStatus(resetData)
+
+    return computedState as StepperState
+}

package/src/components/organisms/stepper/core/reducer/setData.ts

@@ -0,0 +1,12 @@
+import { Payload, StepperState } from '../models'
+
+/** TODO: OCCURS When we presubmit the final form entries. */
+export const setData = (state: StepperState, payload: Payload): StepperState | undefined => {
+    if (!payload.value) return
+    const valueAsString = payload.value as string
+
+    return {
+        ...state,
+        data: valueAsString
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/setFieldDefaultValue.ts

@@ -0,0 +1,39 @@
+import { Payload, StepField, StepItem, StepperState } from '../models'
+
+/** OCCURS When we update a step's field default value property.
+ *  this concerns @StepField {...  defaultValue: ###}
+ */
+export const setFieldDefaultValue = (
+    state: StepperState,
+    payload: Payload
+): StepperState | undefined => {
+    // gets the concerned step
+    const stepState = state.steps.find((o) => o.id === payload.stepId) as StepItem
+    if (!stepState) return state as StepperState
+
+    // retrieve the stepField payload
+    const stepField = payload.value as StepField
+
+    // if no payload field's name  matches any of the steps's fields then leave process
+    if (
+        !stepField ||
+        !stepState.fields ||
+        !stepState.fields.find((o) => o.name === (stepField as StepField).name)
+    )
+        return state as StepperState
+
+    const newStepState = {
+        ...stepState,
+        fields: [
+            ...stepState.fields.filter((o) => o.name !== (stepField as StepField).name),
+            stepField
+        ]
+    } as StepItem
+
+    return {
+        ...state,
+        steps: [...state.steps.filter((o) => o.id !== newStepState.id), newStepState].sort(
+            (a, b) => a.id - b.id
+        )
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/setFields.ts

@@ -0,0 +1,41 @@
+import { Payload, StepField, StepperState } from '../models'
+
+/** OCCURS When we add a field  */
+export const setFields = (state: StepperState, payload: Payload): StepperState | undefined => {
+    // Get the payload field
+    const payloadFields = payload.value as string[]
+    if (!payloadFields || payloadFields.length === 0) return state as StepperState
+
+    // get the target step
+    const targetStep = state.steps.find((o) => o.id === payload.stepId)
+    if (!targetStep) return state as StepperState
+
+    const newFields: StepField[] = []
+
+    payloadFields.forEach((fieldName) => {
+        if (
+            targetStep.fields === undefined ||
+            !targetStep.fields.find((o) => o.name === fieldName)
+        ) {
+            newFields.push({ name: fieldName, defaultValue: undefined })
+        }
+    })
+    // define current new step version
+    const newStepVersion = {
+        ...targetStep,
+        fields: [...targetStep.fields, ...newFields]
+    }
+    // define new step collection
+    const newStepsVersion = [
+        ...state.steps.filter((o) => o.id !== payload.stepId),
+        newStepVersion
+    ].sort((a, b) => (a && b ? a.id - b.id : 0))
+
+    const isReady = newStepsVersion.every((o) => o.fields.length > 0)
+
+    return {
+        ...state,
+        steps: newStepsVersion,
+        ready: isReady
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/setStepperDefaultValue.ts

@@ -0,0 +1,33 @@
+import { Payload, StepperDefaultValue, StepperState } from '../models'
+
+/** OCCURS When we update a stepper common default value property.
+ *  this concerns @StepperDefaultValue {...  defaultValue: ###}
+ */
+export const setStepperDefaultValue = (
+    state: StepperState,
+    payload: Payload
+): StepperState | undefined => {
+    // gets the concerned step
+    // retrieve the stepField payload
+    const stepperDefaultValue = payload.value as StepperDefaultValue
+
+    if (
+        state.defaultValue &&
+        state.defaultValue.length > 0 &&
+        state.defaultValue.find((o) => o.name === stepperDefaultValue.name)?.value ===
+            stepperDefaultValue.value
+    )
+        return state as StepperState
+
+    const newDefaultValues = [
+        ...state.defaultValue.filter(
+            (o) => o.name !== (stepperDefaultValue as StepperDefaultValue).name
+        ),
+        stepperDefaultValue
+    ]
+
+    return {
+        ...state,
+        defaultValue: newDefaultValues
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/setSubmittedTimes.ts

@@ -0,0 +1,9 @@
+import { StepperState } from '../models'
+
+/** TODO: implemented if we need it or cleaned */
+export const setSubmittedTimes = (state: StepperState): StepperState | undefined => {
+    return {
+        ...state,
+        submissionTimes: state.submissionTimes + 1
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/setVisible.ts

@@ -0,0 +1,26 @@
+import { Payload, StepItem, StepperState, StepsVisibility } from '../models'
+
+/** OCCURS When we update a step's visible property. */
+export const setVisible = (state: StepperState, payload: Payload): StepperState | undefined => {
+    const stepsVisible = payload.value as StepsVisibility
+    const steps = state.steps.filter((o) => stepsVisible.ids.includes(o.id)) as StepItem[]
+    if (!steps && Array.isArray(steps)) return state as StepperState
+
+    steps.forEach((o) => {
+        o.isVisible = stepsVisible.visible
+
+        if (!stepsVisible.visible) {
+            // Reset this property in order to reset the form validity
+            o.isValid = undefined
+            // Reset this property in order to reset the form validation behavior
+            o.hasBeenValidated = false
+        }
+    })
+
+    return {
+        ...state,
+        steps: [...state.steps.filter((o) => !stepsVisible.ids.includes(o.id)), ...steps].sort(
+            (a, b) => a.id - b.id
+        )
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/submitRequest.ts

@@ -0,0 +1,19 @@
+import { Payload, StepperState } from '../models'
+
+/** TODO: OCCURS When we presubmit the final form entries. */
+export const submitRequest = (state: StepperState, payload: Payload): StepperState | undefined => {
+    const request = payload.value as boolean
+    if (!state.steps || state.steps.length === 0) return state as StepperState
+    const lastStep = state.steps[state.steps.length - 1]
+    // we do not want to recalculate sibling if current step is invalid
+    if (!lastStep) return state as StepperState
+    if (!request) lastStep.hasBeenValidated = true
+
+    const newSteps = [...state.steps.filter((o) => o.id !== lastStep.id), lastStep]
+
+    return {
+        ...state,
+        steps: newSteps.sort((a, b) => (a && b ? a.id - b.id : 1 + 2)),
+        submitRequest: request
+    } as StepperState
+}

package/src/components/organisms/stepper/core/reducer/updateFormCommon.ts

@@ -0,0 +1,82 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { newError } from '../../components/StepperTab'
+import { FormCommon, Payload, StepItem, StepperError, StepperState } from '../models'
+
+/** OCCURS: When form state (errors, touched, dirty) changes */
+export const updateFormCommon = (
+    state: StepperState,
+    payload: Payload
+): StepperState | undefined => {
+    if (!state || !state.steps || state.steps.length === 0) return undefined
+
+    const newSteps = [...state.steps]
+
+    const commonData = payload.value as FormCommon
+
+    // stepper errors collection
+    const errorsOutput: StepperError[] = []
+
+    // loop each RHF Error object childs
+    Object.entries(commonData.errors).forEach((error) => {
+        // get field name
+        const fieldName = error[0]
+        // define the error type
+        const errorType = error[1] ? (error[1]['type'] as string) : ''
+
+        let currentRelativeStepId = -1
+
+        newSteps.forEach((step: StepItem) => {
+            // skip errors on steps having no fields (not possible !) and which is not visible (available) N/A or not applicable.
+            if (!step.fields || !step.isVisible) return
+
+            if (step.fields.map((o) => o.name).includes(fieldName)) {
+                currentRelativeStepId = step.id
+            }
+        })
+
+        if (currentRelativeStepId === -1) return
+        // skip same errors
+        if (
+            state.errors.find(
+                (o) => o.fieldName === fieldName && o.stepId === currentRelativeStepId
+            )
+        )
+            return
+        errorsOutput.push(
+            newError(currentRelativeStepId, fieldName, `Field: ${fieldName}`, errorType)
+        )
+    })
+
+    const newDirtyFields: string[] = []
+    // loop each RHF Error object childs
+    Object.entries(commonData.dirtyFields).forEach((field) => {
+        newDirtyFields.push(field[0])
+    })
+
+    const newTouchedFields: string[] = []
+    // loop each RHF Error object childs
+    Object.entries(commonData.touchedFields).forEach((field) => {
+        newTouchedFields.push(field[0])
+    })
+
+    // set step Is Dirty
+    newSteps.forEach((step: StepItem) => {
+        // skip errors on steps having no fields (not possible !) and which is not visible (available) N/A or not applicable.
+
+        if (!step.fields) {
+            step.isDirty = false
+            step.isTouched = false
+            return
+        }
+        step.isDirty = step.fields.some((o) => newDirtyFields.includes(o.name))
+        step.isTouched = step.fields.some((o) => newTouchedFields.includes(o.name))
+    })
+
+    return {
+        ...state,
+        errors: [...state.errors, ...errorsOutput],
+        dirtyFields: newDirtyFields,
+        touchedFields: newTouchedFields,
+        steps: newSteps
+    } as StepperState
+}

package/src/components/organisms/stepper/core/state.ts

@@ -0,0 +1,106 @@
+import { StepperActionsKind } from './actions'
+import { Action, StepperState } from './models'
+import { addCustomValidators } from './reducer/addCustomValidators'
+import { addError } from './reducer/addError'
+import { addStep } from './reducer/addStep'
+import { computeSiblingStatus } from './reducer/computeSiblingStatus'
+import { computeValidation } from './reducer/computeValidation'
+import { goToStep } from './reducer/goToStep'
+import { init } from './reducer/init'
+import { navigationRequest } from './reducer/navigationRequest'
+import { removeAllErrors } from './reducer/removeAllErrors'
+import { removeError } from './reducer/removeError'
+import { reset } from './reducer/reset'
+import { setData } from './reducer/setData'
+import { setFieldDefaultValue } from './reducer/setFieldDefaultValue'
+import { setFields } from './reducer/setFields'
+import { setStepperDefaultValue } from './reducer/setStepperDefaultValue'
+import { setSubmittedTimes } from './reducer/setSubmittedTimes'
+import { setVisible } from './reducer/setVisible'
+import { submitRequest } from './reducer/submitRequest'
+import { updateFormCommon } from './reducer/updateFormCommon'
+
+export function stepperStateReducer(state: StepperState, action: Action) {
+    const { type, payload } = action
+
+    switch (type) {
+        case StepperActionsKind.NAVIGATION_REQUEST:
+            return navigationRequest(state, payload) as StepperState
+
+        case StepperActionsKind.UPDATE_RHF_COMMON:
+            return updateFormCommon(state, payload) as StepperState
+
+        case StepperActionsKind.COMPUTE_VALIDATION:
+            return computeValidation(state) as StepperState
+
+        case StepperActionsKind.COMPUTE_SIBLING:
+            return computeSiblingStatus(state) as StepperState
+
+        case StepperActionsKind.INIT:
+            return init(state, payload) as StepperState
+
+        case StepperActionsKind.RESET:
+            return reset(state) as StepperState
+
+        case StepperActionsKind.ADD_STEP:
+            return addStep(state, payload) as StepperState
+
+        case StepperActionsKind.SET_FIELDS:
+            return setFields(state, payload) as StepperState
+
+        case StepperActionsKind.GO_TO_STEP:
+            return goToStep(state) as StepperState
+
+        case StepperActionsKind.SET_DATA:
+            return setData(state, payload) as StepperState
+
+        case StepperActionsKind.ADD_ERROR:
+            return addError(state, payload) as StepperState
+
+        case StepperActionsKind.REMOVE_ERROR:
+            return removeError(state, payload) as StepperState
+
+        case StepperActionsKind.SET_SUBMITTED_TIMES:
+            return setSubmittedTimes(state) as StepperState
+
+        case StepperActionsKind.SET_VISIBLE:
+            return setVisible(state, payload) as StepperState
+
+        case StepperActionsKind.CLEAR_ALL_ERRORS:
+            return removeAllErrors(state, payload) as StepperState
+
+        case StepperActionsKind.SET_FIELD_DEFAULT_VALUE:
+            return setFieldDefaultValue(state, payload) as StepperState
+
+        case StepperActionsKind.SET_STEPPER_DEFAULT_VALUE:
+            return setStepperDefaultValue(state, payload) as StepperState
+
+        case StepperActionsKind.ADD_CUSTOM_VALIDATORS:
+            return addCustomValidators(state, payload) as StepperState
+
+        case StepperActionsKind.SUBMIT_REQUEST:
+            return submitRequest(state, payload) as StepperState
+        default:
+            return state as StepperState
+    }
+}
+
+export const INITIAL_STEPPER_STATE: StepperState = {
+    steps: [],
+    errors: [],
+    sibling: undefined,
+    data: '',
+    submissionTimes: 0,
+    previousStepId: undefined,
+    currentStepId: 0,
+    navigationRequest: 'unset',
+    navigationRequestGoto: undefined,
+    customValidators: undefined,
+    touchedFields: [],
+    dirtyFields: [],
+    loaded: false,
+    isValid: false,
+    defaultValue: [],
+    submitRequest: false,
+    ready: false
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Stepper Component - Multi-Step Form Management
+ * Form-library agnostic component for complex form flows
+ */
+
+// Main Components
+export { default as Step } from './Step.syn';
+export { default as Stepper, useStepperContext } from './Stepper.syn';
+export type { StepperContext, StepperProps } from './Stepper.syn';
+export { default as StepperSummary } from './StepperSummary.syn';
+
+// Core Types & Interfaces
+export type {
+  CustomValidation,
+  FormCommon,
+  StepField,
+  StepItem,
+  StepperDefaultValue,
+  StepperError,
+  StepperOptions,
+  StepperSibling,
+  StepperState,
+  ValidationMode,
+} from './core/models';
+
+// Form Adapter
+export type { FormAdapter, FormState, SetValueOptions } from './core/formAdapter';
+
+// Adapters
+export { createRHFAdapter } from './adapters/rhfAdapter';
+
+// Utilities
+export { newStepAction, newVisibilitySkipPattern } from './core/helpers';
+export type { IStepAvailabilityTriggeredBy, ITrigger } from './core/models';