@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,369 @@
+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 { PasswordField } from "./PasswordField"
+
+describe("PasswordField", () => {
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(
+        <PasswordField label="Password" placeholder="Enter password" />
+      )
+
+      expect(screen.getByText("Password")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          description="Choose a strong password"
+        />
+      )
+
+      expect(screen.getByText("Choose a strong password")).toBeInTheDocument()
+    })
+
+    it("renders error message when error prop and state='error' are provided", () => {
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          state="error"
+          error="Password is too weak"
+        />
+      )
+
+      expect(screen.getByText("Password is too weak")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          error="Password is too weak"
+        />
+      )
+
+      expect(screen.queryByText("Password is too weak")).not.toBeInTheDocument()
+    })
+
+    it("shows (optional) when optionalText is provided", () => {
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          optionalText="(optional)"
+        />
+      )
+
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders input with placeholder", () => {
+      renderWithTheme(
+        <PasswordField label="Password" placeholder="Enter password" />
+      )
+
+      expect(screen.getByPlaceholderText("Enter password")).toBeInTheDocument()
+    })
+
+    it("accepts user input", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <PasswordField label="Password" placeholder="Enter password" />
+      )
+
+      const input = screen.getByPlaceholderText("Enter password")
+      await user.type(input, "mypassword")
+
+      expect(input).toHaveValue("mypassword")
+    })
+
+    it("renders requirements list when showRequirements is true", () => {
+      const requirements = ["At least 8 characters", "One uppercase letter"]
+
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          requirements={requirements}
+          showRequirements={true}
+        />
+      )
+
+      expect(screen.getByText("At least 8 characters")).toBeInTheDocument()
+      expect(screen.getByText("One uppercase letter")).toBeInTheDocument()
+    })
+
+    it("does not render requirements list when showRequirements is false", () => {
+      const requirements = ["At least 8 characters", "One uppercase letter"]
+
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          requirements={requirements}
+          showRequirements={false}
+        />
+      )
+
+      expect(
+        screen.queryByText("At least 8 characters")
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("updates value when parent updates", async () => {
+      const user = userEvent.setup()
+
+      function ControlledPasswordField() {
+        const [value, setValue] = React.useState("")
+
+        return (
+          <PasswordField
+            label="Password"
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+            placeholder="Enter password"
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledPasswordField />)
+
+      const input = screen.getByPlaceholderText("Enter password")
+      await user.type(input, "mypassword")
+
+      expect(input).toHaveValue("mypassword")
+    })
+
+    it("calls onValueChange when value changes", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          value=""
+          onValueChange={onValueChange}
+          placeholder="Enter password"
+        />
+      )
+
+      const input = screen.getByPlaceholderText("Enter password")
+      await user.type(input, "a")
+
+      expect(onValueChange).toHaveBeenCalledWith("a")
+    })
+  })
+
+  describe("when disabled", () => {
+    it("disables the input", () => {
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          editable={false}
+        />
+      )
+
+      expect(screen.getByPlaceholderText("Enter password")).toBeDisabled()
+    })
+
+    it("does not accept user input when disabled", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          editable={false}
+        />
+      )
+
+      const input = screen.getByPlaceholderText("Enter password")
+      await user.type(input, "test")
+
+      expect(input).toHaveValue("")
+    })
+  })
+
+  describe("password visibility toggle", () => {
+    it("shows toggle button", () => {
+      renderWithTheme(<PasswordField placeholder="Enter password" />)
+
+      expect(screen.getByLabelText("Show password")).toBeInTheDocument()
+    })
+
+    it("toggles password visibility when button is clicked", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(<PasswordField placeholder="Enter password" />)
+
+      expect(screen.getByLabelText("Show password")).toBeInTheDocument()
+
+      const toggleButton = screen.getByLabelText("Show password")
+      await user.click(toggleButton)
+
+      expect(screen.getByLabelText("Hide password")).toBeInTheDocument()
+
+      await user.click(screen.getByLabelText("Hide password"))
+      expect(screen.getByLabelText("Show password")).toBeInTheDocument()
+    })
+
+    it("does not toggle when disabled", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <PasswordField placeholder="Enter password" editable={false} />
+      )
+
+      expect(screen.getByLabelText("Show password")).toBeInTheDocument()
+
+      const toggleButton = screen.getByLabelText("Show password")
+      await user.click(toggleButton)
+
+      // Button label should not change when disabled
+      expect(screen.getByLabelText("Show password")).toBeInTheDocument()
+      expect(screen.queryByLabelText("Hide password")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders compound components", () => {
+      renderWithTheme(
+        <PasswordField.Root>
+          <PasswordField.Label>Password</PasswordField.Label>
+          <PasswordField.Field placeholder="Enter password" />
+          <PasswordField.Description>
+            Choose a strong password
+          </PasswordField.Description>
+        </PasswordField.Root>
+      )
+
+      expect(screen.getByText("Password")).toBeInTheDocument()
+      expect(screen.getByPlaceholderText("Enter password")).toBeInTheDocument()
+      expect(screen.getByText("Choose a strong password")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <PasswordField.Root>
+          <PasswordField.Label state="error">Password</PasswordField.Label>
+          <PasswordField.Field placeholder="Enter password" state="error" />
+          <PasswordField.Error>Invalid password</PasswordField.Error>
+        </PasswordField.Root>
+      )
+
+      expect(screen.getByText("Invalid password")).toBeInTheDocument()
+    })
+
+    it("renders requirements in compound mode", () => {
+      const requirements = ["At least 8 characters", "One number"]
+
+      renderWithTheme(
+        <PasswordField.Root>
+          <PasswordField.Label>Password</PasswordField.Label>
+          <PasswordField.Field placeholder="Enter password" />
+          <PasswordField.Requirements requirements={requirements} />
+        </PasswordField.Root>
+      )
+
+      expect(screen.getByText("At least 8 characters")).toBeInTheDocument()
+      expect(screen.getByText("One number")).toBeInTheDocument()
+    })
+  })
+
+  describe("validation states", () => {
+    it.each(["default", "error", "success"] as const)(
+      "renders %s state without errors",
+      (state) => {
+        renderWithTheme(
+          <PasswordField
+            label="Password"
+            state={state}
+            placeholder="Enter password"
+          />
+        )
+        expect(
+          screen.getByPlaceholderText("Enter password")
+        ).toBeInTheDocument()
+      }
+    )
+
+    it("shows error state with error message", () => {
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          state="error"
+          error="Password is too weak"
+        />
+      )
+
+      expect(screen.getByText("Password is too weak")).toBeInTheDocument()
+    })
+
+    it("hides requirements when state is success", () => {
+      const requirements = ["At least 8 characters", "One uppercase letter"]
+
+      renderWithTheme(
+        <PasswordField
+          label="Password"
+          placeholder="Enter password"
+          requirements={requirements}
+          showRequirements={true}
+          state="success"
+        />
+      )
+
+      expect(
+        screen.queryByText("At least 8 characters")
+      ).not.toBeInTheDocument()
+    })
+  })
+
+  describe("compound component API with states", () => {
+    it("renders error state in compound mode", () => {
+      renderWithTheme(
+        <PasswordField.Root>
+          <PasswordField.Label state="error">Password</PasswordField.Label>
+          <PasswordField.Field placeholder="Enter password" state="error" />
+          <PasswordField.Error>Invalid password</PasswordField.Error>
+        </PasswordField.Root>
+      )
+
+      expect(screen.getByText("Invalid password")).toBeInTheDocument()
+    })
+
+    it("renders success state in compound mode", () => {
+      renderWithTheme(
+        <PasswordField.Root>
+          <PasswordField.Label state="success">Password</PasswordField.Label>
+          <PasswordField.Field placeholder="Enter password" state="success" />
+          <PasswordField.Description state="success">
+            Password verified
+          </PasswordField.Description>
+        </PasswordField.Root>
+      )
+
+      expect(screen.getByText("Password verified")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to input element", () => {
+      const ref = React.createRef<TextInput>()
+      renderWithTheme(<PasswordField ref={ref} label="Test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/molecules/PasswordField/PasswordField.tsx

@@ -0,0 +1,194 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import type { InputState, InputFieldProps } from "../../atoms/Input/InputField"
+import { InputLabel } from "../../atoms/Input/InputLabel"
+import { InputDescription } from "../../atoms/Input/InputDescription"
+import { PasswordFieldInput } from "./PasswordFieldInput"
+import { PasswordFieldError } from "./PasswordFieldError"
+import {
+  PasswordFieldRequirements,
+  type PasswordRequirement
+} from "./PasswordFieldRequirements"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+type PasswordFieldOwnProps = {
+  label?: string
+  description?: string
+  error?: string | string[]
+  state?: InputState
+  optionalText?: string
+  requirements?: string[] | PasswordRequirement[]
+  showRequirements?: boolean
+  onValueChange?: (value: string) => void
+}
+
+export type PasswordFieldProps = PasswordFieldOwnProps &
+  Omit<InputFieldProps, keyof PasswordFieldOwnProps> &
+  Omit<ViewProps, keyof PasswordFieldOwnProps>
+
+/**
+ * Password field component with visibility toggle and optional requirements list.
+ *
+ * **Recommended: Use with usePasswordField hook:**
+ * @example
+ * ```tsx
+ * import { PasswordField, usePasswordField } from '@butternutbox/pawprint-native'
+ *
+ * const passwordProps = usePasswordField({
+ *   validationRules: [
+ *     { test: (v) => v.length >= 8, message: "At least 8 characters" },
+ *     { test: (v) => /[A-Z]/.test(v), message: "One uppercase letter" },
+ *     { test: (v) => /[a-z]/.test(v), message: "One lowercase letter" },
+ *     { test: (v) => /\d/.test(v), message: "One number" }
+ *   ]
+ * })
+ *
+ * <PasswordField
+ *   {...passwordProps}
+ *   label="Create Password"
+ *   placeholder="Enter password"
+ * />
+ * ```
+ *
+ * **Simple Props API (without hook):**
+ * @example
+ * ```tsx
+ * const [password, setPassword] = useState("")
+ * const [state, setState] = useState<InputState>("default")
+ *
+ * const requirements: PasswordRequirement[] = [
+ *   { text: "At least 8 characters", satisfied: password.length >= 8 },
+ *   { text: "One uppercase letter", satisfied: /[A-Z]/.test(password) }
+ * ]
+ *
+ * <PasswordField
+ *   label="Password"
+ *   placeholder="Enter password"
+ *   value={password}
+ *   onValueChange={setPassword}
+ *   state={state}
+ *   requirements={requirements}
+ *   showRequirements={password.length > 0}
+ * />
+ * ```
+ *
+ * **Compound Component API:**
+ * @example
+ * ```tsx
+ * const [password, setPassword] = useState("")
+ * const [state, setState] = useState<InputState>("default")
+ *
+ * <PasswordField.Root>
+ *   <PasswordField.Label state={state}>Password</PasswordField.Label>
+ *   <PasswordField.Field
+ *     placeholder="Enter password"
+ *     value={password}
+ *     onValueChange={setPassword}
+ *     state={state}
+ *   />
+ *   <PasswordField.Description state={state}>
+ *     Choose a strong password
+ *   </PasswordField.Description>
+ *   <PasswordField.Requirements requirements={requirements} />
+ *   <PasswordField.Error>Password is required</PasswordField.Error>
+ * </PasswordField.Root>
+ * ```
+ *
+ * @param {string} [label] - Label text (props API)
+ * @param {string} [description] - Description/help text (props API)
+ * @param {string | string[]} [error] - Error message(s) to display. Pass a string for a single error or an array for multiple. 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[] | PasswordRequirement[]} [requirements] - List of password requirements to display. Can be simple strings or objects with text and satisfied status (props API)
+ * @param {boolean} [showRequirements] - Whether to show requirements list. Requirements auto-hide when state is 'success' (props API)
+ * @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
+ */
+const PasswordFieldRoot = React.forwardRef<View, PasswordFieldProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      requirements,
+      showRequirements = false,
+      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>
+        )}
+        <PasswordFieldInput
+          state={state}
+          value={value}
+          onValueChange={onValueChange}
+          {...inputFieldProps}
+        />
+        {description && (
+          <InputDescription state={state}>{description}</InputDescription>
+        )}
+        {state === "error" &&
+          (Array.isArray(error) ? error : error ? [error] : []).map(
+            (message, index) => (
+              <PasswordFieldError key={index}>{message}</PasswordFieldError>
+            )
+          )}
+        {showRequirements &&
+          requirements &&
+          requirements.length > 0 &&
+          state !== "success" && (
+            <PasswordFieldRequirements requirements={requirements} />
+          )}
+      </StyledRoot>
+    )
+  }
+)
+
+PasswordFieldRoot.displayName = "PasswordField"
+
+type PasswordFieldComponent = React.ForwardRefExoticComponent<
+  PasswordFieldProps & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof InputLabel
+  Field: typeof PasswordFieldInput
+  Description: typeof InputDescription
+  Requirements: typeof PasswordFieldRequirements
+  Error: typeof PasswordFieldError
+}
+
+export const PasswordField = Object.assign(PasswordFieldRoot, {
+  Root: StyledRoot,
+  Label: InputLabel,
+  Field: PasswordFieldInput,
+  Description: InputDescription,
+  Requirements: PasswordFieldRequirements,
+  Error: PasswordFieldError
+}) as PasswordFieldComponent

package/src/components/molecules/PasswordField/PasswordFieldError.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+import { Icon } from "../../atoms/Icon"
+import { Cancel } from "@butternutbox/pawprint-icons/core"
+
+export type PasswordFieldErrorProps = {
+  children?: React.ReactNode
+} & ViewProps
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledErrorRow = styled(View)<{ gap: number }>(({ gap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap
+}))
+
+/**
+ * Error message component for PasswordField.
+ * Displays the error text with a RemoveCircle icon to match the design system
+ * password validation styling.
+ *
+ * @param children - Error message text
+ */
+export const PasswordFieldError = React.forwardRef<
+  View,
+  PasswordFieldErrorProps
+>(({ children, ...rest }, ref) => {
+  const theme = useTheme()
+  const { listItem } = theme.tokens.components.validationList
+  const { typography } = theme.tokens.semantics
+
+  return (
+    <StyledErrorRow
+      ref={ref}
+      gap={parseTokenValue(listItem.spacing.gap)}
+      {...rest}
+    >
+      <Icon icon={Cancel} size="xs" customColour={listItem.colour.icon.error} />
+      <Typography
+        token={typography.body.medium.md}
+        color={listItem.colour.text.default}
+      >
+        {children}
+      </Typography>
+    </StyledErrorRow>
+  )
+})
+
+PasswordFieldError.displayName = "PasswordField.Error"

package/src/components/molecules/PasswordField/PasswordFieldInput.tsx

@@ -0,0 +1,73 @@
+import React from "react"
+import { Pressable, TextInput } from "react-native"
+import { InputField } from "../../atoms/Input/InputField"
+import { Icon } from "../../atoms/Icon"
+import { Visibility, VisibilityOff } from "@butternutbox/pawprint-icons/core"
+import type { PasswordFieldProps } from "./PasswordField"
+
+const HIT_SLOP = 12
+
+/**
+ * Input field component for PasswordField.
+ * Wraps InputField with password visibility toggle.
+ *
+ * @param onValueChange - Value change handler
+ * @param value - Controlled value
+ * @param state - Visual state of the input
+ * @param editable - Controls whether the input is editable
+ */
+export const PasswordFieldInput = React.forwardRef<
+  TextInput,
+  Omit<
+    PasswordFieldProps,
+    | "label"
+    | "description"
+    | "error"
+    | "optionalText"
+    | "requirements"
+    | "showRequirements"
+  >
+>(({ onValueChange, value, state, editable, ...inputFieldProps }, ref) => {
+  const [showPassword, setShowPassword] = React.useState(false)
+
+  const handleValueChange = (newValue: string) => {
+    onValueChange?.(newValue)
+  }
+
+  const handleToggleVisibility = () => {
+    if (editable === false) return
+    setShowPassword((prev) => !prev)
+  }
+
+  const toggleButton = (
+    <Pressable
+      onPress={handleToggleVisibility}
+      accessibilityLabel={showPassword ? "Hide password" : "Show password"}
+      accessibilityRole="button"
+      disabled={editable === false}
+      hitSlop={{
+        top: HIT_SLOP,
+        bottom: HIT_SLOP,
+        left: HIT_SLOP,
+        right: HIT_SLOP
+      }}
+    >
+      <Icon icon={showPassword ? VisibilityOff : Visibility} size="md" />
+    </Pressable>
+  )
+
+  return (
+    <InputField
+      ref={ref}
+      {...inputFieldProps}
+      state={state}
+      value={value}
+      onChangeText={handleValueChange}
+      actionIcon={toggleButton}
+      secureTextEntry={!showPassword}
+      editable={editable}
+    />
+  )
+})
+
+PasswordFieldInput.displayName = "PasswordField.Field"