@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/Slider/Slider.tsx

@@ -1,9 +1,20 @@
-import React, { useCallback, useRef } from "react"
-import { View, ViewProps, PanResponder, LayoutChangeEvent } from "react-native"
+import React, { useEffect, useState } from "react"
+import { View, ViewProps, LayoutChangeEvent, Platform } from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
 import * as SliderPrimitive from "@rn-primitives/slider"
+import { Gesture, GestureDetector } from "react-native-gesture-handler"
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue
+} from "react-native-reanimated"
+import { scheduleOnRN } from "react-native-worklets"
 import { Typography } from "../../atoms/Typography"
+import { Icon } from "../../atoms/Icon"
+import {
+  KeyboardArrowLeft,
+  KeyboardArrowRight
+} from "@butternutbox/pawprint-icons/core"
 
 type SliderOwnProps = {
   value?: number
@@ -25,24 +36,6 @@ export type SliderProps = SliderOwnProps & Omit<ViewProps, keyof SliderOwnProps>
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-const clamp = (val: number, min: number, max: number): number =>
-  Math.min(Math.max(val, min), max)
-
-const snap = (val: number, step: number, min: number): number => {
-  const steps = Math.round((val - min) / step)
-  return min + steps * step
-}
-
-const StyledSliderRoot = styled(SliderPrimitive.Root)<{
-  sliderGap: number
-  sliderMinWidth: number
-  sliderOpacity: number
-}>(({ sliderGap, sliderMinWidth, sliderOpacity }) => ({
-  gap: sliderGap,
-  minWidth: sliderMinWidth,
-  opacity: sliderOpacity
-}))
-
 const StyledLabelRow = styled(View)<{
   labelRowGap: number
 }>(({ labelRowGap }) => ({
@@ -60,60 +53,6 @@ const StyledLabelSlot = styled(View)<{
   flexShrink: 0
 }))
 
-const StyledTrackArea = styled(View)<{
-  trackAreaHeight: number
-}>(({ trackAreaHeight }) => ({
-  flex: 1,
-  height: trackAreaHeight,
-  justifyContent: "center"
-}))
-
-const StyledTrack = styled(SliderPrimitive.Track)<{
-  trackHeight: number
-  trackBorderRadius: number
-  trackBgColor: string
-  trackBorderWidth: number
-  trackBorderColor: string
-}>(
-  ({
-    trackHeight,
-    trackBorderRadius,
-    trackBgColor,
-    trackBorderWidth,
-    trackBorderColor
-  }) => ({
-    height: trackHeight,
-    borderRadius: trackBorderRadius,
-    backgroundColor: trackBgColor,
-    borderWidth: trackBorderWidth,
-    borderColor: trackBorderColor,
-    overflow: "hidden"
-  })
-)
-
-const StyledRange = styled(SliderPrimitive.Range)<{
-  rangeBgColor: string
-  rangeBorderRadius: number
-}>(({ rangeBgColor, rangeBorderRadius }) => ({
-  height: "100%",
-  backgroundColor: rangeBgColor,
-  borderRadius: rangeBorderRadius
-}))
-
-const StyledThumb = styled(SliderPrimitive.Thumb)<{
-  thumbSize: number
-  thumbBorderRadius: number
-  thumbBgColor: string
-}>(({ thumbSize, thumbBorderRadius, thumbBgColor }) => ({
-  position: "absolute",
-  width: thumbSize,
-  height: thumbSize,
-  borderRadius: thumbBorderRadius,
-  backgroundColor: thumbBgColor,
-  alignItems: "center",
-  justifyContent: "center"
-}))
-
 /**
  * Slider component for selecting a numeric value within a min/max range.
  *
@@ -162,45 +101,118 @@ export const Slider = React.forwardRef<View, SliderProps>(
     const [internalValue, setInternalValue] = React.useState(defaultValue)
     const currentValue = isControlled ? controlledValue : internalValue
 
-    const trackWidth = useRef(0)
     const thumbSize = parseTokenValue(buttons.size.md.height)
     const trackHeight = parseTokenValue(slider.sizing.track.height)
 
-    const fraction = max > min ? (currentValue - min) / (max - min) : 0
+    const isWeb = Platform.OS === "web"
+
+    // Web: layout-driven position. Native: UI-thread shared values.
+    const [trackLayoutWidth, setTrackLayoutWidth] = useState(0)
+    const webFraction = max > min ? (currentValue - min) / (max - min) : 0
+
+    const trackWidth = useSharedValue(0)
+    const thumbLeft = useSharedValue(0)
+    const indicatorWidth = useSharedValue(thumbSize / 2)
+    const lastReported = useSharedValue(currentValue)
+
+    const handleJSUpdate = (v: number) => {
+      if (!isControlled) setInternalValue(v)
+      onValueChange?.(v)
+    }
+
+    const handleCommit = (v: number) => {
+      if (!isControlled) setInternalValue(v)
+      onValueCommitted?.(v)
+    }
+
+    // Sync external value → shared values (initial mount + controlled updates).
+    useEffect(() => {
+      const w = trackWidth.value
+      const frac = max > min ? (currentValue - min) / (max - min) : 0
+      const nextLeft = w > 0 ? frac * (w - thumbSize) : 0
+      thumbLeft.value = nextLeft
+      indicatorWidth.value = nextLeft + thumbSize / 2
+      lastReported.value = currentValue
+    }, [
+      currentValue,
+      min,
+      max,
+      thumbSize,
+      trackWidth,
+      thumbLeft,
+      indicatorWidth,
+      lastReported
+    ])
 
-    const handleLayout = (e: LayoutChangeEvent) => {
-      trackWidth.current = e.nativeEvent.layout.width
+    const handleNativeLayout = (e: LayoutChangeEvent) => {
+      const w = e.nativeEvent.layout.width
+      trackWidth.value = w
+      const frac = max > min ? (currentValue - min) / (max - min) : 0
+      const nextLeft = frac * (w - thumbSize)
+      thumbLeft.value = nextLeft
+      indicatorWidth.value = nextLeft + thumbSize / 2
     }
 
-    const updateValue = useCallback(
-      (locationX: number) => {
-        if (disabled || trackWidth.current === 0) return
-        const ratio = clamp(locationX / trackWidth.current, 0, 1)
+    const pan = Gesture.Pan()
+      .enabled(!disabled)
+      .minDistance(0)
+      .onBegin((e) => {
+        "worklet"
+        const w = trackWidth.value
+        if (w <= 0) return
+        const ratio = Math.min(Math.max(e.x / w, 0), 1)
         const raw = min + ratio * (max - min)
-        const snapped = snap(clamp(raw, min, max), step, min)
-        if (!isControlled) {
-          setInternalValue(snapped)
+        const steps = Math.round((raw - min) / step)
+        const snapped = Math.min(Math.max(min + steps * step, min), max)
+        const frac = max > min ? (snapped - min) / (max - min) : 0
+        const nextLeft = frac * (w - thumbSize)
+        thumbLeft.value = nextLeft
+        indicatorWidth.value = nextLeft + thumbSize / 2
+        if (snapped !== lastReported.value) {
+          lastReported.value = snapped
+          scheduleOnRN(handleJSUpdate, snapped)
         }
-        onValueChange?.(snapped)
-      },
-      [disabled, min, max, step, isControlled, onValueChange]
-    )
-
-    const panResponder = useRef(
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => !disabled,
-        onMoveShouldSetPanResponder: () => !disabled,
-        onPanResponderGrant: (e) => {
-          updateValue(e.nativeEvent.locationX)
-        },
-        onPanResponderMove: (e) => {
-          updateValue(e.nativeEvent.locationX)
-        },
-        onPanResponderRelease: () => {
-          onValueCommitted?.(currentValue)
+      })
+      .onChange((e) => {
+        "worklet"
+        const w = trackWidth.value
+        if (w <= 0) return
+        const ratio = Math.min(Math.max(e.x / w, 0), 1)
+        const raw = min + ratio * (max - min)
+        const steps = Math.round((raw - min) / step)
+        const snapped = Math.min(Math.max(min + steps * step, min), max)
+        const frac = max > min ? (snapped - min) / (max - min) : 0
+        const nextLeft = frac * (w - thumbSize)
+        thumbLeft.value = nextLeft
+        indicatorWidth.value = nextLeft + thumbSize / 2
+        if (snapped !== lastReported.value) {
+          lastReported.value = snapped
+          scheduleOnRN(handleJSUpdate, snapped)
         }
       })
-    ).current
+      .onEnd(() => {
+        "worklet"
+        scheduleOnRN(handleCommit, lastReported.value)
+      })
+
+    const thumbAnimStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: thumbLeft.value }]
+    }))
+    const indicatorAnimStyle = useAnimatedStyle(() => ({
+      width: indicatorWidth.value
+    }))
+
+    const handleWebValueChange = (values: number[]) => {
+      const newValue = values[0]
+      if (!isControlled) {
+        setInternalValue(newValue)
+      }
+      onValueChange?.(newValue)
+    }
+
+    const handleWebLayout = (e: LayoutChangeEvent) => {
+      setTrackLayoutWidth(e.nativeEvent.layout.width)
+    }
 
     const hasLeading = leadingIcon !== undefined || leadingLabel !== undefined
     const hasTrailing =
@@ -209,93 +221,194 @@ export const Slider = React.forwardRef<View, SliderProps>(
     const labelGap = parseTokenValue(slider.sliderField.spacing.label.gap)
     const roundBorderRadius = parseTokenValue(dimensions.borderRadius.round)
 
+    const thumbIconColor =
+      buttons.iconButton.filledButton.colour.icon.primary.default
+
+    const thumbContent = (
+      <>
+        <Icon
+          icon={KeyboardArrowLeft}
+          size="sm"
+          customColour={thumbIconColor}
+          style={{ marginRight: -3 }}
+        />
+        <Icon
+          icon={KeyboardArrowRight}
+          size="sm"
+          customColour={thumbIconColor}
+          style={{ marginLeft: -3 }}
+        />
+      </>
+    )
+
+    const thumbStyle = {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: parseTokenValue(buttons.borderRadius.default),
+      backgroundColor:
+        buttons.iconButton.filledButton.colour.background.primary.default,
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      justifyContent: "center" as const
+    }
+
+    const outerStyle = {
+      gap: parseTokenValue(slider.sliderField.spacing.gap),
+      minWidth: parseTokenValue(slider.sizing.minWidth),
+      opacity: disabled ? parseFloat(buttons.opacity.disabled) : 1
+    }
+
+    const leadingSlot = hasLeading && (
+      <StyledLabelSlot labelSlotGap={labelGap}>
+        {leadingIcon}
+        {leadingLabel && (
+          <Typography
+            token={slider.sliderField.typography.label}
+            color={slider.sliderField.colour.text.label}
+          >
+            {leadingLabel}
+          </Typography>
+        )}
+      </StyledLabelSlot>
+    )
+
+    const trailingSlot = hasTrailing && (
+      <StyledLabelSlot labelSlotGap={labelGap}>
+        {trailingLabel && (
+          <Typography
+            token={slider.sliderField.typography.label}
+            color={slider.sliderField.colour.text.label}
+          >
+            {trailingLabel}
+          </Typography>
+        )}
+        {trailingIcon}
+      </StyledLabelSlot>
+    )
+
+    const descriptionEl = description && (
+      <Typography
+        token={slider.sliderField.typography.description}
+        color={slider.sliderField.colour.text.description}
+        align="center"
+      >
+        {description}
+      </Typography>
+    )
+
+    const trackBackgroundStyle = {
+      height: trackHeight,
+      borderRadius: roundBorderRadius,
+      backgroundColor: slider.colour.track.background.default,
+      borderWidth: parseTokenValue(dimensions.borderWidth.sm),
+      borderColor: slider.colour.track.border.default
+    }
+    const indicatorBaseStyle = {
+      position: "absolute" as const,
+      left: 0,
+      top: (thumbSize - trackHeight) / 2,
+      height: trackHeight,
+      borderRadius: roundBorderRadius,
+      backgroundColor: slider.colour.indicator.background.default
+    }
+
+    if (isWeb) {
+      const webThumbLeft = webFraction * (trackLayoutWidth - thumbSize)
+      const webIndicatorWidth = webThumbLeft + thumbSize / 2
+      return (
+        <View ref={ref} style={outerStyle} {...rest}>
+          <StyledLabelRow labelRowGap={labelGap}>
+            {leadingSlot}
+
+            <SliderPrimitive.Root
+              value={currentValue}
+              min={min}
+              max={max}
+              step={step}
+              disabled={disabled}
+              onValueChange={handleWebValueChange}
+              onLayout={handleWebLayout}
+              style={{
+                flex: 1,
+                position: "relative" as const,
+                height: thumbSize,
+                justifyContent: "center" as const
+              }}
+            >
+              <View style={trackBackgroundStyle} />
+              <View
+                style={{ ...indicatorBaseStyle, width: webIndicatorWidth }}
+              />
+              <View
+                style={{
+                  ...thumbStyle,
+                  position: "absolute",
+                  left: webThumbLeft
+                }}
+              >
+                {thumbContent}
+              </View>
+              {/* Invisible Radix interaction layer for pointer/keyboard */}
+              <SliderPrimitive.Track
+                style={{
+                  position: "absolute" as const,
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  opacity: 0
+                }}
+              />
+            </SliderPrimitive.Root>
+
+            {trailingSlot}
+          </StyledLabelRow>
+
+          {descriptionEl}
+        </View>
+      )
+    }
+
+    // Native: UI-thread gesture via Reanimated + Gesture Handler.
     return (
-      <StyledSliderRoot
+      <View
         ref={ref}
-        value={currentValue}
-        min={min}
-        max={max}
-        disabled={disabled}
-        sliderGap={parseTokenValue(slider.sliderField.spacing.gap)}
-        sliderMinWidth={parseTokenValue(slider.sizing.minWidth)}
-        sliderOpacity={disabled ? parseFloat(buttons.opacity.disabled) : 1}
+        accessibilityRole="adjustable"
+        accessibilityValue={{ min, max, now: currentValue }}
+        accessibilityState={{ disabled }}
+        style={outerStyle}
         {...rest}
       >
         <StyledLabelRow labelRowGap={labelGap}>
-          {hasLeading && (
-            <StyledLabelSlot labelSlotGap={labelGap}>
-              {leadingIcon}
-              {leadingLabel && (
-                <Typography
-                  token={slider.sliderField.typography.label}
-                  color={slider.sliderField.colour.text.label}
-                >
-                  {leadingLabel}
-                </Typography>
-              )}
-            </StyledLabelSlot>
-          )}
-
-          <StyledTrackArea
-            trackAreaHeight={thumbSize}
-            onLayout={handleLayout}
-            {...panResponder.panHandlers}
-          >
-            <StyledTrack
-              trackHeight={trackHeight}
-              trackBorderRadius={roundBorderRadius}
-              trackBgColor={slider.colour.track.background.default}
-              trackBorderWidth={parseTokenValue(dimensions.borderWidth.sm)}
-              trackBorderColor={slider.colour.track.border.default}
-            >
-              <StyledRange
-                rangeBgColor={slider.colour.indicator.background.default}
-                rangeBorderRadius={roundBorderRadius}
-                style={{ width: `${fraction * 100}%` }}
-              />
-            </StyledTrack>
-            <StyledThumb
-              thumbSize={thumbSize}
+          {leadingSlot}
+
+          <GestureDetector gesture={pan}>
+            <View
               style={{
-                left: `${fraction * 100}%`,
-                marginLeft: -thumbSize / 2
+                flex: 1,
+                height: thumbSize,
+                justifyContent: "center"
               }}
-              thumbBorderRadius={parseTokenValue(buttons.borderRadius.default)}
-              thumbBgColor={
-                buttons.iconButton.filledButton.colour.background.primary
-                  .default
-              }
+              onLayout={handleNativeLayout}
             >
-              <Typography size="xs" color="alt">
-                ⟨⟩
-              </Typography>
-            </StyledThumb>
-          </StyledTrackArea>
-
-          {hasTrailing && (
-            <StyledLabelSlot labelSlotGap={labelGap}>
-              {trailingLabel && (
-                <Typography
-                  token={slider.sliderField.typography.label}
-                  color={slider.sliderField.colour.text.label}
-                >
-                  {trailingLabel}
-                </Typography>
-              )}
-              {trailingIcon}
-            </StyledLabelSlot>
-          )}
+              <View style={trackBackgroundStyle} />
+              <Animated.View style={[indicatorBaseStyle, indicatorAnimStyle]} />
+              <Animated.View
+                style={[
+                  { ...thumbStyle, position: "absolute", left: 0 },
+                  thumbAnimStyle
+                ]}
+              >
+                {thumbContent}
+              </Animated.View>
+            </View>
+          </GestureDetector>
+
+          {trailingSlot}
         </StyledLabelRow>
 
-        {description && (
-          <Typography
-            token={slider.sliderField.typography.description}
-            color={slider.sliderField.colour.text.description}
-          >
-            {description}
-          </Typography>
-        )}
-      </StyledSliderRoot>
+        {descriptionEl}
+      </View>
     )
   }
 )

package/src/components/molecules/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,168 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Typography } from "../../atoms/Typography"
+import { Button } from "../../atoms/Button"
+import { Tooltip, type TooltipProps } from "./Tooltip"
+
+export default {
+  title: "Molecules/Tooltip",
+  component: Tooltip,
+  argTypes: {
+    text: {
+      control: { type: "text" },
+      description: "Tooltip copy"
+    },
+    alignment: {
+      control: { type: "select" },
+      options: ["left", "middle", "right"],
+      description: "Horizontal position of the nib"
+    },
+    position: {
+      control: { type: "select" },
+      options: ["top", "bottom"],
+      description: "Whether the nib appears above or below the body"
+    }
+  }
+}
+
+export const Playground = (args: TooltipProps) => (
+  <View style={styles.container}>
+    <Tooltip {...args}>
+      <Button variant="filled" colour="primary">
+        Tap me
+      </Button>
+    </Tooltip>
+  </View>
+)
+Playground.args = {
+  text: "This is a helpful tooltip with some descriptive content.",
+  alignment: "middle",
+  position: "bottom"
+}
+
+export const AllAlignments = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      Nib alignments — position: top
+    </Typography>
+    {(["left", "middle", "right"] as const).map((alignment) => (
+      <View key={alignment} style={styles.section}>
+        <Typography size="sm">alignment={alignment}</Typography>
+        <Tooltip
+          text="Helpful tooltip content goes here."
+          alignment={alignment}
+          position="top"
+        />
+      </View>
+    ))}
+  </View>
+)
+
+export const Positions = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm">
+        position: top (nib above body)
+      </Typography>
+      <Tooltip
+        text="Tooltip appears below the trigger."
+        alignment="middle"
+        position="top"
+      />
+    </View>
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm">
+        position: bottom (nib below body)
+      </Typography>
+      <Tooltip
+        text="Tooltip appears above the trigger."
+        alignment="middle"
+        position="bottom"
+      />
+    </View>
+  </View>
+)
+
+export const AllCombinations = () => (
+  <View style={styles.column}>
+    {(["top", "bottom"] as const).map((position) => (
+      <View key={position} style={styles.section}>
+        <Typography variant="heading" size="sm">
+          position: {position}
+        </Typography>
+        <View style={styles.row}>
+          {(["left", "middle", "right"] as const).map((alignment) => (
+            <View key={alignment} style={styles.combo}>
+              <Typography size="xs">{alignment}</Typography>
+              <Tooltip
+                text="Tooltip text."
+                alignment={alignment}
+                position={position}
+              />
+            </View>
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const LongText = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm">
+      Long content
+    </Typography>
+    <Tooltip
+      text="This tooltip contains a longer description that wraps across multiple lines to show how the component handles longer content gracefully."
+      alignment="middle"
+      position="top"
+    />
+  </View>
+)
+
+export const InContext = () => (
+  <View style={styles.column}>
+    <Tooltip
+      text="This action cannot be undone."
+      alignment="middle"
+      position="bottom"
+    >
+      <Button variant="filled" colour="primary">
+        Delete account
+      </Button>
+    </Tooltip>
+    <Tooltip
+      text="This action cannot be undone."
+      alignment="middle"
+      position="top"
+    >
+      <Button variant="filled" colour="primary">
+        Delete account
+      </Button>
+    </Tooltip>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 24,
+    alignItems: "flex-start"
+  },
+  column: {
+    padding: 24,
+    gap: 24
+  },
+  section: {
+    gap: 8,
+    alignItems: "flex-start"
+  },
+  row: {
+    flexDirection: "row",
+    gap: 16,
+    flexWrap: "wrap"
+  },
+  combo: {
+    gap: 4,
+    alignItems: "flex-start"
+  }
+})