@liguelead/design-system 0.0.37 → 0.0.39

package/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,300 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Stepper } from './Stepper'
+import Button from '../Button'
+
+const steps = [
+    { label: 'Seus dados', description: 'Nome e e-mail' },
+    { label: 'Empresa', description: 'Dados da empresa' },
+    { label: 'Convidar time', description: 'Colabore com sua equipe' },
+]
+
+const meta: Meta<typeof Stepper> = {
+    title: 'Navigation/Stepper',
+    component: Stepper,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: `
+Componente Stepper para indicar progresso em processos multi-etapas.
+
+**Orientações:**
+- \`horizontal\` — padrão, ideal para fluxos com poucas etapas
+- \`vertical\` — ideal para etapas com descrições longas ou em painéis laterais
+
+**Controle de estado:**
+- O prop \`currentStep\` (0-indexed) define qual etapa está ativa
+- Etapas anteriores ao \`currentStep\` são marcadas como concluídas automaticamente
+        `,
+            },
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        orientation: {
+            control: 'select',
+            options: ['horizontal', 'vertical'],
+            description: 'Orientação do stepper',
+            table: { defaultValue: { summary: 'horizontal' } },
+        },
+        currentStep: {
+            control: { type: 'number', min: 0, max: 2 },
+            description: 'Índice da etapa atual (0-indexed)',
+        },
+        steps: {
+            control: false,
+            description: 'Array de etapas com label e description opcional',
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        steps,
+        currentStep: 1,
+        orientation: 'horizontal',
+    },
+}
+
+export const Horizontal: Story = {
+    name: 'Horizontal',
+    parameters: {
+        docs: {
+            description: { story: 'Orientação padrão, ideal para fluxos lineares.' },
+        },
+    },
+    render: () => {
+        const [current, setCurrent] = useState(0)
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+                <Stepper steps={steps} currentStep={current} orientation="horizontal" />
+                <div style={{ display: 'flex', gap: 8 }}>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.max(0, c - 1))}
+                        disabled={current === 0}
+                    >
+                        Anterior
+                    </Button>
+                    <Button
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.min(steps.length - 1, c + 1))}
+                        disabled={current === steps.length - 1}
+                    >
+                        Próximo
+                    </Button>
+                </div>
+            </div>
+        )
+    },
+}
+
+export const Vertical: Story = {
+    name: 'Vertical',
+    parameters: {
+        docs: {
+            description: { story: 'Orientação vertical, ideal para painéis laterais ou etapas com descrições longas.' },
+        },
+    },
+    render: () => {
+        const [current, setCurrent] = useState(0)
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 320 }}>
+                <Stepper steps={steps} currentStep={current} orientation="vertical" />
+                <div style={{ display: 'flex', gap: 8 }}>
+                    <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.max(0, c - 1))}
+                        disabled={current === 0}
+                    >
+                        Anterior
+                    </Button>
+                    <Button
+                        size="sm"
+                        onClick={() => setCurrent(c => Math.min(steps.length - 1, c + 1))}
+                        disabled={current === steps.length - 1}
+                    >
+                        Próximo
+                    </Button>
+                </div>
+            </div>
+        )
+    },
+}
+
+export const SemDescricao: Story = {
+    name: 'Sem descrição',
+    parameters: {
+        docs: {
+            description: { story: 'Stepper apenas com labels, sem descrições.' },
+        },
+    },
+    args: {
+        steps: [
+            { label: 'Etapa 1' },
+            { label: 'Etapa 2' },
+            { label: 'Etapa 3' },
+            { label: 'Etapa 4' },
+        ],
+        currentStep: 2,
+        orientation: 'horizontal',
+    },
+}
+
+export const PrimeiraEtapa: Story = {
+    name: 'Primeira etapa',
+    args: {
+        steps,
+        currentStep: 0,
+        orientation: 'horizontal',
+    },
+}
+
+export const UltimaEtapa: Story = {
+    name: 'Última etapa',
+    args: {
+        steps,
+        currentStep: steps.length - 1,
+        orientation: 'horizontal',
+    },
+}
+
+// ─── Form multi-step example ────────────────────────────────────────────────
+
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import TextField from '../TextField'
+
+const formSteps = [
+    { label: 'Seus dados', description: 'Nome e e-mail' },
+    { label: 'Empresa', description: 'Dados da empresa' },
+    { label: 'Senha', description: 'Crie sua senha' },
+]
+
+const formSchema = z
+    .object({
+        name: z.string().min(3, 'Nome deve ter ao menos 3 caracteres'),
+        email: z.string().email('E-mail inválido'),
+        company: z.string().min(2, 'Nome da empresa obrigatório'),
+        role: z.string().min(2, 'Cargo obrigatório'),
+        password: z.string().min(6, 'Mínimo 6 caracteres'),
+        confirm: z.string(),
+    })
+    .refine(d => d.password === d.confirm, {
+        message: 'As senhas não coincidem',
+        path: ['confirm'],
+    })
+
+type FormData = z.infer<typeof formSchema>
+
+const stepFields: (keyof FormData)[][] = [
+    ['name', 'email'],
+    ['company', 'role'],
+    ['password', 'confirm'],
+]
+
+type StepFormProps = {
+    form: ReturnType<typeof useForm<FormData>>
+    onNext: () => void
+    onBack?: () => void
+}
+
+const StepForm0: React.FC<StepFormProps> = ({ form, onNext }) => {
+    const { register, formState: { errors }, trigger } = form
+    const handleNext = async () => {
+        if (await trigger(stepFields[0])) onNext()
+    }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <TextField label="Nome completo" register={register('name')} error={errors.name} requiredSymbol />
+            <TextField label="E-mail" type="email" register={register('email')} error={errors.email} requiredSymbol />
+            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                <Button size="sm" onClick={handleNext}>Próximo</Button>
+            </div>
+        </div>
+    )
+}
+
+const StepForm1: React.FC<StepFormProps> = ({ form, onNext, onBack }) => {
+    const { register, formState: { errors }, trigger } = form
+    const handleNext = async () => {
+        if (await trigger(stepFields[1])) onNext()
+    }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <TextField label="Empresa" register={register('company')} error={errors.company} requiredSymbol />
+            <TextField label="Cargo" register={register('role')} error={errors.role} requiredSymbol />
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                <Button size="sm" variant="outline" onClick={onBack}>Anterior</Button>
+                <Button size="sm" onClick={handleNext}>Próximo</Button>
+            </div>
+        </div>
+    )
+}
+
+const StepForm2: React.FC<StepFormProps> = ({ form, onNext, onBack }) => {
+    const { register, formState: { errors }, trigger } = form
+    const handleNext = async () => {
+        if (await trigger(stepFields[2])) onNext()
+    }
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <TextField label="Senha" type="password" register={register('password')} error={errors.password} requiredSymbol />
+            <TextField label="Confirmar senha" type="password" register={register('confirm')} error={errors.confirm} requiredSymbol />
+            <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
+                <Button size="sm" variant="outline" onClick={onBack}>Anterior</Button>
+                <Button size="sm" onClick={handleNext}>Finalizar</Button>
+            </div>
+        </div>
+    )
+}
+
+export const FormMultiStep: Story = {
+    name: 'Formulário multi-step',
+    parameters: {
+        docs: {
+            description: {
+                story: 'Dados preservados ao voltar entre etapas. Um único `useForm` no pai com `trigger` parcial por step.',
+            },
+        },
+    },
+    render: () => {
+        const [current, setCurrent] = useState(0)
+        const [done, setDone] = useState(false)
+
+        const form = useForm<FormData>({
+            resolver: zodResolver(formSchema),
+            mode: 'onTouched',
+        })
+
+        const next = () => setCurrent(c => c + 1)
+        const back = () => setCurrent(c => c - 1)
+        const finish = () => setDone(true)
+        const reset = () => { setCurrent(0); setDone(false); form.reset() }
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 480 }}>
+                <Stepper steps={formSteps} currentStep={done ? formSteps.length : current} orientation="horizontal" />
+                {done ? (
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'center', padding: 24 }}>
+                        <p style={{ margin: 0, fontWeight: 600 }}>Cadastro concluído!</p>
+                        <Button size="sm" variant="outline" onClick={reset}>Recomeçar</Button>
+                    </div>
+                ) : (
+                    <>
+                        {current === 0 && <StepForm0 form={form} onNext={next} />}
+                        {current === 1 && <StepForm1 form={form} onNext={next} onBack={back} />}
+                        {current === 2 && <StepForm2 form={form} onNext={finish} onBack={back} />}
+                    </>
+                )}
+            </div>
+        )
+    },
+}

package/components/Stepper/Stepper.styles.ts

@@ -0,0 +1,179 @@
+import styled, { css, keyframes } from 'styled-components'
+import { spacing, fontSize, fontWeight, lineHeight, radius } from '@liguelead/foundation'
+import { parseColor } from '../../utils'
+import {
+    TStepIndicatorProps,
+    TStepSeparatorProps,
+    TStepperContainerProps,
+} from './Stepper.types'
+import { StepIndicatorAppearance } from './Stepper.appearance'
+
+const popIn = keyframes`
+    0%   { transform: scale(0.5); opacity: 0; }
+    60%  { transform: scale(1.2); }
+    100% { transform: scale(1); opacity: 1; }
+`
+
+const fillLine = keyframes`
+    from { width: 0%; }
+    to   { width: 100%; }
+`
+
+const fillLineV = keyframes`
+    from { height: 0%; }
+    to   { height: 100%; }
+`
+export const StepperWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+`
+
+export const StepColumn = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-shrink: 0;
+`
+
+export const StepperLabelsRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    width: 100%;
+`
+
+export const StepLabelCell = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: ${spacing.spacing8}px;
+`
+
+export const StepperContainer = styled.ol<TStepperContainerProps>`
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    flex-direction: column;
+`
+
+export const StepperItem = styled.li<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${spacing.spacing8}px;
+`
+
+export const StepBody = styled.div<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${spacing.spacing8}px;
+`
+
+export const StepTrigger = styled.div<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    align-items: center;
+    cursor: default;
+    gap: ${spacing.spacing8}px;
+`
+
+export const StepIndicator = styled.div<TStepIndicatorProps>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    flex-shrink: 0;
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight600};
+    line-height: 1;
+    animation: ${popIn} 0.35s ease both;
+    transition:
+        width 0.3s ease,
+        height 0.3s ease,
+        background-color 0.3s ease,
+        border-color 0.3s ease,
+        box-shadow 0.3s ease;
+
+    ${({ $state }) => StepIndicatorAppearance($state)}
+`
+
+export const StepSeparator = styled.div<TStepSeparatorProps>`
+    border-radius: ${radius.radius4}px;
+    overflow: hidden;
+    position: relative;
+    background-color: ${({ theme }) => parseColor(theme.colors.neutral400)};
+
+    ${({ $orientation }) =>
+        $orientation === 'vertical'
+            ? css`
+                width: 2px;
+                min-height: ${spacing.spacing8}px;
+                margin-left: 13px;
+            `
+            : css`
+                height: 2px;
+                flex: 1;
+                min-width: ${spacing.spacing16}px;
+                margin: 14px ${spacing.spacing4}px 0;
+            `}
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: ${({ theme }) => parseColor(theme.colors.primary)};
+        border-radius: ${radius.radius4}px;
+
+        ${({ $completed, $orientation }) =>
+            $completed
+                ? $orientation === 'vertical'
+                    ? css`
+                        animation: ${fillLineV} 0.4s ease forwards;
+                    `
+                    : css`
+                        animation: ${fillLine} 0.4s ease forwards;
+                    `
+                : css`
+                    width: 0%;
+                    height: 0%;
+                `}
+    }
+`
+
+export const StepContent = styled.div<{ $orientation: 'horizontal' | 'vertical' }>`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+`
+
+export const StepLabel = styled.strong<{ $active: boolean }>`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${({ $active }) =>
+        $active ? fontWeight.fontWeight600 : fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme, $active }) =>
+        $active
+            ? parseColor(theme.colors.textDark)
+            : parseColor(theme.colors.textMedium)};
+    transition: color 0.3s ease;
+`
+
+export const StepDescription = styled.p`
+    font-size: ${fontSize.fontSize12}px;
+    font-weight: ${fontWeight.fontWeight400};
+    line-height: ${lineHeight.lineHeight20}px;
+    color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+    margin: 0;
+`
+
+export const StepNumber = styled.span`
+    font-size: ${fontSize.fontSize14}px;
+    font-weight: ${fontWeight.fontWeight600};
+    line-height: 1;
+`

package/components/Stepper/Stepper.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { CheckFatIcon, WarningCircleIcon } from '@phosphor-icons/react'
+import * as S from './Stepper.styles'
+import { TStepperProps, StepState } from './Stepper.types'
+
+const getStepState = (index: number, currentStep: number): StepState => {
+    if (index < currentStep) return 'completed'
+    if (index === currentStep) return 'active'
+    return 'pending'
+}
+
+const StepIndicatorContent: React.FC<{ state: StepState; index: number }> = ({
+    state,
+    index,
+}) => {
+    if (state === 'completed') return <CheckFatIcon size={14} weight="fill" />
+    if (state === 'error') return <WarningCircleIcon size={14} weight="fill" />
+    if (state === 'active') return <S.StepNumber>{index + 1}</S.StepNumber>
+    return null
+}
+
+export const Stepper: React.FC<TStepperProps> = ({
+    steps,
+    currentStep,
+    orientation = 'horizontal',
+    className,
+}) => {
+    if (orientation === 'horizontal') {
+        return (
+            <S.StepperWrapper className={className} aria-label="stepper">
+                {steps.map((step, index) => {
+                    const state = getStepState(index, currentStep)
+                    const isLast = index === steps.length - 1
+                    return (
+                        <React.Fragment key={index}>
+                            <S.StepColumn>
+                                <S.StepIndicator
+                                    $state={state}
+                                    aria-label={`Etapa ${index + 1}: ${step.label}`}
+                                    aria-current={state === 'active' ? 'step' : undefined}
+                                >
+                                    <StepIndicatorContent state={state} index={index} />
+                                </S.StepIndicator>
+                                <S.StepLabelCell role="listitem" aria-current={state === 'active' ? 'step' : undefined}>
+                                    <S.StepLabel $active={state === 'active'}>
+                                        {step.label}
+                                    </S.StepLabel>
+                                    {step.description && (
+                                        <S.StepDescription>
+                                            {step.description}
+                                        </S.StepDescription>
+                                    )}
+                                </S.StepLabelCell>
+                            </S.StepColumn>
+                            {!isLast && (
+                                <S.StepSeparator
+                                    role="separator"
+                                    aria-hidden="true"
+                                    $completed={state === 'completed'}
+                                    $orientation="horizontal"
+                                />
+                            )}
+                        </React.Fragment>
+                    )
+                })}
+            </S.StepperWrapper>
+        )
+    }
+
+    return (
+        <S.StepperContainer
+            $orientation="vertical"
+            className={className}
+            role="list"
+            aria-label="stepper"
+        >
+            {steps.map((step, index) => {
+                const state = getStepState(index, currentStep)
+                const isLast = index === steps.length - 1
+                return (
+                    <S.StepperItem
+                        key={index}
+                        $orientation="vertical"
+                        role="listitem"
+                        aria-current={state === 'active' ? 'step' : undefined}
+                    >
+                        <S.StepBody $orientation="vertical">
+                            <S.StepIndicator
+                                $state={state}
+                                aria-label={`Etapa ${index + 1}: ${step.label}`}
+                            >
+                                <StepIndicatorContent state={state} index={index} />
+                            </S.StepIndicator>
+                            <S.StepContent $orientation="vertical">
+                                <S.StepLabel $active={state === 'active'}>
+                                    {step.label}
+                                </S.StepLabel>
+                                {step.description && (
+                                    <S.StepDescription>
+                                        {step.description}
+                                    </S.StepDescription>
+                                )}
+                            </S.StepContent>
+                        </S.StepBody>
+                        {!isLast && (
+                            <S.StepSeparator
+                                role="separator"
+                                aria-hidden="true"
+                                $completed={state === 'completed'}
+                                $orientation="vertical"
+                            />
+                        )}
+                    </S.StepperItem>
+                )
+            })}
+        </S.StepperContainer>
+    )
+}

package/components/Stepper/Stepper.types.ts

@@ -0,0 +1,27 @@
+export type StepperOrientation = 'horizontal' | 'vertical'
+export type StepState = 'completed' | 'active' | 'pending' | 'error'
+
+export type TStepItem = {
+    label: string
+    description?: string
+}
+
+export type TStepperProps = {
+    steps: TStepItem[]
+    currentStep: number
+    orientation?: StepperOrientation
+    className?: string
+}
+
+export type TStepIndicatorProps = {
+    $state: StepState
+}
+
+export type TStepSeparatorProps = {
+    $completed: boolean
+    $orientation: StepperOrientation
+}
+
+export type TStepperContainerProps = {
+    $orientation: StepperOrientation
+}

package/components/Stepper/index.ts

@@ -0,0 +1,7 @@
+export { Stepper } from './Stepper'
+export type { 
+  TStepperProps, 
+  TStepItem, 
+  StepperOrientation, 
+  StepState 
+} from './Stepper.types'