@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+import { View, Text, Pressable } from 'react-native'
+import { PrHistoryModal, type PrRecord } from './PrHistoryModal'
+
+const records: PrRecord[] = [
+  { type: 'e1rm', value: 245, unit: 'lbs', date: 'Mar 14', isRecent: true },
+  { type: 'weight', value: 225, unit: 'lbs', date: 'Mar 14', isRecent: true },
+  { type: 'reps', value: '8 @ 185 lbs', date: 'Feb 28' },
+  { type: 'volume', value: '12,400 lbs', date: 'Feb 14' },
+  { type: 'velocity', value: '0.82 m/s', date: 'Jan 30' },
+]
+
+const meta: Meta<typeof PrHistoryModal> = {
+  title: 'Custom/Workout/PrHistoryModal',
+  component: PrHistoryModal,
+  tags: ['autodocs'],
+  argTypes: {
+    exerciseId: {
+      control: 'text',
+      description: 'Identifier of the exercise whose PR history is shown',
+    },
+    exerciseName: {
+      control: 'text',
+      description: 'Human-readable name used in the title and a11y label',
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Whether the bottom sheet is visible',
+    },
+    records: {
+      control: 'object',
+      description: 'PR records to display, newest-first',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof PrHistoryModal>
+
+export const Default: Story = {
+  args: {
+    exerciseId: 'bench-press',
+    exerciseName: 'Bench Press',
+    isOpen: true,
+    records,
+    onClose: () => {},
+  },
+}
+
+export const RecentPrsHighlighted: Story = {
+  args: {
+    ...Default.args,
+    records: records.map((r) => ({ ...r, isRecent: true })),
+  },
+}
+
+export const SingleRecord: Story = {
+  args: {
+    ...Default.args,
+    exerciseName: 'Barbell Row',
+    records: [{ type: 'e1rm', value: 185, unit: 'lbs', date: 'Today', isRecent: true }],
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    ...Default.args,
+    exerciseName: 'Overhead Press',
+    records: [],
+  },
+}
+
+export const FallsBackToExerciseId: Story = {
+  args: {
+    exerciseId: 'deadlift',
+    exerciseName: undefined,
+    isOpen: true,
+    records,
+    onClose: () => {},
+  },
+}
+
+function InteractivePrHistoryModal() {
+  const [open, setOpen] = useState(false)
+  return (
+    <View style={{ padding: 16 }}>
+      <Pressable
+        onPress={() => setOpen(true)}
+        accessibilityRole="button"
+        style={{
+          alignSelf: 'flex-start',
+          backgroundColor: '#FF7900',
+          paddingVertical: 10,
+          paddingHorizontal: 20,
+          borderRadius: 8,
+        }}
+      >
+        <Text style={{ color: '#FFFFFF', fontWeight: '700', fontFamily: 'Inter, sans-serif' }}>
+          Open PR history
+        </Text>
+      </Pressable>
+      <PrHistoryModal
+        exerciseId="bench-press"
+        exerciseName="Bench Press"
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        records={records}
+      />
+    </View>
+  )
+}
+
+export const Interactive: Story = {
+  render: () => <InteractivePrHistoryModal />,
+}

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

@@ -0,0 +1,161 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { PrHistoryModal, type PrRecord } from './PrHistoryModal'
+
+const records: PrRecord[] = [
+  { type: 'e1rm', value: 245, unit: 'lbs', date: 'Mar 14', isRecent: true },
+  { type: 'reps', value: '8 @ 185 lbs', date: 'Feb 28' },
+  { type: 'velocity', value: '0.82 m/s', date: 'Jan 30' },
+]
+
+const baseProps = {
+  exerciseId: 'bench-press',
+  exerciseName: 'Bench Press',
+  isOpen: true,
+  records,
+  onClose: vi.fn(),
+}
+
+describe('PrHistoryModal', () => {
+  describe('rendering', () => {
+    it('renders the sheet with title when open', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(screen.getByTestId('pr-history-modal')).toBeInTheDocument()
+      expect(screen.getByTestId('pr-history-modal-title')).toHaveTextContent(
+        'Bench Press PR history',
+      )
+    })
+
+    it('does not render when closed', () => {
+      render(<PrHistoryModal {...baseProps} isOpen={false} />)
+      expect(screen.queryByTestId('pr-history-modal')).not.toBeInTheDocument()
+    })
+
+    it('supports the `visible` alias for visibility', () => {
+      render(
+        <PrHistoryModal
+          exerciseId="bench-press"
+          exerciseName="Bench Press"
+          visible
+          records={records}
+          onClose={vi.fn()}
+        />,
+      )
+      expect(screen.getByTestId('pr-history-modal')).toBeInTheDocument()
+    })
+
+    it('falls back to exerciseId when no name is given', () => {
+      render(
+        <PrHistoryModal
+          exerciseId="deadlift"
+          isOpen
+          records={records}
+          onClose={vi.fn()}
+        />,
+      )
+      expect(screen.getByTestId('pr-history-modal-title')).toHaveTextContent(
+        'deadlift PR history',
+      )
+    })
+
+    it('renders a drag handle', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(screen.getByTestId('pr-history-modal-handle')).toBeInTheDocument()
+    })
+  })
+
+  describe('records', () => {
+    it('renders a row per record with type, value, and date', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(screen.getByTestId('pr-history-modal-record-0-type')).toHaveTextContent(
+        'e1RM',
+      )
+      expect(screen.getByTestId('pr-history-modal-record-0-value')).toHaveTextContent(
+        '245 lbs',
+      )
+      expect(screen.getByTestId('pr-history-modal-record-0-date')).toHaveTextContent(
+        'Mar 14',
+      )
+    })
+
+    it('renders pre-formatted string values verbatim', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(screen.getByTestId('pr-history-modal-record-1-value')).toHaveTextContent(
+        '8 @ 185 lbs',
+      )
+    })
+
+    it('renders one row per supplied record', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(screen.getByTestId('pr-history-modal-record-0')).toBeInTheDocument()
+      expect(screen.getByTestId('pr-history-modal-record-1')).toBeInTheDocument()
+      expect(screen.getByTestId('pr-history-modal-record-2')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('pr-history-modal-record-3'),
+      ).not.toBeInTheDocument()
+    })
+
+    it('marks recent records in their accessible label', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(
+        screen.getByLabelText('e1RM personal record: 245 lbs, Mar 14, recent'),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByLabelText('Reps personal record: 8 @ 185 lbs, Feb 28'),
+      ).toBeInTheDocument()
+    })
+
+    it('shows an empty state when there are no records', () => {
+      render(<PrHistoryModal {...baseProps} records={[]} />)
+      expect(screen.getByTestId('pr-history-modal-empty')).toBeInTheDocument()
+      expect(
+        screen.queryByTestId('pr-history-modal-record-0'),
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe('interaction', () => {
+    it('calls onClose when the close button is pressed', () => {
+      const onClose = vi.fn()
+      render(<PrHistoryModal {...baseProps} onClose={onClose} />)
+      fireEvent.click(screen.getByTestId('pr-history-modal-close'))
+      expect(onClose).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('exposes a dialog role labelled with the exercise', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      const dialog = screen.getByRole('dialog')
+      expect(dialog).toHaveAttribute('aria-label', 'Bench Press PR history')
+    })
+
+    it('labels the close affordance', () => {
+      render(<PrHistoryModal {...baseProps} />)
+      expect(screen.getByLabelText('Close PR history')).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(<PrHistoryModal {...baseProps} />)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations across all states (recent, plain, empty-safe)', async () => {
+      const { container } = render(
+        <PrHistoryModal
+          exerciseId="squat"
+          exerciseName="Back Squat"
+          isOpen
+          onClose={vi.fn()}
+          records={[
+            { type: 'e1rm', value: 405, unit: 'lbs', date: 'Today', isRecent: true },
+            { type: 'weight', value: 365, unit: 'lbs', date: 'Last week' },
+            { type: 'volume', value: '18,200 lbs', date: 'Mar 1' },
+          ]}
+        />,
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,244 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { Star } from 'lucide-react'
+import { Drawer, DrawerBody } from '../../ui/drawer'
+
+const BRAND_PRIMARY = '#FF7900'
+const RECENT_BORDER = 'rgba(255,176,32,0.3)'
+const RECENT_GLOW = '0 0 12px rgba(255,176,32,0.06)'
+const SURFACE_RAISED = 'var(--color-surface-raised)'
+const BORDER_DEFAULT = 'var(--color-border-default)'
+const TEXT_PRIMARY = 'var(--color-text-primary)'
+const TEXT_SECONDARY = 'var(--color-text-secondary)'
+const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+
+export type PrRecordType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
+
+export interface PrRecord {
+  /** PR category, drives the row label and ordering grouping. */
+  type: PrRecordType
+  /** Numeric magnitude (paired with `unit`) or a pre-formatted display string. */
+  value: string | number
+  /** Unit suffix appended to numeric values, e.g. "lbs" or "kg". */
+  unit?: 'lbs' | 'kg'
+  /** Display date for when the record was set, e.g. "Mar 14" or "2 weeks ago". */
+  date: string
+  /** Marks the record as recently set; adds a subtle amber glow highlight. */
+  isRecent?: boolean
+}
+
+export interface PrHistoryModalProps extends ViewProps {
+  /** Identifier of the exercise whose PR history is shown. */
+  exerciseId: string
+  /** Human-readable exercise name for the title and a11y label; falls back to `exerciseId`. */
+  exerciseName?: string
+  /** PR records to display, expected newest-first. */
+  records: PrRecord[]
+  /** Whether the bottom sheet is visible. */
+  isOpen?: boolean
+  /** Alias for `isOpen` (spec wording: "isOpen/visible"). `isOpen` wins when both are set. */
+  visible?: boolean
+  /** Invoked when the sheet requests to close (backdrop, close button, or back gesture). */
+  onClose: () => void
+}
+
+const TYPE_LABELS: Record<PrRecordType, string> = {
+  e1rm: 'e1RM',
+  weight: 'Weight',
+  reps: 'Reps',
+  volume: 'Volume',
+  velocity: 'Velocity',
+}
+
+function recordLabel(type: PrRecordType): string {
+  return TYPE_LABELS[type] ?? type
+}
+
+function recordValueText({ value, unit }: PrRecord): string {
+  if (typeof value === 'number') {
+    return unit ? `${value} ${unit}` : String(value)
+  }
+  return value
+}
+
+function PrRecordRow({ record, index }: { record: PrRecord; index: number }) {
+  const label = recordLabel(record.type)
+  const valueText = recordValueText(record)
+  const a11yLabel = record.isRecent
+    ? `${label} personal record: ${valueText}, ${record.date}, recent`
+    : `${label} personal record: ${valueText}, ${record.date}`
+
+  return (
+    <View
+      accessibilityRole="text"
+      accessibilityLabel={a11yLabel}
+      className="flex-row items-center"
+      style={{
+        gap: 10,
+        paddingVertical: 10,
+        paddingHorizontal: 12,
+        marginBottom: 8,
+        borderRadius: 8,
+        backgroundColor: SURFACE_RAISED,
+        borderWidth: 1,
+        borderColor: record.isRecent ? RECENT_BORDER : BORDER_DEFAULT,
+        ...(record.isRecent ? { boxShadow: RECENT_GLOW } : {}),
+      }}
+      testID={`pr-history-modal-record-${index}`}
+    >
+      <Star size={16} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
+      <Text
+        style={{
+          flex: 1,
+          fontSize: 13,
+          fontFamily: 'Inter, sans-serif',
+          fontWeight: '600',
+          color: TEXT_SECONDARY,
+        }}
+        testID={`pr-history-modal-record-${index}-type`}
+      >
+        {label}
+      </Text>
+      <Text
+        style={{
+          fontSize: 14,
+          fontFamily: '"Space Grotesk", sans-serif',
+          fontWeight: '700',
+          color: TEXT_PRIMARY,
+        }}
+        testID={`pr-history-modal-record-${index}-value`}
+      >
+        {valueText}
+      </Text>
+      <Text
+        style={{
+          minWidth: 64,
+          textAlign: 'right',
+          fontSize: 11,
+          fontFamily: 'Inter, sans-serif',
+          color: TEXT_TERTIARY,
+        }}
+        testID={`pr-history-modal-record-${index}-date`}
+      >
+        {record.date}
+      </Text>
+    </View>
+  )
+}
+
+/**
+ * Bottom-sheet modal listing an exercise's personal-record history. Each row
+ * shows the PR type, value, and date; recent records get a subtle amber glow.
+ * Built on the titan `Drawer` primitive (bottom placement) so it inherits
+ * backdrop dismissal, the back gesture, and `role="dialog"` semantics.
+ *
+ * Typically triggered by tapping a `WeightBadge`, but the modal itself is
+ * controlled — the trigger lives in the consumer.
+ *
+ * @example
+ * <PrHistoryModal
+ *   exerciseId="bench-press"
+ *   exerciseName="Bench Press"
+ *   isOpen={open}
+ *   onClose={() => setOpen(false)}
+ *   records={[
+ *     { type: 'e1rm', value: 245, unit: 'lbs', date: 'Mar 14', isRecent: true },
+ *     { type: 'reps', value: '8 @ 185 lbs', date: 'Feb 28' },
+ *   ]}
+ * />
+ */
+export function PrHistoryModal({
+  exerciseId,
+  exerciseName,
+  records,
+  isOpen,
+  visible,
+  onClose,
+  ...props
+}: PrHistoryModalProps) {
+  const open = isOpen ?? visible ?? false
+  const exercise = exerciseName ?? exerciseId
+  const dialogLabel = `${exercise} PR history`
+
+  return (
+    <Drawer
+      isOpen={open}
+      onClose={onClose}
+      placement="bottom"
+      showCloseButton={false}
+      className="rounded-t-2xl h-auto max-h-[85%]"
+      accessibilityLabel={dialogLabel}
+      testID="pr-history-modal"
+      {...props}
+    >
+      <View
+        accessibilityElementsHidden
+        style={{
+          alignSelf: 'center',
+          width: 40,
+          height: 4,
+          borderRadius: 2,
+          marginTop: 8,
+          backgroundColor: BORDER_DEFAULT,
+        }}
+        testID="pr-history-modal-handle"
+      />
+
+      <View
+        className="flex-row items-center justify-between"
+        style={{ paddingHorizontal: 16, paddingTop: 12, paddingBottom: 8 }}
+        testID="pr-history-modal-header"
+      >
+        <Text
+          accessibilityRole="header"
+          style={{
+            fontSize: 16,
+            fontFamily: '"Space Grotesk", sans-serif',
+            fontWeight: '700',
+            color: TEXT_PRIMARY,
+          }}
+          testID="pr-history-modal-title"
+        >
+          {dialogLabel}
+        </Text>
+        <Pressable
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Close PR history"
+          hitSlop={8}
+          style={{ padding: 4, margin: -4 }}
+          testID="pr-history-modal-close"
+        >
+          <Text style={{ fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY }}>
+            {'×'}
+          </Text>
+        </Pressable>
+      </View>
+
+      <DrawerBody className="px-4 pt-0 pb-4">
+        {records.length === 0 ? (
+          <View style={{ paddingVertical: 24 }} testID="pr-history-modal-empty">
+            <Text
+              style={{
+                textAlign: 'center',
+                fontSize: 13,
+                fontFamily: 'Inter, sans-serif',
+                color: TEXT_TERTIARY,
+              }}
+            >
+              No personal records yet
+            </Text>
+          </View>
+        ) : (
+          records.map((record, index) => (
+            <PrRecordRow
+              key={`${record.type}-${record.date}-${index}`}
+              record={record}
+              index={index}
+            />
+          ))
+        )}
+      </DrawerBody>
+    </Drawer>
+  )
+}