@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,104 @@
+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 { Radio } from "./Radio"
+
+describe("Radio", () => {
+  describe("when component is rendering", () => {
+    it("renders label text", () => {
+      renderWithTheme(<Radio value="chicken" label="Chicken" />)
+      expect(screen.getByText("Chicken")).toBeInTheDocument()
+    })
+
+    it("renders label and subText", () => {
+      renderWithTheme(
+        <Radio value="chicken" label="Chicken" subText="Tender & tasty" />
+      )
+      expect(screen.getByText("Chicken")).toBeInTheDocument()
+      expect(screen.getByText("Tender & tasty")).toBeInTheDocument()
+    })
+
+    it("renders without label", () => {
+      const { container } = renderWithTheme(<Radio value="plain" />)
+      expect(container.firstChild).toBeTruthy()
+    })
+  })
+
+  describe("when rendering variants", () => {
+    it("renders standalone variant", () => {
+      renderWithTheme(
+        <Radio value="val" variant="standalone" label="Standalone" />
+      )
+      expect(screen.getByText("Standalone")).toBeInTheDocument()
+    })
+
+    it("renders tile variant", () => {
+      renderWithTheme(<Radio value="val" variant="tile" label="Tile" />)
+      expect(screen.getByText("Tile")).toBeInTheDocument()
+    })
+  })
+
+  describe("when component is interactive", () => {
+    it("calls onSelect when pressed", async () => {
+      const user = userEvent.setup()
+      const onSelect = vi.fn()
+      renderWithTheme(
+        <Radio value="chicken" label="Chicken" onSelect={onSelect} />
+      )
+
+      await user.click(screen.getByRole("radio"))
+      expect(onSelect).toHaveBeenCalledWith("chicken")
+    })
+
+    it("does not call onSelect when disabled", async () => {
+      const user = userEvent.setup()
+      const onSelect = vi.fn()
+      renderWithTheme(
+        <Radio value="chicken" label="Chicken" onSelect={onSelect} disabled />
+      )
+
+      await user.click(screen.getByRole("radio"))
+      expect(onSelect).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("when selected", () => {
+    it("shows indicator when selected", () => {
+      renderWithTheme(<Radio value="chicken" label="Chicken" selected />)
+      expect(screen.getByRole("radio")).toHaveAttribute("aria-selected", "true")
+    })
+
+    it("does not show indicator when not selected", () => {
+      renderWithTheme(
+        <Radio value="chicken" label="Chicken" selected={false} />
+      )
+      // Not selected by default
+      expect(screen.getByRole("radio")).not.toHaveAttribute(
+        "aria-selected",
+        "true"
+      )
+    })
+  })
+
+  describe("accessibility", () => {
+    it("has radio role", () => {
+      renderWithTheme(<Radio value="val" label="Option" />)
+      expect(screen.getByRole("radio")).toBeInTheDocument()
+    })
+
+    it("sets disabled accessibility state", () => {
+      renderWithTheme(<Radio value="val" label="Option" disabled />)
+      expect(screen.getByRole("radio")).toBeDisabled()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Radio ref={ref} value="val" label="Ref test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/molecules/Radio/Radio.tsx

@@ -95,8 +95,7 @@ const StyledTextContent = styled(View)<{
   textContentGap: number
 }>(({ textContentGap }) => ({
   flexDirection: "column",
-  gap: textContentGap,
-  marginTop: 2
+  gap: textContentGap
 }))
 
 const StyledAssetWrapper = styled(View)({

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

@@ -0,0 +1,242 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { SearchField } from "./SearchField"
+import type { SearchFieldProps } from "./SearchField"
+import type { InputState } from "../../atoms/Input/InputField"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/SearchField",
+  component: SearchField,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text"
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Help text below input"
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message"
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      description: "Visual state of the input"
+    },
+    optionalText: {
+      control: { type: "text" },
+      description: "Optional text to display next to label"
+    },
+    editable: {
+      control: { type: "boolean" },
+      description: "Controls whether the input is editable"
+    }
+  }
+}
+
+export const Default = (args: SearchFieldProps) => (
+  <View style={styles.container}>
+    <SearchField {...args} />
+  </View>
+)
+Default.args = {
+  label: "Search",
+  placeholder: "Search...",
+  description: "Search for items"
+}
+
+export const States = () => {
+  const [defaultValue, setDefaultValue] = useState("")
+  const [errorValue, setErrorValue] = useState("search query")
+  const [successValue, setSuccessValue] = useState("search query")
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default State (Uncontrolled)
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          description="Uncontrolled - clear button shows when focused with text"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Default State (Controlled)
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          value={defaultValue}
+          description="Controlled - clear button shows when focused with text"
+          onValueChange={setDefaultValue}
+          onClear={() => setDefaultValue("")}
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Error State with Text
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          value={errorValue}
+          state="error"
+          error="No results found"
+          description="Error state with text (clear button visible and functional)"
+          onValueChange={setErrorValue}
+          onClear={() => setErrorValue("")}
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Error State Empty
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          state="error"
+          error="Search query required"
+          description="Error state without text"
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Success State
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          value={successValue}
+          state="success"
+          description="Success state (clear button visible when focused)"
+          onValueChange={setSuccessValue}
+          onClear={() => setSuccessValue("")}
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Disabled
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          description="Disabled search field"
+          editable={false}
+        />
+      </View>
+    </View>
+  )
+}
+
+export const WithOptionalText = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        With Optional Text
+      </Typography>
+      <SearchField
+        label="Search"
+        optionalText="(optional)"
+        placeholder="Search..."
+        description="Optional search field"
+      />
+    </View>
+  </View>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState("")
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Controlled: {value || "(empty)"}
+        </Typography>
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          value={value}
+          onValueChange={setValue}
+          onClear={() => setValue("")}
+          description={`Current value: "${value || "empty"}"`}
+        />
+      </View>
+    </View>
+  )
+}
+
+export const CustomStateValidationWithSuccess = () => {
+  const [search, setSearch] = useState("")
+  const [searchState, setSearchState] = useState<InputState>("default")
+
+  const validateSearch = (value: string) => {
+    if (!value) {
+      setSearchState("default")
+      return
+    }
+
+    const hasMinLength = value.length >= 2
+    const hasMaxLength = value.length <= 50
+    const hasValidChars = /^[a-zA-Z0-9\s-]+$/.test(value)
+
+    const allRequirementsMet = hasMinLength && hasMaxLength && hasValidChars
+
+    setSearchState(allRequirementsMet ? "success" : "error")
+  }
+
+  const handleChange = (newValue: string) => {
+    setSearch(newValue)
+    validateSearch(newValue)
+  }
+
+  const handleClear = () => {
+    setSearch("")
+    setSearchState("default")
+  }
+
+  return (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Custom State Validation with Success
+        </Typography>
+        <SearchField
+          label="Product Search"
+          placeholder="Search products..."
+          value={search}
+          onValueChange={handleChange}
+          onClear={handleClear}
+          state={searchState}
+          description="2-50 chars, letters, numbers, spaces, and hyphens only"
+          error="Invalid search query"
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 320
+  },
+  column: {
+    flexDirection: "column",
+    gap: 24,
+    width: 320
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})

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

@@ -0,0 +1,318 @@
+import React from "react"
+import { TextInput } from "react-native"
+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 { SearchField } from "./SearchField"
+
+describe("SearchField", () => {
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(<SearchField label="Search" placeholder="Search..." />)
+      expect(screen.getByText("Search")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          description="Search for items in the list"
+        />
+      )
+      expect(
+        screen.getByText("Search for items in the list")
+      ).toBeInTheDocument()
+    })
+
+    it("renders error message when error prop and state='error' are provided", () => {
+      renderWithTheme(
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          state="error"
+          error="No results found"
+        />
+      )
+      expect(screen.getByText("No results found")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          error="No results found"
+        />
+      )
+      expect(screen.queryByText("No results found")).not.toBeInTheDocument()
+    })
+
+    it("shows (optional) when optionalText is provided", () => {
+      renderWithTheme(
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          optionalText="(optional)"
+        />
+      )
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders input with placeholder", () => {
+      renderWithTheme(<SearchField label="Search" placeholder="Search..." />)
+      expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+    })
+
+    it("renders search icon", () => {
+      renderWithTheme(<SearchField placeholder="Search..." />)
+      expect(screen.getByLabelText("Search")).toBeInTheDocument()
+    })
+
+    it("accepts user input", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<SearchField label="Search" placeholder="Search..." />)
+
+      const input = screen.getByPlaceholderText("Search...")
+      await user.type(input, "test query")
+      expect(input).toHaveValue("test query")
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("updates value when parent updates", async () => {
+      const user = userEvent.setup()
+
+      function ControlledSearchField() {
+        const [value, setValue] = React.useState("")
+        return (
+          <SearchField
+            label="Search"
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+            onClear={() => setValue("")}
+            placeholder="Search..."
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledSearchField />)
+
+      const input = screen.getByPlaceholderText("Search...")
+      await user.type(input, "test query")
+      expect(input).toHaveValue("test query")
+    })
+
+    it("calls onValueChange when value changes", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <SearchField
+          label="Search"
+          value=""
+          onValueChange={onValueChange}
+          onClear={() => {}}
+          placeholder="Search..."
+        />
+      )
+
+      const input = screen.getByPlaceholderText("Search...")
+      await user.type(input, "a")
+      expect(onValueChange).toHaveBeenCalledWith("a")
+    })
+
+    it("calls onClear when clear button is pressed", async () => {
+      const user = userEvent.setup()
+      const onClear = vi.fn()
+
+      renderWithTheme(
+        <SearchField
+          placeholder="Search..."
+          value="test"
+          state="error"
+          onValueChange={() => {}}
+          onClear={onClear}
+        />
+      )
+
+      const clearButton = screen.getByLabelText("Clear search")
+      await user.click(clearButton)
+
+      expect(onClear).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("when disabled", () => {
+    it("disables the input", () => {
+      renderWithTheme(
+        <SearchField label="Search" placeholder="Search..." editable={false} />
+      )
+      expect(screen.getByPlaceholderText("Search...")).toBeDisabled()
+    })
+
+    it("does not accept user input when disabled", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(
+        <SearchField label="Search" placeholder="Search..." editable={false} />
+      )
+
+      const input = screen.getByPlaceholderText("Search...")
+      await user.type(input, "test")
+      expect(input).toHaveValue("")
+    })
+  })
+
+  describe("clear button behavior", () => {
+    it("does not show clear button when field is empty", () => {
+      renderWithTheme(<SearchField placeholder="Search..." />)
+      expect(screen.queryByLabelText("Clear search")).not.toBeInTheDocument()
+    })
+
+    it("shows clear button when field has text and is focused", () => {
+      renderWithTheme(
+        <SearchField
+          placeholder="Search..."
+          value="test"
+          state="error"
+          onValueChange={() => {}}
+          onClear={() => {}}
+        />
+      )
+
+      expect(screen.getByLabelText("Clear search")).toBeInTheDocument()
+    })
+
+    it("shows clear button when field has text and is in error state", () => {
+      renderWithTheme(
+        <SearchField
+          placeholder="Search..."
+          value="test"
+          state="error"
+          onValueChange={() => {}}
+          onClear={() => {}}
+        />
+      )
+      expect(screen.getByLabelText("Clear search")).toBeInTheDocument()
+    })
+
+    it("clears the input when clear button is pressed", async () => {
+      const user = userEvent.setup()
+      const onClear = vi.fn()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <SearchField
+          placeholder="Search..."
+          value="test"
+          state="error"
+          onValueChange={onValueChange}
+          onClear={onClear}
+        />
+      )
+
+      const clearButton = screen.getByLabelText("Clear search")
+      await user.click(clearButton)
+
+      expect(onClear).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders compound components", () => {
+      renderWithTheme(
+        <SearchField.Root>
+          <SearchField.Label>Search Products</SearchField.Label>
+          <SearchField.Field placeholder="Search..." onClear={() => {}} />
+          <SearchField.Description>Find products</SearchField.Description>
+        </SearchField.Root>
+      )
+
+      expect(screen.getByText("Search Products")).toBeInTheDocument()
+      expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+      expect(screen.getByText("Find products")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <SearchField.Root>
+          <SearchField.Label state="error">Search</SearchField.Label>
+          <SearchField.Field
+            placeholder="Search..."
+            state="error"
+            onClear={() => {}}
+          />
+          <SearchField.Error>Invalid search</SearchField.Error>
+        </SearchField.Root>
+      )
+      expect(screen.getByText("Invalid search")).toBeInTheDocument()
+    })
+  })
+
+  describe("validation states", () => {
+    it.each(["default", "error", "success"] as const)(
+      "renders %s state without errors",
+      (state) => {
+        renderWithTheme(
+          <SearchField label="Search" state={state} placeholder="Search..." />
+        )
+        expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+      }
+    )
+
+    it("shows error state with error message", () => {
+      renderWithTheme(
+        <SearchField
+          label="Search"
+          placeholder="Search..."
+          state="error"
+          error="No results found"
+        />
+      )
+      expect(screen.getByText("No results found")).toBeInTheDocument()
+    })
+  })
+
+  describe("compound component API with states", () => {
+    it("renders error state in compound mode", () => {
+      renderWithTheme(
+        <SearchField.Root>
+          <SearchField.Label state="error">Search</SearchField.Label>
+          <SearchField.Field
+            placeholder="Search..."
+            state="error"
+            onClear={() => {}}
+          />
+          <SearchField.Error>Invalid search</SearchField.Error>
+        </SearchField.Root>
+      )
+      expect(screen.getByText("Invalid search")).toBeInTheDocument()
+    })
+
+    it("renders success state in compound mode", () => {
+      renderWithTheme(
+        <SearchField.Root>
+          <SearchField.Label state="success">Search</SearchField.Label>
+          <SearchField.Field
+            placeholder="Search..."
+            state="success"
+            onClear={() => {}}
+          />
+          <SearchField.Description state="success">
+            Search verified
+          </SearchField.Description>
+        </SearchField.Root>
+      )
+      expect(screen.getByText("Search verified")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to input element", () => {
+      const ref = React.createRef<TextInput>()
+      renderWithTheme(<SearchField ref={ref} label="Test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})