@titan-design/react-ui 0.1.0 → 0.1.1

package/src/components/custom/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { EmptyState } from './EmptyState'
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'Custom/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title text',
+    },
+    description: {
+      control: 'text',
+      description: 'Description text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof EmptyState>
+
+export const Default: Story = {
+  args: {
+    title: 'No results found',
+  },
+}
+
+export const WithDescription: Story = {
+  args: {
+    title: 'No messages',
+    description: 'You don\'t have any messages yet. Start a conversation to see them here.',
+  },
+}
+
+// Simple placeholder icon for story demos
+function PlaceholderIcon({ size = 32, className }: { size?: number; className?: string }) {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          width: size * 0.8,
+          height: size * 0.8,
+          borderRadius: size * 0.4,
+          borderWidth: 2,
+          borderColor: 'var(--color-text-tertiary)',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <View style={{ width: size * 0.3, height: 2, backgroundColor: 'var(--color-text-tertiary)', borderRadius: 1 }} />
+      </View>
+    </View>
+  )
+}
+
+export const WithIcon: Story = {
+  args: {
+    icon: PlaceholderIcon,
+    title: 'Inbox is empty',
+    description: 'No new notifications at this time.',
+  },
+}
+
+// Simple action button for story demos
+function ActionButton() {
+  return (
+    <View
+      className="bg-brand-primary px-4 py-2 rounded-md"
+    >
+      <Text className="text-white font-semibold text-sm">
+        Create New
+      </Text>
+    </View>
+  )
+}
+
+export const WithAction: Story = {
+  args: {
+    icon: PlaceholderIcon,
+    title: 'No projects yet',
+    description: 'Get started by creating your first project.',
+    action: <ActionButton />,
+  },
+}
+
+export const TitleOnly: Story = {
+  args: {
+    title: 'Nothing here',
+  },
+}

package/src/components/custom/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { EmptyState } from './EmptyState'
+
+function MockIcon({ size, className }: { size?: number; className?: string }) {
+  return <span data-testid="mock-icon" data-size={size} className={className}>Icon</span>
+}
+
+describe('EmptyState', () => {
+  it('renders with title', () => {
+    render(<EmptyState title="No messages" />)
+    expect(screen.getByText('No messages')).toBeInTheDocument()
+  })
+
+  it('renders with description', () => {
+    render(
+      <EmptyState
+        title="No messages"
+        description="You don't have any messages yet."
+      />
+    )
+    expect(screen.getByText("You don't have any messages yet.")).toBeInTheDocument()
+  })
+
+  it('renders without description', () => {
+    render(<EmptyState title="No data" />)
+    expect(screen.getByText('No data')).toBeInTheDocument()
+  })
+
+  it('renders with icon', () => {
+    render(<EmptyState title="No items" icon={MockIcon} />)
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+  })
+
+  it('renders without icon', () => {
+    render(<EmptyState title="No items" />)
+    expect(screen.queryByTestId('mock-icon')).not.toBeInTheDocument()
+  })
+
+  it('passes size prop to icon', () => {
+    render(<EmptyState title="No items" icon={MockIcon} />)
+    expect(screen.getByTestId('mock-icon')).toHaveAttribute('data-size', '32')
+  })
+
+  it('renders action element', () => {
+    const onPress = vi.fn()
+    render(
+      <EmptyState
+        title="No results"
+        action={<button onClick={onPress}>Create New</button>}
+      />
+    )
+    const actionButton = screen.getByText('Create New')
+    expect(actionButton).toBeInTheDocument()
+
+    fireEvent.click(actionButton)
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders without action', () => {
+    render(<EmptyState title="No data" />)
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  })
+
+  it('renders all parts together', () => {
+    render(
+      <EmptyState
+        icon={MockIcon}
+        title="No messages"
+        description="Check back later"
+        action={<button>Refresh</button>}
+      />
+    )
+    expect(screen.getByTestId('mock-icon')).toBeInTheDocument()
+    expect(screen.getByText('No messages')).toBeInTheDocument()
+    expect(screen.getByText('Check back later')).toBeInTheDocument()
+    expect(screen.getByText('Refresh')).toBeInTheDocument()
+  })
+
+  it('accepts custom className', () => {
+    render(<EmptyState title="Test" className="custom-class" />)
+    expect(screen.getByText('Test')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <EmptyState
+          icon={MockIcon}
+          title="No messages"
+          description="You don't have any messages yet."
+          action={<button>Compose</button>}
+        />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with minimal props', async () => {
+      const { container } = render(<EmptyState title="Empty" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/EmptyState/EmptyState.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface EmptyStateProps extends ViewProps {
+  /** Icon component to display */
+  icon?: React.ComponentType<{ size?: number; className?: string }>
+  /** Title text */
+  title: string
+  /** Description text */
+  description?: string
+  /** Action element (usually a button) */
+  action?: React.ReactNode
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Empty state component for when there's no data to display.
+ *
+ * @example
+ * <EmptyState
+ *   icon={InboxIcon}
+ *   title="No messages"
+ *   description="You don't have any messages yet."
+ *   action={<Button>Compose</Button>}
+ * />
+ */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <View
+      className={cn(
+        'items-center justify-center py-12 px-6',
+        className
+      )}
+      {...props}
+    >
+      {Icon && (
+        <View className="mb-4 p-4 rounded-full bg-background-subtle">
+          <Icon size={32} className="text-text-tertiary" />
+        </View>
+      )}
+
+      <Text className="text-lg font-semibold text-text-primary text-center mb-2">
+        {title}
+      </Text>
+
+      {description && (
+        <Text className="text-sm text-text-secondary text-center max-w-xs mb-6">
+          {description}
+        </Text>
+      )}
+
+      {action && (
+        <View className="mt-2">
+          {action}
+        </View>
+      )}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { EmptyState } from './EmptyState'
+export type { EmptyStateProps } from './EmptyState'

package/src/components/custom/Metric/Metric.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Metric, MetricGroup } from './Metric'
+
+const meta: Meta<typeof Metric> = {
+  title: 'Custom/Metric',
+  component: Metric,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'Formatted display value',
+    },
+    label: {
+      control: 'text',
+      description: 'Descriptive label below the value',
+    },
+    unit: {
+      control: 'text',
+      description: 'Optional unit suffix',
+    },
+    trend: {
+      control: 'select',
+      options: [undefined, 'up', 'down', 'neutral'],
+      description: 'Optional trend indicator arrow',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Metric>
+
+export const Default: Story = {
+  args: {
+    value: '42',
+    label: 'Total Reps',
+  },
+}
+
+export const WithUnit: Story = {
+  args: {
+    value: '1.24',
+    label: 'Peak Velocity',
+    unit: 'm/s',
+  },
+}
+
+export const WithTrendUp: Story = {
+  args: {
+    value: '85',
+    label: 'Performance',
+    trend: 'up',
+  },
+}
+
+export const WithTrendDown: Story = {
+  args: {
+    value: '62',
+    label: 'Fatigue Index',
+    trend: 'down',
+  },
+}
+
+export const WithTrendNeutral: Story = {
+  args: {
+    value: '70',
+    label: 'Consistency',
+    trend: 'neutral',
+  },
+}
+
+export const FullMetric: Story = {
+  args: {
+    value: '0.98',
+    label: 'Mean Velocity',
+    unit: 'm/s',
+    trend: 'up',
+    size: 'lg',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    value: '12',
+    label: 'Sets',
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    value: '315',
+    label: 'Max Load',
+    unit: 'lbs',
+    size: 'lg',
+  },
+}
+
+export const AllSizes: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 32, alignItems: 'flex-end' }}>
+      <Metric value="42" label="Reps" size="sm" />
+      <Metric value="42" label="Reps" size="md" />
+      <Metric value="42" label="Reps" size="lg" />
+    </View>
+  ),
+}
+
+export const Group: StoryObj<typeof MetricGroup> = {
+  render: () => (
+    <MetricGroup>
+      <Metric value="12" label="Sets" />
+      <Metric value="42" label="Reps" />
+      <Metric value="1.24" label="Avg Velocity" unit="m/s" trend="up" />
+    </MetricGroup>
+  ),
+}
+
+export const GroupSmall: StoryObj<typeof MetricGroup> = {
+  render: () => (
+    <MetricGroup>
+      <Metric value="8" label="Sets" size="sm" />
+      <Metric value="315" label="Load" unit="lbs" size="sm" />
+      <Metric value="0.82" label="Velocity" unit="m/s" size="sm" trend="down" />
+      <Metric value="92" label="Score" size="sm" trend="up" />
+    </MetricGroup>
+  ),
+}

package/src/components/custom/Metric/Metric.test.tsx

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Metric, MetricGroup } from './Metric'
+
+describe('Metric', () => {
+  it('renders value and label', () => {
+    render(<Metric value="42" label="Reps" />)
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('Reps')).toBeInTheDocument()
+  })
+
+  it('renders unit when provided', () => {
+    render(<Metric value="1.2" label="Peak Velocity" unit="m/s" />)
+    expect(screen.getByText('m/s')).toBeInTheDocument()
+  })
+
+  it('does not render unit when omitted', () => {
+    render(<Metric value="10" label="Sets" />)
+    expect(screen.queryByText('m/s')).not.toBeInTheDocument()
+  })
+
+  it('renders trend arrow when provided', () => {
+    render(<Metric value="85" label="Score" trend="up" />)
+    expect(screen.getByText('\u2191')).toBeInTheDocument()
+  })
+
+  it('renders down trend arrow', () => {
+    render(<Metric value="60" label="Score" trend="down" />)
+    expect(screen.getByText('\u2193')).toBeInTheDocument()
+  })
+
+  it('renders neutral trend arrow', () => {
+    render(<Metric value="70" label="Score" trend="neutral" />)
+    expect(screen.getByText('\u2192')).toBeInTheDocument()
+  })
+
+  it('does not render trend when omitted', () => {
+    render(<Metric value="50" label="Weight" />)
+    expect(screen.queryByText('\u2191')).not.toBeInTheDocument()
+    expect(screen.queryByText('\u2193')).not.toBeInTheDocument()
+    expect(screen.queryByText('\u2192')).not.toBeInTheDocument()
+  })
+
+  it('defaults to md size', () => {
+    const { container } = render(<Metric value="10" label="Reps" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('accepts all size variants without error', () => {
+    const { rerender } = render(<Metric value="10" label="Reps" size="sm" />)
+    expect(screen.getByText('10')).toBeInTheDocument()
+
+    rerender(<Metric value="10" label="Reps" size="md" />)
+    expect(screen.getByText('10')).toBeInTheDocument()
+
+    rerender(<Metric value="10" label="Reps" size="lg" />)
+    expect(screen.getByText('10')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <Metric value="42" label="Reps" unit="reps" trend="up" />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+describe('MetricGroup', () => {
+  it('renders all child metrics', () => {
+    render(
+      <MetricGroup>
+        <Metric value="10" label="Sets" />
+        <Metric value="42" label="Reps" />
+        <Metric value="1.2" label="Velocity" unit="m/s" />
+      </MetricGroup>
+    )
+    expect(screen.getByText('10')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(screen.getByText('1.2')).toBeInTheDocument()
+  })
+
+  it('renders dividers between metrics', () => {
+    render(
+      <MetricGroup>
+        <Metric value="10" label="Sets" />
+        <Metric value="42" label="Reps" />
+        <Metric value="1.2" label="Velocity" />
+      </MetricGroup>
+    )
+    const dividers = screen.getAllByTestId('metric-divider')
+    expect(dividers).toHaveLength(2)
+  })
+
+  it('renders no dividers for a single metric', () => {
+    render(
+      <MetricGroup>
+        <Metric value="10" label="Sets" />
+      </MetricGroup>
+    )
+    const dividers = screen.queryAllByTestId('metric-divider')
+    expect(dividers).toHaveLength(0)
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <MetricGroup>
+          <Metric value="10" label="Sets" />
+          <Metric value="42" label="Reps" />
+        </MetricGroup>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Metric/Metric.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export type MetricTrend = 'up' | 'down' | 'neutral'
+
+export interface MetricProps extends ViewProps {
+  value: string
+  label: string
+  unit?: string
+  trend?: MetricTrend
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeConfig = {
+  sm: { value: 'text-lg font-bold', label: 'text-xs', unit: 'text-xs' },
+  md: { value: 'text-2xl font-bold', label: 'text-xs', unit: 'text-sm' },
+  lg: { value: 'text-4xl font-bold', label: 'text-sm', unit: 'text-base' },
+}
+
+const trendColors: Record<MetricTrend, string> = {
+  up: 'text-result-improve',
+  down: 'text-result-degrade',
+  neutral: 'text-result-inconclusive',
+}
+
+const trendArrows: Record<MetricTrend, string> = {
+  up: '\u2191',
+  down: '\u2193',
+  neutral: '\u2192',
+}
+
+export function Metric({
+  value,
+  label,
+  unit,
+  trend,
+  size = 'md',
+  className,
+  ...props
+}: MetricProps) {
+  const styles = sizeConfig[size]
+
+  return (
+    <View className={cn('items-center', className)} {...props}>
+      <View className="flex-row items-baseline gap-1">
+        <Text className={cn(styles.value, 'text-text-primary')}>{value}</Text>
+        {unit && (
+          <Text className={cn(styles.unit, 'text-text-tertiary')}>{unit}</Text>
+        )}
+        {trend && (
+          <Text className={cn(styles.unit, trendColors[trend])}>
+            {trendArrows[trend]}
+          </Text>
+        )}
+      </View>
+      <Text className={cn(styles.label, 'text-text-secondary mt-1')}>
+        {label}
+      </Text>
+    </View>
+  )
+}
+
+export interface MetricGroupProps extends ViewProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export function MetricGroup({
+  className,
+  children,
+  ...props
+}: MetricGroupProps) {
+  const items = React.Children.toArray(children)
+
+  return (
+    <View className={cn('flex-row items-center', className)} {...props}>
+      {items.map((child, i) => (
+        <React.Fragment key={i}>
+          <View className="flex-1 items-center">{child}</View>
+          {i < items.length - 1 && (
+            <View
+              className="w-px h-8 bg-divider mx-2"
+              testID="metric-divider"
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Metric, MetricGroup } from './Metric'
+export type { MetricProps, MetricGroupProps, MetricTrend } from './Metric'