jfs-components 0.0.79 → 0.0.85

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,273 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import { useReducedMotion } from '../../skeleton/useReducedMotion'
+
+/**
+ * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
+ * override any subset via the `colors` prop.
+ */
+export type SpinnerColors = {
+  /** Leading segment (front of the falling chain). */
+  primary?: string
+  /** Middle segment. */
+  secondary?: string
+  /** Trailing segment (tail of the chain). */
+  tertiary?: string
+}
+
+type SpinnerBaseProps = Omit<ViewProps, 'children' | 'style'>
+
+export type SpinnerProps = SpinnerBaseProps & {
+  /**
+   * Diameter in px. The spinner is always rendered at a 1:1 ratio, so a single
+   * size controls both width and height. Defaults to the Figma size (72).
+   */
+  size?: number
+  /**
+   * Duration of one full clockwise revolution of the leading segment, in ms.
+   * Lower = faster. Defaults to 2400.
+   */
+  durationMs?: number
+  /**
+   * "Weightiness" of the fall, in `[0, 0.9]`. 0 = perfectly constant speed;
+   * higher values make segments whip faster over the top and ease through the
+   * bottom. Kept below 1 so the motion never reverses. Defaults to 0.45.
+   */
+  gravity?: number
+  /** Override any subset of the token-driven segment colours. */
+  colors?: SpinnerColors
+  /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
+  animating?: boolean
+  /** Design token modes forwarded to token lookups. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label announced to assistive tech. Defaults to "Loading". */
+  accessibilityLabel?: string
+}
+
+const SEGMENT_COUNT = 3
+const DEFAULT_SIZE = 72
+const DEFAULT_DURATION_MS = 1500
+const DEFAULT_GRAVITY = 0.45
+
+// Stroke thickness as a fraction of the diameter (matches the Figma ring weight).
+const STROKE_RATIO = 0.11
+// Angular length of each individual segment.
+const ARC_LENGTH_DEG = 100
+// Spacing between consecutive heads when fully bunched at the top. Small but
+// non-zero so all three colours stay faintly visible as they crest the top.
+const SPREAD_MIN_DEG = 10
+// Spacing between consecutive heads at full spread. At this extent each segment's
+// tail only overlaps the next head by `ARC_LENGTH_DEG - SPREAD_MAX_DEG` (16°) —
+// the maximum extension the chain reaches while staying connected (never a gap).
+const SPREAD_MAX_DEG = 84
+// Fraction of each revolution spent gradually fanning *out* (the rest is spent
+// snapping back together over the top).
+//
+// This is the knob that balances "reaches full extension" against "never stalls
+// and never recoils". The tail segment's velocity while spreading is
+// `vLead * (1 - spreadRange / (SPREAD_OUT_FRAC * π))`. Spreading the fan-out over
+// ~3/4 of the turn keeps that factor around ~0.45 (so the tail always carries
+// clear forward momentum — it never crawls to a stall, and never reverses),
+// while still letting the breath reach a full 1.0. The remaining ~1/4 is an
+// energetic gather over the top where the trailing segments whip forward to
+// rejoin the lead. A symmetric (sinusoidal/triangle) breath cannot do all three:
+// reach full extension, avoid recoil, and avoid a sustained stall.
+const SPREAD_OUT_FRAC = 0.75
+
+const DEG_TO_RAD = Math.PI / 180
+const TWO_PI = Math.PI * 2
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) {
+      return parsed
+    }
+  }
+  return fallback
+}
+
+/**
+ * Builds the SVG path for a single fixed-length arc whose *head* sits at the
+ * top (12 o'clock) and whose body trails counter-clockwise behind it. Rotating
+ * the containing view clockwise then places the head at the desired angle.
+ */
+const buildArcPath = (center: number, radius: number, arcLengthDeg: number) => {
+  const arc = arcLengthDeg * DEG_TO_RAD
+  // Head at the top: phi = 0 -> (center, center - radius).
+  const headX = center
+  const headY = center - radius
+  // Tail trails counter-clockwise by `arc`: phi = -arc.
+  const tailX = center + radius * Math.sin(-arc)
+  const tailY = center - radius * Math.cos(-arc)
+  const largeArc = arcLengthDeg > 180 ? 1 : 0
+  // Sweep from tail -> head is clockwise (sweep flag = 1 in SVG y-down space).
+  return `M ${tailX} ${tailY} A ${radius} ${radius} 0 ${largeArc} 1 ${headX} ${headY}`
+}
+
+/**
+ * Animated rotation for one segment.
+ *
+ * A single linear clock drives a gravity-warped lead angle: it advances faster
+ * over the top and slower through the bottom, giving the fall its weight. Each
+ * segment trails the lead by `index * offset`, where `offset` breathes between
+ * its bunched (top) and spread (bottom) extents in lock-step with the lead's
+ * vertical position. Because the offset is bounded by `SPREAD_MAX_DEG`, the
+ * three segments form a continuously-overlapping chain that gathers at the top
+ * and fans out — fully connected — through the free fall.
+ */
+const useSegmentRotation = (
+  clock: SharedValue<number>,
+  index: number,
+  gravity: number,
+  spreadMinRad: number,
+  spreadMaxRad: number,
+  spreadOutFrac: number,
+) =>
+  useAnimatedStyle(() => {
+    'worklet'
+    const tau = clock.value * TWO_PI
+    // Lead angle (clockwise from top). d(lead)/dtau = 1 + gravity*cos(tau) is
+    // maximal at the top (tau = 0) and minimal at the bottom (tau = PI), giving
+    // the fall its weight.
+    const lead = tau + gravity * Math.sin(tau)
+    // Breathing is an asymmetric saw in the lead angle: it ramps *gradually* from
+    // 0 (bunched, top) up to 1 (fully spread) over `spreadOutFrac` of the turn,
+    // then drops back to 0 over the remaining arc (the quick gather over the top).
+    // The gentle fan-out slope keeps the trailing segment moving forward at a
+    // healthy fraction of the lead's speed — it never stalls and never recoils —
+    // while still reaching full extension; the steeper gather is a forward whip,
+    // so momentum only ever increases there.
+    const leadMod = lead - TWO_PI * Math.floor(lead / TWO_PI)
+    const splitLead = spreadOutFrac * TWO_PI
+    const breath =
+      leadMod < splitLead
+        ? leadMod / splitLead
+        : (TWO_PI - leadMod) / (TWO_PI - splitLead)
+    const offset = spreadMinRad + breath * (spreadMaxRad - spreadMinRad)
+    const head = lead - index * offset
+    return {
+      transform: [{ rotate: `${(head * 180) / Math.PI}deg` }],
+    }
+  }, [gravity, index, spreadMinRad, spreadMaxRad, spreadOutFrac])
+
+const fullSize: ViewStyle = { ...StyleSheet.absoluteFillObject }
+
+function Spinner({
+  size = DEFAULT_SIZE,
+  durationMs = DEFAULT_DURATION_MS,
+  gravity = DEFAULT_GRAVITY,
+  colors,
+  animating = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel = 'Loading',
+  ...rest
+}: SpinnerProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  const systemReducedMotion = useReducedMotion()
+  const isAnimated = animating && !systemReducedMotion
+
+  const resolvedSize = toNumber(size, DEFAULT_SIZE)
+  const safeGravity = clamp(toNumber(gravity, DEFAULT_GRAVITY), 0, 0.9)
+  const strokeWidth = Math.max(1, resolvedSize * STROKE_RATIO)
+  const radius = Math.max(0, (resolvedSize - strokeWidth) / 2)
+  const center = resolvedSize / 2
+  const arcPath = buildArcPath(center, radius, ARC_LENGTH_DEG)
+
+  const segmentColors = [
+    colors?.primary ?? (getVariableByName('spiner/primary/bg', modes) as string) ?? '#d0a259',
+    colors?.secondary ?? (getVariableByName('spiner/secondary/bg', modes) as string) ?? '#5b00b5',
+    colors?.tertiary ?? (getVariableByName('spiner/tertiary/bg', modes) as string) ?? '#066b99',
+  ]
+
+  const clock = useSharedValue(0)
+
+  useEffect(() => {
+    if (!isAnimated) {
+      cancelAnimation(clock)
+      clock.value = 0
+      return
+    }
+    clock.value = 0
+    clock.value = withRepeat(
+      withTiming(1, { duration: Math.max(1, durationMs), easing: Easing.linear }),
+      -1,
+      false,
+    )
+    return () => {
+      cancelAnimation(clock)
+    }
+  }, [isAnimated, durationMs, clock])
+
+  // Hooks must run unconditionally and in a stable order, so all three segment
+  // styles are always computed even when the spinner renders statically.
+  const spreadMinRad = SPREAD_MIN_DEG * DEG_TO_RAD
+  const spreadMaxRad = SPREAD_MAX_DEG * DEG_TO_RAD
+  const style0 = useSegmentRotation(clock, 0, safeGravity, spreadMinRad, spreadMaxRad, SPREAD_OUT_FRAC)
+  const style1 = useSegmentRotation(clock, 1, safeGravity, spreadMinRad, spreadMaxRad, SPREAD_OUT_FRAC)
+  const style2 = useSegmentRotation(clock, 2, safeGravity, spreadMinRad, spreadMaxRad, SPREAD_OUT_FRAC)
+  const animatedStyles = [style0, style1, style2]
+
+  // Static resting fan (evenly spaced) used when animation is disabled.
+  const restingRotations = [0, -120, -240]
+
+  const containerStyle: ViewStyle = {
+    height: resolvedSize,
+    width: resolvedSize,
+    position: 'relative',
+  }
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      style={[containerStyle, style]}
+      {...rest}
+    >
+      {/* Render tail -> head so the leading segment overlaps on top. */}
+      {Array.from({ length: SEGMENT_COUNT }, (_, i) => SEGMENT_COUNT - 1 - i).map((segmentIndex) => {
+        const segmentStyle = isAnimated
+          ? animatedStyles[segmentIndex]
+          : { transform: [{ rotate: `${restingRotations[segmentIndex]}deg` }] }
+        return (
+          <Animated.View key={segmentIndex} style={[fullSize, segmentStyle]} pointerEvents="none">
+            <Svg width={resolvedSize} height={resolvedSize} viewBox={`0 0 ${resolvedSize} ${resolvedSize}`}>
+              <Path
+                d={arcPath}
+                stroke={segmentColors[segmentIndex]}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                fill="none"
+              />
+            </Svg>
+          </Animated.View>
+        )
+      })}
+    </View>
+  )
+}
+
+export default Spinner

package/src/components/TextInput/TextInput.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react'
-import { Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
+import { Platform, Pressable, View, TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextInputProps as RNTextInputProps, type TextStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -36,6 +36,8 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
  * Helper function to convert a color to a more transparent version for placeholder text.
  * Takes a color string (hex, rgb, rgba) and returns it with reduced opacity.
  */
+const IS_WEB = Platform.OS === 'web'
+
 function makePlaceholderColor(color: string | undefined, opacity: number = 0.5): string {
   if (!color || typeof color !== 'string') {
     return color || ''
@@ -128,10 +130,9 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
-  // Ref to the underlying native input so a tap anywhere inside the Pressable
-  // wrapper can programmatically focus it. Without this, on Android the
-  // wrapping Pressable becomes the touch responder on the first tap and the
-  // native input only gains focus on the *second* tap.
+  // On web we keep a ref so a click anywhere inside the (Pressable) wrapper can
+  // focus the input. On native the wrapper is a plain View and the native
+  // input focuses itself on the first tap (see container note below).
   const inputRef = useRef<RNTextInput>(null)
 
   // Resolve container tokens
@@ -227,19 +228,19 @@ function TextInput({
   // Generate default accessibility label from placeholder if not provided
   const defaultAccessibilityLabel = accessibilityLabel || (placeholder || 'Text input')
 
-  return (
-    <Pressable
-      style={[containerStyle, focusContainerStyle, hoverStyle, style]}
-      onHoverIn={() => setIsHovered(true)}
-      onHoverOut={() => setIsHovered(false)}
-      // Forward taps on the wrapper (padding, leading icon gutter, etc.) to the
-      // native input. This guarantees the keyboard opens on the FIRST tap on
-      // Android instead of requiring a second tap.
-      onPress={() => inputRef.current?.focus()}
-      // The native input is the real accessible element; don't add a redundant
-      // focusable node for screen readers.
-      accessible={false}
-    >
+  // IMPORTANT (Android focus reliability):
+  // Do NOT wrap the native <TextInput> in a Pressable/Touchable on native.
+  // A touch-responder-claiming wrapper steals the first tap, which is the
+  // classic cause of the "needs 2–3 taps to focus" Android bug — and forwarding
+  // focus from `onPress` is unreliable because the press is cancelled by the
+  // tiniest finger movement. A plain <View> does not claim the responder, so
+  // the native input receives the tap and focuses on the FIRST tap.
+  // On web there is no such issue, so we keep the Pressable for the hover
+  // affordance plus click-anywhere-to-focus.
+  const containerStyleArray = [containerStyle, focusContainerStyle, hoverStyle, style]
+
+  const inner = (
+    <>
       {processedLeading && (
         <View 
           accessibilityElementsHidden={true}
@@ -269,8 +270,25 @@ function TextInput({
           {processedTrailing}
         </View>
       )}
-    </Pressable>
+    </>
   )
+
+  if (IS_WEB) {
+    return (
+      <Pressable
+        style={containerStyleArray}
+        onHoverIn={() => setIsHovered(true)}
+        onHoverOut={() => setIsHovered(false)}
+        // Web: clicking the padding / icon gutter focuses the input too.
+        onPress={() => inputRef.current?.focus()}
+        accessible={false}
+      >
+        {inner}
+      </Pressable>
+    )
+  }
+
+  return <View style={containerStyleArray}>{inner}</View>
 }
 
 /**

package/src/components/index.ts

@@ -65,6 +65,7 @@ export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
 export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
@@ -109,6 +110,9 @@ export { default as RadioButton, type RadioButtonProps } from './RadioButton/Rad
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem } from './SavingsGoalSummary/SavingsGoalSummary';
 export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment } from './DonutChart/DonutChart';
+export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps } from './AreaLineChart/AreaLineChart';
+export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection } from './ClusterBubble/ClusterBubble';
+export { default as BubbleChart, type BubbleChartProps, type BubbleDatum } from './BubbleChart/BubbleChart';
 export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem } from './DonutChartSummary/DonutChartSummary';
 export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem } from './RangeTrack/RangeTrack';
 export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';