@titan-design/react-ui 0.2.6 → 0.3.0

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

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Treemap, type TreemapDatum } from './Treemap'
+
+const data: TreemapDatum[] = [
+  { id: 'a', value: 100, color: '#5B9BD5', label: 'A' },
+  { id: 'b', value: 40, color: '#14B8A6', label: 'B' },
+  { id: 'c', value: 10, color: '#F4A736', label: 'C' },
+]
+
+describe('Treemap', () => {
+  it('renders one tile per positive datum', () => {
+    render(<Treemap data={data} width={300} height={200} />)
+    expect(screen.getByTestId('treemap-tile-a')).toBeInTheDocument()
+    expect(screen.getByTestId('treemap-tile-b')).toBeInTheDocument()
+    expect(screen.getByTestId('treemap-tile-c')).toBeInTheDocument()
+  })
+
+  it('drops non-positive values', () => {
+    render(<Treemap data={[...data, { id: 'zero', value: 0 }]} width={300} height={200} />)
+    expect(screen.queryByTestId('treemap-tile-zero')).not.toBeInTheDocument()
+  })
+
+  it('folds overflow into a single "+M more" tile', () => {
+    const many = Array.from({ length: 10 }, (_, i) => ({ id: `n${i}`, value: 10 - i * 0.5 }))
+    render(<Treemap data={many} width={300} height={200} maxTiles={4} />)
+    expect(screen.getByTestId('treemap-tile-__more__')).toBeInTheDocument()
+    // 3 explicit + 1 fold = 4 tiles
+    expect(screen.getByLabelText('+7 more')).toBeInTheDocument()
+  })
+
+  it('fires onPress with the tile id', () => {
+    const onPress = vi.fn()
+    render(<Treemap data={data} width={300} height={200} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('treemap-tile-a'))
+    expect(onPress).toHaveBeenCalledWith('a')
+  })
+
+  it('does not fire onPress for the fold tile', () => {
+    const onPress = vi.fn()
+    const many = Array.from({ length: 6 }, (_, i) => ({ id: `n${i}`, value: 6 - i }))
+    render(<Treemap data={many} width={300} height={200} maxTiles={3} onPress={onPress} />)
+    fireEvent.click(screen.getByTestId('treemap-tile-__more__'))
+    expect(onPress).not.toHaveBeenCalled()
+  })
+
+  it('assigns fallback palette colors when omitted', () => {
+    const { container } = render(
+      <Treemap data={[{ id: 'x', value: 1 }]} width={100} height={100} />,
+    )
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('renders nothing meaningful for all-zero data without crashing', () => {
+    render(<Treemap data={[{ id: 'z', value: 0 }]} width={100} height={100} />)
+    expect(screen.queryByTestId('treemap-tile-z')).not.toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Treemap data={data} width={300} height={200} />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/custom/Treemap/Treemap.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { View, Text, Pressable, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface TreemapDatum {
+  /** Stable identity — returned by onPress and used as the React key. */
+  id: string
+  /** Area weight (e.g. size, count, severity). Non-positive values are dropped. */
+  value: number
+  /** Tile fill color. Falls back to a built-in categorical palette by index. */
+  color?: string
+  /** Optional label rendered inside sufficiently large tiles. */
+  label?: string
+}
+
+export type TreemapScale = 'linear' | 'sqrt' | 'log'
+
+export interface TreemapProps extends Omit<ViewProps, 'children'> {
+  data: TreemapDatum[]
+  /** Layout box. Required — the treemap fills exactly this area. */
+  width: number
+  height: number
+  /**
+   * Area scale. Real-world weights are often heavy-tailed, where one outlier
+   * under a `linear` scale swallows the whole canvas. `sqrt` (default) damps
+   * that while preserving order; `log` compresses hardest.
+   */
+  scale?: TreemapScale
+  /** Show at most N tiles; the remainder collapse into one "+M more" tile. */
+  maxTiles?: number
+  /** Fires with a tile's id on press (never for the "+M more" tile). */
+  onPress?: (id: string) => void
+  /** Draws a highlight border on the matching tile. */
+  selectedId?: string
+  className?: string
+}
+
+/** Titan categorical fallback palette (data-1..data-8). */
+const PALETTE = [
+  '#5B9BD5', '#14B8A6', '#F4A736', '#F83030',
+  '#823CA0', '#D4A520', '#406D87', '#43C6B7',
+]
+
+interface Rect {
+  x: number
+  y: number
+  w: number
+  h: number
+  datum: TreemapDatum
+}
+
+function scaleValue(v: number, scale: TreemapScale): number {
+  if (v <= 0) return 0
+  if (scale === 'sqrt') return Math.sqrt(v)
+  if (scale === 'log') return Math.log10(v + 1)
+  return v
+}
+
+function worstRatio(row: { area: number }[], side: number): number {
+  const sum = row.reduce((s, r) => s + r.area, 0)
+  const thickness = sum / side
+  let worst = 0
+  for (const r of row) {
+    const len = r.area / thickness
+    const ratio = Math.max(thickness / len, len / thickness)
+    if (ratio > worst) worst = ratio
+  }
+  return worst
+}
+
+/** Squarified treemap (Bruls, Huizing & van Wijk, 2000). */
+function squarify(data: TreemapDatum[], w: number, h: number): Rect[] {
+  const total = data.reduce((s, d) => s + d.value, 0)
+  if (total <= 0 || w <= 0 || h <= 0) return []
+  const scaled = data.map((d) => ({ datum: d, area: (d.value / total) * w * h }))
+  const out: Rect[] = []
+  let rx = 0
+  let ry = 0
+  let rw = w
+  let rh = h
+  let i = 0
+
+  while (i < scaled.length) {
+    const vertical = rw >= rh
+    const side = vertical ? rh : rw
+    let row: typeof scaled = []
+    let bestWorst = Infinity
+    let j = i
+    while (j < scaled.length) {
+      const trial = [...row, scaled[j]]
+      const worst = worstRatio(trial, side)
+      if (row.length > 0 && worst > bestWorst) break
+      row = trial
+      bestWorst = worst
+      j++
+    }
+    const rowArea = row.reduce((s, r) => s + r.area, 0)
+    const thickness = rowArea / side
+    let along = vertical ? ry : rx
+    for (const r of row) {
+      const len = r.area / thickness
+      out.push(
+        vertical
+          ? { x: rx, y: along, w: thickness, h: len, datum: r.datum }
+          : { x: along, y: ry, w: len, h: thickness, datum: r.datum },
+      )
+      along += len
+    }
+    if (vertical) {
+      rx += thickness
+      rw -= thickness
+    } else {
+      ry += thickness
+      rh -= thickness
+    }
+    i = j
+  }
+  return out
+}
+
+/**
+ * Squarified treemap. SVG-free (absolutely-positioned tiles) so it renders
+ * identically on web (react-native-web) and native. Layout is computed from
+ * `value`; color and labels are caller-supplied.
+ */
+export function Treemap({
+  data,
+  width,
+  height,
+  scale = 'sqrt',
+  maxTiles = 60,
+  onPress,
+  selectedId,
+  className,
+  ...props
+}: TreemapProps) {
+  const clean = data
+    .filter((d) => d.value > 0)
+    .sort((a, b) => b.value - a.value)
+    .map((d, i) => ({ ...d, color: d.color ?? PALETTE[i % PALETTE.length] }))
+
+  let tiles = clean
+  if (clean.length > maxTiles) {
+    const head = clean.slice(0, maxTiles - 1)
+    const restValue = clean.slice(maxTiles - 1).reduce((s, d) => s + d.value, 0)
+    tiles = [
+      ...head,
+      { id: '__more__', value: restValue, color: '#3a3a3a', label: `+${clean.length - (maxTiles - 1)} more` },
+    ]
+  }
+
+  const weighted = tiles.map((d) => ({ ...d, value: scaleValue(d.value, scale) }))
+  const rects = squarify(weighted, width, height)
+
+  return (
+    <View className={cn('relative', className)} style={{ width, height }} {...props}>
+      {rects.map((r) => {
+        const selected = r.datum.id === selectedId
+        const labelFits = r.w > 54 && r.h > 22
+        const pressable = r.datum.id !== '__more__'
+        return (
+          <Pressable
+            key={r.datum.id}
+            testID={`treemap-tile-${r.datum.id}`}
+            accessibilityLabel={r.datum.label ?? r.datum.id}
+            onPress={pressable ? () => onPress?.(r.datum.id) : undefined}
+            style={{
+              position: 'absolute',
+              left: r.x,
+              top: r.y,
+              width: Math.max(0, r.w - 2),
+              height: Math.max(0, r.h - 2),
+              backgroundColor: r.datum.color,
+              borderRadius: 3,
+              opacity: selected ? 1 : 0.9,
+              borderWidth: selected ? 2 : 0,
+              borderColor: '#ffffff',
+              padding: 4,
+              overflow: 'hidden',
+            }}
+          >
+            {labelFits && (
+              <Text numberOfLines={2} className="text-[10px] font-semibold text-[#0b0b0b]">
+                {r.datum.label ?? r.datum.id}
+              </Text>
+            )}
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}

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

@@ -0,0 +1,2 @@
+export { Treemap } from './Treemap'
+export type { TreemapProps, TreemapDatum, TreemapScale } from './Treemap'

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

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { ActiveWorkoutPage, type ActiveWorkoutExercise } from './ActiveWorkoutPage'
+import type { SetRowProps } from './SetRow'
+
+function activeSets(weight: number, logged: number, total: number): SetRowProps[] {
+  return Array.from({ length: total }, (_, i) => {
+    const setNumber = i + 1
+    if (setNumber <= logged) {
+      return {
+        mode: 'completed' as const,
+        setNumber,
+        previous: { reps: 8, weight: weight - 5 },
+        reps: 8,
+        weight,
+        rpe: 7.5 + setNumber * 0.5,
+        unit: 'lbs' as const,
+      }
+    }
+    return {
+      mode: 'active' as const,
+      setNumber,
+      previous: { reps: 8, weight: weight - 5 },
+      reps: null,
+      weight: null,
+      unit: 'lbs' as const,
+      isNextSet: setNumber === logged + 1,
+      targets: { reps: 8, weight },
+    }
+  })
+}
+
+const velocities = (base: number): number[] =>
+  Array.from({ length: 8 }, (_, i) => Number((base - i * 0.03).toFixed(2)))
+
+const exercises: ActiveWorkoutExercise[] = [
+  {
+    id: 'warmup',
+    name: 'Band Pull-Apart',
+    status: 'completed',
+    unit: 'lbs',
+    totalPlannedSets: 2,
+    summary: { sets: 2, reps: 15, weight: 0, unit: 'lbs' },
+    setVelocities: [velocities(0.9), velocities(0.88)],
+  },
+  {
+    id: 'bench',
+    name: 'Barbell Bench Press',
+    status: 'active',
+    unit: 'lbs',
+    totalPlannedSets: 4,
+    e1rm: { value: 248, unit: 'lbs' },
+    tempo: [3, 1, 1, 0],
+    setVelocities: [velocities(0.72), velocities(0.68)],
+    sets: activeSets(195, 2, 4),
+  },
+  {
+    id: 'incline-db',
+    name: 'Incline DB Press',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 10 @ RPE 8',
+    previousBest: 'Last: 70 lbs',
+    supersetId: 'ss1',
+  },
+  {
+    id: 'lateral-raise',
+    name: 'Cable Lateral Raise',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 15 @ RPE 9',
+    previousBest: 'Last: 20 lbs',
+    supersetId: 'ss1',
+  },
+  {
+    id: 'triceps',
+    name: 'Rope Pushdown',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 12 @ RPE 9',
+    previousBest: 'Last: 55 lbs',
+  },
+]
+
+const meta: Meta<typeof ActiveWorkoutPage> = {
+  title: 'Custom/Workout/ActiveWorkoutPage',
+  component: ActiveWorkoutPage,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  args: {
+    title: 'Push Day A',
+    subtitle: 'Hypertrophy · Week 6 of 8',
+    exercises,
+    supersets: [{ id: 'ss1', label: 'SS1', color: '#22D3EE' }],
+    input: { reps: '8', weight: '195' },
+    rest: { totalSeconds: 120, elapsedMs: 42_000, nextSetInfo: 'Set 3 · 8 × 195 lbs' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ActiveWorkoutPage>
+
+export const Default: Story = {}
+
+export const Resting: Story = {
+  args: { initialResting: true },
+}
+
+export const AllCollapsed: Story = {
+  args: {
+    exercises: exercises.map((exercise) =>
+      exercise.status === 'active' ? { ...exercise, status: 'completed' } : exercise
+    ),
+    input: undefined,
+  },
+}

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

@@ -0,0 +1,171 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  ActiveWorkoutPage,
+  countCompletedSets,
+  deriveWorkoutProgress,
+  findActiveExercise,
+  statusToCardState,
+  groupExercises,
+  type ActiveWorkoutExercise,
+  type ActiveWorkoutPageProps,
+} from './ActiveWorkoutPage'
+
+const exercises: ActiveWorkoutExercise[] = [
+  {
+    id: 'warmup',
+    name: 'Band Pull-Apart',
+    status: 'completed',
+    unit: 'lbs',
+    totalPlannedSets: 2,
+    summary: { sets: 2, reps: 15, weight: 0, unit: 'lbs' },
+    setVelocities: [[0.9], [0.88]],
+  },
+  {
+    id: 'bench',
+    name: 'Barbell Bench Press',
+    status: 'active',
+    unit: 'lbs',
+    totalPlannedSets: 4,
+    setVelocities: [[0.72], [0.68]],
+    sets: [
+      { mode: 'completed', setNumber: 1, reps: 8, weight: 195, rpe: 8, unit: 'lbs' },
+      { mode: 'active', setNumber: 3, reps: null, weight: null, unit: 'lbs', isNextSet: true },
+    ],
+  },
+  {
+    id: 'incline',
+    name: 'Incline DB Press',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 10',
+    supersetId: 'ss1',
+  },
+  {
+    id: 'lateral',
+    name: 'Cable Lateral Raise',
+    status: 'upcoming',
+    unit: 'lbs',
+    totalPlannedSets: 3,
+    prescription: '3 × 15',
+    supersetId: 'ss1',
+  },
+]
+
+const baseProps: ActiveWorkoutPageProps = {
+  title: 'Push Day A',
+  subtitle: 'Week 6 of 8',
+  exercises,
+  supersets: [{ id: 'ss1', label: 'SS1', color: '#22D3EE' }],
+  input: { reps: '8', weight: '195' },
+  rest: { totalSeconds: 120, elapsedMs: 30_000, nextSetInfo: 'Set 3' },
+}
+
+describe('countCompletedSets', () => {
+  it('uses logged velocities when present', () => {
+    expect(countCompletedSets(exercises[1])).toBe(2)
+  })
+
+  it('falls back to the full plan for a completed exercise without velocities', () => {
+    expect(countCompletedSets({ ...exercises[0], setVelocities: undefined })).toBe(2)
+  })
+
+  it('counts zero for an upcoming exercise', () => {
+    expect(countCompletedSets(exercises[2])).toBe(0)
+  })
+})
+
+describe('deriveWorkoutProgress', () => {
+  it('rolls up completed exercises, sets, and the fraction', () => {
+    const progress = deriveWorkoutProgress(exercises)
+    expect(progress.completedExercises).toBe(1)
+    expect(progress.totalExercises).toBe(4)
+    expect(progress.completedSets).toBe(4)
+    expect(progress.totalSets).toBe(12)
+    expect(progress.fraction).toBeCloseTo(1 / 3)
+  })
+
+  it('is zeroed for an empty workout', () => {
+    expect(deriveWorkoutProgress([])).toEqual({
+      completedExercises: 0,
+      totalExercises: 0,
+      completedSets: 0,
+      totalSets: 0,
+      fraction: 0,
+    })
+  })
+})
+
+describe('findActiveExercise', () => {
+  it('returns the active exercise', () => {
+    expect(findActiveExercise(exercises)?.id).toBe('bench')
+  })
+
+  it('returns null when none are active', () => {
+    expect(findActiveExercise([exercises[0]])).toBeNull()
+  })
+})
+
+describe('statusToCardState', () => {
+  it('keeps upcoming exercises upcoming regardless of focus', () => {
+    expect(statusToCardState('upcoming', true)).toBe('upcoming')
+    expect(statusToCardState('upcoming', false)).toBe('upcoming')
+  })
+
+  it('expands only the focused active/completed exercise', () => {
+    expect(statusToCardState('active', true)).toBe('expanded')
+    expect(statusToCardState('active', false)).toBe('collapsed')
+    expect(statusToCardState('completed', true)).toBe('expanded')
+  })
+})
+
+describe('groupExercises', () => {
+  it('folds consecutive same-superset exercises into one group', () => {
+    const groups = groupExercises(exercises, baseProps.supersets ?? [])
+    expect(groups).toHaveLength(3)
+    expect(groups[0]).toEqual({ type: 'single', exercise: exercises[0] })
+    expect(groups[2].type).toBe('superset')
+    if (groups[2].type === 'superset') {
+      expect(groups[2].exercises).toHaveLength(2)
+      expect(groups[2].superset.label).toBe('SS1')
+    }
+  })
+})
+
+describe('ActiveWorkoutPage', () => {
+  it('renders the header, progress, and the focused active exercise expanded', () => {
+    render(<ActiveWorkoutPage {...baseProps} />)
+    expect(screen.getByTestId('active-workout-page')).toBeInTheDocument()
+    expect(screen.getByTestId('active-workout-page-title')).toHaveTextContent('Push Day A')
+    expect(screen.getByTestId('active-workout-page-progress-count')).toHaveTextContent('1/4')
+    expect(screen.getByTestId('exercise-card-sets')).toBeInTheDocument()
+    expect(screen.getByTestId('superset-wrapper')).toBeInTheDocument()
+  })
+
+  it('shows the input bar and hides it once a set is recorded (starts rest)', () => {
+    render(<ActiveWorkoutPage {...baseProps} />)
+    expect(screen.getByTestId('input-bar')).toBeInTheDocument()
+    expect(screen.getByTestId('input-bar-set-info')).toHaveTextContent('Set 3/4')
+
+    fireEvent.click(screen.getByTestId('input-bar-record'))
+    expect(screen.queryByTestId('input-bar')).not.toBeInTheDocument()
+    expect(screen.getByTestId('rest-timer')).toBeInTheDocument()
+  })
+
+  it('zoom-toggles focus: collapsing the active card hides its sets', () => {
+    render(<ActiveWorkoutPage {...baseProps} />)
+    expect(screen.getByTestId('exercise-card-sets')).toBeInTheDocument()
+
+    fireEvent.click(screen.getAllByTestId('exercise-card-header')[0])
+    expect(screen.queryByTestId('exercise-card-sets')).not.toBeInTheDocument()
+  })
+
+  it('skipping rest restores the input bar', () => {
+    render(<ActiveWorkoutPage {...baseProps} initialResting />)
+    expect(screen.getByTestId('rest-timer')).toBeInTheDocument()
+
+    fireEvent.click(screen.getByTestId('rest-timer-skip'))
+    expect(screen.getByTestId('input-bar')).toBeInTheDocument()
+  })
+})