jfs-components 0.0.21 → 0.0.24

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,472 @@
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react'
+import {
+  View,
+  ScrollView,
+  Animated,
+  Pressable,
+  type ViewStyle,
+  type StyleProp,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+  type LayoutChangeEvent,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface CarouselContextValue {
+  modes: Record<string, any>
+  activeIndex: number
+  totalItems: number
+  goTo: (index: number) => void
+  goNext: () => void
+  goPrev: () => void
+}
+
+const CarouselContext = createContext<CarouselContextValue>({
+  modes: {},
+  activeIndex: 0,
+  totalItems: 0,
+  goTo: () => {},
+  goNext: () => {},
+  goPrev: () => {},
+})
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CarouselProps {
+  /** Content items to display (should be Carousel.Item or any React nodes). */
+  children?: React.ReactNode
+  /** Modes object for design-token resolution. */
+  modes?: Record<string, any>
+  /** Enable auto-play. Default: false. */
+  autoPlay?: boolean
+  /** Auto-play interval in ms. Default: 4000. */
+  autoPlayInterval?: number
+  /** Show pagination dots. Default: true. */
+  showPagination?: boolean
+  /** Enable looping (jumps back to first after last). Default: true. */
+  loop?: boolean
+  /** Gap between items in px. Resolved from token `carousel/gap` or defaults to 12. */
+  gap?: number
+  /** Width of each carousel item. When undefined, items take full container width. */
+  itemWidth?: number
+  /** Horizontal padding around the carousel track, allowing peek of adjacent items. Defaults to 0. */
+  peekOffset?: number
+  /** Called when the active index changes. */
+  onIndexChange?: (index: number) => void
+  /** Style overrides for the outermost container. */
+  style?: StyleProp<ViewStyle>
+}
+
+// ---------------------------------------------------------------------------
+// Carousel
+// ---------------------------------------------------------------------------
+
+export function Carousel({
+  children,
+  modes = {},
+  autoPlay = false,
+  autoPlayInterval = 4000,
+  showPagination = true,
+  loop = true,
+  gap: gapProp,
+  itemWidth: itemWidthProp,
+  peekOffset: peekOffsetProp,
+  onIndexChange,
+  style,
+}: CarouselProps) {
+  // ---- Token resolution ----
+  const tokenGap = parseFloat(
+    getVariableByName('carousel/gap', modes) || '12',
+  )
+  const gap = gapProp ?? tokenGap
+
+  const tokenPeekOffset = parseFloat(
+    getVariableByName('carousel/peekOffset', modes) || '0',
+  )
+  const peekOffset = peekOffsetProp ?? tokenPeekOffset
+
+  const containerPaddingH = parseFloat(
+    getVariableByName('carousel/padding/horizontal', modes) || '0',
+  )
+  const containerPaddingV = parseFloat(
+    getVariableByName('carousel/padding/vertical', modes) || '0',
+  )
+  const paginationGap = parseFloat(
+    getVariableByName('carousel/pagination/gap', modes) || '12',
+  )
+
+  // ---- Refs & state ----
+  const scrollRef = useRef<ScrollView>(null)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const autoPlayTimer = useRef<ReturnType<typeof setInterval> | null>(null)
+  const userInteracting = useRef(false)
+
+  // Flatten children so we can count items
+  const items = useMemo(
+    () => React.Children.toArray(children).filter(React.isValidElement),
+    [children],
+  )
+
+  const totalItems = items.length
+
+  // Effective item width: provided prop, or full container width minus peek offsets
+  const effectiveItemWidth = useMemo(() => {
+    if (itemWidthProp != null) return itemWidthProp
+    if (containerWidth === 0) return 0
+    // Full-width minus peekOffset on each side
+    return containerWidth - peekOffset * 2 - containerPaddingH * 2
+  }, [itemWidthProp, containerWidth, peekOffset, containerPaddingH])
+
+  // Snap interval = item width + gap
+  const snapInterval = effectiveItemWidth + gap
+
+  // ---- Navigation helpers ----
+  const scrollToIndex = useCallback(
+    (index: number, animated = true) => {
+      if (totalItems === 0 || snapInterval === 0) return
+      let targetIndex = index
+      if (loop) {
+        targetIndex = ((index % totalItems) + totalItems) % totalItems
+      } else {
+        targetIndex = Math.max(0, Math.min(index, totalItems - 1))
+      }
+      scrollRef.current?.scrollTo({
+        x: targetIndex * snapInterval,
+        animated,
+      })
+      setActiveIndex(targetIndex)
+      onIndexChange?.(targetIndex)
+    },
+    [totalItems, snapInterval, loop, onIndexChange],
+  )
+
+  const goTo = useCallback(
+    (index: number) => scrollToIndex(index),
+    [scrollToIndex],
+  )
+  const goNext = useCallback(
+    () => scrollToIndex(activeIndex + 1),
+    [scrollToIndex, activeIndex],
+  )
+  const goPrev = useCallback(
+    () => scrollToIndex(activeIndex - 1),
+    [scrollToIndex, activeIndex],
+  )
+
+  // ---- Scroll event handler ----
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (snapInterval === 0) return
+      const offsetX = event.nativeEvent.contentOffset.x
+      const newIndex = Math.round(offsetX / snapInterval)
+      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1))
+      if (clampedIndex !== activeIndex) {
+        setActiveIndex(clampedIndex)
+        onIndexChange?.(clampedIndex)
+      }
+    },
+    [snapInterval, totalItems, activeIndex, onIndexChange],
+  )
+
+  // ---- Auto-play ----
+  const clearAutoPlay = useCallback(() => {
+    if (autoPlayTimer.current != null) {
+      clearInterval(autoPlayTimer.current)
+      autoPlayTimer.current = null
+    }
+  }, [])
+
+  const startAutoPlay = useCallback(() => {
+    if (!autoPlay || totalItems <= 1) return
+    clearAutoPlay()
+    autoPlayTimer.current = setInterval(() => {
+      if (!userInteracting.current) {
+        setActiveIndex((prev) => {
+          const next = loop
+            ? (prev + 1) % totalItems
+            : Math.min(prev + 1, totalItems - 1)
+          scrollRef.current?.scrollTo({
+            x: next * snapInterval,
+            animated: true,
+          })
+          onIndexChange?.(next)
+          return next
+        })
+      }
+    }, autoPlayInterval)
+  }, [
+    autoPlay,
+    totalItems,
+    loop,
+    snapInterval,
+    autoPlayInterval,
+    clearAutoPlay,
+    onIndexChange,
+  ])
+
+  useEffect(() => {
+    startAutoPlay()
+    return clearAutoPlay
+  }, [startAutoPlay, clearAutoPlay])
+
+  const handleScrollBeginDrag = useCallback(() => {
+    userInteracting.current = true
+  }, [])
+
+  const handleScrollEndDrag = useCallback(() => {
+    userInteracting.current = false
+    // Reset autoplay timer after interaction
+    if (autoPlay) startAutoPlay()
+  }, [autoPlay, startAutoPlay])
+
+  // ---- Layout ----
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width)
+  }, [])
+
+  // ---- Context value ----
+  const contextValue = useMemo<CarouselContextValue>(
+    () => ({
+      modes,
+      activeIndex,
+      totalItems,
+      goTo,
+      goNext,
+      goPrev,
+    }),
+    [modes, activeIndex, totalItems, goTo, goNext, goPrev],
+  )
+
+  // ---- Render ----
+  const outerStyle: ViewStyle = {
+    paddingVertical: containerPaddingV,
+  }
+
+  const contentContainerStyle: ViewStyle = {
+    paddingHorizontal: peekOffset + containerPaddingH,
+    gap,
+    // Align items to the start so snap works correctly
+    alignItems: 'flex-start',
+  }
+
+  return (
+    <CarouselContext.Provider value={contextValue}>
+      <View style={[outerStyle, style]} onLayout={handleLayout}>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          pagingEnabled={false}
+          showsHorizontalScrollIndicator={false}
+          decelerationRate="fast"
+          snapToInterval={snapInterval > 0 ? snapInterval : undefined}
+          snapToAlignment="start"
+          contentContainerStyle={contentContainerStyle}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          onScrollBeginDrag={handleScrollBeginDrag}
+          onScrollEndDrag={handleScrollEndDrag}
+          
+        >
+          {items.map((child, index) => {
+            const itemStyle: ViewStyle = {
+              width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+            }
+
+            // Pass modes down to children
+            const childWithModes = React.isValidElement(child)
+              ? React.cloneElement(child as React.ReactElement<any>, {
+                  modes: {
+                    ...((child.props as any)?.modes || {}),
+                    ...modes,
+                  },
+                  style: [itemStyle, (child.props as any)?.style],
+                })
+              : child
+
+            return (
+              <View key={index} style={itemStyle}>
+                {childWithModes}
+              </View>
+            )
+          })}
+        </ScrollView>
+
+        {showPagination && totalItems > 1 && (
+          <Pagination
+            modes={modes}
+            style={{ marginTop: paginationGap }}
+          />
+        )}
+      </View>
+    </CarouselContext.Provider>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Carousel.Item
+// ---------------------------------------------------------------------------
+
+export interface CarouselItemProps {
+  children?: React.ReactNode
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Optional wrapper for carousel items. Not strictly required — any
+ * React node works as a direct child of `<Carousel>`.
+ */
+export function Item({ children, modes: _modes, style }: CarouselItemProps) {
+  return <View style={style}>{children}</View>
+}
+
+// ---------------------------------------------------------------------------
+// Carousel.Pagination
+// ---------------------------------------------------------------------------
+
+export interface PaginationProps {
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+export function Pagination({ modes: propModes, style }: PaginationProps) {
+  const { modes: ctxModes, activeIndex, totalItems, goTo } =
+    useContext(CarouselContext)
+  const modes = propModes || ctxModes || {}
+
+  // Token resolution for dots
+  const dotSize = parseFloat(
+    getVariableByName('carousel/pagination/dotSize', modes) || '8',
+  )
+  const dotActiveWidth = parseFloat(
+    getVariableByName('carousel/pagination/dotActiveWidth', modes) || '24',
+  )
+  const dotGap = parseFloat(
+    getVariableByName('carousel/pagination/dotGap', modes) || '8',
+  )
+  const dotColor =
+    (getVariableByName('carousel/pagination/dotColor', modes) as string) ||
+    'rgba(255,255,255,0.35)'
+  const dotActiveColor =
+    (getVariableByName(
+      'carousel/pagination/dotActiveColor',
+      modes,
+    ) as string) || '#ffffff'
+  const dotRadius = parseFloat(
+    getVariableByName('carousel/pagination/dotRadius', modes) || '4',
+  )
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: dotGap,
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="tablist"
+      accessibilityLabel="Carousel pagination"
+    >
+      {Array.from({ length: totalItems }).map((_, i) => {
+        const isActive = i === activeIndex
+        return (
+          <Pressable
+            key={i}
+            onPress={() => goTo(i)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: isActive }}
+            accessibilityLabel={`Go to slide ${i + 1}`}
+          >
+            <AnimatedDot
+              isActive={isActive}
+              size={dotSize}
+              activeWidth={dotActiveWidth}
+              radius={dotRadius}
+              color={dotColor}
+              activeColor={dotActiveColor}
+            />
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AnimatedDot (internal)
+// ---------------------------------------------------------------------------
+
+interface AnimatedDotProps {
+  isActive: boolean
+  size: number
+  activeWidth: number
+  radius: number
+  color: string
+  activeColor: string
+}
+
+function AnimatedDot({
+  isActive,
+  size,
+  activeWidth,
+  radius,
+  color,
+  activeColor,
+}: AnimatedDotProps) {
+  const animValue = useRef(new Animated.Value(isActive ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(animValue, {
+      toValue: isActive ? 1 : 0,
+      duration: 250,
+      useNativeDriver: false,
+    }).start()
+  }, [isActive, animValue])
+
+  const width = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [size, activeWidth],
+  })
+
+  const backgroundColor = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [color, activeColor],
+  })
+
+  return (
+    <Animated.View
+      style={{
+        width,
+        height: size,
+        borderRadius: radius,
+        backgroundColor,
+      }}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Attach sub-components
+// ---------------------------------------------------------------------------
+
+Carousel.Item = Item
+Carousel.Pagination = Pagination
+
+export default Carousel

package/src/components/Drawer/Drawer.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native-gesture-handler'
 import Animated, {
   runOnJS,
+  useAnimatedProps,
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
@@ -116,6 +117,13 @@ function Drawer({
   const scrollY = useSharedValue(0)
   const scrollRef = useRef(null)
 
+  // Dynamically disable top bounce so a downward swipe at the top of
+  // the content drags the whole drawer instead of rubber-banding the
+  // scroll view.  Bottom bounce is preserved when the user has scrolled.
+  const animatedScrollProps = useAnimatedProps(() => ({
+    bounces: scrollY.value > 1,
+  }))
+
   // We need to know if we are currently dragging the drawer or scrolling the content
   // to prevent conflict.
   const isDrawerActive = useSharedValue(false)
@@ -330,8 +338,8 @@ function Drawer({
             style={[styles.content, contentStyle]}
             contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
             showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            bounces={true}
-            alwaysBounceVertical={true}
+            animatedProps={animatedScrollProps}
+            alwaysBounceVertical={false}
             overScrollMode="always"
             onScroll={useAnimatedScrollHandler((event) => {
               scrollY.value = event.contentOffset.y

package/src/components/RadioButton/RadioButton.mdx

@@ -0,0 +1,92 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as RadioButtonStories from './RadioButton.stories';
+import { RadioButton } from './RadioButton';
+
+<Meta of={RadioButtonStories} />
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
+## Usage
+
+# RadioButton
+
+A standard RadioButton component. This component is used to select a single option from a set of options.
+
+## Default
+
+<Canvas of={RadioButtonStories.Default} />
+
+<Controls of={RadioButtonStories.Default} />
+
+## States
+
+<Canvas of={RadioButtonStories.AllStates} />
+
+
+```tsx
+import React, { useState } from 'react';
+import { RadioButton } from 'jfs-components';
+import { View, Text } from 'react-native';
+
+export default function App() {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <RadioButton 
+      selected={selected} 
+      onPress={() => setSelected(!selected)} 
+    />
+  );
+}
+```
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`radio/background/color`**
+- **`radio/disabled/background/color`**
+- **`radio/disabled/border/color`**
+- **`radio/disabled/radio/disabled/border/size`**
+- **`radio/disabledSelected/background`**
+- **`radio/disabledSelected/border/color`**
+- **`radio/disabledSelected/selector/background/color`**
+- **`radio/focus/background/color`**
+- **`radio/focus/border/color`**
+- **`radio/focus/border/size`**
+- **`radio/focus/boxShadow/size`**
+- **`radio/focus/shadow/color`**
+- **`radio/focusSelected/background/color`**
+- **`radio/focusSelected/border/size`**
+- **`radio/focusSelected/selector/background/color`**
+- **`radio/height`**
+- **`radio/hover/background/color`**
+- **`radio/hover/border/color`**
+- **`radio/hover/boxShadow/size`**
+- **`radio/hover/shadow/color`**
+- **`radio/hoverSelected/background/color`**
+- **`radio/hoverSelected/border/color`**
+- **`radio/hoverSelected/boxShadow/size`**
+- **`radio/hoverSelected/selector/background/color`**
+- **`radio/hoverSelected/shadow/color`**
+- **`radio/idle/background/color`**
+- **`radio/idle/border/color`**
+- **`radio/selected/background/color`**
+- **`radio/selected/border/color`**
+- **`radio/selected/selector/background/color`**
+- **`radio/selector/size`**
+- **`radio/width`**
+
+All tokens support mode-based theming through the `modes` prop.
+