@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,431 @@
+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, beforeEach } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { CopyField } from "./CopyField"
+import { Clipboard } from "react-native"
+
+vi.mock("react-native", async () => {
+  const actual = await vi.importActual("react-native")
+  return {
+    ...actual,
+    Clipboard: {
+      setString: vi.fn()
+    },
+    Alert: {
+      alert: vi.fn()
+    }
+  }
+})
+
+describe("CopyField", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(<CopyField label="API Key" placeholder="Enter key..." />)
+
+      expect(screen.getByText("API Key")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          description="Your unique API key"
+        />
+      )
+
+      expect(screen.getByText("Your unique API key")).toBeInTheDocument()
+    })
+
+    it("renders error message when error prop and state='error' are provided", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          state="error"
+          error="Invalid API key"
+        />
+      )
+
+      expect(screen.getByText("Invalid API key")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          error="Invalid API key"
+        />
+      )
+
+      expect(screen.queryByText("Invalid API key")).not.toBeInTheDocument()
+    })
+
+    it("shows (optional) when optionalText is provided", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          optionalText="(optional)"
+        />
+      )
+
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders input with placeholder", () => {
+      renderWithTheme(<CopyField label="API Key" placeholder="Enter key..." />)
+
+      expect(screen.getByPlaceholderText("Enter key...")).toBeInTheDocument()
+    })
+
+    it("renders copy button", () => {
+      renderWithTheme(<CopyField placeholder="Enter key..." />)
+
+      expect(screen.getByText("Copy")).toBeInTheDocument()
+    })
+
+    it("accepts user input", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(<CopyField label="API Key" placeholder="Enter key..." />)
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      await user.type(input, "test-api-key")
+
+      expect(input).toHaveValue("test-api-key")
+    })
+
+    it("renders custom copy button label", () => {
+      renderWithTheme(
+        <CopyField placeholder="Enter key..." copyButtonLabel="Copy Key" />
+      )
+
+      expect(screen.getByText("Copy Key")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("updates value when parent updates", async () => {
+      const user = userEvent.setup()
+
+      function ControlledCopyField() {
+        const [value, setValue] = React.useState("")
+
+        return (
+          <CopyField
+            label="API Key"
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+            placeholder="Enter key..."
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledCopyField />)
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      await user.type(input, "test-key")
+
+      expect(input).toHaveValue("test-key")
+    })
+
+    it("calls onValueChange when value changes", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          value=""
+          onValueChange={onValueChange}
+          placeholder="Enter key..."
+        />
+      )
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      await user.type(input, "a")
+
+      expect(onValueChange).toHaveBeenCalledWith("a")
+    })
+  })
+
+  describe("when disabled", () => {
+    it("disables the input", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          editable={false}
+        />
+      )
+
+      expect(screen.getByPlaceholderText("Enter key...")).toBeDisabled()
+    })
+
+    it("disables the copy button", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          value="test-key"
+          editable={false}
+        />
+      )
+
+      const buttons = screen.getAllByRole("button", { name: /copy/i })
+      expect(buttons[buttons.length - 1]).toBeDisabled()
+    })
+
+    it("does not accept user input when disabled", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          editable={false}
+        />
+      )
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      await user.type(input, "test")
+
+      expect(input).toHaveValue("")
+    })
+  })
+
+  describe("copy button behavior", () => {
+    it("disables copy button when field is empty", () => {
+      renderWithTheme(<CopyField placeholder="Enter key..." />)
+
+      const buttons = screen.getAllByRole("button", { name: /copy/i })
+      expect(buttons[buttons.length - 1]).toBeDisabled()
+    })
+
+    it("enables copy button when field has text", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<CopyField placeholder="Enter key..." />)
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      await user.type(input, "test")
+
+      const buttons = screen.getAllByRole("button", { name: /copy/i })
+      expect(buttons[buttons.length - 1]).not.toBeDisabled()
+    })
+
+    it("copies text to clipboard when copy button is clicked", async () => {
+      const user = userEvent.setup()
+      const onCopy = vi.fn()
+
+      renderWithTheme(
+        <CopyField
+          placeholder="Enter key..."
+          value="test-api-key"
+          onCopy={onCopy}
+          onValueChange={() => {}}
+        />
+      )
+
+      const buttons = screen.getAllByRole("button", { name: /copy/i })
+      const copyButton = buttons[buttons.length - 1]
+      await user.click(copyButton)
+
+      expect(Clipboard.setString).toHaveBeenCalledWith("test-api-key")
+      expect(onCopy).toHaveBeenCalledWith("test-api-key")
+    })
+
+    it("does not copy when button is disabled", async () => {
+      const user = userEvent.setup()
+      const onCopy = vi.fn()
+
+      renderWithTheme(
+        <CopyField
+          placeholder="Enter key..."
+          value=""
+          onCopy={onCopy}
+          onValueChange={() => {}}
+        />
+      )
+
+      const buttons = screen.getAllByRole("button", { name: /copy/i })
+      const copyButton = buttons[buttons.length - 1]
+      await user.click(copyButton)
+
+      expect(Clipboard.setString).not.toHaveBeenCalled()
+      expect(onCopy).not.toHaveBeenCalled()
+    })
+
+    it("shows success icon temporarily after copying", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <CopyField
+          placeholder="Enter key..."
+          value="test-key"
+          onValueChange={() => {}}
+        />
+      )
+
+      const buttons = screen.getAllByRole("button", { name: /copy/i })
+      const copyButton = buttons[buttons.length - 1]
+      await user.click(copyButton)
+
+      expect(Clipboard.setString).toHaveBeenCalledWith("test-key")
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders compound components", () => {
+      renderWithTheme(
+        <CopyField.Root>
+          <CopyField.Label>API Key</CopyField.Label>
+          <CopyField.Field placeholder="Enter key..." />
+          <CopyField.Description>Your unique API key</CopyField.Description>
+        </CopyField.Root>
+      )
+
+      expect(screen.getByText("API Key")).toBeInTheDocument()
+      expect(screen.getByPlaceholderText("Enter key...")).toBeInTheDocument()
+      expect(screen.getByText("Your unique API key")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <CopyField.Root>
+          <CopyField.Label state="error">API Key</CopyField.Label>
+          <CopyField.Field placeholder="Enter key..." state="error" />
+          <CopyField.Error>Invalid API key</CopyField.Error>
+        </CopyField.Root>
+      )
+
+      expect(screen.getByText("Invalid API key")).toBeInTheDocument()
+    })
+  })
+
+  describe("validation states", () => {
+    it.each(["default", "error", "success"] as const)(
+      "renders %s state without errors",
+      (state) => {
+        renderWithTheme(
+          <CopyField label="API Key" placeholder="Enter key..." state={state} />
+        )
+
+        expect(screen.getByPlaceholderText("Enter key...")).toBeInTheDocument()
+      }
+    )
+
+    it("shows error state with error message", () => {
+      renderWithTheme(
+        <CopyField
+          label="API Key"
+          placeholder="Enter key..."
+          state="error"
+          error="Invalid API key"
+        />
+      )
+
+      expect(screen.getByText("Invalid API key")).toBeInTheDocument()
+    })
+  })
+
+  describe("compound component API with states", () => {
+    it("renders error state in compound mode", () => {
+      renderWithTheme(
+        <CopyField.Root>
+          <CopyField.Label state="error">API Key</CopyField.Label>
+          <CopyField.Field placeholder="Enter key..." state="error" />
+          <CopyField.Error>Invalid API key</CopyField.Error>
+        </CopyField.Root>
+      )
+
+      expect(screen.getByText("Invalid API key")).toBeInTheDocument()
+    })
+
+    it("renders success state in compound mode", () => {
+      renderWithTheme(
+        <CopyField.Root>
+          <CopyField.Label state="success">API Key</CopyField.Label>
+          <CopyField.Field placeholder="Enter key..." state="success" />
+          <CopyField.Description state="success">
+            API key verified
+          </CopyField.Description>
+        </CopyField.Root>
+      )
+
+      expect(screen.getByText("API key verified")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to input element", () => {
+      const ref = React.createRef<TextInput>()
+      renderWithTheme(<CopyField ref={ref} label="Test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+
+  describe("uncontrolled mode with defaultValue", () => {
+    it("uses defaultValue as initial value", () => {
+      renderWithTheme(
+        <CopyField placeholder="Enter key..." defaultValue="initial-value" />
+      )
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      expect(input).toHaveValue("initial-value")
+    })
+
+    it("allows changing value from defaultValue", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <CopyField placeholder="Enter key..." defaultValue="initial" />
+      )
+
+      const input = screen.getByPlaceholderText("Enter key...")
+      await user.clear(input)
+      await user.type(input, "new-value")
+
+      expect(input).toHaveValue("new-value")
+    })
+  })
+
+  describe("error handling", () => {
+    it("handles clipboard error gracefully", async () => {
+      const user = userEvent.setup()
+      const consoleError = vi
+        .spyOn(console, "error")
+        .mockImplementation(() => {})
+
+      vi.mocked(Clipboard.setString).mockImplementationOnce(() => {
+        throw new Error("Clipboard error")
+      })
+
+      renderWithTheme(
+        <CopyField
+          placeholder="Enter key..."
+          value="test-key"
+          onValueChange={() => {}}
+        />
+      )
+
+      const copyButton = screen.getByText("Copy")
+      await user.click(copyButton)
+
+      expect(consoleError).toHaveBeenCalledWith(
+        "Failed to copy text:",
+        expect.any(Error)
+      )
+
+      consoleError.mockRestore()
+    })
+  })
+})

package/src/components/molecules/CopyField/CopyField.tsx

@@ -0,0 +1,156 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import type { InputState, InputFieldProps } from "../../atoms/Input/InputField"
+import { InputError } from "../../atoms/Input/InputError"
+import { InputLabel } from "../../atoms/Input/InputLabel"
+import { InputDescription } from "../../atoms/Input/InputDescription"
+import { CopyFieldInput } from "./CopyFieldInput"
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+type CopyFieldOwnProps = {
+  label?: string
+  description?: string
+  error?: string
+  state?: InputState
+  optionalText?: string
+  onCopy?: (value: string) => void
+  onValueChange?: (value: string) => void
+  copyButtonLabel?: string
+}
+
+export type CopyFieldProps = CopyFieldOwnProps &
+  Omit<InputFieldProps, keyof CopyFieldOwnProps> &
+  Omit<ViewProps, keyof CopyFieldOwnProps>
+
+/**
+ * Copy field component with a copy button that copies the input value to clipboard.
+ *
+ * **Recommended: Use with useCopyField hook:**
+ * @example
+ * ```tsx
+ * import { CopyField, useCopyField } from '@butternutbox/pawprint-native'
+ *
+ * const copyFieldProps = useCopyField({
+ *   initialValue: "",
+ *   onCopy: (value) => console.log('Copied:', value)
+ * })
+ *
+ * <CopyField
+ *   {...copyFieldProps}
+ *   label="API Key"
+ *   placeholder="Enter API key..."
+ * />
+ * ```
+ *
+ * **Simple Props API (without hook):**
+ * @example
+ * ```tsx
+ * const [apiKey, setApiKey] = useState("")
+ * <CopyField
+ *   label="API Key"
+ *   placeholder="Enter API key..."
+ *   value={apiKey}
+ *   onValueChange={(value) => setApiKey(value)}
+ *   onCopy={(value) => console.log('Copied:', value)}
+ * />
+ * ```
+ *
+ * **Compound Component API:**
+ * @example
+ * <CopyField.Root>
+ *   <CopyField.Label optionalText="(optional)">API Key</CopyField.Label>
+ *   <CopyField.Field
+ *     placeholder="Enter API key..."
+ *     onCopy={(value) => console.log('Copied:', value)}
+ *   />
+ *   <CopyField.Description>Your unique API key</CopyField.Description>
+ *   <CopyField.Error>API key is required</CopyField.Error>
+ * </CopyField.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 {function} [onCopy] - Copy button press handler (receives the copied value)
+ * @param {function} [onValueChange] - Value change handler (receives string value)
+ * @param {string} [copyButtonLabel="Copy"] - Label for the copy button
+ * @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 CopyFieldRoot = React.forwardRef<View, CopyFieldProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      onCopy,
+      onValueChange,
+      copyButtonLabel,
+      value,
+      children,
+      ...inputFieldProps
+    },
+    ref
+  ) => {
+    if (children) {
+      return <StyledRoot ref={ref}>{children}</StyledRoot>
+    }
+
+    return (
+      <StyledRoot ref={ref}>
+        {label && (
+          <InputLabel optionalText={optionalText} state={state}>
+            {label}
+          </InputLabel>
+        )}
+        <CopyFieldInput
+          state={state}
+          value={value}
+          onCopy={onCopy}
+          onValueChange={onValueChange}
+          copyButtonLabel={copyButtonLabel}
+          {...inputFieldProps}
+        />
+        {description && (
+          <InputDescription state={state}>{description}</InputDescription>
+        )}
+        {error && state === "error" && <InputError>{error}</InputError>}
+      </StyledRoot>
+    )
+  }
+)
+
+CopyFieldRoot.displayName = "CopyField"
+
+type CopyFieldComponent = React.ForwardRefExoticComponent<
+  CopyFieldProps & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof InputLabel
+  Field: typeof CopyFieldInput
+  Description: typeof InputDescription
+  Error: typeof InputError
+}
+
+export const CopyField = Object.assign(CopyFieldRoot, {
+  Root: StyledRoot,
+  Label: InputLabel,
+  Field: CopyFieldInput,
+  Description: InputDescription,
+  Error: InputError
+}) as CopyFieldComponent

package/src/components/molecules/CopyField/CopyFieldInput.tsx

@@ -0,0 +1,127 @@
+import React from "react"
+import { Alert, Clipboard, View, TextInput } from "react-native"
+import { InputField, type InputFieldProps } from "../../atoms/Input/InputField"
+import { Button } from "../../atoms/Button"
+import { Icon } from "../../atoms/Icon"
+import { CheckCircle } from "@butternutbox/pawprint-icons/core"
+
+type CopyFieldInputOwnProps = {
+  onCopy?: (value: string) => void
+  onValueChange?: (value: string) => void
+  copyButtonLabel?: string
+}
+
+type CopyFieldInputProps = CopyFieldInputOwnProps &
+  Omit<InputFieldProps, keyof CopyFieldInputOwnProps>
+
+export const CopyFieldInput = React.forwardRef<TextInput, CopyFieldInputProps>(
+  (
+    {
+      onCopy,
+      onValueChange,
+      value,
+      state,
+      copyButtonLabel = "Copy",
+      editable,
+      defaultValue,
+      ...inputFieldProps
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState(
+      typeof defaultValue === "string" ? defaultValue : ""
+    )
+    const [copied, setCopied] = React.useState(false)
+    const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(
+      undefined
+    )
+
+    React.useEffect(() => {
+      if (defaultValue !== undefined && value === undefined) {
+        setInternalValue(typeof defaultValue === "string" ? defaultValue : "")
+      }
+    }, [defaultValue, value])
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+      }
+    }, [])
+
+    const handleValueChange = (newValue: string) => {
+      setInternalValue(newValue)
+      onValueChange?.(newValue)
+    }
+
+    const currentValue = value !== undefined ? value : internalValue
+
+    const hasText =
+      typeof currentValue === "string"
+        ? currentValue.length > 0
+        : Boolean(currentValue)
+
+    const isDisabled = editable === false
+
+    const handleCopy = async () => {
+      if (!hasText || isDisabled) return
+
+      const textToCopy =
+        typeof currentValue === "string" ? currentValue : String(currentValue)
+
+      try {
+        Clipboard.setString(textToCopy)
+        onCopy?.(textToCopy)
+
+        setCopied(true)
+
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+
+        timeoutRef.current = setTimeout(() => {
+          setCopied(false)
+        }, 2000)
+      } catch (err) {
+        console.error("Failed to copy text:", err)
+        Alert.alert("Error", "Failed to copy text to clipboard")
+      }
+    }
+
+    const copyButton = (
+      <View style={{ justifyContent: "center" }}>
+        <Button
+          variant="filled"
+          colour="primary"
+          size="sm"
+          onPress={handleCopy}
+          disabled={!hasText || isDisabled}
+          startIcon={
+            copied ? (
+              <Icon icon={CheckCircle} size="sm" colour="alt" />
+            ) : undefined
+          }
+        >
+          {copyButtonLabel}
+        </Button>
+      </View>
+    )
+
+    return (
+      <InputField
+        ref={ref}
+        {...inputFieldProps}
+        {...(state !== undefined && { state })}
+        value={value}
+        defaultValue={defaultValue}
+        onChangeText={handleValueChange}
+        editable={editable}
+        hideStateIcons
+        actionIcon={copyButton}
+      />
+    )
+  }
+)
+
+CopyFieldInput.displayName = "CopyField.Field"