@titan-design/react-ui 0.1.0 → 0.2.5

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

@@ -0,0 +1,250 @@
+import React, { createContext, useContext } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type StepStatus = 'completed' | 'active' | 'upcoming' | 'error'
+export type StepperOrientation = 'horizontal' | 'vertical'
+
+interface StepperContextType {
+  activeStep: number
+  orientation: StepperOrientation
+}
+
+const StepperContext = createContext<StepperContextType>({
+  activeStep: 0,
+  orientation: 'horizontal',
+})
+
+export interface StepperProps extends ViewProps {
+  /** Current active step (0-indexed) */
+  activeStep: number
+  /** Stepper orientation */
+  orientation?: StepperOrientation
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Stepper component for multi-step flows.
+ *
+ * @example
+ * <Stepper activeStep={1}>
+ *   <Step>
+ *     <StepIndicator />
+ *     <StepLabel>Account</StepLabel>
+ *   </Step>
+ *   <Step>
+ *     <StepIndicator />
+ *     <StepLabel>Profile</StepLabel>
+ *   </Step>
+ *   <Step>
+ *     <StepIndicator />
+ *     <StepLabel>Review</StepLabel>
+ *   </Step>
+ * </Stepper>
+ */
+export function Stepper({
+  activeStep,
+  orientation = 'horizontal',
+  className,
+  children,
+  ...props
+}: StepperProps) {
+  return (
+    <StepperContext.Provider value={{ activeStep, orientation }}>
+      <View
+        className={cn(
+          orientation === 'horizontal' ? 'flex-row items-center' : 'flex-col',
+          className
+        )}
+        {...props}
+      >
+        {React.Children.map(children, (child, index) => {
+          if (React.isValidElement(child)) {
+            return (
+              <>
+                {React.cloneElement(child as React.ReactElement<any>, { index })}
+                {index < React.Children.count(children) - 1 && (
+                  <StepConnector index={index} />
+                )}
+              </>
+            )
+          }
+          return child
+        })}
+      </View>
+    </StepperContext.Provider>
+  )
+}
+
+interface StepConnectorProps {
+  index: number
+}
+
+function StepConnector({ index }: StepConnectorProps) {
+  const { activeStep, orientation } = useContext(StepperContext)
+  const isCompleted = index < activeStep
+
+  if (orientation === 'horizontal') {
+    return (
+      <View
+        className={cn(
+          'flex-1 h-0.5 mx-2',
+          isCompleted ? 'bg-brand-primary' : 'bg-border-default'
+        )}
+      />
+    )
+  }
+
+  return (
+    <View
+      className={cn(
+        'w-0.5 h-8 ml-4 my-1',
+        isCompleted ? 'bg-brand-primary' : 'bg-border-default'
+      )}
+    />
+  )
+}
+
+export interface StepProps {
+  /** Step index (injected by Stepper) */
+  index?: number
+  /** Override step status */
+  status?: StepStatus
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Individual step in the stepper.
+ */
+export function Step({ index = 0, status, className, children }: StepProps) {
+  const { activeStep, orientation } = useContext(StepperContext)
+
+  const derivedStatus: StepStatus = status || (
+    index < activeStep ? 'completed' :
+    index === activeStep ? 'active' : 'upcoming'
+  )
+
+  return (
+    <View
+      className={cn(
+        orientation === 'horizontal' ? 'items-center' : 'flex-row items-start',
+        className
+      )}
+    >
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            status: derivedStatus,
+            index,
+          })
+        }
+        return child
+      })}
+    </View>
+  )
+}
+
+export interface StepIndicatorProps {
+  /** Step status (injected by Step) */
+  status?: StepStatus
+  /** Step index (injected by Step) */
+  index?: number
+  /** Custom icon */
+  icon?: React.ReactNode
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Visual indicator for step status.
+ */
+export function StepIndicator({
+  status = 'upcoming',
+  index = 0,
+  icon,
+  className,
+}: StepIndicatorProps) {
+  const statusStyles: Record<StepStatus, string> = {
+    completed: 'bg-brand-primary border-brand-primary',
+    active: 'bg-brand-primary border-brand-primary',
+    upcoming: 'bg-surface-base border-border-strong',
+    error: 'bg-status-error border-status-error',
+  }
+
+  return (
+    <View
+      className={cn(
+        'w-8 h-8 rounded-full border-2 items-center justify-center',
+        statusStyles[status],
+        className
+      )}
+    >
+      {icon || (
+        <Text
+          className={cn(
+            'text-sm font-semibold',
+            status === 'upcoming' ? 'text-text-secondary' : 'text-white'
+          )}
+        >
+          {status === 'completed' ? '✓' : index + 1}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export interface StepLabelProps {
+  /** Step status (injected by Step) */
+  status?: StepStatus
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Label for a step.
+ */
+export function StepLabel({ status = 'upcoming', className, children }: StepLabelProps) {
+  const { orientation } = useContext(StepperContext)
+
+  return (
+    <Text
+      className={cn(
+        'text-sm font-medium',
+        orientation === 'horizontal' ? 'mt-2' : 'ml-3',
+        status === 'active' ? 'text-text-primary' :
+        status === 'completed' ? 'text-brand-primary' :
+        status === 'error' ? 'text-status-error' :
+        'text-text-secondary',
+        className
+      )}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export interface StepContentProps {
+  /** Step status (injected by Step) */
+  status?: StepStatus
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Content area for vertical stepper.
+ */
+export function StepContent({ status = 'upcoming', className, children }: StepContentProps) {
+  if (status !== 'active') return null
+
+  return (
+    <View className={cn('ml-11 mt-2 pb-4', className)}>
+      {children}
+    </View>
+  )
+}

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

@@ -0,0 +1,10 @@
+export { Stepper, Step as StepperStep, StepIndicator, StepLabel, StepContent } from './Stepper'
+export type {
+  StepperProps,
+  StepProps as StepperStepProps,
+  StepIndicatorProps,
+  StepLabelProps,
+  StepContentProps,
+  StepStatus,
+  StepperOrientation,
+} from './Stepper'

package/src/components/index.ts

@@ -0,0 +1,5 @@
+// Re-export all UI components
+export * from './ui'
+
+// Re-export custom components
+export * from './custom'

package/src/components/ui/alert/Alert.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Alert, AlertTitle, AlertDescription } from './Alert'
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['success', 'info', 'warning', 'error'],
+    },
+    variant: {
+      control: 'select',
+      options: ['subtle', 'outline', 'solid'],
+    },
+    showIcon: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Alert>
+
+export const Default: Story = {
+  args: {
+    status: 'info',
+    variant: 'subtle',
+  },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>This is an informational alert message.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Success: Story = {
+  render: () => (
+    <Alert status="success">
+      <AlertTitle>Success!</AlertTitle>
+      <AlertDescription>Your changes have been saved successfully.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Warning: Story = {
+  render: () => (
+    <Alert status="warning">
+      <AlertTitle>Warning</AlertTitle>
+      <AlertDescription>Please review before proceeding.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const Error: Story = {
+  render: () => (
+    <Alert status="error">
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const WithCloseButton: Story = {
+  render: () => (
+    <Alert status="info" onClose={() => console.log('closed')}>
+      <AlertTitle>Dismissable Alert</AlertTitle>
+      <AlertDescription>Click the X to close this alert.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const AllStatuses: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Alert status="success">
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>Operation completed successfully.</AlertDescription>
+      </Alert>
+      <Alert status="info">
+        <AlertTitle>Info</AlertTitle>
+        <AlertDescription>Here is some useful information.</AlertDescription>
+      </Alert>
+      <Alert status="warning">
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>Please be careful with this action.</AlertDescription>
+      </Alert>
+      <Alert status="error">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>An error occurred.</AlertDescription>
+      </Alert>
+    </View>
+  ),
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Alert status="info" variant="subtle">
+        <AlertTitle>Subtle Variant</AlertTitle>
+        <AlertDescription>Light background with colored text.</AlertDescription>
+      </Alert>
+      <Alert status="info" variant="outline">
+        <AlertTitle>Outline Variant</AlertTitle>
+        <AlertDescription>Border with transparent background.</AlertDescription>
+      </Alert>
+      <Alert status="info" variant="solid">
+        <AlertTitle>Solid Variant</AlertTitle>
+        <AlertDescription>Solid background color.</AlertDescription>
+      </Alert>
+    </View>
+  ),
+}
+
+export const SolidVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <Alert status="success" variant="solid">
+        <AlertDescription>Success solid alert</AlertDescription>
+      </Alert>
+      <Alert status="info" variant="solid">
+        <AlertDescription>Info solid alert</AlertDescription>
+      </Alert>
+      <Alert status="warning" variant="solid">
+        <AlertDescription>Warning solid alert</AlertDescription>
+      </Alert>
+      <Alert status="error" variant="solid">
+        <AlertDescription>Error solid alert</AlertDescription>
+      </Alert>
+    </View>
+  ),
+}
+
+export const WithoutIcon: Story = {
+  args: {
+    showIcon: false,
+    status: 'info',
+  },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertTitle>No Icon</AlertTitle>
+      <AlertDescription>This alert has no icon.</AlertDescription>
+    </Alert>
+  ),
+}
+
+export const DescriptionOnly: Story = {
+  render: () => (
+    <Alert status="info">
+      <AlertDescription>Simple alert with description only, no title.</AlertDescription>
+    </Alert>
+  ),
+}

package/src/components/ui/alert/Alert.test.tsx

@@ -0,0 +1,202 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Alert, AlertTitle, AlertDescription } from './Alert'
+
+describe('Alert', () => {
+  it('renders children correctly', () => {
+    render(
+      <Alert>
+        <AlertTitle>Alert Title</AlertTitle>
+        <AlertDescription>Alert message</AlertDescription>
+      </Alert>
+    )
+    expect(screen.getByText('Alert Title')).toBeInTheDocument()
+    expect(screen.getByText('Alert message')).toBeInTheDocument()
+  })
+
+  it('has alert accessibility role', () => {
+    render(
+      <Alert>
+        <AlertDescription>Info message</AlertDescription>
+      </Alert>
+    )
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+  })
+
+  describe('status variants', () => {
+    it('renders with success status', () => {
+      render(
+        <Alert status="success">
+          <AlertDescription>Success</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('renders with info status (default)', () => {
+      render(
+        <Alert>
+          <AlertDescription>Info</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('renders with warning status', () => {
+      render(
+        <Alert status="warning">
+          <AlertDescription>Warning</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('renders with error status', () => {
+      render(
+        <Alert status="error">
+          <AlertDescription>Error</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+  })
+
+  describe('visual variants', () => {
+    it('renders with subtle variant (default)', () => {
+      render(
+        <Alert variant="subtle">
+          <AlertDescription>Subtle</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('renders with outline variant', () => {
+      render(
+        <Alert variant="outline">
+          <AlertDescription>Outline</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('renders with solid variant', () => {
+      render(
+        <Alert variant="solid">
+          <AlertDescription>Solid</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+  })
+
+  describe('icon behavior', () => {
+    it('shows default icon by default', () => {
+      render(
+        <Alert status="info">
+          <AlertDescription>With icon</AlertDescription>
+        </Alert>
+      )
+      // Default info icon is the info symbol
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('hides icon when showIcon is false', () => {
+      render(
+        <Alert status="success" showIcon={false}>
+          <AlertDescription>No icon</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+    })
+
+    it('renders custom icon when provided', () => {
+      render(
+        <Alert icon={<span data-testid="custom-icon">!</span>}>
+          <AlertDescription>Custom icon</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByTestId('custom-icon')).toBeInTheDocument()
+    })
+  })
+
+  describe('close button', () => {
+    it('renders close button when onClose is provided', () => {
+      render(
+        <Alert onClose={() => {}}>
+          <AlertDescription>Closeable</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByLabelText('Close alert')).toBeInTheDocument()
+    })
+
+    it('calls onClose when close button is clicked', () => {
+      const onClose = vi.fn()
+      render(
+        <Alert onClose={onClose}>
+          <AlertDescription>Closeable</AlertDescription>
+        </Alert>
+      )
+
+      fireEvent.click(screen.getByLabelText('Close alert'))
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not render close button when onClose is not provided', () => {
+      render(
+        <Alert>
+          <AlertDescription>Not closeable</AlertDescription>
+        </Alert>
+      )
+      expect(screen.queryByLabelText('Close alert')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('compound sub-components', () => {
+    it('renders AlertTitle', () => {
+      render(<AlertTitle>Title Text</AlertTitle>)
+      expect(screen.getByText('Title Text')).toBeInTheDocument()
+    })
+
+    it('renders AlertDescription', () => {
+      render(<AlertDescription>Description text</AlertDescription>)
+      expect(screen.getByText('Description text')).toBeInTheDocument()
+    })
+
+    it('accepts custom className on sub-components', () => {
+      render(
+        <Alert className="custom-alert">
+          <AlertTitle className="custom-title">Title</AlertTitle>
+          <AlertDescription className="custom-desc">Desc</AlertDescription>
+        </Alert>
+      )
+      expect(screen.getByText('Title')).toBeInTheDocument()
+      expect(screen.getByText('Desc')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Alert status="info">
+          <AlertTitle>Info Alert</AlertTitle>
+          <AlertDescription>This is an informational message.</AlertDescription>
+        </Alert>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with close button', async () => {
+      const { container } = render(
+        <Alert status="error" onClose={() => {}}>
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>Something went wrong.</AlertDescription>
+        </Alert>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})