@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/SearchField/SearchField.tsx

@@ -0,0 +1,143 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import type { InputState, InputFieldProps } from "../../atoms/Input/InputField"
+import { InputError } from "../../atoms/Input/InputError"
+import { InputLabel } from "../../atoms/Input/InputLabel"
+import { InputDescription } from "../../atoms/Input/InputDescription"
+import { SearchFieldInput } from "./SearchFieldInput"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+type SearchFieldOwnProps = {
+  label?: string
+  description?: string
+  error?: string
+  state?: InputState
+  optionalText?: string
+  onClear?: () => void
+  onValueChange?: (value: string) => void
+}
+
+export type SearchFieldProps = SearchFieldOwnProps &
+  Omit<InputFieldProps, keyof SearchFieldOwnProps> &
+  Omit<ViewProps, keyof SearchFieldOwnProps>
+
+/**
+ * Search field component for text search with clear functionality.
+ * Supports both a simple props API and a flexible compound component API.
+ *
+ * **Simple Props API:**
+ * @example
+ * ```tsx
+ * // Recommended: Use the useSearchField hook
+ * const searchProps = useSearchField()
+ * <SearchField {...searchProps} label="Search" placeholder="Search..." />
+ *
+ * // Or manually manage state:
+ * const [searchValue, setSearchValue] = useState("")
+ * <SearchField
+ *   label="Search"
+ *   placeholder="Search..."
+ *   value={searchValue}
+ *   onValueChange={(value) => setSearchValue(value)}
+ *   onClear={() => setSearchValue("")}
+ * />
+ * ```
+ *
+ * **Compound Component API:**
+ * @example
+ * <SearchField.Root>
+ *   <SearchField.Label optionalText="(optional)">Search</SearchField.Label>
+ *   <SearchField.Field
+ *     placeholder="Search..."
+ *     onClear={() => setValue("")}
+ *   />
+ *   <SearchField.Description>Search for items</SearchField.Description>
+ *   <SearchField.Error>Search is required</SearchField.Error>
+ * </SearchField.Root>
+ *
+ * @param {string} [label] - Label text (props API)
+ * @param {string} [description] - Description/help text (props API)
+ * @param {string} [error] - Error message to display (props API, does not affect visual state - use state prop for that)
+ * @param {InputState} [state] - Visual state of the input: 'default', 'error', or 'success' (props API)
+ * @param {string} [optionalText] - Optional text to display next to label (props API)
+ * @param {function} [onClear] - Clear button press handler
+ * @param {function} [onValueChange] - Value change handler (receives string value)
+ * @param {string} [value] - Controlled value
+ * @param {string} [defaultValue] - Default value for uncontrolled mode
+ * @param {function} [onChangeText] - Change event handler
+ * @param {boolean} [editable] - Controls whether the input is editable
+ *
+ * Also supports all native TextInput props.
+ */
+const SearchFieldRoot = React.forwardRef<View, SearchFieldProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      onClear,
+      onValueChange,
+      value,
+      children,
+      ...inputFieldProps
+    },
+    ref
+  ) => {
+    if (children) {
+      return <StyledRoot ref={ref}>{children}</StyledRoot>
+    }
+
+    return (
+      <StyledRoot ref={ref}>
+        {label && (
+          <InputLabel optionalText={optionalText} state={state}>
+            {label}
+          </InputLabel>
+        )}
+        <SearchFieldInput
+          state={state}
+          value={value}
+          onClear={onClear}
+          onValueChange={onValueChange}
+          {...inputFieldProps}
+        />
+        {description && (
+          <InputDescription state={state}>{description}</InputDescription>
+        )}
+        {error && state === "error" && <InputError>{error}</InputError>}
+      </StyledRoot>
+    )
+  }
+)
+
+SearchFieldRoot.displayName = "SearchField"
+
+type SearchFieldComponent = React.ForwardRefExoticComponent<
+  SearchFieldProps & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof InputLabel
+  Field: typeof SearchFieldInput
+  Description: typeof InputDescription
+  Error: typeof InputError
+}
+
+export const SearchField = Object.assign(SearchFieldRoot, {
+  Root: StyledRoot,
+  Label: InputLabel,
+  Field: SearchFieldInput,
+  Description: InputDescription,
+  Error: InputError
+}) as SearchFieldComponent

package/src/components/molecules/SearchField/SearchFieldInput.tsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { Pressable, TextInput } from "react-native"
+import { InputField } from "../../atoms/Input/InputField"
+import { Icon } from "../../atoms/Icon"
+import { Search, Cancel } from "@butternutbox/pawprint-icons/core"
+import type { SearchFieldProps } from "./SearchField"
+
+export const SearchFieldInput = React.forwardRef<
+  TextInput,
+  Omit<SearchFieldProps, "label" | "description" | "error" | "optionalText">
+>(({ onClear, onValueChange, value, state, ...inputFieldProps }, ref) => {
+  const [internalValue, setInternalValue] = React.useState("")
+  const inputRef = React.useRef<TextInput>(null)
+
+  React.useImperativeHandle(ref, () => inputRef.current!)
+
+  const handleValueChange = (newValue: string) => {
+    setInternalValue(newValue)
+    onValueChange?.(newValue)
+  }
+
+  const currentValue = value !== undefined ? value : internalValue
+
+  const hasText = Boolean(currentValue && currentValue.length > 0)
+  const showClearButton = hasText
+
+  const handleClear = () => {
+    setInternalValue("")
+
+    if (inputRef.current && value === undefined) {
+      inputRef.current.clear()
+    }
+
+    onClear?.()
+  }
+
+  const searchIcon = <Icon icon={Search} size="md" aria-label="Search" />
+
+  const clearButton = showClearButton ? (
+    <Pressable
+      onPress={handleClear}
+      accessibilityLabel="Clear search"
+      accessibilityRole="button"
+      hitSlop={8}
+    >
+      <Icon icon={Cancel} size="md" />
+    </Pressable>
+  ) : null
+
+  return (
+    <InputField
+      ref={inputRef}
+      {...inputFieldProps}
+      {...(state !== undefined && { state })}
+      value={currentValue}
+      onChangeText={handleValueChange}
+      leadingIcon={searchIcon}
+      actionIcon={clearButton}
+    />
+  )
+})
+
+SearchFieldInput.displayName = "SearchField.Field"

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

@@ -0,0 +1 @@
+export { useSearchField } from "./useSearchField"

package/src/components/molecules/SearchField/hooks/useSearchField.ts

@@ -0,0 +1,56 @@
+import { useState } from "react"
+import type { SearchFieldProps } from "../SearchField"
+
+type UseSearchFieldOptions = {
+  initialValue?: string
+  onValueChange?: (value: string) => void
+  onClear?: () => void
+}
+
+type UseSearchFieldReturn = Pick<
+  SearchFieldProps,
+  "value" | "onValueChange" | "onClear"
+>
+
+/**
+ * Hook for managing SearchField state with optional additional callbacks.
+ * Handles the common pattern of controlled SearchField with value/onValueChange/onClear.
+ *
+ * @example
+ * ```tsx
+ * const searchProps = useSearchField({
+ *   initialValue: "",
+ *   onValueChange: (value) => triggerSearch(value),
+ *   onClear: () => resetResults()
+ * })
+ *
+ * <SearchField {...searchProps} placeholder="Search..." />
+ * ```
+ *
+ * @param {string} [initialValue=""] - Initial search value
+ * @param {(value: string) => void} [onValueChange] - Optional callback called after value changes
+ * @param {() => void} [onClear] - Optional callback called after clearing (in addition to clearing the value)
+ */
+export function useSearchField({
+  initialValue = "",
+  onValueChange: onValueChangeCallback,
+  onClear: onClearCallback
+}: UseSearchFieldOptions = {}): UseSearchFieldReturn {
+  const [value, setValue] = useState(initialValue)
+
+  const handleValueChange: SearchFieldProps["onValueChange"] = (newValue) => {
+    setValue(newValue)
+    onValueChangeCallback?.(newValue)
+  }
+
+  const handleClear = () => {
+    setValue("")
+    onClearCallback?.()
+  }
+
+  return {
+    value,
+    onValueChange: handleValueChange,
+    onClear: handleClear
+  }
+}

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

@@ -0,0 +1,4 @@
+export { SearchField } from "./SearchField"
+export type { SearchFieldProps } from "./SearchField"
+export { SearchFieldInput } from "./SearchFieldInput"
+export { useSearchField } from "./hooks"

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

@@ -37,6 +37,16 @@ const sevenOptions = [
   { value: "sun", label: "Sun" }
 ]
 
+const scrollingOptions = [
+  { value: "all", label: "All recipes" },
+  { value: "chicken", label: "Chicken" },
+  { value: "beef", label: "Beef" },
+  { value: "lamb", label: "Lamb" },
+  { value: "turkey", label: "Turkey" },
+  { value: "duck", label: "Duck" },
+  { value: "fish", label: "White fish" }
+]
+
 export const FixedWidth = () => (
   <View style={styles.column}>
     <Typography size="sm" weight="semiBold" color="tertiary">
@@ -54,14 +64,27 @@ export const FixedWidth = () => (
 
 export const IntrinsicWidth = () => (
   <View style={styles.column}>
-    <Typography size="sm" weight="semiBold" color="tertiary">
-      Intrinsic layout (scrollable)
-    </Typography>
-    <SegmentedControl
-      layout="intrinsic"
-      options={sevenOptions}
-      defaultValue="mon"
-    />
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Intrinsic layout (short labels)
+      </Typography>
+      <SegmentedControl
+        layout="intrinsic"
+        options={sevenOptions}
+        defaultValue="mon"
+      />
+    </View>
+
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Intrinsic layout (overflows — tap chevrons to scroll)
+      </Typography>
+      <SegmentedControl
+        layout="intrinsic"
+        options={scrollingOptions}
+        defaultValue="all"
+      />
+    </View>
   </View>
 )
 

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

@@ -0,0 +1,141 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { SegmentedControl } from "./SegmentedControl"
+
+const defaultOptions = [
+  { value: "left", label: "Left" },
+  { value: "center", label: "Center" },
+  { value: "right", label: "Right" }
+]
+
+describe("SegmentedControl", () => {
+  describe("when component is rendering", () => {
+    it("renders all options", () => {
+      renderWithTheme(<SegmentedControl options={defaultOptions} />)
+      expect(screen.getByText("Left")).toBeInTheDocument()
+      expect(screen.getByText("Center")).toBeInTheDocument()
+      expect(screen.getByText("Right")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using options API", () => {
+    it("selects first option by default", () => {
+      renderWithTheme(<SegmentedControl options={defaultOptions} />)
+      const buttons = screen.getAllByRole("button")
+      expect(buttons[0]).toHaveAttribute("aria-selected", "true")
+    })
+
+    it("selects the defaultValue option", () => {
+      renderWithTheme(
+        <SegmentedControl options={defaultOptions} defaultValue="center" />
+      )
+      const buttons = screen.getAllByRole("button")
+      expect(buttons[1]).toHaveAttribute("aria-selected", "true")
+    })
+  })
+
+  describe("when component is interactive", () => {
+    it("calls onValueChange when option is clicked", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+      renderWithTheme(
+        <SegmentedControl
+          options={defaultOptions}
+          onValueChange={onValueChange}
+        />
+      )
+
+      await user.click(screen.getByText("Right"))
+      expect(onValueChange).toHaveBeenCalledWith("right")
+    })
+
+    it("selects clicked option in uncontrolled mode", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<SegmentedControl options={defaultOptions} />)
+
+      await user.click(screen.getByText("Right"))
+      const buttons = screen.getAllByRole("button")
+      expect(buttons[2]).toHaveAttribute("aria-selected", "true")
+    })
+  })
+
+  describe("when component is controlled", () => {
+    it("reflects controlled value", () => {
+      renderWithTheme(
+        <SegmentedControl options={defaultOptions} value="center" />
+      )
+      const buttons = screen.getAllByRole("button")
+      expect(buttons[1]).toHaveAttribute("aria-selected", "true")
+    })
+  })
+
+  describe("when component is disabled", () => {
+    it("disables all options", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+      renderWithTheme(
+        <SegmentedControl
+          options={defaultOptions}
+          disabled
+          onValueChange={onValueChange}
+        />
+      )
+
+      await user.click(screen.getByText("Right"))
+      expect(onValueChange).not.toHaveBeenCalled()
+    })
+
+    it("disables individual options", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+      renderWithTheme(
+        <SegmentedControl
+          options={[
+            { value: "a", label: "A" },
+            { value: "b", label: "B", disabled: true },
+            { value: "c", label: "C" }
+          ]}
+          onValueChange={onValueChange}
+        />
+      )
+
+      await user.click(screen.getByText("B"))
+      expect(onValueChange).not.toHaveBeenCalled()
+
+      await user.click(screen.getByText("C"))
+      expect(onValueChange).toHaveBeenCalledWith("c")
+    })
+  })
+
+  describe("when rendering layouts", () => {
+    it("renders fixed layout", () => {
+      renderWithTheme(
+        <SegmentedControl options={defaultOptions} layout="fixed" />
+      )
+      expect(screen.getByText("Left")).toBeInTheDocument()
+    })
+
+    it("renders intrinsic layout", () => {
+      renderWithTheme(
+        <SegmentedControl options={defaultOptions} layout="intrinsic" />
+      )
+      expect(screen.getByText("Left")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders children items", () => {
+      renderWithTheme(
+        <SegmentedControl>
+          <SegmentedControl.Item value="a">Alpha</SegmentedControl.Item>
+          <SegmentedControl.Item value="b">Beta</SegmentedControl.Item>
+        </SegmentedControl>
+      )
+      expect(screen.getByText("Alpha")).toBeInTheDocument()
+      expect(screen.getByText("Beta")).toBeInTheDocument()
+    })
+  })
+})