@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/custom/stepper/Stepper.stories.tsx

@@ -0,0 +1,245 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Stepper, Step, StepIndicator, StepLabel, StepContent } from './Stepper'
+
+const meta: Meta<typeof Stepper> = {
+  title: 'Custom/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+  argTypes: {
+    activeStep: {
+      control: { type: 'number', min: 0, max: 4 },
+      description: 'Current active step (0-indexed)',
+    },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Stepper orientation',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Stepper>
+
+export const Default: Story = {
+  args: {
+    activeStep: 1,
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <Stepper {...args}>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Account</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Profile</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Review</StepLabel>
+      </Step>
+    </Stepper>
+  ),
+}
+
+export const Horizontal: Story = {
+  render: () => (
+    <View style={{ gap: 32 }}>
+      <View>
+        <Text className="text-text-secondary text-xs mb-4">Step 1 of 4</Text>
+        <Stepper activeStep={0} orientation="horizontal">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Details</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Address</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Payment</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Confirm</StepLabel>
+          </Step>
+        </Stepper>
+      </View>
+      <View>
+        <Text className="text-text-secondary text-xs mb-4">Step 3 of 4</Text>
+        <Stepper activeStep={2} orientation="horizontal">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Details</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Address</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Payment</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Confirm</StepLabel>
+          </Step>
+        </Stepper>
+      </View>
+    </View>
+  ),
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <Stepper activeStep={1} orientation="vertical">
+      <Step>
+        <StepIndicator />
+        <StepLabel>Create Account</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Set Up Profile</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Configure Settings</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Get Started</StepLabel>
+      </Step>
+    </Stepper>
+  ),
+}
+
+export const VerticalWithContent: Story = {
+  render: () => (
+    <Stepper activeStep={1} orientation="vertical">
+      <Step>
+        <StepIndicator />
+        <StepLabel>Create Account</StepLabel>
+        <StepContent>
+          <Text className="text-text-secondary text-sm">
+            Account creation is complete.
+          </Text>
+        </StepContent>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Set Up Profile</StepLabel>
+        <StepContent>
+          <View style={{ gap: 8 }}>
+            <Text className="text-text-secondary text-sm">
+              Fill in your profile details to continue.
+            </Text>
+            <View className="bg-surface-inset border border-border-default rounded-md px-3 py-2">
+              <Text className="text-text-secondary text-sm">Display Name</Text>
+            </View>
+          </View>
+        </StepContent>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Configure Settings</StepLabel>
+        <StepContent>
+          <Text className="text-text-secondary text-sm">
+            Adjust your preferences.
+          </Text>
+        </StepContent>
+      </Step>
+    </Stepper>
+  ),
+}
+
+export const StepStates: Story = {
+  render: () => (
+    <View style={{ gap: 24 }}>
+      <View>
+        <Text className="text-text-secondary text-xs mb-4">All steps upcoming</Text>
+        <Stepper activeStep={0} orientation="horizontal">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 1</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 2</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 3</StepLabel>
+          </Step>
+        </Stepper>
+      </View>
+      <View>
+        <Text className="text-text-secondary text-xs mb-4">All steps completed</Text>
+        <Stepper activeStep={3} orientation="horizontal">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 1</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 2</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 3</StepLabel>
+          </Step>
+        </Stepper>
+      </View>
+    </View>
+  ),
+}
+
+export const WithErrorState: Story = {
+  render: () => (
+    <Stepper activeStep={2} orientation="horizontal">
+      <Step>
+        <StepIndicator />
+        <StepLabel>Account</StepLabel>
+      </Step>
+      <Step status="error">
+        <StepIndicator />
+        <StepLabel>Verification</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Complete</StepLabel>
+      </Step>
+    </Stepper>
+  ),
+}
+
+export const ActiveStepProgression: Story = {
+  render: () => (
+    <View style={{ gap: 24 }}>
+      {[0, 1, 2, 3].map((activeStep) => (
+        <View key={activeStep}>
+          <Text className="text-text-secondary text-xs mb-2">
+            Active step: {activeStep}
+          </Text>
+          <Stepper activeStep={activeStep} orientation="horizontal">
+            <Step>
+              <StepIndicator />
+              <StepLabel>Account</StepLabel>
+            </Step>
+            <Step>
+              <StepIndicator />
+              <StepLabel>Profile</StepLabel>
+            </Step>
+            <Step>
+              <StepIndicator />
+              <StepLabel>Review</StepLabel>
+            </Step>
+          </Stepper>
+        </View>
+      ))}
+    </View>
+  ),
+}

package/src/components/custom/stepper/Stepper.test.tsx

@@ -0,0 +1,230 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepLabel,
+  StepContent,
+} from './Stepper'
+
+function renderStepper(activeStep = 1) {
+  return render(
+    <Stepper activeStep={activeStep}>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Account</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Profile</StepLabel>
+      </Step>
+      <Step>
+        <StepIndicator />
+        <StepLabel>Review</StepLabel>
+      </Step>
+    </Stepper>
+  )
+}
+
+describe('Stepper', () => {
+  it('renders all steps', () => {
+    renderStepper(0)
+    expect(screen.getByText('Account')).toBeInTheDocument()
+    expect(screen.getByText('Profile')).toBeInTheDocument()
+    expect(screen.getByText('Review')).toBeInTheDocument()
+  })
+
+  it('renders step numbers', () => {
+    renderStepper(0)
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('2')).toBeInTheDocument()
+    expect(screen.getByText('3')).toBeInTheDocument()
+  })
+
+  describe('active step', () => {
+    it('shows first step as active when activeStep is 0', () => {
+      renderStepper(0)
+      expect(screen.getByText('Account')).toBeInTheDocument()
+      expect(screen.getByText('1')).toBeInTheDocument()
+    })
+
+    it('shows checkmark for completed steps', () => {
+      renderStepper(2)
+      // Steps 0 and 1 should be completed, showing checkmarks
+      const checkmarks = screen.getAllByText('\u2713')
+      expect(checkmarks.length).toBe(2)
+    })
+
+    it('shows number for upcoming steps', () => {
+      renderStepper(0)
+      expect(screen.getByText('2')).toBeInTheDocument()
+      expect(screen.getByText('3')).toBeInTheDocument()
+    })
+  })
+
+  describe('orientation', () => {
+    it('renders horizontally by default', () => {
+      renderStepper(1)
+      expect(screen.getByText('Account')).toBeInTheDocument()
+    })
+
+    it('renders vertically', () => {
+      render(
+        <Stepper activeStep={1} orientation="vertical">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 1</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 2</StepLabel>
+          </Step>
+        </Stepper>
+      )
+      expect(screen.getByText('Step 1')).toBeInTheDocument()
+      expect(screen.getByText('Step 2')).toBeInTheDocument()
+    })
+  })
+
+  describe('Step status override', () => {
+    it('allows explicit error status on a step', () => {
+      render(
+        <Stepper activeStep={1}>
+          <Step status="error">
+            <StepIndicator />
+            <StepLabel>Failed Step</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Next Step</StepLabel>
+          </Step>
+        </Stepper>
+      )
+      expect(screen.getByText('Failed Step')).toBeInTheDocument()
+    })
+
+    it('allows explicit completed status override', () => {
+      render(
+        <Stepper activeStep={0}>
+          <Step status="completed">
+            <StepIndicator />
+            <StepLabel>Done Step</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Current</StepLabel>
+          </Step>
+        </Stepper>
+      )
+      // The overridden step should show checkmark despite being at index 0 with activeStep 0
+      expect(screen.getByText('\u2713')).toBeInTheDocument()
+    })
+  })
+
+  describe('StepIndicator', () => {
+    it('renders custom icon', () => {
+      render(
+        <Stepper activeStep={0}>
+          <Step>
+            <StepIndicator icon={<span data-testid="custom-icon">★</span>} />
+            <StepLabel>Custom</StepLabel>
+          </Step>
+        </Stepper>
+      )
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+
+    it('renders step number for upcoming steps', () => {
+      render(
+        <Stepper activeStep={0}>
+          <Step>
+            <StepIndicator />
+            <StepLabel>First</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Second</StepLabel>
+          </Step>
+        </Stepper>
+      )
+      expect(screen.getByText('2')).toBeInTheDocument()
+    })
+  })
+
+  describe('StepContent', () => {
+    it('renders content only for active step', () => {
+      render(
+        <Stepper activeStep={1} orientation="vertical">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 1</StepLabel>
+            <StepContent>Step 1 content</StepContent>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 2</StepLabel>
+            <StepContent>Step 2 content</StepContent>
+          </Step>
+        </Stepper>
+      )
+      expect(screen.queryByText('Step 1 content')).not.toBeInTheDocument()
+      expect(screen.getByText('Step 2 content')).toBeInTheDocument()
+    })
+
+    it('hides content for non-active steps', () => {
+      render(
+        <Stepper activeStep={0} orientation="vertical">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 1</StepLabel>
+            <StepContent>Active content</StepContent>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 2</StepLabel>
+            <StepContent>Hidden content</StepContent>
+          </Step>
+        </Stepper>
+      )
+      expect(screen.getByText('Active content')).toBeInTheDocument()
+      expect(screen.queryByText('Hidden content')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('connectors', () => {
+    it('renders connectors between steps', () => {
+      renderStepper(1)
+      // Connectors exist between steps; just verify all labels render (connectors are visual)
+      expect(screen.getByText('Account')).toBeInTheDocument()
+      expect(screen.getByText('Profile')).toBeInTheDocument()
+      expect(screen.getByText('Review')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = renderStepper(1)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations in vertical orientation', async () => {
+      const { container } = render(
+        <Stepper activeStep={0} orientation="vertical">
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 1</StepLabel>
+          </Step>
+          <Step>
+            <StepIndicator />
+            <StepLabel>Step 2</StepLabel>
+          </Step>
+        </Stepper>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})