@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -0,0 +1,183 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { NumberInput } from "./NumberInput"
+import type { NumberInputProps } from "./NumberInput"
+
+export default {
+  title: "Atoms/NumberInput",
+  component: NumberInput,
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "Label text"
+    },
+    description: {
+      control: { type: "text" },
+      description: "Help text below input"
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message"
+    },
+    optionalText: {
+      control: { type: "text" },
+      description: "Optional text to display next to label"
+    },
+    state: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      description: "Visual state of the input"
+    },
+    fieldText: {
+      control: { type: "text" },
+      description: "Unit label shown to the right of the input (e.g. kg, lbs)"
+    }
+  }
+}
+
+export const Default = (args: NumberInputProps) => (
+  <View style={styles.container}>
+    <NumberInput {...args} />
+  </View>
+)
+Default.args = {
+  label: "Label",
+  placeholder: "0",
+  description: "Help text",
+  fieldText: "kg"
+}
+
+export const States = () => (
+  <View style={styles.column}>
+    <NumberInput
+      label="Default State"
+      placeholder="0"
+      description="Normal input state"
+    />
+    <NumberInput
+      label="Error State"
+      placeholder="0"
+      state="error"
+      description="Manually set to error state"
+    />
+    <NumberInput
+      label="Error with Custom Message"
+      placeholder="0"
+      state="error"
+      description="Manually set to error state"
+      error="Custom error message"
+    />
+    <NumberInput
+      label="Success State"
+      placeholder="0"
+      state="success"
+      description="Manually set to success state"
+    />
+    <NumberInput
+      label="Disabled"
+      placeholder="0"
+      description="Help text"
+      editable={false}
+    />
+  </View>
+)
+
+export const WithFieldText = () => (
+  <View style={styles.column}>
+    <NumberInput
+      label="Weight"
+      placeholder="0"
+      description="Enter weight in kilograms"
+      fieldText="kg"
+    />
+    <NumberInput
+      label="Distance"
+      placeholder="0"
+      description="Enter distance"
+      fieldText="km"
+    />
+    <NumberInput
+      label="Weight"
+      placeholder="0"
+      state="error"
+      error="Invalid weight"
+      fieldText="kg"
+    />
+  </View>
+)
+
+export const WithOptionalText = () => (
+  <View style={styles.column}>
+    <NumberInput
+      label="Weight"
+      optionalText="(optional)"
+      placeholder="0"
+      description="Enter weight in kilograms"
+    />
+  </View>
+)
+
+export const CustomStateValidationWithSuccess = () => {
+  const [quantity, setQuantity] = React.useState("")
+  const [quantityState, setQuantityState] =
+    React.useState<NumberInputProps["state"]>("default")
+
+  const handleChange = (value: string) => {
+    setQuantity(value)
+
+    if (!value) {
+      setQuantityState("default")
+      return
+    }
+
+    const num = parseFloat(value)
+    const isValidNumber = !isNaN(num)
+    const isInRange = num >= 1 && num <= 100
+    const isWholeNumber = num % 1 === 0
+
+    setQuantityState(
+      isValidNumber && isInRange && isWholeNumber ? "success" : "error"
+    )
+  }
+
+  return (
+    <View style={styles.column}>
+      <NumberInput
+        label="Quantity"
+        placeholder="0"
+        value={quantity}
+        onValueChange={handleChange}
+        state={quantityState}
+        description="1-100 items, whole numbers only"
+        error="Must be a whole number between 1 and 100"
+      />
+    </View>
+  )
+}
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState("")
+
+  return (
+    <View style={styles.column}>
+      <NumberInput
+        label="Controlled Number Input"
+        value={value}
+        onValueChange={setValue}
+        placeholder="0"
+        description={`Current value: ${value || "empty"}`}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 320
+  },
+  column: {
+    flexDirection: "column",
+    gap: 24,
+    width: 320
+  }
+})

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

@@ -0,0 +1,261 @@
+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 { NumberInput } from "./NumberInput"
+
+describe("NumberInput", () => {
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(<NumberInput label="Weight" placeholder="0" />)
+      expect(screen.getByText("Weight")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <NumberInput
+          label="Weight"
+          placeholder="0"
+          description="Enter weight in kilograms"
+        />
+      )
+      expect(screen.getByText("Enter weight in kilograms")).toBeInTheDocument()
+    })
+
+    it("renders optional text when provided", () => {
+      renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" optionalText="(optional)" />
+      )
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders input with placeholder", () => {
+      renderWithTheme(<NumberInput label="Weight" placeholder="0" />)
+      expect(screen.getByPlaceholderText("0")).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" defaultValue="10" />
+      )
+      const input = screen.getByPlaceholderText("0") as HTMLInputElement
+      expect(input.value).toBe("10")
+    })
+
+    it("renders fieldText when provided", () => {
+      renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" fieldText="kg" />
+      )
+      expect(screen.getByText("kg")).toBeInTheDocument()
+    })
+
+    it("does not render fieldText when not provided", () => {
+      renderWithTheme(<NumberInput label="Weight" placeholder="0" />)
+      expect(screen.queryByText("kg")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("user interaction", () => {
+    it("accepts user input", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<NumberInput label="Weight" placeholder="0" />)
+
+      const input = screen.getByPlaceholderText("0")
+      await user.type(input, "42")
+      expect(input).toHaveValue("42")
+    })
+
+    it("accepts decimal values", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<NumberInput label="Weight" placeholder="0" />)
+
+      const input = screen.getByPlaceholderText("0")
+      await user.type(input, "42.5")
+      expect(input).toHaveValue("42.5")
+    })
+
+    it("accepts negative values", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<NumberInput label="Temperature" placeholder="0" />)
+
+      const input = screen.getByPlaceholderText("0")
+      await user.type(input, "-10")
+      expect(input).toHaveValue("-10")
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("updates value when parent updates", async () => {
+      const user = userEvent.setup()
+
+      function ControlledInput() {
+        const [value, setValue] = React.useState("")
+        return (
+          <NumberInput
+            label="Weight"
+            value={value}
+            onValueChange={setValue}
+            placeholder="0"
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledInput />)
+
+      const input = screen.getByPlaceholderText("0")
+      await user.type(input, "42")
+      expect(input).toHaveValue("42")
+    })
+
+    it("calls onValueChange when value changes", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <NumberInput
+          label="Weight"
+          value=""
+          onValueChange={onValueChange}
+          placeholder="0"
+        />
+      )
+
+      const input = screen.getByPlaceholderText("0")
+      await user.type(input, "5")
+      expect(onValueChange).toHaveBeenCalled()
+    })
+  })
+
+  describe("when disabled", () => {
+    it("disables the input", () => {
+      renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" editable={false} />
+      )
+      expect(screen.getByPlaceholderText("0")).toBeDisabled()
+    })
+
+    it("does not accept user input when disabled", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" editable={false} />
+      )
+
+      const input = screen.getByPlaceholderText("0")
+      await user.type(input, "42")
+      expect(input).toHaveValue("")
+    })
+  })
+
+  describe("validation states", () => {
+    it.each(["default", "error", "success"] as const)(
+      "renders %s state without errors",
+      (state) => {
+        renderWithTheme(
+          <NumberInput label="Weight" state={state} placeholder="0" />
+        )
+        expect(screen.getByPlaceholderText("0")).toBeInTheDocument()
+      }
+    )
+
+    it("shows error message with error state", () => {
+      renderWithTheme(
+        <NumberInput
+          label="Weight"
+          placeholder="0"
+          state="error"
+          error="Invalid weight"
+        />
+      )
+      expect(screen.getByText("Invalid weight")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" error="Invalid weight" />
+      )
+      expect(screen.queryByText("Invalid weight")).not.toBeInTheDocument()
+    })
+
+    it("does not show state icons (hideStateIcons is always true)", () => {
+      const { container } = renderWithTheme(
+        <NumberInput label="Weight" placeholder="0" state="error" />
+      )
+      expect(container.querySelectorAll("svg")).toHaveLength(0)
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders all compound components", () => {
+      renderWithTheme(
+        <NumberInput.Root>
+          <NumberInput.Label>Weight</NumberInput.Label>
+          <NumberInput.Field placeholder="0" />
+          <NumberInput.Description>Help text</NumberInput.Description>
+        </NumberInput.Root>
+      )
+
+      expect(screen.getByText("Weight")).toBeInTheDocument()
+      expect(screen.getByPlaceholderText("0")).toBeInTheDocument()
+      expect(screen.getByText("Help text")).toBeInTheDocument()
+    })
+
+    it("renders with optional text in compound mode", () => {
+      renderWithTheme(
+        <NumberInput.Root>
+          <NumberInput.Label optionalText="(optional)">
+            Weight
+          </NumberInput.Label>
+          <NumberInput.Field placeholder="0" />
+        </NumberInput.Root>
+      )
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <NumberInput.Root>
+          <NumberInput.Label state="error">Weight</NumberInput.Label>
+          <NumberInput.Field placeholder="0" state="error" />
+          <NumberInput.Error>Invalid weight</NumberInput.Error>
+        </NumberInput.Root>
+      )
+      expect(screen.getByText("Invalid weight")).toBeInTheDocument()
+    })
+  })
+
+  describe("compound component API with states", () => {
+    it("renders error state in compound mode", () => {
+      renderWithTheme(
+        <NumberInput.Root>
+          <NumberInput.Label state="error">Weight</NumberInput.Label>
+          <NumberInput.Field placeholder="0" state="error" />
+          <NumberInput.Error>Invalid weight</NumberInput.Error>
+        </NumberInput.Root>
+      )
+      expect(screen.getByText("Invalid weight")).toBeInTheDocument()
+    })
+
+    it("renders success state in compound mode", () => {
+      renderWithTheme(
+        <NumberInput.Root>
+          <NumberInput.Label state="success">Weight</NumberInput.Label>
+          <NumberInput.Field placeholder="0" state="success" />
+          <NumberInput.Description state="success">
+            Weight verified
+          </NumberInput.Description>
+        </NumberInput.Root>
+      )
+      expect(screen.getByText("Weight verified")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to input element", () => {
+      const ref = React.createRef<TextInput>()
+      renderWithTheme(<NumberInput ref={ref} label="Test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/NumberInput/NumberInput.tsx

@@ -0,0 +1,129 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { InputLabel } from "../Input/InputLabel"
+import { InputDescription } from "../Input/InputDescription"
+import { InputError } from "../Input/InputError"
+import { NumberInputField } from "./NumberInputField"
+import { type InputFieldProps } from "../Input/InputField"
+import { type InputProps } from "../Input/Input"
+
+type NumberInputOwnProps = Pick<
+  InputProps,
+  "label" | "description" | "error" | "state" | "optionalText" | "onValueChange"
+> & {
+  fieldText?: string
+}
+
+export type NumberInputProps = NumberInputOwnProps &
+  Omit<InputFieldProps, keyof NumberInputOwnProps> &
+  Omit<ViewProps, keyof NumberInputOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+/**
+ * Number input component for collecting numeric data.
+ * Supports both a simple props API and a flexible compound component API.
+ *
+ * Features:
+ * - Label with optional text support
+ * - Helper text (description) and error messages
+ * - Centered number input sized from `numberField.size.large.height`
+ * - Controlled and uncontrolled modes
+ * - Full accessibility
+ *
+ * **Simple Props API:**
+ * @example
+ * <NumberInput
+ *   label="Weight"
+ *   defaultValue="0"
+ *   description="Enter weight in kilograms"
+ *   error="Value must be between 0 and 100"
+ *   optionalText="(optional)"
+ * />
+ *
+ * **Compound Component API:**
+ * @example
+ * <NumberInput.Root>
+ *   <NumberInput.Label optionalText="(optional)">Weight</NumberInput.Label>
+ *   <NumberInput.Field defaultValue="0" />
+ *   <NumberInput.Description>Enter weight in kilograms</NumberInput.Description>
+ *   <NumberInput.Error>Invalid value</NumberInput.Error>
+ * </NumberInput.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 {string} [value] - Controlled value
+ * @param {string} [defaultValue] - Default value for uncontrolled mode
+ */
+const NumberInputRoot = React.forwardRef<View, NumberInputProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      onValueChange,
+      fieldText,
+      children,
+      ...inputProps
+    },
+    ref
+  ) => {
+    if (children) {
+      return <StyledRoot ref={ref}>{children}</StyledRoot>
+    }
+
+    return (
+      <StyledRoot ref={ref}>
+        {label && (
+          <InputLabel optionalText={optionalText} state={state}>
+            {label}
+          </InputLabel>
+        )}
+        <NumberInputField
+          state={state}
+          onChangeText={onValueChange}
+          fieldText={fieldText}
+          {...inputProps}
+        />
+        {description && (
+          <InputDescription state={state}>{description}</InputDescription>
+        )}
+        {error && state === "error" && <InputError>{error}</InputError>}
+      </StyledRoot>
+    )
+  }
+)
+
+NumberInputRoot.displayName = "NumberInput"
+
+type NumberInputComponent = React.ForwardRefExoticComponent<
+  NumberInputProps & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof InputLabel
+  Field: typeof NumberInputField
+  Description: typeof InputDescription
+  Error: typeof InputError
+}
+
+export const NumberInput = Object.assign(NumberInputRoot, {
+  Root: StyledRoot,
+  Label: InputLabel,
+  Field: NumberInputField,
+  Description: InputDescription,
+  Error: InputError
+}) as NumberInputComponent

package/src/components/atoms/NumberInput/NumberInputField.tsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { View, TextInput } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+import { InputField, type InputFieldProps } from "../Input/InputField"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledFieldGroup = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: parseTokenValue(spacing.field.gap)
+  }
+})
+
+const StyledFieldTextWrapper = styled(View)({
+  flexShrink: 0,
+  justifyContent: "center"
+})
+
+type NumberInputFieldOwnProps = {
+  fieldText?: string
+}
+
+export type NumberInputFieldProps = NumberInputFieldOwnProps &
+  Omit<InputFieldProps, keyof NumberInputFieldOwnProps>
+
+/**
+ * Field component for NumberInput.
+ * Renders a centered number input sized to `numberField.size.large.height`.
+ * When fieldText is provided, wraps input + text in a horizontal group.
+ */
+export const NumberInputField = React.forwardRef<
+  TextInput,
+  NumberInputFieldProps
+>(({ fieldText, ...props }, ref) => {
+  const theme = useTheme()
+  const { colour, description } = theme.tokens.components.inputs
+  const fieldSize = parseTokenValue(
+    theme.tokens.components.numberField.size.large.height
+  )
+
+  const inputElement = (
+    <InputField
+      keyboardType="numeric"
+      hideStateIcons
+      containerWidth={fieldSize}
+      containerHeight={fieldSize}
+      ref={ref}
+      style={{ textAlign: "center" }}
+      {...props}
+    />
+  )
+
+  if (!fieldText) {
+    return inputElement
+  }
+
+  return (
+    <StyledFieldGroup>
+      {inputElement}
+      <StyledFieldTextWrapper>
+        <Typography
+          token={description.text.default}
+          color={colour.description.default}
+        >
+          {fieldText}
+        </Typography>
+      </StyledFieldTextWrapper>
+    </StyledFieldGroup>
+  )
+})
+
+NumberInputField.displayName = "NumberInput.Field"

package/src/components/atoms/NumberInput/index.ts

@@ -0,0 +1,4 @@
+export { NumberInput } from "./NumberInput"
+export type { NumberInputProps } from "./NumberInput"
+export { NumberInputField } from "./NumberInputField"
+export type { NumberInputFieldProps } from "./NumberInputField"

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

@@ -0,0 +1,46 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Spinner } from "./Spinner"
+
+describe("Spinner", () => {
+  describe("when component is rendering", () => {
+    it("renders without crashing", () => {
+      const { container } = renderWithTheme(<Spinner />)
+      expect(container.firstChild).toBeTruthy()
+    })
+
+    it("renders with progressbar role", () => {
+      renderWithTheme(<Spinner />)
+      expect(screen.getByRole("progressbar")).toBeInTheDocument()
+    })
+
+    it("has accessible loading label", () => {
+      renderWithTheme(<Spinner />)
+      expect(screen.getByLabelText("Loading")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering all sizes", () => {
+    it.each(["sm", "md", "lg"] as const)("renders %s size", (size) => {
+      const { container } = renderWithTheme(<Spinner size={size} />)
+      expect(container.firstChild).toBeTruthy()
+    })
+  })
+
+  describe("when rendering all variants", () => {
+    it.each(["dark", "light"] as const)("renders %s variant", (variant) => {
+      const { container } = renderWithTheme(<Spinner variant={variant} />)
+      expect(container.firstChild).toBeTruthy()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Spinner ref={ref} />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})