@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/atoms/Spinner/Spinner.tsx

@@ -38,23 +38,32 @@ const Spinner = React.forwardRef<View, SpinnerProps>(
 
     const { size: sizeTokens, colour } = theme.tokens.components.spinner
     const borderWidth = parseTokenValue(
-      theme.tokens.semantics.dimensions.borderWidth.md
+      theme.tokens.semantics.dimensions.borderWidth.lg
     )
     const baseColor = colour.background.base[variant]
     const progressColor = colour.background.progress[variant]
     const dimension = parseTokenValue(sizeTokens[size])
 
     useEffect(() => {
-      const animation = Animated.loop(
+      let stopped = false
+      const animate = () => {
+        spinAnim.setValue(0)
         Animated.timing(spinAnim, {
           toValue: 1,
           duration: 600,
           easing: Easing.linear,
           useNativeDriver: true
+        }).start(({ finished }) => {
+          if (finished && !stopped) {
+            animate()
+          }
         })
-      )
-      animation.start()
-      return () => animation.stop()
+      }
+      animate()
+      return () => {
+        stopped = true
+        spinAnim.stopAnimation()
+      }
     }, [spinAnim])
 
     const spin = spinAnim.interpolate({

package/src/components/atoms/Switch/Switch.test.tsx

@@ -0,0 +1,92 @@
+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 { Switch } from "./Switch"
+
+describe("Switch", () => {
+  describe("when component is rendering", () => {
+    it("renders label", () => {
+      renderWithTheme(<Switch label="Notifications" />)
+      expect(screen.getByText("Notifications")).toBeInTheDocument()
+    })
+
+    it("renders label and subText", () => {
+      renderWithTheme(
+        <Switch label="SMS Notifications" subText="Receive SMS updates" />
+      )
+      expect(screen.getByText("SMS Notifications")).toBeInTheDocument()
+      expect(screen.getByText("Receive SMS updates")).toBeInTheDocument()
+    })
+
+    it("renders without label or subText", () => {
+      const { container } = renderWithTheme(<Switch />)
+      expect(container.firstChild).toBeTruthy()
+    })
+  })
+
+  describe("when component is uncontrolled", () => {
+    it("toggles checked state when clicked", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<Switch label="Toggle" />)
+
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl).toHaveAttribute("aria-checked", "false")
+
+      await user.click(switchEl)
+      expect(switchEl).toHaveAttribute("aria-checked", "true")
+    })
+
+    it("does not toggle when disabled", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<Switch label="Toggle" disabled />)
+
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl).toBeDisabled()
+
+      await user.click(switchEl)
+      expect(switchEl).toHaveAttribute("aria-checked", "false")
+    })
+
+    it("can be initially checked via defaultChecked", () => {
+      renderWithTheme(<Switch label="Toggle" defaultChecked />)
+
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl).toHaveAttribute("aria-checked", "true")
+    })
+  })
+
+  describe("when component is controlled", () => {
+    it("calls onCheckedChange when clicked", async () => {
+      const user = userEvent.setup()
+      const onCheckedChange = vi.fn()
+      renderWithTheme(
+        <Switch
+          label="Toggle"
+          checked={false}
+          onCheckedChange={onCheckedChange}
+        />
+      )
+
+      await user.click(screen.getByRole("switch"))
+      expect(onCheckedChange).toHaveBeenCalledWith(true)
+    })
+
+    it("reflects controlled checked state", () => {
+      renderWithTheme(
+        <Switch label="Toggle" checked={true} onCheckedChange={() => {}} />
+      )
+
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-checked", "true")
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Switch ref={ref} label="Ref test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/Switch/Switch.tsx

@@ -28,7 +28,7 @@ const StyledContainer = styled(View)<{
   opacity: switchOpacity
 }))
 
-const StyledControl = styled(SwitchPrimitive.Root)<{
+const StyledControlTrack = styled(View)<{
   switchChecked: boolean
   controlWidth: number
   controlHeight: number
@@ -52,9 +52,13 @@ const StyledControl = styled(SwitchPrimitive.Root)<{
     minWidth: controlWidth,
     minHeight: controlHeight,
     borderRadius: controlHeight,
-    borderWidth: switchChecked ? 0 : controlBorderWidth,
+    // Keep the border width constant and only toggle the colour. Animating
+    // the width between 0 and 2 was causing a momentary background bleed on
+    // Android when transitioning back to the off state.
+    borderWidth: controlBorderWidth,
     borderColor: switchChecked ? "transparent" : controlBorderColor,
     backgroundColor: switchChecked ? controlBgChecked : controlBgDefault,
+    overflow: "hidden",
     justifyContent: "center"
   })
 )
@@ -113,9 +117,13 @@ export const Switch = React.forwardRef<View, SwitchProps>(
     const controlHeight = parseTokenValue(size.control.height)
     const thumbSize = parseTokenValue(size.thumb.default)
     const borderWidthValue = parseTokenValue(borderWidth.control.default)
-    const outerInset = 5
-    const inset = outerInset - borderWidthValue
-    const translateX = controlWidth - thumbSize - outerInset * 2
+    // Thumb sits 2px inside the inner border edge in both states. With the
+    // border width constant, the absolute-position reference frame is the
+    // padding box in both states, so the on-state inset is
+    // controlWidth - 2*border - thumbSize - inset.
+    const inset = 2
+    const offTranslateX = inset
+    const onTranslateX = controlWidth - borderWidthValue * 2 - thumbSize - inset
 
     const animValue = useRef(new Animated.Value(isChecked ? 1 : 0)).current
 
@@ -129,7 +137,7 @@ export const Switch = React.forwardRef<View, SwitchProps>(
 
     const thumbTranslateX = animValue.interpolate({
       inputRange: [0, 1],
-      outputRange: [inset, inset + translateX]
+      outputRange: [offTranslateX, onTranslateX]
     })
 
     const handleCheckedChange = (checked: boolean) => {
@@ -146,19 +154,22 @@ export const Switch = React.forwardRef<View, SwitchProps>(
         switchOpacity={disabled ? parseFloat(opacity.disabled) : 1}
         {...rest}
       >
-        <StyledControl
+        <SwitchPrimitive.Root
           checked={isChecked}
           onCheckedChange={handleCheckedChange}
           disabled={disabled}
-          switchChecked={isChecked}
-          controlWidth={controlWidth}
-          controlHeight={controlHeight}
-          controlBorderWidth={borderWidthValue}
-          controlBorderColor={colour.control.border.default}
-          controlBgChecked={colour.control.background.selected}
-          controlBgDefault={colour.control.background.default}
+          asChild
         >
-          <SwitchPrimitive.Thumb asChild>
+          <StyledControlTrack
+            switchChecked={isChecked}
+            controlWidth={controlWidth}
+            controlHeight={controlHeight}
+            controlBorderWidth={borderWidthValue}
+            controlBorderColor={colour.control.border.default}
+            controlBgChecked={colour.control.background.selected}
+            controlBgDefault={colour.control.background.default}
+            pointerEvents={disabled ? "none" : "auto"}
+          >
             <StyledThumb
               thumbSize={thumbSize}
               thumbBgColor={
@@ -168,8 +179,8 @@ export const Switch = React.forwardRef<View, SwitchProps>(
               }
               style={{ transform: [{ translateX: thumbTranslateX }] }}
             />
-          </SwitchPrimitive.Thumb>
-        </StyledControl>
+          </StyledControlTrack>
+        </SwitchPrimitive.Root>
 
         {(label || subText) && (
           <StyledContent contentGap={parseTokenValue(spacing.content.gap)}>

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

@@ -0,0 +1,70 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Tag } from "./Tag"
+
+const MockIcon = ({ width, height, color }: any) => (
+  <svg data-testid="mock-icon" width={width} height={height} fill={color} />
+)
+MockIcon.category = "core" as const
+
+describe("Tag", () => {
+  describe("when component is rendering", () => {
+    it("renders children text", () => {
+      renderWithTheme(<Tag>Company news</Tag>)
+      expect(screen.getByText("Company news")).toBeInTheDocument()
+    })
+
+    it("renders with default variant and size", () => {
+      renderWithTheme(<Tag>Default</Tag>)
+      expect(screen.getByText("Default")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering all variants", () => {
+    it.each([
+      "primary",
+      "secondary",
+      "tertiary",
+      "promo",
+      "success",
+      "warning",
+      "error"
+    ] as const)("renders %s variant", (variant) => {
+      renderWithTheme(<Tag variant={variant}>{variant}</Tag>)
+      expect(screen.getByText(variant)).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering all sizes", () => {
+    it.each(["small", "medium", "large"] as const)(
+      "renders %s size",
+      (size) => {
+        renderWithTheme(<Tag size={size}>{size}</Tag>)
+        expect(screen.getByText(size)).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when rendering with icon", () => {
+    it("renders with icon", () => {
+      renderWithTheme(<Tag icon={MockIcon}>With Icon</Tag>)
+      expect(screen.getByTestId("mock-icon")).toBeInTheDocument()
+      expect(screen.getByText("With Icon")).toBeInTheDocument()
+    })
+
+    it("renders without icon when not provided", () => {
+      renderWithTheme(<Tag>No Icon</Tag>)
+      expect(screen.queryByTestId("mock-icon")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Tag ref={ref}>Ref test</Tag>)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,303 @@
+import React, { useState } from "react"
+import { View, StyleSheet } from "react-native"
+import { TextArea } from "./TextArea"
+import type { TextAreaProps } from "./TextArea"
+import type { InputState } from "../Input/InputField"
+import { Icon } from "../Icon"
+import { Search, Info } from "@butternutbox/pawprint-icons/core"
+
+export default {
+  title: "Atoms/TextArea",
+  component: TextArea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Multi-line text input component for longer text entry. Supports both simple props API and compound component API."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label text"
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text"
+    },
+    description: {
+      control: "text",
+      description: "Help text below textarea"
+    },
+    error: {
+      control: "text",
+      description: "Error message"
+    },
+    state: {
+      control: "select",
+      options: ["default", "error", "success"],
+      description: "Visual state of the textarea"
+    },
+    optionalText: {
+      control: "text",
+      description: "Optional indicator next to label"
+    },
+    maxLength: {
+      control: "number",
+      description:
+        "Maximum character length (shows character counter automatically)"
+    },
+    rows: {
+      control: "number",
+      description: "Number of visible text rows"
+    },
+    editable: {
+      control: "boolean",
+      description: "Controls whether the textarea is editable"
+    }
+  }
+}
+
+export const Default = (args: TextAreaProps) => (
+  <View style={{ width: 320 }}>
+    <TextArea {...args} />
+  </View>
+)
+Default.args = {
+  label: "Label",
+  placeholder: "Placeholder",
+  description: "Help text"
+}
+
+export const WithCharacterCount = () => (
+  <View style={styles.column}>
+    <TextArea
+      label="Description"
+      placeholder="Enter your description..."
+      description="Maximum 100 characters"
+      maxLength={100}
+      rows={4}
+    />
+    <TextArea
+      label="With Default Value"
+      placeholder="Enter your description..."
+      description="Maximum 100 characters"
+      defaultValue="Some text here"
+      maxLength={100}
+      rows={4}
+    />
+  </View>
+)
+
+export const WithIcons = () => (
+  <View style={styles.column}>
+    <TextArea
+      label="Leading Icon"
+      placeholder="Placeholder"
+      leadingIcon={<Icon icon={Search} size="md" />}
+      description="Help text"
+    />
+    <TextArea
+      label="Trailing Icon"
+      placeholder="Placeholder"
+      trailingIcon={<Icon icon={Search} size="md" />}
+      description="Help text"
+    />
+    <TextArea
+      label="Both Icons"
+      placeholder="Placeholder"
+      leadingIcon={<Icon icon={Search} size="md" />}
+      trailingIcon={<Icon icon={Info} size="md" />}
+      description="Help text"
+    />
+  </View>
+)
+
+export const States = () => (
+  <View style={styles.column}>
+    <TextArea
+      label="Default State"
+      placeholder="Enter text"
+      description="Normal textarea state"
+    />
+    <TextArea
+      label="Error State"
+      placeholder="Enter text"
+      state="error"
+      description="Manually set to error state"
+    />
+    <TextArea
+      label="Error with Custom Message"
+      placeholder="Enter text"
+      state="error"
+      description="Manually set to error state"
+      error="Custom error message"
+    />
+    <TextArea
+      label="Success State"
+      placeholder="Enter text"
+      state="success"
+      description="Manually set to success state"
+    />
+    <TextArea
+      label="Disabled"
+      placeholder="Enter text"
+      description="Help text"
+      editable={false}
+    />
+  </View>
+)
+
+export const Controlled = () => {
+  const [value, setValue] = useState("")
+
+  return (
+    <View style={styles.column}>
+      <TextArea
+        label="Controlled TextArea"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Type something..."
+        description={`You typed: ${value.length} characters`}
+      />
+    </View>
+  )
+}
+
+export const CustomStateValidationWithSuccess = () => {
+  const [description, setDescription] = useState("")
+  const [descriptionState, setDescriptionState] =
+    useState<InputState>("default")
+  const [errorMessage, setErrorMessage] = useState("")
+
+  const validateDescription = (value: string) => {
+    if (!value) {
+      setDescriptionState("default")
+      setErrorMessage("")
+      return
+    }
+
+    const hasMinLength = value.length >= 10
+    const hasMaxLength = value.length <= 200
+
+    if (!hasMinLength) {
+      setDescriptionState("error")
+      setErrorMessage("Description must be at least 10 characters")
+    } else if (!hasMaxLength) {
+      setDescriptionState("error")
+      setErrorMessage("Description is too long (max 200 characters)")
+    } else {
+      setDescriptionState("success")
+      setErrorMessage("")
+    }
+  }
+
+  const handleChange = (newValue: string) => {
+    setDescription(newValue)
+    validateDescription(newValue)
+  }
+
+  return (
+    <View style={styles.column}>
+      <TextArea
+        label="Description"
+        placeholder="Enter description..."
+        value={description}
+        onValueChange={handleChange}
+        state={descriptionState}
+        description="10-200 characters"
+        error={errorMessage}
+      />
+    </View>
+  )
+}
+
+export const Validation = () => {
+  const [requiredValue, setRequiredValue] = useState("")
+  const [requiredTouched, setRequiredTouched] = useState(false)
+  const requiredError =
+    requiredTouched && requiredValue.length === 0
+      ? "This field is required"
+      : ""
+
+  const [minLengthValue, setMinLengthValue] = useState("")
+  const [minLengthBlurred, setMinLengthBlurred] = useState(false)
+  const minLengthError =
+    minLengthBlurred && minLengthValue.length > 0 && minLengthValue.length < 20
+      ? "Must be at least 20 characters"
+      : ""
+
+  return (
+    <View style={styles.column}>
+      <TextArea
+        label="valueMissing - Required Field"
+        placeholder="Enter text"
+        description="Validates on change • Leave empty to see error"
+        value={requiredValue}
+        onValueChange={(v) => {
+          setRequiredValue(v)
+          setRequiredTouched(true)
+        }}
+        state={requiredError ? "error" : "default"}
+        error={requiredError}
+      />
+
+      <TextArea
+        label="tooShort - Min Length"
+        placeholder="Min 20 chars"
+        description="Validates on blur • Type less than 20 characters"
+        value={minLengthValue}
+        onValueChange={setMinLengthValue}
+        onBlur={() => setMinLengthBlurred(true)}
+        state={minLengthError ? "error" : "default"}
+        error={minLengthError}
+      />
+    </View>
+  )
+}
+
+export const CompoundComponentAPI = () => (
+  <View style={styles.column}>
+    <TextArea.Root>
+      <TextArea.Label>Description</TextArea.Label>
+      <TextArea.Field placeholder="Enter text..." />
+      <TextArea.Description>Provide details</TextArea.Description>
+    </TextArea.Root>
+    <TextArea.Root>
+      <TextArea.Label state="error">Description</TextArea.Label>
+      <TextArea.Field placeholder="Enter text..." state="error" />
+      <TextArea.Error>Invalid description</TextArea.Error>
+    </TextArea.Root>
+    <TextArea.Root>
+      <TextArea.Label state="success">Description</TextArea.Label>
+      <TextArea.Field placeholder="Enter text..." state="success" />
+      <TextArea.Description state="success">
+        Description verified
+      </TextArea.Description>
+    </TextArea.Root>
+    <TextArea.Root>
+      <TextArea.Label
+        optionalText="(optional)"
+        maxLength={50}
+        currentLength={15}
+      >
+        Comments
+      </TextArea.Label>
+      <TextArea.Field
+        placeholder="Add comments..."
+        defaultValue="Some comments"
+        maxLength={50}
+      />
+    </TextArea.Root>
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24,
+    width: 320
+  }
+})