@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,254 @@
+import React from "react"
+import { View } from "react-native"
+import { screen } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { SelectField } from "./SelectField"
+
+describe("SelectField", () => {
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country">
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          description="Choose your country"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Choose your country")).toBeInTheDocument()
+    })
+
+    it("renders error message when error prop and state='error' are provided", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          state="error"
+          error="Country is required"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country is required")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          error="Country is required"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.queryByText("Country is required")).not.toBeInTheDocument()
+    })
+
+    it("shows (optional) when optionalText is provided", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          optionalText="(optional)"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders the component structure", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country">
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("renders with controlled value", () => {
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          value="uk"
+          onValueChange={onValueChange}
+          placeholder="Select a country"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country")).toBeInTheDocument()
+    })
+  })
+
+  describe("when disabled", () => {
+    it("renders disabled state", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country" disabled>
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country")).toBeInTheDocument()
+    })
+  })
+
+  describe("validation states", () => {
+    it("shows error state with error message", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          state="error"
+          error="Country is required"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country is required")).toBeInTheDocument()
+    })
+
+    it("renders success state", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          state="success"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Country")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders compound components", () => {
+      renderWithTheme(
+        <SelectField.Root>
+          <SelectField.Label>Country</SelectField.Label>
+          <SelectField.Trigger>
+            <SelectField.Value placeholder="Select a country" />
+          </SelectField.Trigger>
+          <SelectField.Content>
+            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          </SelectField.Content>
+          <SelectField.Description>Choose your country</SelectField.Description>
+        </SelectField.Root>
+      )
+
+      expect(screen.getByText("Country")).toBeInTheDocument()
+      expect(screen.getByText("Choose your country")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <SelectField.Root>
+          <SelectField.Label state="error">Country</SelectField.Label>
+          <SelectField.Trigger state="error">
+            <SelectField.Value placeholder="Select a country" />
+          </SelectField.Trigger>
+          <SelectField.Content>
+            <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          </SelectField.Content>
+          <SelectField.Error>Country is required</SelectField.Error>
+        </SelectField.Root>
+      )
+
+      expect(screen.getByText("Country is required")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to root element", () => {
+      const ref = React.createRef<View>()
+      renderWithTheme(<SelectField ref={ref} label="Test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+
+  describe("uncontrolled mode with defaultValue", () => {
+    it("uses defaultValue as initial value", () => {
+      renderWithTheme(
+        <SelectField
+          label="Country"
+          placeholder="Select a country"
+          defaultValue="uk"
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+          <SelectField.Item value="us">United States</SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("United Kingdom")).toBeInTheDocument()
+    })
+  })
+
+  describe("with items", () => {
+    it("renders items with leadingIcon", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country">
+          <SelectField.Item
+            value="uk"
+            leadingIcon={<div data-testid="icon">🇬🇧</div>}
+          >
+            United Kingdom
+          </SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+    })
+
+    it("renders items with hintText", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country">
+          <SelectField.Item value="uk" hintText="Europe">
+            United Kingdom
+          </SelectField.Item>
+        </SelectField>
+      )
+
+      expect(screen.getByText("Europe")).toBeInTheDocument()
+    })
+
+    it("renders disabled items", () => {
+      renderWithTheme(
+        <SelectField label="Country" placeholder="Select a country">
+          <SelectField.Item value="uk" disabled>
+            United Kingdom
+          </SelectField.Item>
+        </SelectField>
+      )
+
+      const item = screen.getByText("United Kingdom")
+      expect(item).toBeInTheDocument()
+    })
+  })
+})

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

@@ -0,0 +1,236 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import * as SelectPrimitive from "@rn-primitives/select"
+import type { Option } from "@rn-primitives/select"
+import type { InputState } from "../../atoms/Input/InputField"
+import { InputError } from "../../atoms/Input/InputError"
+import { InputLabel } from "../../atoms/Input/InputLabel"
+import { InputDescription } from "../../atoms/Input/InputDescription"
+import { SelectFieldTrigger } from "./SelectFieldTrigger"
+import { SelectFieldValue } from "./SelectFieldValue"
+import { SelectFieldContent } from "./SelectFieldContent"
+import { SelectFieldItem } from "./SelectFieldItem"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+type SelectFieldOwnProps<Value = Option | string> = {
+  label?: string
+  description?: string
+  error?: string
+  state?: InputState
+  optionalText?: string
+  placeholder?: string
+  leadingIcon?: React.ReactNode
+  value?: Value | null
+  defaultValue?: Value | null
+  onValueChange?: (value: Value | null) => void
+  children?: React.ReactNode
+  disabled?: boolean
+}
+
+export type SelectFieldProps<Value = Option> = SelectFieldOwnProps<Value> &
+  Omit<ViewProps, keyof SelectFieldOwnProps<Value>>
+
+/**
+ * Select field component for choosing a value from a dropdown list.
+ * Built on @rn-primitives/select with design system styling.
+ * Supports a simple props API, compound component API, and useSelectField hook for state management.
+ *
+ * **Simple Props API:**
+ * @example
+ * ```tsx
+ * <SelectField
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   description="Choose your country"
+ * >
+ *   <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+ *   <SelectField.Item value="us">United States</SelectField.Item>
+ *   <SelectField.Item value="ca">Canada</SelectField.Item>
+ * </SelectField>
+ * ```
+ *
+ * **With useSelectField Hook (Recommended):**
+ * @example
+ * ```tsx
+ * const selectProps = useSelectField({
+ *   validationRule: {
+ *     test: (value) => value !== null,
+ *     message: "Please select an option"
+ *   }
+ * })
+ *
+ * <SelectField
+ *   {...selectProps}
+ *   label="Category"
+ *   placeholder="Select a category"
+ * >
+ *   <SelectField.Item value="food">Food</SelectField.Item>
+ *   <SelectField.Item value="toys">Toys</SelectField.Item>
+ * </SelectField>
+ * ```
+ *
+ * **Compound Component API:**
+ * @example
+ * ```tsx
+ * <SelectField.Root>
+ *   <SelectField.Label optionalText="(optional)">Country</SelectField.Label>
+ *   <SelectField.Trigger>
+ *     <SelectField.Value placeholder="Select a country" />
+ *   </SelectField.Trigger>
+ *   <SelectField.Content>
+ *     <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+ *     <SelectField.Item value="us">United States</SelectField.Item>
+ *   </SelectField.Content>
+ *   <SelectField.Description>Choose your country</SelectField.Description>
+ *   <SelectField.Error>Country is required</SelectField.Error>
+ * </SelectField.Root>
+ * ```
+ *
+ * @param {string} [label] - Label text (props API)
+ * @param {string} [description] - Help text below select (props API)
+ * @param {string} [error] - Error message (props API)
+ * @param {InputState} [state] - Visual state (default, error, success)
+ * @param {string} [optionalText] - Optional text to display next to label (props API)
+ * @param {string} [placeholder] - Placeholder text when no value is selected
+ * @param {React.ReactNode} [leadingIcon] - Icon to display before the trigger text
+ * @param {Value | null} [value] - Controlled value
+ * @param {Value | null} [defaultValue] - Default value for uncontrolled mode
+ * @param {function} [onValueChange] - Value change handler
+ * @param {boolean} [disabled] - Disables the select
+ */
+const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
+  (
+    {
+      label,
+      placeholder,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      leadingIcon,
+      children,
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      ...rest
+    },
+    ref
+  ) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue ?? null
+    )
+
+    const isCompound = React.Children.toArray(children).some(
+      (child) =>
+        React.isValidElement(child) && child.type === SelectFieldContent
+    )
+
+    if (isCompound) {
+      return (
+        <StyledRoot ref={ref} {...rest}>
+          {children}
+        </StyledRoot>
+      )
+    }
+
+    const handleValueChange = (newValue: Option) => {
+      const valueToSet = newValue ?? null
+      setInternalValue(valueToSet)
+      onValueChange?.(valueToSet)
+    }
+
+    const currentValue = value !== undefined ? value : internalValue
+
+    return (
+      <SelectPrimitive.Root
+        value={value ?? undefined}
+        defaultValue={defaultValue ?? undefined}
+        onValueChange={handleValueChange}
+        disabled={disabled}
+        onOpenChange={setIsOpen}
+      >
+        <StyledRoot ref={ref} {...rest}>
+          {label && (
+            <InputLabel optionalText={optionalText} state={state}>
+              {label}
+            </InputLabel>
+          )}
+          <SelectFieldTrigger
+            state={state}
+            leadingIcon={leadingIcon}
+            isOpen={isOpen}
+          >
+            <SelectFieldValue placeholder={placeholder} />
+          </SelectFieldTrigger>
+          {description && (
+            <InputDescription state={state}>{description}</InputDescription>
+          )}
+          {error && state === "error" && <InputError>{error}</InputError>}
+        </StyledRoot>
+        <SelectFieldContent>
+          {React.Children.map(children, (child) => {
+            if (React.isValidElement(child) && child.type === SelectFieldItem) {
+              // Extract value from object if needed
+              const selectedValue =
+                currentValue &&
+                typeof currentValue === "object" &&
+                "value" in currentValue
+                  ? (currentValue as { value: string }).value
+                  : currentValue
+
+              const childProps = child.props as { value: string }
+              return React.cloneElement(
+                child as React.ReactElement<{
+                  value: string
+                  isSelected?: boolean
+                }>,
+                {
+                  isSelected: childProps.value === selectedValue
+                }
+              )
+            }
+            return child
+          })}
+        </SelectFieldContent>
+      </SelectPrimitive.Root>
+    )
+  }
+)
+
+SelectFieldRoot.displayName = "SelectField"
+
+type SelectFieldComponent = React.ForwardRefExoticComponent<
+  SelectFieldProps<Option | string> & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof InputLabel
+  Trigger: typeof SelectFieldTrigger
+  Value: typeof SelectFieldValue
+  Content: typeof SelectFieldContent
+  Item: typeof SelectFieldItem
+  Description: typeof InputDescription
+  Error: typeof InputError
+}
+
+export const SelectField = Object.assign(SelectFieldRoot, {
+  Root: StyledRoot,
+  Label: InputLabel,
+  Trigger: SelectFieldTrigger,
+  Value: SelectFieldValue,
+  Content: SelectFieldContent,
+  Item: SelectFieldItem,
+  Description: InputDescription,
+  Error: InputError
+}) as SelectFieldComponent

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

@@ -0,0 +1,85 @@
+import React from "react"
+import { View, ViewProps, ScrollView } 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"
+
+type SelectFieldContentProps = {
+  children?: React.ReactNode
+} & Omit<ViewProps, "children">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+// TODO: Replace with dynamic positioning when @rn-primitives/select supports it on React Native
+// These values position the dropdown below and aligned with the trigger
+const DROPDOWN_OFFSET_X = -32 // Align with trigger left edge
+const DROPDOWN_OFFSET_Y = -94 // Position below trigger with gap
+
+const StyledContentShadow = styled(View)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+  const shadow = dropdown.list.dropshadow.default
+
+  return {
+    borderRadius: parseTokenValue(dropdown.list.borderRadius.default),
+    shadowColor: shadow.color,
+    shadowOffset: {
+      width: parseTokenValue(shadow.offsetX),
+      height: parseTokenValue(shadow.offsetY)
+    },
+    shadowOpacity: 1,
+    shadowRadius: parseTokenValue(shadow.blur),
+    elevation: 8,
+    transform: [
+      { translateX: DROPDOWN_OFFSET_X },
+      { translateY: DROPDOWN_OFFSET_Y }
+    ]
+  }
+})
+
+const StyledContentInner = styled(View)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+  const { colour } = theme.tokens.components.inputs
+
+  return {
+    backgroundColor: colour.field.background.default,
+    borderRadius: parseTokenValue(dropdown.list.borderRadius.default),
+    minWidth: parseTokenValue(dropdown.list.size.minWidth),
+    maxHeight: parseTokenValue(dropdown.list.size.maxHeight),
+    overflow: "hidden"
+  }
+})
+
+export const SelectFieldContent = React.forwardRef<
+  View,
+  SelectFieldContentProps
+>(({ children, ...rest }, ref) => {
+  const theme = useTheme()
+  const { spacing } = theme.tokens.components.inputs
+
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        side="bottom"
+        align="start"
+        sideOffset={parseTokenValue(spacing.gap)}
+        alignOffset={0}
+        asChild
+      >
+        <Slot ref={ref}>
+          <StyledContentShadow {...rest}>
+            <StyledContentInner>
+              <SelectPrimitive.Viewport>
+                <ScrollView showsVerticalScrollIndicator nestedScrollEnabled>
+                  {children}
+                </ScrollView>
+              </SelectPrimitive.Viewport>
+            </StyledContentInner>
+          </StyledContentShadow>
+        </Slot>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+})
+
+SelectFieldContent.displayName = "SelectField.Content"

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

@@ -0,0 +1,133 @@
+import React from "react"
+import { Pressable, View, Text, PressableProps } 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"
+
+type SelectFieldItemOwnProps = {
+  value: string
+  leadingIcon?: React.ReactNode
+  hintText?: string
+  disabled?: boolean
+  isSelected?: boolean
+}
+
+export type SelectFieldItemProps = SelectFieldItemOwnProps &
+  Omit<PressableProps, keyof SelectFieldItemOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledItem = styled(Pressable)<{ disabled?: boolean }>(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: parseTokenValue(dropdown.listItem.content.gap),
+    height: parseTokenValue(dropdown.listItem.size.height),
+    paddingVertical: parseTokenValue(dropdown.listItem.spacing.verticalPadding),
+    paddingHorizontal: parseTokenValue(
+      dropdown.listItem.spacing.horiztonalPadding
+    ),
+    backgroundColor: dropdown.listItem.colour.background.default
+  }
+})
+
+const StyledIconWrapper = styled(View)({
+  flexShrink: 0,
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+const StyledContentWrapper = styled(View)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: parseTokenValue(dropdown.listItem.content.gap),
+    flex: 1,
+    minWidth: 0
+  }
+})
+
+const StyledTextWrapper = styled(View)({
+  flex: 1,
+  minWidth: 0
+})
+
+const StyledItemText = styled(Text)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+
+  return {
+    color: dropdown.listItem.colour.text.placeholder.default
+  }
+})
+
+const StyledHintText = styled(Text)(({ theme }) => {
+  const { dropdown } = theme.tokens.components.dropdownList
+
+  return {
+    color: dropdown.listItem.colour.text.hint.default,
+    flexShrink: 0
+  }
+})
+
+export const SelectFieldItem = React.forwardRef<View, SelectFieldItemProps>(
+  (
+    { value, leadingIcon, hintText, children, disabled, isSelected, ...rest },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { dropdown } = theme.tokens.components.dropdownList
+    const itemText = children as React.ReactNode
+
+    const backgroundColor = disabled
+      ? dropdown.listItem.colour.background.disabled
+      : isSelected
+        ? dropdown.listItem.colour.background.hover
+        : dropdown.listItem.colour.background.default
+
+    const textColor = disabled
+      ? dropdown.listItem.colour.text.placeholder.disabled
+      : dropdown.listItem.colour.text.placeholder.default
+
+    return (
+      <SelectPrimitive.Item
+        label={String(children)}
+        value={value}
+        disabled={disabled}
+        asChild
+      >
+        <Slot ref={ref}>
+          <StyledItem disabled={disabled} style={{ backgroundColor }} {...rest}>
+            {leadingIcon && (
+              <StyledIconWrapper>{leadingIcon}</StyledIconWrapper>
+            )}
+            <StyledContentWrapper>
+              <StyledTextWrapper>
+                <StyledItemText style={{ color: textColor }}>
+                  {itemText}
+                </StyledItemText>
+              </StyledTextWrapper>
+              {hintText && (
+                <StyledHintText
+                  style={{
+                    color: disabled
+                      ? dropdown.listItem.colour.text.hint.disabled
+                      : dropdown.listItem.colour.text.hint.default
+                  }}
+                >
+                  {hintText}
+                </StyledHintText>
+              )}
+            </StyledContentWrapper>
+          </StyledItem>
+        </Slot>
+      </SelectPrimitive.Item>
+    )
+  }
+)
+
+SelectFieldItem.displayName = "SelectField.Item"