@butternutbox/pawprint-native 0.22.0 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@butternutbox/pawprint-tokens": "^0.4.0",
+    "@butternutbox/pawprint-tokens": "^0.5.0",
     "@emotion/native": "^11.11.0",
     "@emotion/react": "^11.14.0",
     "@rn-primitives/avatar": "^1.4.0",

package/src/components/atoms/Button/Button.stories.tsx

@@ -11,6 +11,22 @@ import {
   KeyboardDoubleArrowDown
 } from "@butternutbox/pawprint-icons/core"
 
+const iconElements: Record<string, React.ReactNode> = {
+  None: undefined,
+  KeyboardDoubleArrowDown: (
+    <Icon icon={KeyboardDoubleArrowDown} colour="primary" />
+  ),
+  IosShare: <Icon icon={IosShare} colour="primary" />,
+  Whatsapp: <Icon icon={Whatsapp} colour="primary" />,
+  Check: <Icon icon={Check} colour="primary" />
+}
+
+const iconArgType = {
+  control: "select" as const,
+  options: Object.keys(iconElements),
+  mapping: iconElements
+}
+
 export default {
   title: "Atoms/Button",
   component: Button,
@@ -45,7 +61,9 @@ export default {
     children: {
       control: { type: "text" },
       description: "Button label text"
-    }
+    },
+    startIcon: iconArgType,
+    endIcon: iconArgType
   }
 }
 
@@ -57,7 +75,9 @@ Playground.args = {
   colour: "primary",
   loading: false,
   fullWidth: false,
-  disabled: false
+  disabled: false,
+  startIcon: undefined,
+  endIcon: undefined
 }
 
 export const AllVariants = () => (

package/src/components/atoms/Button/Button.tsx

@@ -39,7 +39,7 @@ const IconWrapper = styled(View)({
 })
 
 const StyledButton = styled(Pressable)<{
-  buttonHeight: number
+  buttonMinHeight: number
   buttonMinWidth: number
   buttonPaddingHorizontal: number
   buttonPaddingVertical: number
@@ -52,7 +52,7 @@ const StyledButton = styled(Pressable)<{
   buttonFullWidth: boolean
 }>(
   ({
-    buttonHeight,
+    buttonMinHeight,
     buttonMinWidth,
     buttonPaddingHorizontal,
     buttonPaddingVertical,
@@ -68,7 +68,7 @@ const StyledButton = styled(Pressable)<{
     alignItems: "center",
     justifyContent: "center",
     position: "relative",
-    height: buttonHeight,
+    minHeight: buttonMinHeight,
     minWidth: buttonMinWidth,
     paddingHorizontal: buttonPaddingHorizontal,
     paddingVertical: buttonPaddingVertical,
@@ -85,9 +85,10 @@ const StyledButton = styled(Pressable)<{
 
 const StyledTextWrapper = styled(View)<{
   textOpacity: number
-}>(({ textOpacity }) => ({
+  fullWidth?: boolean
+}>(({ textOpacity, fullWidth }) => ({
   opacity: textOpacity,
-  flexShrink: 0
+  ...(fullWidth ? { flex: 1 } : {})
 }))
 
 const StyledSpinnerWrapper = styled(View)({
@@ -207,7 +208,7 @@ const Button = React.forwardRef<View, ButtonProps>(
         accessibilityState={{ disabled: isDisabled, busy: loading }}
         onPressIn={() => setPressed(true)}
         onPressOut={() => setPressed(false)}
-        buttonHeight={parseTokenValue(sizeTokens.height)}
+        buttonMinHeight={parseTokenValue(sizeTokens.minHeight)}
         buttonMinWidth={parseTokenValue(sizeTokens.minWidth)}
         buttonPaddingHorizontal={parseTokenValue(
           spacingTokens.horizontalPadding
@@ -228,7 +229,7 @@ const Button = React.forwardRef<View, ButtonProps>(
         {...rest}
       >
         {startIcon && <IconWrapper>{startIcon}</IconWrapper>}
-        <StyledTextWrapper textOpacity={loading ? 0 : 1}>
+        <StyledTextWrapper textOpacity={loading ? 0 : 1} fullWidth={fullWidth}>
           <Typography
             token={{
               fontFamily: typography.fontFamily,
@@ -238,6 +239,7 @@ const Button = React.forwardRef<View, ButtonProps>(
               letterSpacing: typography.letterSpacing
             }}
             color={variantStyles.textColor as never}
+            align="center"
           >
             {children}
           </Typography>

package/src/components/atoms/IconButton/IconButton.tsx

@@ -112,7 +112,7 @@ const IconButton = React.forwardRef<View, IconButtonProps>(
     const isDisabled = disabled || loading
     const buttons = theme.tokens.components.buttons
     const sizeTokens = buttons.size[size]
-    const dimension = parseTokenValue(sizeTokens.height)
+    const dimension = parseTokenValue(sizeTokens.minHeight)
     const iconSizing = theme.tokens.components.icons.sizing.icons.core
     const iconDimension = parseTokenValue(iconSizing[sizeToIconSizeToken[size]])
 

package/src/components/atoms/Tag/Tag.stories.tsx

@@ -2,6 +2,7 @@ import React from "react"
 import { View, StyleSheet, Text } from "react-native"
 import { Tag } from "./Tag"
 import type { TagProps } from "./Tag"
+import { CheckCircle } from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Atoms/Tag",
@@ -28,6 +29,14 @@ export default {
     children: {
       control: { type: "text" },
       description: "Tag label text"
+    },
+    icon: {
+      control: "boolean",
+      mapping: {
+        true: CheckCircle,
+        false: undefined
+      },
+      description: "Show/hide leading icon"
     }
   }
 }
@@ -36,7 +45,8 @@ export const Playground = (args: TagProps) => <Tag {...args} />
 Playground.args = {
   children: "Tag",
   variant: "primary",
-  size: "medium"
+  size: "medium",
+  icon: undefined
 }
 
 const tagVariants = [

package/src/components/atoms/Tag/Tag.tsx

@@ -32,6 +32,7 @@ const StyledTag = styled(View)<{
   tagSize: TagSize
 }>(({ theme, tagVariant, tagSize }) => {
   const { sizing, spacing, colour, badge } = theme.tokens.components.tags
+  const { spacing: semanticSpacing } = theme.tokens.semantics.dimensions
 
   const backgroundColorMap = {
     primary: colour.primary.background,
@@ -43,13 +44,22 @@ const StyledTag = styled(View)<{
     error: colour.primary.error
   } as const
 
+  const verticalPaddingMap = {
+    small: semanticSpacing["2xs"],
+    medium: semanticSpacing["3xs"],
+    large: semanticSpacing["2xs"]
+  } as const
+
   return {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    height: parseTokenValue(sizing[tagSize].height),
+    minHeight: parseTokenValue(sizing[tagSize].minHeight),
     minWidth: parseTokenValue(sizing[tagSize].minWidth),
-    paddingHorizontal: parseTokenValue(spacing.horizontalPadding),
+    paddingLeft: parseTokenValue(spacing.horizontalPadding) * 2,
+    paddingRight: parseTokenValue(spacing.horizontalPadding) * 2,
+    paddingTop: parseTokenValue(verticalPaddingMap[tagSize]),
+    paddingBottom: parseTokenValue(verticalPaddingMap[tagSize]),
     gap: parseTokenValue(spacing[tagSize].gap),
     borderRadius: parseTokenValue(badge.borderRadius.default),
     backgroundColor: backgroundColorMap[tagVariant]

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

@@ -98,9 +98,10 @@ export const Tile = () => (
         Horizontal
       </Typography>
       <CheckboxGroup orientation="horizontal">
+        <Checkbox variant="tile" label="Chicken" />
         <Checkbox
           variant="tile"
-          label="Some really really really really really really long text"
+          label="A really long piece of text that needs multiple lines"
         />
         <Checkbox variant="tile" label="Beef" />
         <Checkbox variant="tile" label="Lamb" />

package/src/components/molecules/Checkbox/Checkbox.tsx

@@ -69,13 +69,12 @@ const StyledRootPressable = styled(Pressable)<{
       ? { paddingHorizontal: rootPaddingHorizontal }
       : {}),
     // `fitContent` tiles hug their content (for wrapping rows); otherwise the
-    // tile fills its container width. For standalone checkboxes, always fill width
-    // so labels wrap properly.
+    // tile fills its container width.
     ...(rootMaxWidth !== undefined
       ? rootFitContent
         ? { maxWidth: rootMaxWidth, alignSelf: "flex-start" }
         : { maxWidth: rootMaxWidth, width: "100%" }
-      : { width: "100%" }),
+      : {}),
     ...(rootBgColor ? { backgroundColor: rootBgColor } : {}),
     ...(rootBorderWidth !== undefined
       ? { borderWidth: rootBorderWidth, borderColor: rootBorderColor }
@@ -114,11 +113,14 @@ const StyledControl = styled(View)<{
 
 const StyledContent = styled(View)<{
   contentGap: number
-}>(({ contentGap }) => ({
+  contentFlex: number
+  contentFitContent?: boolean
+}>(({ contentGap, contentFlex, contentFitContent }) => ({
   flexDirection: "column",
   gap: contentGap,
-  flex: 1,
-  minWidth: 0
+  flex: contentFlex,
+  minWidth: 0,
+  ...(contentFitContent ? { maxWidth: "85%" } : {})
 }))
 
 const StyledIllustration = styled(View)<{
@@ -261,6 +263,8 @@ export const Checkbox = React.forwardRef<View, CheckboxProps>(
 
         <StyledContent
           contentGap={parseTokenValue(checkbox.spacing.content.gap)}
+          contentFlex={isTile && fitContent ? 0 : 1}
+          contentFitContent={isTile && fitContent}
         >
           {label && (
             <Typography

package/src/components/molecules/Drawer/DrawerBody.tsx

@@ -79,7 +79,7 @@ export const DrawerBody = React.forwardRef<ScrollView, DrawerBodyProps>(
     const paddingRight =
       headerContext === null
         ? parseTokenValue(spacing.close.right.md) +
-          parseTokenValue(buttons.size.sm.height)
+          parseTokenValue(buttons.size.sm.minHeight)
         : horizontalPadding
 
     // With no footer, the body is the last element in the panel, so it must

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

@@ -409,6 +409,59 @@ export const SearchableDefaultPlaceholder = () => (
   </StoryWrapper>
 )
 
+const ALL_BREEDS = [
+  { value: "labrador", label: "Labrador Retriever" },
+  { value: "german-shepherd", label: "German Shepherd" },
+  { value: "golden-retriever", label: "Golden Retriever" },
+  { value: "bulldog", label: "Bulldog" },
+  { value: "poodle", label: "Poodle" },
+  { value: "beagle", label: "Beagle" },
+  { value: "rottweiler", label: "Rottweiler" },
+  { value: "dachshund", label: "Dachshund" },
+  { value: "yorkshire-terrier", label: "Yorkshire Terrier" },
+  { value: "boxer", label: "Boxer" }
+]
+
+export const SearchableAsyncQuery = () => {
+  const searchBreeds = (query: string) =>
+    new Promise<typeof ALL_BREEDS>((resolve, reject) => {
+      setTimeout(() => {
+        // Type "fail" to see the error state.
+        if (query.toLowerCase().includes("fail")) {
+          reject(new Error("Simulated request failure"))
+          return
+        }
+        resolve(
+          ALL_BREEDS.filter((breed) =>
+            breed.label.toLowerCase().includes(query.toLowerCase())
+          )
+        )
+      }, 600)
+    })
+
+  return (
+    <StoryWrapper>
+      <View style={styles.column}>
+        <View style={styles.section}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            Async Query (spinner, no-results, error)
+          </Typography>
+          <SelectField
+            label="Breed"
+            placeholder="Select a breed"
+            description="Type to search — 'fail' triggers the error state"
+            searchable
+            searchPlaceholder="Search breeds..."
+            noResultsText="No breeds found"
+            errorText="Couldn't load breeds"
+            onSearchQuery={searchBreeds}
+          />
+        </View>
+      </View>
+    </StoryWrapper>
+  )
+}
+
 const styles = StyleSheet.create({
   container: {
     width: 320

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

@@ -1,6 +1,6 @@
 import React from "react"
 import { View } from "react-native"
-import { screen, fireEvent, act } from "@testing-library/react"
+import { screen, fireEvent, act, waitFor } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import { renderWithTheme } from "../../../test-utils"
 import { SelectField } from "./SelectField"
@@ -377,6 +377,262 @@ describe("SelectField", () => {
     })
   })
 
+  describe("when searchable with an async query", () => {
+    type Result = { value: string; label: string }
+
+    const openAndType = (query: string) => {
+      fireEvent.click(screen.getAllByRole("button")[0])
+      const input = screen.getByPlaceholderText("Search...")
+      fireEvent.change(input, { target: { value: query } })
+    }
+
+    it("shows children as the default list before the user types", async () => {
+      const onSearchQuery = vi.fn(async (): Promise<Result[]> => [])
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          onSearchQuery={onSearchQuery}
+        >
+          <SelectField.Item value="popular">Most popular</SelectField.Item>
+        </SelectField>
+      )
+
+      fireEvent.click(screen.getAllByRole("button")[0])
+
+      expect(await screen.findByText("Most popular")).toBeInTheDocument()
+      expect(onSearchQuery).not.toHaveBeenCalled()
+    })
+
+    it("does not open an empty dropdown in query mode before the user types", () => {
+      const onSearchQuery = vi.fn(async (): Promise<Result[]> => [])
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      vi.useFakeTimers()
+      fireEvent.click(screen.getAllByRole("button")[0])
+      act(() => vi.advanceTimersByTime(500))
+      vi.useRealTimers()
+
+      // Trigger is open (search input shown) but no content container is
+      // rendered: an empty dropdown crashes the real Select.Content on web.
+      expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument()
+      expect(screen.queryByTestId("select-overlay")).not.toBeInTheDocument()
+      expect(onSearchQuery).not.toHaveBeenCalled()
+    })
+
+    it("calls onSearchQuery with the typed query and renders the results", async () => {
+      const onSearchQuery = vi.fn(
+        async (): Promise<Result[]> => [
+          { value: "labrador", label: "Labrador Retriever" }
+        ]
+      )
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      openAndType("lab")
+
+      expect(await screen.findByText("Labrador Retriever")).toBeInTheDocument()
+      expect(onSearchQuery).toHaveBeenCalledWith("lab")
+    })
+
+    it("shows a loading spinner while the query is in flight", async () => {
+      let resolveQuery: (results: Result[]) => void = () => {}
+      const onSearchQuery = vi.fn(
+        () =>
+          new Promise<Result[]>((resolve) => {
+            resolveQuery = resolve
+          })
+      )
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      openAndType("lab")
+
+      expect(await screen.findByRole("progressbar")).toBeInTheDocument()
+
+      await waitFor(() => expect(onSearchQuery).toHaveBeenCalled())
+      act(() => resolveQuery([{ value: "labrador", label: "Labrador" }]))
+
+      expect(await screen.findByText("Labrador")).toBeInTheDocument()
+      expect(screen.queryByRole("progressbar")).not.toBeInTheDocument()
+    })
+
+    it("shows errorText when the query rejects", async () => {
+      const onSearchQuery = vi.fn(async (): Promise<Result[]> => {
+        throw new Error("boom")
+      })
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          errorText="Couldn't load breeds"
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      openAndType("lab")
+
+      expect(
+        await screen.findByText("Couldn't load breeds")
+      ).toBeInTheDocument()
+    })
+
+    it("shows noResultsText when the query resolves empty", async () => {
+      const onSearchQuery = vi.fn(async (): Promise<Result[]> => [])
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          noResultsText="No breeds found"
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      openAndType("xyz")
+
+      expect(await screen.findByText("No breeds found")).toBeInTheDocument()
+    })
+
+    it("renders results instead of locally filtering children in query mode", async () => {
+      const onSearchQuery = vi.fn(
+        async (): Promise<Result[]> => [
+          { value: "labrador", label: "Labrador Retriever" }
+        ]
+      )
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          onSearchQuery={onSearchQuery}
+        >
+          <SelectField.Item value="uk">United Kingdom</SelectField.Item>
+        </SelectField>
+      )
+
+      openAndType("lab")
+
+      expect(await screen.findByText("Labrador Retriever")).toBeInTheDocument()
+      expect(screen.queryByText("United Kingdom")).not.toBeInTheDocument()
+    })
+
+    it("debounces the query, firing once after the last keystroke", () => {
+      const onSearchQuery = vi.fn(
+        async (): Promise<Result[]> => [
+          { value: "labrador", label: "Labrador Retriever" }
+        ]
+      )
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={300}
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      vi.useFakeTimers()
+      fireEvent.click(screen.getAllByRole("button")[0])
+      const input = screen.getByPlaceholderText("Search...")
+
+      fireEvent.change(input, { target: { value: "l" } })
+      act(() => vi.advanceTimersByTime(200))
+      fireEvent.change(input, { target: { value: "la" } })
+      act(() => vi.advanceTimersByTime(200))
+      fireEvent.change(input, { target: { value: "lab" } })
+
+      // Each keystroke restarted the timer, so nothing has fired yet even
+      // though 400ms of typing has elapsed.
+      expect(onSearchQuery).not.toHaveBeenCalled()
+
+      act(() => vi.advanceTimersByTime(300))
+      vi.useRealTimers()
+
+      expect(onSearchQuery).toHaveBeenCalledTimes(1)
+      expect(onSearchQuery).toHaveBeenCalledWith("lab")
+    })
+
+    it("ignores a stale response superseded by a later keystroke", async () => {
+      const resolvers: Array<(results: Result[]) => void> = []
+      const onSearchQuery = vi.fn(
+        () =>
+          new Promise<Result[]>((resolve) => {
+            resolvers.push(resolve)
+          })
+      )
+
+      renderWithTheme(
+        <SelectField
+          label="Breed"
+          placeholder="Select a breed"
+          searchable
+          debounceMs={0}
+          onSearchQuery={onSearchQuery}
+        />
+      )
+
+      fireEvent.click(screen.getAllByRole("button")[0])
+      const input = screen.getByPlaceholderText("Search...")
+
+      fireEvent.change(input, { target: { value: "lab" } })
+      await waitFor(() => expect(resolvers).toHaveLength(1))
+
+      fireEvent.change(input, { target: { value: "labr" } })
+      await waitFor(() => expect(resolvers).toHaveLength(2))
+
+      // The newer query lands first, then the superseded one resolves late.
+      await act(async () => {
+        resolvers[1]([{ value: "labrador", label: "Labrador Retriever" }])
+      })
+      expect(screen.getByText("Labrador Retriever")).toBeInTheDocument()
+
+      await act(async () => {
+        resolvers[0]([{ value: "stale", label: "Stale Result" }])
+      })
+
+      expect(screen.queryByText("Stale Result")).not.toBeInTheDocument()
+      expect(screen.getByText("Labrador Retriever")).toBeInTheDocument()
+    })
+  })
+
   describe("with items", () => {
     const openDropdown = () => fireEvent.click(screen.getAllByRole("button")[0])