@synetics/ui 0.7.0-alpha

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

@@ -0,0 +1,144 @@
+import './stepperFooter.css'
+
+import { useEffect, useState } from 'react'
+import { Col, Container, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
+import { LoadingStatusEnum } from 'core/enums/LoadingStatusEnum'
+import AssuraButton from 'shared/components/AssuraButton/AssuraButton'
+import { getAccidentSubmitStatus } from 'shared/store/services/accidentReport/accidentReport.slice'
+
+import { useStepperContext } from '../Stepper'
+
+interface FooterButtonsVisibility {
+    canGoBack: boolean
+    canGoNext: boolean
+    canSubmit: boolean
+}
+
+/**
+ *StepperFooter description:
+ */
+const StepperFooter = (): JSX.Element => {
+    const { t } = useTranslation()
+    const { goBack, goNext, watchSiblings, currentState, submit } = useStepperContext()
+    const accidentReportSubmitStatus = useSelector(getAccidentSubmitStatus) as LoadingStatusEnum
+    const siblings = watchSiblings()
+    const state = currentState()
+
+    const [canFocus, setCanFocus] = useState(true)
+    const [footerState, setFooterState] = useState<FooterButtonsVisibility>({
+        canGoBack: false,
+        canGoNext: false,
+        canSubmit: false
+    })
+
+    const handleGoNext = () => {
+        setCanFocus(true)
+        goNext()
+    }
+
+    useEffect(() => {
+        const displayButtons = {
+            canGoBack: false,
+            canGoNext: false,
+            canSubmit: false
+        }
+
+        displayButtons.canGoBack = !!siblings?.canGoBack
+        displayButtons.canSubmit =
+            siblings?.currentStep?.id === state.steps?.length - 1 && !!siblings?.isLast
+
+        displayButtons.canGoNext = !displayButtons.canSubmit
+
+        setFooterState((_o) => (_o = { ...displayButtons }))
+    }, [JSON.stringify(siblings)])
+
+    const preSubmit = () => {
+        setCanFocus(true)
+        submit()
+    }
+
+    const backButton = () => (
+        <AssuraButton
+            id="stepper-footer-back"
+            classNames="stepper-footer-back"
+            onClick={goBack}
+            text={t('COMMON.PREVIOUS')}
+            variant={'secondary'}
+            icon={{
+                name: 'assura-back',
+                size: 24
+            }}
+        />
+    )
+    const nextButton = () => (
+        <AssuraButton
+            id="stepper-footer-next"
+            onClick={handleGoNext}
+            text={t('COMMON.NEXT')}
+            variant={'primary'}
+            classNames="stepper-footer-next"
+            iconPosition={'right'}
+            icon={{
+                name: 'assura-next',
+                size: 24,
+                marginLeft: 12
+            }}
+        />
+    )
+
+    const submitButton = () => (
+        <AssuraButton
+            id="stepper-footer-submit"
+            onClick={preSubmit}
+            text={t('COMMON.STEPPER_SUBMIT')}
+            variant={'primary'}
+            hasLoader={accidentReportSubmitStatus === LoadingStatusEnum.LOADING}
+        />
+    )
+
+    useEffect(() => {
+        if (state.errors && canFocus) {
+            const elements = Object.values(state.errors).reduce<HTMLElement[]>((acc, error) => {
+                const rhfRef = document.getElementById(error.fieldName)
+                if (rhfRef) {
+                    acc.push(rhfRef)
+                }
+                return acc
+            }, [])
+
+            elements.sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top)
+
+            if (elements.length > 0) {
+                const errorElement = elements[0]
+                errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+                errorElement.focus({ preventScroll: true })
+                setCanFocus(false)
+            }
+        }
+    }, [state, canFocus])
+
+    return (
+        <footer className={'stepper-footer m-bottom-40'}>
+            <Container className="stepper-footer-container p-0 m-0">
+                <Row style={{ flexDirection: 'row' }}>
+                    <Col
+                        xs={12}
+                        md={12}
+                        className="justify-space-between "
+                        style={{ flexDirection: 'row' }}
+                    >
+                        <>
+                            {footerState.canGoBack && backButton()}
+                            {footerState.canGoNext && nextButton()}
+                            {footerState.canSubmit && submitButton()}
+                        </>
+                    </Col>
+                </Row>
+            </Container>
+        </footer>
+    )
+}
+export default StepperFooter

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

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+///  this type { [x: string]: any } requires any because it must match the type as it is in RHF.
+import './stepperHeader.css'
+
+import { Col, Container, Row } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+import useWindowSize from 'core/services/useWindowSize'
+
+import { StepItem } from '../core/models'
+import { useStepperContext } from '../Stepper'
+import StepperTab from './StepperTab'
+
+export interface StepperHeaderProps {
+    debug?: boolean
+}
+/**
+ *StepperHeader description:
+ */
+const StepperHeader = ({ debug }: StepperHeaderProps): JSX.Element => {
+    const { isMobile, isMD } = useWindowSize()
+    const { t } = useTranslation()
+    const { goToStep, currentState } = useStepperContext()
+    const stepperState = currentState()
+
+    const currentStepLabel =
+        stepperState &&
+        stepperState?.sibling &&
+        stepperState?.sibling?.currentStep &&
+        t(stepperState?.sibling?.currentStep?.label)
+
+    return (
+        <header className={'stepper-header bg-gray50'}>
+            <Container>
+                <Row>
+                    <Col xl={12} sm={12} xs={12} className="stepper-header-inner-frame">
+                        {(isMobile || isMD) && (
+                            <div className="stepper-header-breadcrumb-paging headlineSmallMedium m-bottom-24">
+                                <span className="">{`${t('COMMON.STEP_TITLE_LABEL')} ${
+                                    stepperState &&
+                                    stepperState?.currentStepId &&
+                                    stepperState?.currentStepId + 1
+                                }/${stepperState?.steps?.length} : ${currentStepLabel}`}</span>
+                            </div>
+                        )}
+                        <div className={'stepper-header-breadcrumb'}>
+                            {stepperState &&
+                                stepperState.steps &&
+                                stepperState.steps.map((stepItem: StepItem) => {
+                                    return (
+                                        <StepperTab
+                                            key={`${stepItem.id}`}
+                                            stepItem={stepItem}
+                                            goToStep={goToStep}
+                                            debug={debug}
+                                        />
+                                    )
+                                })}
+                        </div>
+                    </Col>
+                </Row>
+            </Container>
+        </header>
+    )
+}
+export default StepperHeader

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

@@ -0,0 +1,118 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import './stepperTab.css'
+
+import { PropsWithChildren } from 'react'
+
+import useWindowSize from 'core/services/useWindowSize'
+import CheckMark from 'shared/assets/images/check.svg'
+import ExclamationMark from 'shared/assets/images/exclamationMark.svg'
+
+import { StepItem, StepperError } from '../core/models'
+
+export interface StepperTabProps extends Partial<PropsWithChildren<JSX.Element>> {
+    goToStep: (id: number) => void
+    stepItem: StepItem
+    debug?: boolean
+}
+
+export const newError = (
+    stepId: number,
+    fieldName: string,
+    errorName: string,
+    message: string
+): StepperError => {
+    return { stepId, fieldName, error: { name: errorName, message: message } } as StepperError
+}
+
+/**
+ * StepperTab description:
+ * This is the breadcrumb tab
+ */
+const StepperTab = ({ goToStep, stepItem, debug }: StepperTabProps): JSX.Element => {
+    const { isMobile, isMD } = useWindowSize()
+
+    const coll = [
+        stepItem.isActive ? 'A' : '',
+        stepItem.isDirty ? 'D' : '',
+        stepItem.isLocked ? 'L' : '',
+        stepItem.isTouched ? 'T' : '',
+        stepItem.hasBeenValidated ? 'H' : '',
+        stepItem.isValid !== undefined && stepItem.isValid === true
+            ? 'V'
+            : stepItem.isValid !== undefined && stepItem.isValid === false
+            ? 'NV'
+            : ''
+    ]
+
+    const stateOne = coll.filter((o) => o !== undefined && o.length > 0).join('-')
+    const stepperTabIconStyle = (): string => {
+        if (stepItem.isActive) return 'bg-primary'
+        if (!stepItem.isVisible) return 'not-available'
+        if (stepItem.isValid === true) return 'valid'
+        return 'c-gray100'
+    }
+
+    const stepperTabIconType = (): JSX.Element => {
+        if (stepItem.isActive)
+            return <div className={'labelExtraSmallMedium c-white'}>{stepItem.id + 1}</div>
+
+        if (stepItem.isValid === true) return <CheckMark />
+
+        if (stepItem.isValid === false) return <ExclamationMark />
+
+        if (!stepItem.isActive && !stepItem.isVisible)
+            return <i className="not-available-icon icon assura-close c-gray500" />
+
+        return <div className={'labelExtraSmallMedium c-gray500'}>{stepItem.id + 1}</div>
+    }
+
+    const stepperTabTextStyle = (): string => {
+        if (stepItem.isActive && stepItem.isValid === false) return 'c-primary labelSmallMedium'
+        if (stepItem.isActive) return 'c-black labelSmallMedium'
+        if (!stepItem.isVisible) return 'c-gray500 labelSmall'
+        if (stepItem.isValid === false) return 'c-primary labelSmall'
+        if (stepItem.isValid === undefined) return 'c-gray500 labelSmall'
+        return 'c-black labelSmall'
+    }
+
+    const stepperTabUnderlineStyle = (): string => {
+        if (stepItem.isActive) return 'bg-primary'
+        if (stepItem.isValid === true) return 'bg-gray300'
+        return 'bg-gray100'
+    }
+
+    return (
+        <div
+            style={{
+                width: isMobile ? '100%' : isMD ? '94px' : '140px',
+                height: isMobile || isMD ? '2px' : '55px'
+            }}
+            onClick={() => goToStep(stepItem.id)}
+            className={`stepper-tab`}
+            data-testid={`stepper-tab-${stepItem?.id}`}
+            data-test-is-active={stepItem.isActive ? true : false}
+            data-test-is-enabled={stepItem.isVisible ? true : false}
+            data-test-is-valid={stepItem?.isValid ? true : false}
+            data-test-is-touched={stepItem?.isTouched ? true : false}
+        >
+            {!(isMobile || isMD) && (
+                <div className="stepper-tab-top">
+                    <span className={`stepper-icon ${stepperTabIconStyle()}`}>
+                        {stepperTabIconType()}
+                    </span>
+                    <div className={`stepper-header-step-text ${stepperTabTextStyle()}`}>
+                        {stepItem.label} {debug && stateOne}
+                    </div>
+                </div>
+            )}
+
+            <div
+                style={{
+                    width: isMobile ? '100%' : isMD ? '94px' : '140px'
+                }}
+                className={`underline ${stepperTabUnderlineStyle()}`}
+            ></div>
+        </div>
+    )
+}
+export default StepperTab

package/src/components/organisms/stepper/components/stepperDebug.css

@@ -0,0 +1,72 @@
+.setp-debug-toggle {
+    cursor: pointer;
+    position: fixed;
+    top: 50px;
+    right: 50px;
+
+    border-width: 2px;
+    border-color: rgb(227, 8, 92);
+    border-style: solid;
+    border-radius: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background: rgb(183, 183, 183);
+    color: rgb(182, 0, 0);
+    z-index: 99999;
+}
+
+
+.setp-fillAll-toggle {
+    cursor: pointer;
+    position: fixed;
+    top: 50px;
+    right: 120px;
+
+    border-width: 2px;
+    border-color: rgb(227, 8, 92);
+    border-style: solid;
+    border-radius: 2px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    background: rgb(183, 183, 183);
+    color: rgb(182, 0, 0);
+    z-index: 99999;
+}
+
+
+.stepper-debug {
+    overflow-y: scroll;
+    position: fixed;
+    top: 200px;
+    right: 50px;
+    width: 600px;
+    word-wrap: normal;
+    height: 700px;
+    border-width: 2px;
+    border-color: rgb(166, 166, 166);
+    border-style: solid;
+    border-radius: 2px;
+    padding: 2px;
+    background: rgb(242, 242, 242);
+    color: rgb(0, 0, 0);
+    z-index: 9999;
+}
+
+.errors-report {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+    height: 200px;
+    border-width: 2px;
+    border-color: rgb(227, 8, 92);
+    border-style: solid;
+    border-radius: 2px;
+    padding: 50px;
+    background: rgb(183, 183, 183);
+    color: rgb(182, 0, 0);
+    z-index: 99999;
+}

package/src/components/organisms/stepper/components/stepperFooter.css

@@ -0,0 +1,28 @@
+.stepper-footer {
+    position: relative;
+   
+    width: 100%;    
+    height: 50px;
+    border: 0;
+    left: 0;
+    right: 0;
+    border-collapse: collapse;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+
+}
+
+.stepper-footer-container {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+        align-items: center;
+        justify-content: flex-start;
+}
+
+.stepper-footer-back {
+    margin-right: 15px;
+}

package/src/components/organisms/stepper/components/stepperHeader.css

@@ -0,0 +1,49 @@
+.stepper-header {
+    position: fixed;
+    top: 90px;
+    width: 100%;
+    height: 126px;
+    left: 0;
+    right: 0;
+    z-index: 10;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+}
+
+.stepper-header-inner-frame {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.stepper-header-breadcrumb {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row;
+    width: 100%;
+}
+
+.stepper-header-breadcrumb .stepper-tab {
+    margin-right: 16px;
+}
+
+.stepper-header-breadcrumb-paging {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-direction: row;
+    width: 100%;
+}

package/src/components/organisms/stepper/components/stepperTab.css

@@ -0,0 +1,97 @@
+.stepper-tab {
+    position: relative;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: 0;
+    border: 0;
+}
+
+.stepper-tab-top {
+    width: 100%;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+}
+
+.stepper-icon {
+    height: 24px;
+    width: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 100%;
+    padding: 8px;
+    margin-right: 12px;
+    border-width: 1px;
+    border-style: none;
+    background: var(--gray100);
+    border-color: var(--gray100);
+}
+
+.stepper-icon.valid {
+    border-style: solid;
+    background: transparent;
+    border-color: var(--success);
+}
+
+.stepper-icon.invalid {
+    color: var(--white);
+    background: var(--error);
+    border-color: var(--error);
+}
+
+.stepper-header-step-text {
+    line-height: 18.16px;
+    word-break: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex: 1;
+}
+
+.underline {
+    position: relative;
+    max-height: 2px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 96;
+    width: 100%;
+    flex: 1;
+}
+
+.not-available {
+    border-color: var(--gray500);
+    border-width: 1px;
+    border-style: solid;
+    background-color: transparent;
+}
+
+.not-available-icon {
+    border: 0;
+    background-color: transparent;
+}
+
+.error-step {
+    color: var(--error);
+    background: transparent;
+    border-color: var(--error);
+}
+
+.stepper-icon svg {
+    background: transparent;
+    display: flex;
+    padding: 0;
+    position: relative;
+    min-width: 24px;
+}

package/src/components/organisms/stepper/copy-to-atomos.ps1

@@ -0,0 +1,78 @@
+# Stepper Component Export Script
+# Use this to copy the Stepper to your Atomos repository
+
+param(
+    [string]$AtomosPath = "E:\Sources\atomos.dev"
+)
+
+$ErrorActionPreference = "Stop"
+
+Write-Host "🚀 Stepper to Atomos Migration Script" -ForegroundColor Cyan
+Write-Host "=" * 50 -ForegroundColor Cyan
+
+# Paths
+$sourcePath = "E:\Sources\e-b-svs\e-b-svs\src\modules\services\components\Stepper"
+$destPath = Join-Path $AtomosPath "src\organisms\stepper"
+
+# Verify source exists
+if (-not (Test-Path $sourcePath)) {
+    Write-Host "❌ Error: Source path not found: $sourcePath" -ForegroundColor Red
+    exit 1
+}
+
+# Verify Atomos repo exists
+if (-not (Test-Path $AtomosPath)) {
+    Write-Host "❌ Error: Atomos repository not found at: $AtomosPath" -ForegroundColor Red
+    Write-Host "Please clone atomos.dev or provide correct path using -AtomosPath parameter" -ForegroundColor Yellow
+    exit 1
+}
+
+Write-Host "📂 Source: $sourcePath" -ForegroundColor Green
+Write-Host "📂 Destination: $destPath" -ForegroundColor Green
+Write-Host ""
+
+# Ask for confirmation
+$confirm = Read-Host "Continue with copy? (y/n)"
+if ($confirm -ne 'y') {
+    Write-Host "❌ Cancelled by user" -ForegroundColor Yellow
+    exit 0
+}
+
+# Create destination directory
+Write-Host "📁 Creating destination directory..." -ForegroundColor Yellow
+New-Item -Path $destPath -ItemType Directory -Force | Out-Null
+
+# Copy files
+Write-Host "📋 Copying files..." -ForegroundColor Yellow
+Copy-Item -Path "$sourcePath\*" -Destination $destPath -Recurse -Force
+
+# Count files copied
+$fileCount = (Get-ChildItem -Path $destPath -Recurse -File).Count
+Write-Host "✅ Copied $fileCount files successfully!" -ForegroundColor Green
+
+# Summary
+Write-Host ""
+Write-Host "=" * 50 -ForegroundColor Cyan
+Write-Host "✅ COPY COMPLETE!" -ForegroundColor Green
+Write-Host "=" * 50 -ForegroundColor Cyan
+Write-Host ""
+Write-Host "📋 Next Steps:" -ForegroundColor Cyan
+Write-Host "1. cd $AtomosPath" -ForegroundColor White
+Write-Host "2. Update imports to use Atomos paths" -ForegroundColor White
+Write-Host "3. Add exports to src/organisms/index.ts" -ForegroundColor White
+Write-Host "4. Convert CSS to Tailwind (optional)" -ForegroundColor White
+Write-Host "5. pnpm build" -ForegroundColor White
+Write-Host "6. pnpm storybook" -ForegroundColor White
+Write-Host ""
+Write-Host "📖 See INTEGRATION_GUIDE.md for detailed instructions" -ForegroundColor Yellow
+Write-Host ""
+
+# Optional: Open in VSCode
+$openVSCode = Read-Host "Open Atomos repo in VS Code? (y/n)"
+if ($openVSCode -eq 'y') {
+    code $AtomosPath
+    Write-Host "✅ Opened in VS Code" -ForegroundColor Green
+}
+
+Write-Host ""
+Write-Host "🎉 Ready for Atomos integration!" -ForegroundColor Green

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

@@ -0,0 +1,25 @@
+/**
+ * Stepper reducer ACTIONS
+ */
+export enum StepperActionsKind {
+    INIT = 'INIT',
+    RESET = 'RESET',
+    ADD_STEP = 'ADD_STEP',
+    SET_FIELDS = 'SET_FIELDS',
+    GO_TO_STEP = 'GO_TO_STEP',
+    COMPUTE_SIBLING = 'COMPUTE_SIBLING',
+    COMPUTE_VALIDATION = 'COMPUTE_VALIDATION',
+    UPDATE_RHF_COMMON = 'UPDATE_RHF_COMMON',
+    SET_DATA = 'SET_DATA',
+    SET_SUBMITTED_TIMES = 'SET_SUBMITTED_TIMES',
+    SET_VISIBLE = 'SET_VISIBLE',
+    SET_STEP_SIZE = 'SET_STEP_SIZE',
+    NAVIGATION_REQUEST = 'NAVIGATION_REQUEST',
+    ADD_ERROR = 'ADD_ERROR',
+    SUBMIT_REQUEST = 'SUBMIT_REQUEST',
+    ADD_CUSTOM_VALIDATORS = 'ADD_CUSTOM_VALIDATORS',
+    REMOVE_ERROR = 'REMOVE_ERROR',
+    CLEAR_ALL_ERRORS = 'CLEAR_ALL_ERRORS',
+    SET_FIELD_DEFAULT_VALUE = 'SET_FIELD_DEFAULT_VALUE',
+    SET_STEPPER_DEFAULT_VALUE = 'SET_STEPPER_DEFAULT_VALUE'
+}