@titan-design/react-ui 0.2.6 → 0.3.0

package/src/components/custom/Workout/StatusDot.test.tsx

@@ -0,0 +1,165 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { StatusDot } from './StatusDot'
+
+describe('StatusDot', () => {
+  it('renders a dot', () => {
+    render(<StatusDot variant="success" />)
+    expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+  })
+
+  it('shows icon at md size', () => {
+    render(<StatusDot variant="success" size="md" icon="check" />)
+    expect(screen.getByText('\u2713')).toBeInTheDocument()
+  })
+
+  it('does not show icon at sm size', () => {
+    render(<StatusDot variant="success" size="sm" icon="check" />)
+    expect(screen.queryByText('\u2713')).not.toBeInTheDocument()
+  })
+
+  it('renders exclamation icon', () => {
+    render(<StatusDot variant="warning" size="md" icon="exclamation" />)
+    expect(screen.getByText('!')).toBeInTheDocument()
+  })
+
+  it('renders dash icon', () => {
+    render(<StatusDot variant="error" size="md" icon="dash" />)
+    expect(screen.getByText('\u2014')).toBeInTheDocument()
+  })
+
+  it('renders label text when provided', () => {
+    render(<StatusDot variant="success" label="On track" />)
+    expect(screen.getByText('On track')).toBeInTheDocument()
+  })
+
+  it('does not render label when omitted', () => {
+    render(<StatusDot variant="success" />)
+    expect(screen.queryByText('On track')).not.toBeInTheDocument()
+  })
+
+  it('defaults to sm size', () => {
+    render(<StatusDot variant="neutral" />)
+    expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+  })
+
+  it('sets accessibility label with variant', () => {
+    render(<StatusDot variant="warning" />)
+    expect(screen.getByLabelText('warning status')).toBeInTheDocument()
+  })
+
+  describe('solid variants', () => {
+    it('renders all solid variant types without error', () => {
+      const { rerender } = render(<StatusDot variant="success" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+
+      rerender(<StatusDot variant="warning" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+
+      rerender(<StatusDot variant="error" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+
+      rerender(<StatusDot variant="neutral" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+    })
+  })
+
+  describe('ring variants', () => {
+    it('renders on-track variant', () => {
+      render(<StatusDot variant="on-track" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+      expect(screen.getByLabelText('on-track status')).toBeInTheDocument()
+    })
+
+    it('renders deviation variant', () => {
+      render(<StatusDot variant="deviation" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+      expect(screen.getByLabelText('deviation status')).toBeInTheDocument()
+    })
+
+    it('renders future variant', () => {
+      render(<StatusDot variant="future" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+      expect(screen.getByLabelText('future status')).toBeInTheDocument()
+    })
+
+    it('renders the future variant with a 1px dashed border', () => {
+      render(<StatusDot variant="future" />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.borderTopStyle).toBe('dashed')
+      expect(dot.style.borderTopWidth).toBe('1px')
+    })
+  })
+
+  describe('md size', () => {
+    it('renders at md size without error', () => {
+      render(<StatusDot variant="success" size="md" />)
+      expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+    })
+  })
+
+  describe('glow', () => {
+    it('applies a box-shadow when glow is set on a solid variant', () => {
+      render(<StatusDot variant="success" glow />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toContain('rgba(20,184,166,0.4)')
+    })
+
+    it('applies a box-shadow when glow is set on a ring variant', () => {
+      render(<StatusDot variant="on-track" glow />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toContain('rgba(20,184,166,0.4)')
+    })
+
+    it('applies a gray box-shadow when glow is set on the future variant', () => {
+      render(<StatusDot variant="future" glow />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toContain('rgba(107,114,128,0.4)')
+    })
+
+    it('does not apply a box-shadow when glow is not set', () => {
+      render(<StatusDot variant="on-track" />)
+      const dot = screen.getByTestId('status-dot')
+      expect(dot.style.boxShadow).toBe('')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <StatusDot variant="success" size="md" icon="check" label="On track" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for ring variants', async () => {
+      const { container } = render(
+        <StatusDot variant="on-track" size="md" icon="check" label="On track" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations without label', async () => {
+      const { container } = render(<StatusDot variant="warning" size="md" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations for all solid variants', async () => {
+      for (const variant of ['success', 'warning', 'error', 'neutral'] as const) {
+        const { container, unmount } = render(<StatusDot variant={variant} />)
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+        unmount()
+      }
+    })
+
+    it('sets combined accessibility label when label prop is provided', () => {
+      render(<StatusDot variant="success" label="On track" />)
+      expect(screen.getByLabelText('success status: On track')).toBeInTheDocument()
+    })
+  })
+})

package/src/components/custom/Workout/StatusDot.tsx

@@ -0,0 +1,160 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+
+export type StatusDotVariant =
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'neutral'
+  | 'on-track'
+  | 'deviation'
+  | 'future'
+
+export interface StatusDotProps extends ViewProps {
+  variant: StatusDotVariant
+  /** Center glyph. Only rendered at size="md"; the 8px "sm" dot is too small to fit one. */
+  icon?: 'check' | 'exclamation' | 'dash'
+  size?: 'sm' | 'md'
+  /** Adds a subtle glow effect in the variant color */
+  glow?: boolean
+  label?: string
+  className?: string
+}
+
+const solidVariantColors: Record<string, string> = {
+  success: '#14B8A6',
+  warning: '#FFB020',
+  error: '#D14343',
+  neutral: '#6B7280',
+}
+
+const ringVariantStyles: Record<string, Record<string, unknown>> = {
+  'on-track': {
+    backgroundColor: 'rgba(20,184,166,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(20,184,166,0.3)',
+  },
+  deviation: {
+    backgroundColor: 'rgba(245,158,11,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(245,158,11,0.25)',
+  },
+  future: {
+    backgroundColor: 'rgba(107,114,128,0.1)',
+    borderWidth: 1,
+    borderStyle: 'dashed',
+    borderColor: 'rgba(107,114,128,0.2)',
+  },
+}
+
+const glowStyles: Record<StatusDotVariant, Record<string, unknown>> = {
+  success: { boxShadow: '0 0 4px rgba(20,184,166,0.4)' },
+  warning: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
+  error: { boxShadow: '0 0 4px rgba(239,68,68,0.4)' },
+  neutral: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
+  'on-track': { boxShadow: '0 0 4px rgba(20,184,166,0.4)' },
+  deviation: { boxShadow: '0 0 4px rgba(245,158,11,0.4)' },
+  future: { boxShadow: '0 0 4px rgba(107,114,128,0.4)' },
+}
+
+const iconChars: Record<string, string> = {
+  check: '\u2713',
+  exclamation: '!',
+  dash: '\u2014',
+}
+
+/** Color-matched icon colors: dark on solid bg, light on transparent bg */
+const iconColors: Record<StatusDotVariant, string> = {
+  success: '#0A5C52',
+  warning: '#6B4000',
+  error: '#5C1A1A',
+  neutral: '#D1D5DB',
+  'on-track': '#14B8A6',
+  deviation: '#FFB020',
+  future: '#6B7280',
+}
+
+const sizeDimensions = {
+  sm: { size: 8, showIcon: false },
+  md: { size: 18, showIcon: true },
+}
+
+function isSolidVariant(variant: StatusDotVariant): boolean {
+  return variant in solidVariantColors
+}
+
+export function StatusDot({
+  variant,
+  icon,
+  size = 'sm',
+  glow,
+  label,
+  className,
+  ...props
+}: StatusDotProps) {
+  const config = sizeDimensions[size]
+  const solid = isSolidVariant(variant)
+  const ring = ringVariantStyles[variant]
+
+  const glowStyle = glow ? glowStyles[variant] : null
+
+  const dot = (
+    <View
+      style={[
+        {
+          width: config.size,
+          height: config.size,
+          borderRadius: 9999,
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexShrink: 0,
+        },
+        solid ? { backgroundColor: solidVariantColors[variant] } : undefined,
+        ring ? (ring as Record<string, unknown>) : undefined,
+        glowStyle ? (glowStyle as Record<string, unknown>) : undefined,
+      ]}
+      accessibilityRole="image"
+      accessibilityLabel={`${variant} status`}
+      testID="status-dot"
+    >
+      {config.showIcon && icon && (
+        <Text
+          style={{
+            fontSize: 11,
+            lineHeight: 11,
+            fontWeight: '900',
+            color: iconColors[variant],
+          }}
+          accessibilityElementsHidden
+        >
+          {iconChars[icon]}
+        </Text>
+      )}
+    </View>
+  )
+
+  if (label) {
+    return (
+      <View
+        className={className}
+        style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}
+        accessibilityLabel={`${variant} status: ${label}`}
+        {...props}
+      >
+        <View accessibilityElementsHidden>{dot}</View>
+        <Text
+          style={{ fontSize: 12, lineHeight: 16, color: '#9CA3AF' }}
+          accessibilityElementsHidden
+        >
+          {label}
+        </Text>
+      </View>
+    )
+  }
+
+  return (
+    <View className={className} {...props}>
+      {dot}
+    </View>
+  )
+}

package/src/components/custom/Workout/StrengthTrendChart.stories.tsx

@@ -0,0 +1,130 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View, Text } from 'react-native'
+import { StrengthTrendChart } from './StrengthTrendChart'
+import type { StrengthTrendDataPoint } from './StrengthTrendChart'
+
+const actual: StrengthTrendDataPoint[] = [
+  { date: '2026-01-06', e1rm: 215, sessionLabel: 'Jan 6' },
+  { date: '2026-01-20', e1rm: 222, sessionLabel: 'Jan 20' },
+  { date: '2026-02-03', e1rm: 228, isPR: true, sessionLabel: 'Feb 3' },
+  { date: '2026-02-17', e1rm: 226, sessionLabel: 'Feb 17' },
+  { date: '2026-03-03', e1rm: 235, sessionLabel: 'Mar 3' },
+  { date: '2026-03-17', e1rm: 244, isPR: true, sessionLabel: 'Mar 17' },
+]
+
+const projection: StrengthTrendDataPoint[] = [
+  { date: '2026-03-17', e1rm: 244 },
+  { date: '2026-03-31', e1rm: 252 },
+  { date: '2026-04-14', e1rm: 261 },
+]
+
+const mesoBoundaries = [
+  { date: '2026-02-03', label: 'Intensify' },
+  { date: '2026-03-17', label: 'Peak' },
+]
+
+const decline: StrengthTrendDataPoint[] = [
+  { date: '2026-03-03', e1rm: 248 },
+  { date: '2026-03-10', e1rm: 244 },
+  { date: '2026-03-17', e1rm: 239 },
+  { date: '2026-03-24', e1rm: 235 },
+]
+
+const meta: Meta<typeof StrengthTrendChart> = {
+  title: 'Custom/Workout/StrengthTrendChart',
+  component: StrengthTrendChart,
+  tags: ['autodocs'],
+  argTypes: {
+    width: { control: { type: 'range', min: 160, max: 480, step: 10 }, description: 'Plot width in px' },
+    height: { control: { type: 'range', min: 100, max: 220, step: 10 }, description: 'Plot height in px (120-160 for compact)' },
+    unit: { control: 'inline-radio', options: ['lbs', 'kg'], description: 'Display unit' },
+    animateOnMount: { control: 'boolean', description: 'Left-to-right draw animation on mount' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StrengthTrendChart>
+
+export const Default: Story = {
+  args: {
+    data: actual,
+    projection,
+    mesoBoundaries,
+    width: 340,
+    height: 150,
+    unit: 'lbs',
+    animateOnMount: false,
+  },
+}
+
+export const Compact: Story = {
+  args: {
+    ...Default.args,
+    width: 240,
+    height: 120,
+  },
+}
+
+export const WithoutProjection: Story = {
+  args: {
+    ...Default.args,
+    projection: undefined,
+    mesoBoundaries: undefined,
+  },
+}
+
+export const Declining: Story = {
+  args: {
+    data: decline,
+    width: 340,
+    height: 150,
+    unit: 'lbs',
+    animateOnMount: false,
+  },
+}
+
+export const SinglePoint: Story = {
+  args: {
+    data: [{ date: '2026-03-17', e1rm: 244, isPR: true, sessionLabel: 'Mar 17' }],
+    width: 340,
+    height: 150,
+    unit: 'kg',
+    animateOnMount: false,
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    data: [],
+    width: 340,
+    height: 150,
+    unit: 'lbs',
+  },
+}
+
+function InteractiveChart() {
+  const [selected, setSelected] = useState<StrengthTrendDataPoint | null>(null)
+  return (
+    <View style={{ maxWidth: 380, padding: 16 }}>
+      <StrengthTrendChart
+        data={actual}
+        projection={projection}
+        mesoBoundaries={mesoBoundaries}
+        width={340}
+        height={150}
+        unit="lbs"
+        onPointPress={setSelected}
+      />
+      <Text style={{ marginTop: 12, fontSize: 12, color: '#9CA3AF' }}>
+        {selected
+          ? `Tapped ${selected.sessionLabel ?? selected.date}: ${selected.e1rm} lbs`
+          : 'Tap a point on the chart.'}
+      </Text>
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveChart />,
+}

package/src/components/custom/Workout/StrengthTrendChart.test.tsx

@@ -0,0 +1,217 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { StrengthTrendChart } from './StrengthTrendChart'
+import type { StrengthTrendDataPoint } from './StrengthTrendChart'
+
+const data: StrengthTrendDataPoint[] = [
+  { date: '2026-01-06', e1rm: 215, sessionLabel: 'Jan 6' },
+  { date: '2026-02-03', e1rm: 228, isPR: true, sessionLabel: 'Feb 3' },
+  { date: '2026-03-17', e1rm: 244, isPR: true, sessionLabel: 'Mar 17' },
+]
+
+const projection: StrengthTrendDataPoint[] = [
+  { date: '2026-03-17', e1rm: 244 },
+  { date: '2026-04-14', e1rm: 261 },
+]
+
+const mesoBoundaries = [
+  { date: '2026-02-03', label: 'Intensify' },
+  { date: '2026-03-17', label: 'Peak' },
+]
+
+const baseProps = {
+  data,
+  width: 340,
+  height: 150,
+  unit: 'lbs' as const,
+  animateOnMount: false,
+}
+
+describe('StrengthTrendChart', () => {
+  describe('rendering', () => {
+    it('renders the chart container and labelled canvas', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      expect(screen.getByTestId('strength-trend-chart')).toBeInTheDocument()
+      expect(screen.getByTestId('strength-trend-chart-canvas')).toBeInTheDocument()
+    })
+
+    it('renders a pressable point per actual data point', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      expect(screen.getAllByTestId('strength-trend-chart-point')).toHaveLength(3)
+    })
+
+    it('renders the actual line as connecting segments', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      // Two segments connect three points.
+      expect(
+        screen.getAllByTestId('strength-trend-chart-actual-segment'),
+      ).toHaveLength(2)
+    })
+
+    it('renders subtle horizontal gridlines', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      const grid = screen.getAllByTestId('strength-trend-chart-gridline')
+      expect(grid.length).toBeGreaterThanOrEqual(2)
+      expect(grid.length).toBeLessThanOrEqual(3)
+    })
+
+    it('renders a star marker for each PR point', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      expect(screen.getAllByTestId('strength-trend-chart-pr-star')).toHaveLength(2)
+    })
+
+    it('renders an Actual / Projected / PR legend', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      const legend = screen.getByTestId('strength-trend-chart-legend')
+      expect(legend).toHaveTextContent('Actual')
+      expect(legend).toHaveTextContent('Projected')
+      expect(legend).toHaveTextContent('PR')
+    })
+  })
+
+  describe('projection and meso boundaries', () => {
+    it('renders dashed projection segments when projection is provided', () => {
+      render(<StrengthTrendChart {...baseProps} projection={projection} />)
+      expect(
+        screen.getAllByTestId('strength-trend-chart-projection-segment'),
+      ).toHaveLength(1)
+    })
+
+    it('omits projection segments when none provided', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      expect(
+        screen.queryByTestId('strength-trend-chart-projection-segment'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('renders a boundary marker and axis label per meso boundary', () => {
+      render(<StrengthTrendChart {...baseProps} mesoBoundaries={mesoBoundaries} />)
+      expect(
+        screen.getAllByTestId('strength-trend-chart-meso-boundary'),
+      ).toHaveLength(2)
+      expect(
+        screen.getAllByTestId('strength-trend-chart-axis-label'),
+      ).toHaveLength(2)
+    })
+  })
+
+  describe('trend pill', () => {
+    it('shows a positive percentage for an improving series', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      const pill = screen.getByTestId('strength-trend-chart-trend-pill')
+      expect(pill).toHaveTextContent('this meso')
+      expect(pill.textContent?.startsWith('+')).toBe(true)
+    })
+
+    it('shows a negative percentage for a declining series', () => {
+      render(
+        <StrengthTrendChart
+          {...baseProps}
+          data={[
+            { date: '2026-03-03', e1rm: 248 },
+            { date: '2026-03-17', e1rm: 235 },
+          ]}
+        />,
+      )
+      const pill = screen.getByTestId('strength-trend-chart-trend-pill')
+      expect(pill.textContent?.startsWith('-')).toBe(true)
+    })
+
+    it('stays neutral instead of using the whole series when the current meso has <2 points', () => {
+      render(
+        <StrengthTrendChart
+          {...baseProps}
+          data={[
+            { date: '2026-01-06', e1rm: 200 },
+            { date: '2026-02-01', e1rm: 210 },
+            { date: '2026-03-20', e1rm: 250 },
+          ]}
+          mesoBoundaries={[{ date: '2026-03-01', label: 'Peak' }]}
+        />,
+      )
+      // Only one point falls in the current meso, so the pill must not report
+      // the whole-series jump (+25%) under the "this meso" label.
+      const pill = screen.getByTestId('strength-trend-chart-trend-pill')
+      expect(pill).toHaveTextContent('+0.0% this meso')
+    })
+  })
+
+  describe('interaction', () => {
+    it('fires onPointPress with the tapped point', () => {
+      const onPointPress = vi.fn()
+      render(<StrengthTrendChart {...baseProps} onPointPress={onPointPress} />)
+      fireEvent.click(screen.getAllByTestId('strength-trend-chart-point')[1])
+      expect(onPointPress).toHaveBeenCalledWith(
+        expect.objectContaining({ e1rm: 228 }),
+      )
+    })
+
+    it('shows a tooltip with value and unit after a point is tapped', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      expect(
+        screen.queryByTestId('strength-trend-chart-tooltip'),
+      ).not.toBeInTheDocument()
+      fireEvent.click(screen.getAllByTestId('strength-trend-chart-point')[2])
+      const tooltip = screen.getByTestId('strength-trend-chart-tooltip')
+      expect(tooltip).toHaveTextContent('244 lbs')
+    })
+  })
+
+  describe('empty state', () => {
+    it('renders an empty placeholder when there is no data', () => {
+      render(<StrengthTrendChart {...baseProps} data={[]} />)
+      expect(
+        screen.getByTestId('strength-trend-chart-empty'),
+      ).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('strength-trend-chart-canvas'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('shows the placeholder when data is empty even if a projection exists', () => {
+      render(<StrengthTrendChart {...baseProps} data={[]} projection={projection} />)
+      expect(
+        screen.getByTestId('strength-trend-chart-empty'),
+      ).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('strength-trend-chart-canvas'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('labels the chart as an image with current value and trend', () => {
+      render(<StrengthTrendChart {...baseProps} />)
+      const canvas = screen.getByTestId('strength-trend-chart-canvas')
+      expect(canvas).toHaveAttribute('role', 'img')
+      expect(canvas.getAttribute('aria-label')).toContain('Current: 244 lbs')
+      expect(canvas.getAttribute('aria-label')).toContain('Trend:')
+    })
+
+    it('labels the empty state accessibly', () => {
+      render(<StrengthTrendChart {...baseProps} data={[]} />)
+      expect(
+        screen.getByLabelText('Strength trend chart, no data'),
+      ).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<StrengthTrendChart {...baseProps} />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations with all features enabled', async () => {
+      const { container } = render(
+        <StrengthTrendChart
+          {...baseProps}
+          projection={projection}
+          mesoBoundaries={mesoBoundaries}
+          onPointPress={vi.fn()}
+          unit="kg"
+        />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})