@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/SegmentedControl/SegmentedControl.tsx

@@ -1,7 +1,26 @@
 import React from "react"
-import { View, Pressable, ScrollView, ViewProps } from "react-native"
+import {
+  View,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  ViewProps,
+  NativeScrollEvent,
+  NativeSyntheticEvent
+} from "react-native"
+import Svg, {
+  Defs,
+  LinearGradient as SvgLinearGradient,
+  Rect,
+  Stop
+} from "react-native-svg"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
+import {
+  KeyboardArrowLeft,
+  KeyboardArrowRight
+} from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../../atoms/Icon"
 import { Typography } from "../../atoms/Typography"
 
 type SegmentedControlLayout = "fixed" | "intrinsic"
@@ -38,7 +57,6 @@ const parseTokenValue = (value: string): number => parseFloat(value)
 const StyledSegmentItem = styled(Pressable)<{
   itemHeight: number
   itemMinWidth: number
-  itemPaddingVertical: number
   itemPaddingHorizontal: number
   itemBorderRadius: number
   itemBgColor: string
@@ -48,7 +66,6 @@ const StyledSegmentItem = styled(Pressable)<{
   ({
     itemHeight,
     itemMinWidth,
-    itemPaddingVertical,
     itemPaddingHorizontal,
     itemBorderRadius,
     itemBgColor,
@@ -57,7 +74,6 @@ const StyledSegmentItem = styled(Pressable)<{
   }) => ({
     height: itemHeight,
     minWidth: itemMinWidth,
-    paddingVertical: itemPaddingVertical,
     paddingHorizontal: itemPaddingHorizontal,
     borderRadius: itemBorderRadius,
     alignItems: "center",
@@ -68,6 +84,91 @@ const StyledSegmentItem = styled(Pressable)<{
   })
 )
 
+const StyledIntrinsicClip = styled(View)<{
+  clipBorderRadius: number
+  clipBgColor: string
+  clipWidth?: number
+}>(({ clipBorderRadius, clipBgColor, clipWidth }) => ({
+  overflow: "hidden",
+  borderRadius: clipBorderRadius,
+  backgroundColor: clipBgColor,
+  alignSelf: "flex-start",
+  maxWidth: "100%",
+  ...(clipWidth !== undefined ? { width: clipWidth } : {})
+}))
+
+const StyledScrollIndicator = styled(Pressable)<{
+  indicatorSide: "leading" | "trailing"
+  indicatorBorderRadius: number
+  indicatorPaddingOuter: number
+  indicatorPaddingInner: number
+}>(
+  ({
+    indicatorSide,
+    indicatorBorderRadius,
+    indicatorPaddingOuter,
+    indicatorPaddingInner
+  }) => ({
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    zIndex: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    ...(indicatorSide === "trailing"
+      ? {
+          right: 0,
+          paddingLeft: indicatorPaddingOuter,
+          paddingRight: indicatorPaddingInner,
+          borderTopRightRadius: indicatorBorderRadius,
+          borderBottomRightRadius: indicatorBorderRadius
+        }
+      : {
+          left: 0,
+          paddingRight: indicatorPaddingOuter,
+          paddingLeft: indicatorPaddingInner,
+          borderTopLeftRadius: indicatorBorderRadius,
+          borderBottomLeftRadius: indicatorBorderRadius
+        })
+  })
+)
+
+const ScrollIndicatorGradient = ({
+  side,
+  color
+}: {
+  side: "leading" | "trailing"
+  color: string
+}) => {
+  const uid = React.useId()
+  const gradientId = `sc-scroll-indicator-${side}-${uid}`
+  const isTrailing = side === "trailing"
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      <Svg width="100%" height="100%" preserveAspectRatio="none">
+        <Defs>
+          <SvgLinearGradient
+            id={gradientId}
+            x1={isTrailing ? "0" : "1"}
+            y1="0"
+            x2={isTrailing ? "1" : "0"}
+            y2="0"
+          >
+            <Stop offset="0" stopColor={color} stopOpacity="0" />
+            <Stop offset="0.25" stopColor={color} stopOpacity="0.5" />
+            <Stop offset="0.5" stopColor={color} stopOpacity="0.85" />
+            <Stop offset="0.75" stopColor={color} stopOpacity="1" />
+            <Stop offset="1" stopColor={color} stopOpacity="1" />
+          </SvgLinearGradient>
+        </Defs>
+        <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />
+      </Svg>
+    </View>
+  )
+}
+
 const StyledContainer = styled(View)<{
   containerGap: number
   containerPaddingVertical: number
@@ -118,6 +219,10 @@ const SegmentedControlItemBase = ({
   const { controlItem } = theme.tokens.components.segmentedControl
   const { size, spacing, borderRadius, colour, opacity } = controlItem
   const { typography } = controlItem
+  // Note: verticalPadding is intentionally skipped on native — the item has a
+  // fixed `height` and `alignItems: "center"`, which already handles vertical
+  // centring. Applying paddingVertical on top would clip text on RN, where
+  // height is strictly bounded (unlike CSS flex on web).
 
   const handlePress = () => {
     if (disabled) return
@@ -142,7 +247,6 @@ const SegmentedControlItemBase = ({
       accessibilityState={{ selected, disabled }}
       itemHeight={parseTokenValue(size.small.height)}
       itemMinWidth={parseTokenValue(size.small.minWidth)}
-      itemPaddingVertical={parseTokenValue(spacing.verticalPadding)}
       itemPaddingHorizontal={parseTokenValue(spacing.horizontalPadding)}
       itemBorderRadius={parseTokenValue(borderRadius.default)}
       itemBgColor={selected ? colour.background.selected : "transparent"}
@@ -167,6 +271,124 @@ const SegmentedControlItem = React.forwardRef<View, SegmentedControlItemProps>(
 
 SegmentedControlItem.displayName = "SegmentedControl.Item"
 
+type IntrinsicTrackProps = ViewProps & {
+  containerProps: {
+    containerGap: number
+    containerPaddingVertical: number
+    containerPaddingHorizontal: number
+    containerBorderRadius: number
+    containerBgColor: string
+    containerFullWidth: boolean
+    scrollIndicatorPaddingOuter: number
+    scrollIndicatorPaddingInner: number
+  }
+  renderItems: () => React.ReactNode
+  forwardedRef: React.Ref<View>
+}
+
+const IntrinsicTrack = ({
+  containerProps,
+  renderItems,
+  forwardedRef,
+  ...rest
+}: IntrinsicTrackProps) => {
+  const scrollRef = React.useRef<ScrollView>(null)
+  const [containerWidth, setContainerWidth] = React.useState(0)
+  const [contentWidth, setContentWidth] = React.useState(0)
+  const [scrollX, setScrollX] = React.useState(0)
+
+  const epsilon = 2
+  const maxScroll = Math.max(0, contentWidth - containerWidth)
+  const canScrollLeft = scrollX > epsilon
+  const canScrollRight = scrollX < maxScroll - epsilon
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setScrollX(event.nativeEvent.contentOffset.x)
+  }
+
+  const scrollBy = (direction: "leading" | "trailing") => {
+    if (!scrollRef.current || containerWidth === 0) return
+    const step = containerWidth * 0.6
+    const target =
+      direction === "trailing"
+        ? Math.min(maxScroll, scrollX + step)
+        : Math.max(0, scrollX - step)
+    scrollRef.current.scrollTo({ x: target, animated: true })
+  }
+
+  return (
+    <View
+      ref={forwardedRef}
+      onLayout={(event) => setContainerWidth(event.nativeEvent.layout.width)}
+      {...rest}
+    >
+      <StyledIntrinsicClip
+        clipBorderRadius={containerProps.containerBorderRadius}
+        clipBgColor={containerProps.containerBgColor}
+        clipWidth={
+          containerWidth > 0 && contentWidth > 0
+            ? Math.min(contentWidth, containerWidth)
+            : undefined
+        }
+      >
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          onContentSizeChange={(width) => setContentWidth(width)}
+          contentContainerStyle={{
+            flexDirection: "row",
+            alignItems: "stretch",
+            gap: containerProps.containerGap,
+            paddingVertical: containerProps.containerPaddingVertical,
+            paddingHorizontal: containerProps.containerPaddingHorizontal
+          }}
+        >
+          {renderItems()}
+        </ScrollView>
+      </StyledIntrinsicClip>
+
+      {canScrollLeft && (
+        <StyledScrollIndicator
+          indicatorSide="leading"
+          indicatorBorderRadius={containerProps.containerBorderRadius}
+          indicatorPaddingOuter={containerProps.scrollIndicatorPaddingOuter}
+          indicatorPaddingInner={containerProps.scrollIndicatorPaddingInner}
+          onPress={() => scrollBy("leading")}
+          accessibilityRole="button"
+          accessibilityLabel="Scroll left"
+        >
+          <ScrollIndicatorGradient
+            side="leading"
+            color={containerProps.containerBgColor}
+          />
+          <Icon icon={KeyboardArrowLeft} size="lg" colour="action-inverse" />
+        </StyledScrollIndicator>
+      )}
+
+      {canScrollRight && (
+        <StyledScrollIndicator
+          indicatorSide="trailing"
+          indicatorBorderRadius={containerProps.containerBorderRadius}
+          indicatorPaddingOuter={containerProps.scrollIndicatorPaddingOuter}
+          indicatorPaddingInner={containerProps.scrollIndicatorPaddingInner}
+          onPress={() => scrollBy("trailing")}
+          accessibilityRole="button"
+          accessibilityLabel="Scroll right"
+        >
+          <ScrollIndicatorGradient
+            side="trailing"
+            color={containerProps.containerBgColor}
+          />
+          <Icon icon={KeyboardArrowRight} size="lg" colour="action-inverse" />
+        </StyledScrollIndicator>
+      )}
+    </View>
+  )
+}
+
 /**
  * Segmented control component for selecting exactly one option from a set.
  *
@@ -206,6 +428,7 @@ const SegmentedControlRoot = React.forwardRef<View, SegmentedControlProps>(
     const theme = useTheme()
     const { spacing, borderRadius, colour } =
       theme.tokens.components.segmentedControl
+    const { dimensions } = theme.tokens.semantics
 
     const optionsFirstValue = options?.[0]?.value
     const childrenArray = React.Children.toArray(children)
@@ -277,28 +500,19 @@ const SegmentedControlRoot = React.forwardRef<View, SegmentedControlProps>(
       containerPaddingHorizontal: parseTokenValue(spacing.horizontalPadding),
       containerBorderRadius: parseTokenValue(borderRadius.default),
       containerBgColor: colour.background.default,
-      containerFullWidth: layout === "fixed"
+      containerFullWidth: layout === "fixed",
+      scrollIndicatorPaddingOuter: parseTokenValue(dimensions.spacing["2xl"]),
+      scrollIndicatorPaddingInner: parseTokenValue(dimensions.spacing.sm)
     }
 
     if (layout === "intrinsic") {
       return (
-        <View ref={ref} {...rest}>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={{
-              flexDirection: "row",
-              alignItems: "stretch",
-              gap: containerProps.containerGap,
-              paddingVertical: containerProps.containerPaddingVertical,
-              paddingHorizontal: containerProps.containerPaddingHorizontal,
-              borderRadius: containerProps.containerBorderRadius,
-              backgroundColor: containerProps.containerBgColor
-            }}
-          >
-            {renderItems()}
-          </ScrollView>
-        </View>
+        <IntrinsicTrack
+          containerProps={containerProps}
+          renderItems={renderItems}
+          forwardedRef={ref}
+          {...rest}
+        />
       )
     }
 

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

@@ -0,0 +1,320 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { PortalHost } from "@rn-primitives/portal"
+import { SelectField, useSelectField } from "."
+import { Typography } from "../../atoms/Typography"
+import { Icon } from "../../atoms/Icon"
+import { Search, Settings, Lock, Info } from "@butternutbox/pawprint-icons/core"
+import type { Option } from "@rn-primitives/select"
+
+const StoryWrapper = ({ children }: { children: React.ReactNode }) => (
+  <>
+    {children}
+    <PortalHost />
+  </>
+)
+
+export default {
+  title: "Molecules/SelectField",
+  component: SelectField,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Select field component for choosing a value from a dropdown list. Built on @rn-primitives/select with design system styling. Supports both simple props API and compound component API."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text"
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Help text below select"
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message"
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      description: "Visual state of the select"
+    },
+    optionalText: {
+      control: { type: "text" },
+      description: "Optional text to display next to label"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables the select"
+    }
+  }
+}
+
+export const Default = () => (
+  <StoryWrapper>
+    <View style={styles.container}>
+      <SelectField
+        label="Search Type"
+        placeholder="Select search type"
+        description="Choose how you want to search"
+        leadingIcon={<Icon icon={Search} size="md" />}
+      >
+        <SelectField.Item
+          value="products"
+          leadingIcon={<Icon icon={Search} size="md" />}
+          hintText="Search all products"
+        >
+          Products
+        </SelectField.Item>
+        <SelectField.Item
+          value="orders"
+          leadingIcon={<Icon icon={Settings} size="md" />}
+          hintText="Search order history"
+        >
+          Orders
+        </SelectField.Item>
+        <SelectField.Item
+          value="admin"
+          leadingIcon={<Icon icon={Lock} size="md" />}
+          hintText="Admin access required"
+          disabled
+        >
+          Admin Panel
+        </SelectField.Item>
+        <SelectField.Item
+          value="help"
+          leadingIcon={<Icon icon={Info} size="md" />}
+        >
+          Help & Support
+        </SelectField.Item>
+      </SelectField>
+    </View>
+  </StoryWrapper>
+)
+
+export const States = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default State
+        </Typography>
+        <SelectField
+          label="Default State"
+          placeholder="Select an option"
+          description="Normal select state"
+        >
+          <SelectField.Item value="option1">Option 1</SelectField.Item>
+          <SelectField.Item value="option2">Option 2</SelectField.Item>
+          <SelectField.Item value="option3">Option 3</SelectField.Item>
+        </SelectField>
+      </View>
+
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Error State
+        </Typography>
+        <SelectField
+          label="Error State"
+          placeholder="Select an option"
+          state="error"
+          error="This field is required"
+          description="Error state"
+        >
+          <SelectField.Item value="option1">Option 1</SelectField.Item>
+          <SelectField.Item value="option2">Option 2</SelectField.Item>
+        </SelectField>
+      </View>
+
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Success State
+        </Typography>
+        <SelectField
+          label="Success State"
+          placeholder="Select an option"
+          state="success"
+          description="Success state"
+          defaultValue="option1"
+        >
+          <SelectField.Item value="option1">Option 1</SelectField.Item>
+          <SelectField.Item value="option2">Option 2</SelectField.Item>
+        </SelectField>
+      </View>
+
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Disabled
+        </Typography>
+        <SelectField
+          label="Disabled"
+          placeholder="Select an option"
+          description="Disabled select field"
+          disabled
+        >
+          <SelectField.Item value="option1">Option 1</SelectField.Item>
+          <SelectField.Item value="option2">Option 2</SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
+export const WithOptionalText = () => (
+  <StoryWrapper>
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          With Optional Text
+        </Typography>
+        <SelectField
+          label="Country"
+          optionalText="(optional)"
+          placeholder="Select a country"
+          description="Optional select field"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+          <SelectField.Item value="ca">Canada</SelectField.Item>
+        </SelectField>
+      </View>
+    </View>
+  </StoryWrapper>
+)
+
+export const CustomValidation = () => {
+  const [value, setValue] = useState<Option | string | null>(null)
+
+  // Extract actual value for validation
+  const actualValue =
+    value && typeof value === "object" && "value" in value ? value.value : value
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Custom Validation
+          </Typography>
+          <SelectField
+            label="Product Category"
+            placeholder="Select category"
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+            description="Select a valid category"
+            error={
+              actualValue === "invalid"
+                ? "This option is not allowed"
+                : undefined
+            }
+            state={actualValue === "invalid" ? "error" : "default"}
+          >
+            <SelectField.Item value="food">Food</SelectField.Item>
+            <SelectField.Item value="toys">Toys</SelectField.Item>
+            <SelectField.Item value="invalid">Invalid Option</SelectField.Item>
+          </SelectField>
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
+export const CustomStateValidationWithSuccess = () => {
+  const selectProps = useSelectField({
+    validationRule: {
+      test: (value) => {
+        if (!value) return false
+        // Handle object with value property
+        const actualValue =
+          typeof value === "object" && value !== null && "value" in value
+            ? (value as { value: string }).value
+            : value
+        return actualValue !== "invalid"
+      },
+      message: "Please select a valid option"
+    }
+  })
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Real-time Validation with Success State
+          </Typography>
+          <SelectField
+            {...selectProps}
+            label="Product Category"
+            placeholder="Select category"
+            description="Select a valid category (not 'Invalid Option')"
+          >
+            <SelectField.Item value="food">Food</SelectField.Item>
+            <SelectField.Item value="toys">Toys</SelectField.Item>
+            <SelectField.Item value="accessories">Accessories</SelectField.Item>
+            <SelectField.Item value="invalid">Invalid Option</SelectField.Item>
+          </SelectField>
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
+export const Controlled = () => {
+  const selectProps = useSelectField()
+
+  // Extract the actual value for display (handle object with value property)
+  const displayValue = (() => {
+    const val = selectProps.value
+    if (!val) return "(none)"
+    if (typeof val === "object" && val !== null && "value" in val) {
+      return (val as { value: string }).value
+    }
+    return String(val)
+  })()
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Controlled: {displayValue}
+          </Typography>
+          <SelectField
+            {...selectProps}
+            label="Country"
+            placeholder="Select a country"
+            description={`Current value: "${displayValue}"`}
+          >
+            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+            <SelectField.Item value="us">United States</SelectField.Item>
+            <SelectField.Item value="ca">Canada</SelectField.Item>
+            <SelectField.Item value="au">Australia</SelectField.Item>
+          </SelectField>
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 320
+  },
+  column: {
+    flexDirection: "column",
+    gap: 24,
+    width: 320
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})