@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,416 @@
+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 { TextArea } from "./TextArea"
+
+describe("TextArea", () => {
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(
+        <TextArea label="Description" placeholder="Enter text..." />
+      )
+
+      expect(screen.getByText("Description")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          description="Please provide details"
+        />
+      )
+
+      expect(screen.getByText("Please provide details")).toBeInTheDocument()
+    })
+
+    it("renders error message when error prop and state='error' are provided", () => {
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          state="error"
+          error="Description is required"
+        />
+      )
+
+      expect(screen.getByText("Description is required")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          error="Description is required"
+        />
+      )
+
+      expect(
+        screen.queryByText("Description is required")
+      ).not.toBeInTheDocument()
+    })
+
+    it("shows (optional) when optionalText is provided", () => {
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          optionalText="(optional)"
+        />
+      )
+
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders textarea with placeholder", () => {
+      renderWithTheme(
+        <TextArea label="Description" placeholder="Enter text..." />
+      )
+
+      expect(screen.getByPlaceholderText("Enter text...")).toBeInTheDocument()
+    })
+
+    it("accepts user input", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <TextArea label="Description" placeholder="Enter text..." />
+      )
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      await user.type(textarea, "Test description")
+
+      expect(textarea).toHaveValue("Test description")
+    })
+
+    it("shows character count when maxLength is provided", () => {
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          maxLength={100}
+        />
+      )
+
+      expect(screen.getByText("0/100")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("updates value when parent updates", async () => {
+      const user = userEvent.setup()
+
+      function ControlledTextArea() {
+        const [value, setValue] = React.useState("")
+
+        return (
+          <TextArea
+            label="Description"
+            value={value}
+            onValueChange={setValue}
+            placeholder="Enter text..."
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledTextArea />)
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      await user.type(textarea, "Test description")
+
+      expect(textarea).toHaveValue("Test description")
+    })
+
+    it("calls onValueChange when value changes", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          value=""
+          onValueChange={onValueChange}
+          placeholder="Enter text..."
+        />
+      )
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      await user.type(textarea, "a")
+
+      expect(onValueChange).toHaveBeenCalled()
+    })
+  })
+
+  describe("when disabled", () => {
+    it("disables the textarea", () => {
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          editable={false}
+        />
+      )
+
+      expect(screen.getByPlaceholderText("Enter text...")).toBeDisabled()
+    })
+
+    it("does not accept user input when disabled", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          editable={false}
+        />
+      )
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      await user.type(textarea, "test")
+
+      expect(textarea).toHaveValue("")
+    })
+  })
+
+  describe("character count", () => {
+    it("updates character count as user types", async () => {
+      const user = userEvent.setup()
+
+      renderWithTheme(
+        <TextArea
+          label="Description"
+          placeholder="Enter text..."
+          maxLength={100}
+        />
+      )
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      await user.type(textarea, "Hello")
+
+      expect(screen.getByText("5/100")).toBeInTheDocument()
+    })
+
+    it("shows character count in controlled mode", async () => {
+      const user = userEvent.setup()
+
+      function ControlledTextArea() {
+        const [value, setValue] = React.useState("")
+
+        return (
+          <TextArea
+            label="Description"
+            value={value}
+            onValueChange={setValue}
+            placeholder="Enter text..."
+            maxLength={50}
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledTextArea />)
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      await user.type(textarea, "Test")
+
+      expect(screen.getByText("4/50")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders compound components", () => {
+      renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Label>Description</TextArea.Label>
+          <TextArea.Field placeholder="Enter text..." />
+          <TextArea.Description>Provide details</TextArea.Description>
+        </TextArea.Root>
+      )
+
+      expect(screen.getByText("Description")).toBeInTheDocument()
+      expect(screen.getByPlaceholderText("Enter text...")).toBeInTheDocument()
+      expect(screen.getByText("Provide details")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Label state="error">Description</TextArea.Label>
+          <TextArea.Field placeholder="Enter text..." state="error" />
+          <TextArea.Error>Invalid description</TextArea.Error>
+        </TextArea.Root>
+      )
+
+      expect(screen.getByText("Invalid description")).toBeInTheDocument()
+    })
+  })
+
+  describe("validation states", () => {
+    describe("manual state control", () => {
+      it("renders error state when state='error'", () => {
+        renderWithTheme(
+          <TextArea
+            label="Description"
+            placeholder="Enter text..."
+            state="error"
+          />
+        )
+
+        const textarea = screen.getByPlaceholderText("Enter text...")
+        expect(textarea).toBeInTheDocument()
+      })
+
+      it("renders success state when state='success'", () => {
+        renderWithTheme(
+          <TextArea
+            label="Description"
+            placeholder="Enter text..."
+            state="success"
+          />
+        )
+
+        const textarea = screen.getByPlaceholderText("Enter text...")
+        expect(textarea).toBeInTheDocument()
+      })
+
+      it("renders default state when state='default'", () => {
+        renderWithTheme(
+          <TextArea
+            label="Description"
+            placeholder="Enter text..."
+            state="default"
+          />
+        )
+
+        const textarea = screen.getByPlaceholderText("Enter text...")
+        expect(textarea).toBeInTheDocument()
+      })
+
+      it("shows error state with error message", () => {
+        renderWithTheme(
+          <TextArea
+            label="Description"
+            placeholder="Enter text..."
+            state="error"
+            error="Description is required"
+          />
+        )
+
+        expect(screen.getByText("Description is required")).toBeInTheDocument()
+      })
+    })
+  })
+
+  describe("compound component API with states", () => {
+    it("renders error state in compound mode", () => {
+      renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Label state="error">Description</TextArea.Label>
+          <TextArea.Field placeholder="Enter text..." state="error" />
+          <TextArea.Error>Invalid description</TextArea.Error>
+        </TextArea.Root>
+      )
+      expect(screen.getByText("Invalid description")).toBeInTheDocument()
+    })
+
+    it("renders success state in compound mode", () => {
+      renderWithTheme(
+        <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>
+      )
+      expect(screen.getByText("Description verified")).toBeInTheDocument()
+    })
+  })
+
+  describe("rows prop", () => {
+    it("renders with default rows", () => {
+      renderWithTheme(
+        <TextArea label="Description" placeholder="Enter text..." />
+      )
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      expect(textarea).toBeInTheDocument()
+    })
+
+    it("renders with custom rows", () => {
+      renderWithTheme(
+        <TextArea label="Description" placeholder="Enter text..." rows={5} />
+      )
+
+      const textarea = screen.getByPlaceholderText("Enter text...")
+      expect(textarea).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering icons", () => {
+    it("renders leading icon", () => {
+      renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Field
+            placeholder="Search"
+            leadingIcon={<span data-testid="leading-icon">icon</span>}
+          />
+        </TextArea.Root>
+      )
+
+      expect(screen.getByTestId("leading-icon")).toBeInTheDocument()
+    })
+
+    it("renders trailing icon", () => {
+      renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Field
+            placeholder="Search"
+            trailingIcon={<span data-testid="trailing-icon">icon</span>}
+          />
+        </TextArea.Root>
+      )
+
+      expect(screen.getByTestId("trailing-icon")).toBeInTheDocument()
+    })
+
+    it("renders both leading and trailing icons", () => {
+      renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Field
+            placeholder="Search"
+            leadingIcon={<span data-testid="leading-icon">icon</span>}
+            trailingIcon={<span data-testid="trailing-icon">icon</span>}
+          />
+        </TextArea.Root>
+      )
+
+      expect(screen.getByTestId("leading-icon")).toBeInTheDocument()
+      expect(screen.getByTestId("trailing-icon")).toBeInTheDocument()
+    })
+
+    it("hides state icons when hideStateIcons is true", () => {
+      const { container } = renderWithTheme(
+        <TextArea.Root>
+          <TextArea.Field placeholder="Text" state="error" hideStateIcons />
+        </TextArea.Root>
+      )
+
+      expect(container.querySelectorAll("svg")).toHaveLength(0)
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to input element", () => {
+      const ref = React.createRef<TextInput>()
+
+      renderWithTheme(<TextArea ref={ref} label="Test" />)
+
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,171 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { TextAreaField, type TextAreaFieldProps } from "./TextAreaField"
+import { InputError } from "../Input/InputError"
+import type { InputState } from "../Input/InputField"
+import { TextAreaLabel } from "./TextAreaLabel"
+import { InputDescription } from "../Input/InputDescription"
+
+type TextAreaOwnProps = {
+  label?: string
+  description?: string
+  error?: string
+  state?: InputState
+  optionalText?: string
+  onValueChange?: (value: string) => void
+}
+
+export type TextAreaProps = TextAreaOwnProps &
+  Omit<TextAreaFieldProps, keyof TextAreaOwnProps> &
+  Omit<ViewProps, keyof TextAreaOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)(({ theme }) => {
+  const { spacing } = theme.tokens.components.inputs
+
+  return {
+    gap: parseTokenValue(spacing.gap)
+  }
+})
+
+/**
+ * Multi-line text input component for collecting longer user input.
+ * Supports both a simple props API and a flexible compound component API.
+ *
+ * **Simple Props API:**
+ * @example
+ * <TextArea
+ *   label="Description"
+ *   placeholder="Enter your description..."
+ *   description="Provide a detailed description"
+ *   error="Description is required"
+ *   optionalText="(optional)"
+ *   maxLength={500}
+ *   rows={5}
+ * />
+ *
+ * **Compound Component API:**
+ * @example
+ * <TextArea.Root>
+ *   <TextArea.Label optionalText="(optional)" maxLength={500} currentLength={text.length}>
+ *     Description
+ *   </TextArea.Label>
+ *   <TextArea.Field
+ *     placeholder="Enter your description..."
+ *     maxLength={500}
+ *     rows={5}
+ *   />
+ *   <TextArea.Description>Provide a detailed description</TextArea.Description>
+ *   <TextArea.Error>Description is required</TextArea.Error>
+ * </TextArea.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 textarea: 'default', 'error', or 'success' (props API)
+ * @param {string} [optionalText] - Optional text to display next to label (props API)
+ * @param {React.ReactNode} [leadingIcon] - Icon to display at the start of the textarea
+ * @param {React.ReactNode} [trailingIcon] - Icon to display at the end of the textarea (overrides automatic state icons)
+ * @param {boolean} [hideStateIcons] - Hide automatic error/success icons
+ * @param {string} [placeholder] - Placeholder text
+ * @param {string} [value] - Controlled value
+ * @param {string} [defaultValue] - Default value for uncontrolled mode
+ * @param {function} [onChangeText] - Change event handler
+ * @param {number} [maxLength] - Maximum character length (shows character counter when provided)
+ * @param {number} [rows=2] - Number of visible text rows
+ * @param {boolean} [editable] - Controls whether the textarea is editable
+ *
+ * Also supports all native TextInput props.
+ */
+const TextAreaRoot = React.forwardRef<View, TextAreaProps>(
+  (
+    {
+      label,
+      description,
+      error,
+      state = "default",
+      optionalText,
+      onValueChange,
+      children,
+      maxLength,
+      value,
+      defaultValue,
+      onChangeText,
+      ...textAreaFieldProps
+    },
+    ref
+  ) => {
+    const [charCount, setCharCount] = React.useState(0)
+
+    React.useEffect(() => {
+      if (value !== undefined) {
+        setCharCount(String(value).length)
+      } else if (defaultValue !== undefined) {
+        setCharCount(String(defaultValue).length)
+      }
+    }, [value, defaultValue])
+
+    const handleChangeText = (text: string) => {
+      setCharCount(text.length)
+      if (onChangeText) {
+        onChangeText(text)
+      }
+      if (onValueChange) {
+        onValueChange(text)
+      }
+    }
+
+    if (children) {
+      return <StyledRoot ref={ref}>{children}</StyledRoot>
+    }
+
+    return (
+      <StyledRoot ref={ref}>
+        {label && (
+          <TextAreaLabel
+            optionalText={optionalText}
+            state={state}
+            maxLength={maxLength}
+            currentLength={charCount}
+          >
+            {label}
+          </TextAreaLabel>
+        )}
+        <TextAreaField
+          state={state}
+          maxLength={maxLength}
+          value={value}
+          defaultValue={defaultValue}
+          onChangeText={handleChangeText}
+          {...textAreaFieldProps}
+        />
+        {description && (
+          <InputDescription state={state}>{description}</InputDescription>
+        )}
+        {error && state === "error" && <InputError>{error}</InputError>}
+      </StyledRoot>
+    )
+  }
+)
+
+TextAreaRoot.displayName = "TextArea"
+
+type TextAreaComponent = React.ForwardRefExoticComponent<
+  TextAreaProps & React.RefAttributes<View>
+> & {
+  Root: typeof StyledRoot
+  Label: typeof TextAreaLabel
+  Field: typeof TextAreaField
+  Description: typeof InputDescription
+  Error: typeof InputError
+}
+
+export const TextArea = Object.assign(TextAreaRoot, {
+  Root: StyledRoot,
+  Label: TextAreaLabel,
+  Field: TextAreaField,
+  Description: InputDescription,
+  Error: InputError
+}) as TextAreaComponent