@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,170 @@
+import React, { useEffect, useRef } from "react"
+import { Pressable, View, PressableProps, Animated, Easing } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import * as SelectPrimitive from "@rn-primitives/select"
+import { Slot } from "@rn-primitives/slot"
+import { Icon } from "../../atoms/Icon"
+import {
+  KeyboardArrowDown,
+  Error as ErrorIcon,
+  CheckCircle as SuccessIcon
+} from "@butternutbox/pawprint-icons/core"
+import type { InputState } from "../../atoms/Input/InputField"
+
+type SelectFieldTriggerOwnProps = {
+  state?: InputState
+  leadingIcon?: React.ReactNode
+  children?: React.ReactNode
+  isOpen?: boolean
+}
+
+export type SelectFieldTriggerProps = SelectFieldTriggerOwnProps &
+  Omit<PressableProps, keyof SelectFieldTriggerOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledTriggerWrapper = styled(Animated.View)<{ state: InputState }>(({
+  theme,
+  state: _state
+}) => {
+  const { spacing, colour, borderRadius, size } = theme.tokens.components.inputs
+
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: parseTokenValue(spacing.field.gap),
+    minWidth: parseTokenValue(size.field.minWidth),
+    width: "100%",
+    height: parseTokenValue(size.field.height),
+    backgroundColor: colour.field.background.default,
+    borderRadius: parseTokenValue(borderRadius.field.default)
+  }
+})
+
+const StyledIconWrapper = styled(View)({
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+const StyledArrowIcon = styled(Animated.View)({
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+export const SelectFieldTrigger = React.forwardRef<
+  View,
+  SelectFieldTriggerProps
+>(
+  (
+    { state = "default", leadingIcon, children, isOpen = false, ...rest },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { colour, borderWidth, spacing } = theme.tokens.components.inputs
+
+    const hasState = state === "error" || state === "success"
+
+    const baseBorderWidth = parseTokenValue(borderWidth.field.default)
+    const selectedBorderWidth = parseTokenValue(borderWidth.field.selected)
+    const baseVerticalPadding = parseTokenValue(spacing.field.verticalPadding)
+    const baseHorizontalPadding = parseTokenValue(
+      spacing.field.horizontalPadding
+    )
+    const borderDelta = selectedBorderWidth - baseBorderWidth
+
+    const borderColor =
+      state === "error"
+        ? colour.field.border.error
+        : state === "success"
+          ? colour.field.border.success
+          : isOpen
+            ? colour.field.border.selected
+            : colour.field.border.default
+
+    const isActiveBorder = isOpen || hasState
+    const borderAnim = useRef(
+      new Animated.Value(isActiveBorder ? 1 : 0)
+    ).current
+    const rotationAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current
+
+    useEffect(() => {
+      Animated.parallel([
+        Animated.timing(borderAnim, {
+          toValue: isActiveBorder ? 1 : 0,
+          duration: 50,
+          easing: Easing.ease,
+          useNativeDriver: false
+        }),
+        Animated.timing(rotationAnim, {
+          toValue: isOpen ? 1 : 0,
+          duration: 250,
+          easing: Easing.bezier(0.4, 0.0, 0.2, 1),
+          useNativeDriver: true
+        })
+      ]).start()
+    }, [isActiveBorder, isOpen, borderAnim, rotationAnim])
+
+    const animatedBorderWidth = borderAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [baseBorderWidth, selectedBorderWidth]
+    })
+
+    const animatedPaddingVertical = borderAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [baseVerticalPadding, baseVerticalPadding - borderDelta]
+    })
+
+    const animatedPaddingHorizontal = borderAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [baseHorizontalPadding, baseHorizontalPadding - borderDelta]
+    })
+
+    const animatedRotation = rotationAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["0deg", "180deg"]
+    })
+
+    const stateIcon =
+      state === "error" ? (
+        <Icon icon={ErrorIcon} size="md" colour="error" />
+      ) : state === "success" ? (
+        <Icon icon={SuccessIcon} size="md" colour="success" />
+      ) : null
+
+    return (
+      <SelectPrimitive.Trigger asChild>
+        <Slot ref={ref}>
+          <Pressable {...rest}>
+            <StyledTriggerWrapper
+              state={state}
+              style={[
+                {
+                  borderColor,
+                  borderWidth: animatedBorderWidth,
+                  paddingVertical: animatedPaddingVertical,
+                  paddingHorizontal: animatedPaddingHorizontal
+                }
+              ]}
+            >
+              {leadingIcon && (
+                <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>
+              )}
+              {children}
+              {stateIcon && <StyledIconWrapper>{stateIcon}</StyledIconWrapper>}
+              <StyledArrowIcon
+                style={{ transform: [{ rotate: animatedRotation }] }}
+              >
+                <Icon icon={KeyboardArrowDown} size="md" colour="primary" />
+              </StyledArrowIcon>
+            </StyledTriggerWrapper>
+          </Pressable>
+        </Slot>
+      </SelectPrimitive.Trigger>
+    )
+  }
+)
+
+SelectFieldTrigger.displayName = "SelectField.Trigger"

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

@@ -0,0 +1,31 @@
+import React from "react"
+import { Text, TextProps } from "react-native"
+import styled from "@emotion/native"
+import * as SelectPrimitive from "@rn-primitives/select"
+
+type SelectFieldValueProps = {
+  placeholder?: string
+} & Omit<TextProps, "children">
+
+const StyledValue = styled(Text)(({ theme }) => {
+  const { colour } = theme.tokens.components.inputs
+
+  return {
+    flex: 1,
+    minWidth: 0,
+    textAlign: "left",
+    color: colour.field.text.default
+  }
+})
+
+export const SelectFieldValue = React.forwardRef<Text, SelectFieldValueProps>(
+  ({ placeholder, ...rest }, ref) => {
+    return (
+      <StyledValue ref={ref} {...rest}>
+        <SelectPrimitive.Value placeholder={placeholder ?? ""} />
+      </StyledValue>
+    )
+  }
+)
+
+SelectFieldValue.displayName = "SelectField.Value"

package/src/components/molecules/SelectField/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useSelectField } from "./useSelectField"
+export type { SelectValidationRule } from "./useSelectField"

package/src/components/molecules/SelectField/hooks/useSelectField.ts

@@ -0,0 +1,84 @@
+import { useState, useMemo } from "react"
+import type { SelectFieldProps } from "../SelectField"
+import type { InputState } from "../../../atoms/Input/InputField"
+import type { Option } from "@rn-primitives/select"
+
+export type SelectValidationRule<T = string | Option> = {
+  test: (value: T | null) => boolean
+  message: string
+}
+
+type SelectOptions<T = string | Option> = {
+  initialValue?: T | null
+  onValueChange?: (value: T | null) => void
+  validationRule?: SelectValidationRule<T>
+}
+
+type SelectReturn<T = string | Option> = {
+  value: T | null
+  onValueChange: (value: T | null) => void
+  state?: InputState
+  error?: string
+}
+
+/**
+ * Hook for managing SelectField state with built-in validation.
+ * Handles value, validation state, and error message automatically.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage without validation
+ * const selectProps = useSelectField()
+ * <SelectField {...selectProps} label="Country" />
+ *
+ * // With validation rule
+ * const selectProps = useSelectField({
+ *   validationRule: {
+ *     test: (v) => v !== null,
+ *     message: "Please select an option"
+ *   }
+ * })
+ * <SelectField {...selectProps} label="Category" />
+ * ```
+ */
+export function useSelectField<T = string | Option>(
+  options: SelectOptions<T> = {}
+): SelectReturn<T> {
+  const {
+    initialValue,
+    onValueChange: onValueChangeCallback,
+    validationRule
+  } = options
+
+  const [value, setValue] = useState<T | null>(initialValue ?? null)
+
+  const handleValueChange: SelectFieldProps<T>["onValueChange"] = (
+    newValue
+  ) => {
+    const typedValue = Array.isArray(newValue) ? newValue[0] : newValue
+    setValue(typedValue ?? null)
+    onValueChangeCallback?.(typedValue as any)
+  }
+
+  const { state, error } = useMemo(() => {
+    if (!validationRule) {
+      return { state: undefined, error: undefined }
+    }
+
+    if (value === null || value === initialValue) {
+      return { state: "default" as InputState, error: undefined }
+    }
+
+    const isValid = validationRule.test(value)
+    return {
+      state: (isValid ? "success" : "error") as InputState,
+      error: isValid ? undefined : validationRule.message
+    }
+  }, [value, validationRule, initialValue])
+
+  return {
+    value,
+    onValueChange: handleValueChange,
+    ...(validationRule && { state, error })
+  }
+}

package/src/components/molecules/SelectField/index.ts

@@ -0,0 +1,10 @@
+export { SelectField } from "./SelectField"
+export type { SelectFieldProps } from "./SelectField"
+export { useSelectField } from "./hooks"
+export type { SelectValidationRule } from "./hooks"
+export { SelectFieldTrigger } from "./SelectFieldTrigger"
+export type { SelectFieldTriggerProps } from "./SelectFieldTrigger"
+export { SelectFieldValue } from "./SelectFieldValue"
+export { SelectFieldContent } from "./SelectFieldContent"
+export { SelectFieldItem } from "./SelectFieldItem"
+export type { SelectFieldItemProps } from "./SelectFieldItem"

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

@@ -0,0 +1,102 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Slider } from "./Slider"
+
+describe("Slider", () => {
+  describe("when component is rendering", () => {
+    it("renders without crashing", () => {
+      const { container } = renderWithTheme(<Slider />)
+      expect(container.firstChild).toBeTruthy()
+    })
+
+    it("renders with slider role", () => {
+      renderWithTheme(<Slider />)
+      expect(screen.getByRole("slider")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering labels", () => {
+    it("renders leading label", () => {
+      renderWithTheme(<Slider leadingLabel="0kg" />)
+      expect(screen.getByText("0kg")).toBeInTheDocument()
+    })
+
+    it("renders trailing label", () => {
+      renderWithTheme(<Slider trailingLabel="50kg+" />)
+      expect(screen.getByText("50kg+")).toBeInTheDocument()
+    })
+
+    it("renders both labels", () => {
+      renderWithTheme(<Slider leadingLabel="0kg" trailingLabel="50kg+" />)
+      expect(screen.getByText("0kg")).toBeInTheDocument()
+      expect(screen.getByText("50kg+")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering description", () => {
+    it("renders description text", () => {
+      renderWithTheme(<Slider description="Drag to select weight" />)
+      expect(screen.getByText("Drag to select weight")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering icons", () => {
+    it("renders leading icon", () => {
+      renderWithTheme(
+        <Slider
+          leadingIcon={<span data-testid="lead-icon">-</span>}
+          leadingLabel="Min"
+        />
+      )
+      expect(screen.getByTestId("lead-icon")).toBeInTheDocument()
+    })
+
+    it("renders trailing icon", () => {
+      renderWithTheme(
+        <Slider
+          trailingIcon={<span data-testid="trail-icon">+</span>}
+          trailingLabel="Max"
+        />
+      )
+      expect(screen.getByTestId("trail-icon")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering with value props", () => {
+    it("renders with defaultValue", () => {
+      renderWithTheme(<Slider defaultValue={25} />)
+      expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "25")
+    })
+
+    it("renders with controlled value", () => {
+      renderWithTheme(<Slider value={50} />)
+      expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "50")
+    })
+
+    it("renders with min and max", () => {
+      renderWithTheme(<Slider min={10} max={200} />)
+      expect(screen.getByRole("slider")).toHaveAttribute("aria-valuemin", "10")
+      expect(screen.getByRole("slider")).toHaveAttribute("aria-valuemax", "200")
+    })
+  })
+
+  describe("when disabled", () => {
+    it("sets disabled aria attribute", () => {
+      renderWithTheme(<Slider disabled />)
+      expect(screen.getByRole("slider")).toHaveAttribute(
+        "aria-disabled",
+        "true"
+      )
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Slider ref={ref} />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})