@titan-design/react-ui 0.2.6 → 0.2.7

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -64,7 +64,7 @@ export function Sidebar({
       <View
         style={{ width: currentWidth }}
         className={cn(
-          'h-full flex-col bg-surface-base border-r border-border-default transition-all duration-200',
+          'h-full flex-col bg-surface-base border-r border-border transition-all duration-200',
           className
         )}
         {...props}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Treemap, type TreemapDatum } from './Treemap'
+
+const meta: Meta<typeof Treemap> = {
+  title: 'Custom/Treemap',
+  component: Treemap,
+  tags: ['autodocs'],
+  argTypes: {
+    width: { control: { type: 'range', min: 200, max: 900, step: 20 } },
+    height: { control: { type: 'range', min: 120, max: 600, step: 20 } },
+    scale: { control: 'select', options: ['linear', 'sqrt', 'log'] },
+    maxTiles: { control: { type: 'range', min: 4, max: 80, step: 1 } },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Treemap>
+
+const sample: TreemapDatum[] = [
+  { id: 'router', value: 5035, color: '#F83030', label: 'router.ts' },
+  { id: 'engine', value: 4378, color: '#F83030', label: 'engine.ts' },
+  { id: 'linker', value: 1695, color: '#F4A736', label: 'linker.ts' },
+  { id: 'validate', value: 1288, color: '#F4A736', label: 'validate.ts' },
+  { id: 'hook', value: 1050, color: '#F4A736', label: 'hook.ts' },
+  { id: 'update', value: 890, color: '#5B9BD5', label: 'update.ts' },
+  { id: 'pool', value: 504, color: '#5B9BD5', label: 'pool.ts' },
+  { id: 'log', value: 342, color: '#5B9BD5', label: 'log.ts' },
+]
+
+export const Default: Story = {
+  args: { data: sample, width: 560, height: 300, scale: 'sqrt' },
+}
+
+/** A single outlier under a linear scale swallows the canvas... */
+export const OutlierLinear: Story = {
+  args: {
+    data: [{ id: 'mega', value: 205422, color: '#F83030', label: 'mega.ts' }, ...sample],
+    width: 560,
+    height: 300,
+    scale: 'linear',
+  },
+}
+
+/** ...the same data with a sqrt scale keeps every tile legible. */
+export const OutlierSqrt: Story = {
+  args: {
+    data: [{ id: 'mega', value: 205422, color: '#F83030', label: 'mega.ts' }, ...sample],
+    width: 560,
+    height: 300,
+    scale: 'sqrt',
+  },
+}
+
+export const Truncated: Story = {
+  args: {
+    data: Array.from({ length: 200 }, (_, i) => ({ id: `n${i}`, value: 200 - i })),
+    width: 560,
+    height: 300,
+    maxTiles: 40,
+  },
+}

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/BaseBadge.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { Dumbbell } from 'lucide-react'
+import { BaseBadge } from './BaseBadge'
+
+const meta: Meta<typeof BaseBadge> = {
+  title: 'Custom/Workout/BaseBadge',
+  component: BaseBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'select', options: ['plain', 'pr'], description: 'Visual variant' },
+    size: { control: 'select', options: ['sm', 'md', 'lg'], description: 'Badge size' },
+    onPress: { action: 'pressed', description: 'Callback when tapped' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof BaseBadge>
+
+const Label = ({ children, color = '#9CA3AF' }: { children: string; color?: string }) => (
+  <Text
+    style={{
+      fontFamily: '"Space Grotesk", sans-serif',
+      fontWeight: '600',
+      fontSize: 10,
+      color,
+    }}
+  >
+    {children}
+  </Text>
+)
+
+export const Plain: Story = {
+  args: {
+    variant: 'plain',
+    children: <Label>225 lbs</Label>,
+  },
+}
+
+export const Pr: Story = {
+  args: {
+    variant: 'pr',
+    children: <Label color="#FF7900">PR</Label>,
+  },
+}
+
+export const WithIcon: Story = {
+  args: {
+    variant: 'plain',
+    icon: <Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />,
+    children: <Label>225 lbs</Label>,
+  },
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <View style={{ gap: 12 }}>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <BaseBadge size="sm"><Label>225 lbs</Label></BaseBadge>
+        <BaseBadge size="md"><Label>225 lbs</Label></BaseBadge>
+        <BaseBadge size="lg"><Label>225 lbs</Label></BaseBadge>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <BaseBadge variant="pr" size="sm"><Label color="#FF7900">PR</Label></BaseBadge>
+        <BaseBadge variant="pr" size="md"><Label color="#FF7900">PR</Label></BaseBadge>
+        <BaseBadge variant="pr" size="lg"><Label color="#FF7900">PR</Label></BaseBadge>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <BaseBadge icon={<Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />}>
+          <Label>225 lbs</Label>
+        </BaseBadge>
+      </View>
+    </View>
+  ),
+}

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

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Text, View } from 'react-native'
+import { BaseBadge } from './BaseBadge'
+
+describe('BaseBadge', () => {
+  it('renders children', () => {
+    render(<BaseBadge testID="bb"><Text>Hello</Text></BaseBadge>)
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+
+  it('defaults to the plain variant border color', () => {
+    render(<BaseBadge testID="bb"><Text>x</Text></BaseBadge>)
+    expect(screen.getByTestId('bb')).toHaveStyle({ borderTopColor: '#1F1F1F' })
+  })
+
+  it('applies the pr variant border color', () => {
+    render(
+      <BaseBadge variant="pr" testID="bb">
+        <Text>x</Text>
+      </BaseBadge>,
+    )
+    expect(screen.getByTestId('bb')).toHaveStyle({
+      borderTopColor: 'rgba(255, 121, 0, 0.12)',
+    })
+  })
+
+  describe('icon', () => {
+    it('renders the icon when provided and hides it from the a11y tree', () => {
+      render(
+        <BaseBadge icon={<View testID="my-icon" />}>
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      expect(screen.getByTestId('base-badge-icon')).toBeInTheDocument()
+      expect(screen.getByTestId('my-icon')).toBeInTheDocument()
+    })
+
+    it('does not render an icon wrapper when no icon is provided', () => {
+      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      expect(screen.queryByTestId('base-badge-icon')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('onPress', () => {
+    it('wraps in a Pressable when onPress is provided', () => {
+      const onPress = vi.fn()
+      render(
+        <BaseBadge onPress={onPress} accessibilityLabel="Press me">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      const pressable = screen.getByTestId('base-badge-pressable')
+      fireEvent.click(pressable)
+      expect(onPress).toHaveBeenCalledOnce()
+    })
+
+    it('does not render a Pressable when onPress is omitted', () => {
+      render(<BaseBadge><Text>x</Text></BaseBadge>)
+      expect(screen.queryByTestId('base-badge-pressable')).not.toBeInTheDocument()
+    })
+
+    it('exposes a button role only when pressable', () => {
+      render(
+        <BaseBadge onPress={() => {}} accessibilityLabel="Press me">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
+  })
+
+  describe('size', () => {
+    it.each(['sm', 'md', 'lg'] as const)('renders %s size', (size) => {
+      render(<BaseBadge size={size} testID="bb"><Text>x</Text></BaseBadge>)
+      expect(screen.getByTestId('bb')).toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations as a static badge', async () => {
+      const { container } = render(
+        <BaseBadge accessibilityLabel="Static badge">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations as a pressable badge', async () => {
+      const { container } = render(
+        <BaseBadge onPress={() => {}} accessibilityLabel="Pressable badge">
+          <Text>x</Text>
+        </BaseBadge>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

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

@@ -0,0 +1,113 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { useState, type ReactNode } from 'react'
+import { View, Pressable, Animated, type ViewProps } from 'react-native'
+
+export type BaseBadgeVariant = 'plain' | 'pr'
+export type BaseBadgeSize = 'sm' | 'md' | 'lg'
+
+export interface BaseBadgeProps extends ViewProps {
+  /** Visual variant — plain (neutral) or pr (brand-primary-subtle) */
+  variant?: BaseBadgeVariant
+  /** Size variant */
+  size?: BaseBadgeSize
+  /** Optional icon rendered left of children; hidden from a11y tree */
+  icon?: ReactNode
+  onPress?: () => void
+  className?: string
+  children?: ReactNode
+}
+
+export const baseBadgeSizeConfig: Record<
+  BaseBadgeSize,
+  { fontSize: number; paddingH: number; paddingV: number; iconSize: number }
+> = {
+  sm: { fontSize: 9, paddingH: 6, paddingV: 2, iconSize: 10 },
+  md: { fontSize: 10, paddingH: 8, paddingV: 2, iconSize: 12 },
+  lg: { fontSize: 12, paddingH: 10, paddingV: 4, iconSize: 14 },
+}
+
+const variantColors: Record<
+  BaseBadgeVariant,
+  { backgroundColor: string; borderColor: string }
+> = {
+  plain: { backgroundColor: '#1C1C1C', borderColor: '#1F1F1F' },
+  pr: {
+    backgroundColor: 'rgba(255, 121, 0, 0.12)',
+    borderColor: 'rgba(255, 121, 0, 0.12)',
+  },
+}
+
+export function BaseBadge({
+  variant = 'plain',
+  size = 'md',
+  icon,
+  onPress,
+  className,
+  children,
+  ...props
+}: BaseBadgeProps) {
+  const [scaleAnim] = useState(() => new Animated.Value(1))
+  const config = baseBadgeSizeConfig[size]
+  const colors = variantColors[variant]
+
+  const handlePressIn = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 0.97,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const handlePressOut = () => {
+    Animated.timing(scaleAnim, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true,
+    }).start()
+  }
+
+  const badge = (
+    <View
+      className={className}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        // borderRadius 2 is intentional per workout-tokens.ts (squared-off pill)
+        borderRadius: 2,
+        borderWidth: 1,
+        borderColor: colors.borderColor,
+        backgroundColor: colors.backgroundColor,
+        paddingHorizontal: config.paddingH,
+        paddingVertical: config.paddingV,
+      }}
+      {...props}
+    >
+      {icon != null && (
+        <View accessibilityElementsHidden testID="base-badge-icon">
+          {icon}
+        </View>
+      )}
+      {children}
+    </View>
+  )
+
+  if (onPress) {
+    return (
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <Pressable
+          onPress={onPress}
+          onPressIn={handlePressIn}
+          onPressOut={handlePressOut}
+          accessibilityRole="button"
+          accessibilityLabel={props.accessibilityLabel}
+          testID="base-badge-pressable"
+        >
+          {badge}
+        </Pressable>
+      </Animated.View>
+    )
+  }
+
+  return badge
+}