@titan-design/react-ui 0.10.0 → 0.11.0

package/src/components/custom/charts/live-rep-growth.ts

@@ -0,0 +1,91 @@
+// The newest-rep grow-from-bottom entrance, shared by SetBarChart (hero / dual / ROM)
+// and VelocityStrip's framed + bare expanded charts. Promoted out of VelocityStrip so
+// every value-height bar family animates the live rep identically instead of re-rolling
+// the hook.
+import { useEffect, useState } from 'react'
+import { Animated, Easing } from 'react-native'
+
+const ANIMATION_EASING = Easing.bezier(0.22, 1, 0.36, 1)
+
+/**
+ * Growth-factor overshoot for a new-peak bar: it grows past its full height then
+ * settles back to 1 (a small bounce), rather than the plain 0→1 grow every other
+ * bar gets. Modest (12%) since it stretches actual bar HEIGHT, not a uniform scale
+ * — a large overshoot here reads as a much bigger jump than the same factor did
+ * against the old whole-bar scale pop.
+ */
+const PEAK_OVERSHOOT = 1.12
+
+function getReducedMotionPreference(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+/** Track the OS "reduce motion" preference; falls back to `false` (jsdom/SSR). */
+export function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(getReducedMotionPreference)
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const handler = () => setReduced(mq.matches)
+    handler()
+    mq.addEventListener?.('change', handler)
+    return () => mq.removeEventListener?.('change', handler)
+  }, [])
+  return reduced
+}
+
+/**
+ * The newest-rep entrance shared by SetBarChart and the framed / bare `expanded` charts:
+ * the bar GROWS UP FROM THE BASELINE (0 → full height), reading as though it's tracking
+ * the rep as it lands. A new set peak overshoots past full height then settles (a small
+ * bounce) instead of the plain grow. Honors reduced motion (jumps straight to full
+ * height, no animation). Returns a 0→1(+overshoot) growth-factor `Animated.Value`;
+ * callers interpolate it against their own target height. Inert while `active` is
+ * false or no live rep is present.
+ */
+export function useLiveRepGrowth(
+  active: boolean,
+  liveRepIndex: number | undefined,
+  liveVelocity: number | undefined,
+  isNewPeak: boolean
+): Animated.Value {
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const [liveGrowth] = useState(() => new Animated.Value(1))
+  useEffect(() => {
+    if (!active || liveRepIndex == null || liveVelocity == null) return
+    if (prefersReducedMotion) {
+      liveGrowth.setValue(1)
+      return
+    }
+    liveGrowth.setValue(0)
+    if (isNewPeak) {
+      Animated.sequence([
+        Animated.timing(liveGrowth, {
+          toValue: PEAK_OVERSHOOT,
+          duration: 220,
+          easing: Easing.out(Easing.quad),
+          useNativeDriver: false,
+        }),
+        Animated.spring(liveGrowth, {
+          toValue: 1,
+          friction: 5,
+          tension: 140,
+          useNativeDriver: false,
+        }),
+      ]).start()
+    } else {
+      // Plain entrance: a clean ease-out grow with no overshoot (ANIMATION_EASING has
+      // no control point above y=1) — it reads as tracking the rep, not bouncing.
+      Animated.timing(liveGrowth, {
+        toValue: 1,
+        duration: 300,
+        easing: ANIMATION_EASING,
+        useNativeDriver: false,
+      }).start()
+    }
+  }, [active, liveRepIndex, liveVelocity, isNewPeak, prefersReducedMotion, liveGrowth])
+  return liveGrowth
+}
+
+export { ANIMATION_EASING }

package/src/components/custom/index.ts

@@ -9,6 +9,7 @@ export * from './TimerReadout'
 export * from './CircularTimer'
 export * from './Metric'
 export * from './Workout'
+export * from './Fatigue'
 export * from './Treemap'
 export * from './Scatter'
 export * from './Gauge'

package/src/test/raw-color-patterns.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { createRequire } from 'node:module'
+
+const { extractRawColors } = createRequire(import.meta.url)(
+  '../../eslint-rules/raw-color-patterns.js'
+) as { extractRawColors: (text: string) => Array<{ value: string; id: string }> }
+
+const ids = (text: string) => extractRawColors(text).map((c) => c.id)
+const values = (text: string) => extractRawColors(text).map((c) => c.value)
+
+/**
+ * Detection for the `no-raw-color` ratchet. The rule and its baseline generator
+ * share this module, so a gap here silently widens the allowance rather than
+ * failing loudly — worth pinning the notations directly.
+ */
+describe('extractRawColors', () => {
+  it('detects every hex length', () => {
+    expect(ids('#fff')).toEqual(['hex'])
+    expect(ids('#ffff')).toEqual(['hex'])
+    expect(ids('#1C1916')).toEqual(['hex'])
+    expect(ids('#1C1916FF')).toEqual(['hex'])
+  })
+
+  it('detects functional notations, including ones with no occurrences today', () => {
+    for (const text of [
+      'rgb(1,2,3)',
+      'rgba(1,2,3,0.5)',
+      'hsl(1 2% 3%)',
+      'hsla(1,2%,3%,0.5)',
+      'oklch(0.5 0.2 30)',
+      'lab(50% 40 59)',
+      'color-mix(in oklch, red, blue)',
+    ]) {
+      expect(ids(text), text).toContain('functional')
+    }
+  })
+
+  it('detects Tailwind colour utilities but not layout classes', () => {
+    expect(ids('bg-red-500')).toEqual(['twPalette'])
+    expect(ids('text-slate-200')).toEqual(['twPalette'])
+    expect(ids('bg-white')).toEqual(['twAchromatic'])
+    expect(ids('bg-[#1C1C1C]')).toEqual(['twArbitrary'])
+    expect(ids('flex flex-row gap-2 p-4 rounded-lg')).toEqual([])
+    // Semantic utilities are the desired output, not violations.
+    expect(ids('bg-surface-raised text-text-primary')).toEqual([])
+  })
+
+  it('treats a bare keyword as a colour only when it is the whole value', () => {
+    expect(ids('white')).toEqual(['named'])
+    expect(ids('  black  ')).toEqual(['named'])
+    // Prose and identifiers must not match, or every comment becomes a violation.
+    expect(ids('white text on a black plane')).toEqual([])
+    expect(ids('whiteboard')).toEqual([])
+  })
+
+  it('does not flag absence or inheritance', () => {
+    // `transparent` encodes absence and `currentColor` defers to the cascade;
+    // neither has a token equivalent.
+    expect(ids('transparent')).toEqual([])
+    expect(ids('currentColor')).toEqual([])
+  })
+
+  it('normalises case so #FFF and #fff are the same debt', () => {
+    expect(values('#ABCDEF')).toEqual(['#abcdef'])
+  })
+
+  it('extracts every colour in a multi-colour literal', () => {
+    // The baseline funds each one, so both have to come back.
+    expect(values('linear-gradient(#111111, #222222)')).toEqual(['#111111', '#222222'])
+  })
+})