@butternutbox/pawprint-native 0.0.1 → 0.1.0

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

@@ -1,8 +1,10 @@
-import React, { useState } from "react"
+import React from "react"
 import { View, StyleSheet } from "react-native"
 import { Input } from "./Input"
 import type { InputProps } from "./Input"
-import { Typography } from "../Typography"
+import type { InputState } from "./InputField"
+import { Icon } from "../Icon"
+import { Search, Info } from "@butternutbox/pawprint-icons/core"
 
 export default {
   title: "Atoms/Input",
@@ -12,10 +14,6 @@ export default {
       control: { type: "text" },
       description: "Label text"
     },
-    placeholder: {
-      control: { type: "text" },
-      description: "Placeholder text"
-    },
     description: {
       control: { type: "text" },
       description: "Help text below input"
@@ -24,107 +22,156 @@ export default {
       control: { type: "text" },
       description: "Error message"
     },
-    state: {
-      control: { type: "select" },
-      options: ["default", "error", "success"],
-      description: "Visual state of the input"
-    },
     optionalText: {
       control: { type: "text" },
-      description: "Optional indicator next to label"
+      description: "Optional text to display next to label"
     },
     disabled: {
       control: { type: "boolean" },
-      description: "Prevents interaction"
+      description: "Disables the input"
     }
   }
 }
 
 export const Default = (args: InputProps) => <Input {...args} />
 Default.args = {
-  label: "Email",
-  placeholder: "you@butternutbox.com",
-  description: "We'll never share your email",
-  state: "default"
+  label: "Label",
+  placeholder: "Placeholder",
+  description: "Help text"
 }
 
+export const WithIcons = () => (
+  <View style={styles.column}>
+    <Input
+      label="Leading Icon"
+      placeholder="Placeholder"
+      leadingIcon={<Icon icon={Search} size="md" />}
+      description="Help text"
+    />
+    <Input
+      label="Trailing Icon"
+      placeholder="Placeholder"
+      trailingIcon={<Icon icon={Search} size="md" />}
+      description="Help text"
+    />
+    <Input
+      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}>
-    <View style={styles.section}>
-      <Typography size="sm" weight="semiBold" color="tertiary">
-        Default
-      </Typography>
-      <Input
-        label="Email"
-        placeholder="you@butternutbox.com"
-        description="We'll never share your email"
-        state="default"
-      />
-    </View>
-    <View style={styles.section}>
-      <Typography size="sm" weight="semiBold" color="tertiary">
-        Error
-      </Typography>
-      <Input
-        label="Email"
-        placeholder="you@butternutbox.com"
-        error="Please enter a valid email address"
-        state="error"
-      />
-    </View>
-    <View style={styles.section}>
-      <Typography size="sm" weight="semiBold" color="tertiary">
-        Success
-      </Typography>
-      <Input
-        label="Email"
-        placeholder="you@butternutbox.com"
-        description="Email is valid"
-        state="success"
-      />
-    </View>
-    <View style={styles.section}>
-      <Typography size="sm" weight="semiBold" color="tertiary">
-        Disabled
-      </Typography>
-      <Input
-        label="Email"
-        placeholder="you@butternutbox.com"
-        editable={false}
-        state="default"
-      />
-    </View>
-    <View style={styles.section}>
-      <Typography size="sm" weight="semiBold" color="tertiary">
-        With optional text
-      </Typography>
+    <Input
+      label="Default State"
+      placeholder="Enter text"
+      description="Normal input state"
+    />
+    <Input
+      label="Error State"
+      placeholder="Enter text"
+      state="error"
+      description="Manually set to error state"
+    />
+    <Input
+      label="Error with Custom Message"
+      placeholder="Enter text"
+      state="error"
+      description="Manually set to error state"
+      error="Custom error message"
+    />
+    <Input
+      label="Success State"
+      placeholder="Enter text"
+      state="success"
+      description="Manually set to success state"
+    />
+    <Input
+      label="Disabled"
+      placeholder="Enter text"
+      description="Help text"
+      editable={false}
+    />
+  </View>
+)
+
+export const KeyboardTypes = () => (
+  <View style={styles.column}>
+    <Input label="Default" keyboardType="default" placeholder="Enter text" />
+    <Input
+      label="Email"
+      keyboardType="email-address"
+      placeholder="you@butternutbox.com"
+    />
+    <Input label="Numeric" keyboardType="numeric" placeholder="Enter number" />
+    <Input
+      label="Phone"
+      keyboardType="phone-pad"
+      placeholder="+44 20 1234 5678"
+    />
+    <Input
+      label="URL"
+      keyboardType="url"
+      placeholder="https://butternutbox.com"
+    />
+  </View>
+)
+
+export const CustomStateValidationWithSuccess = () => {
+  const [username, setUsername] = React.useState("")
+  const [usernameState, setUsernameState] =
+    React.useState<InputState>("default")
+
+  const validateUsername = (value: string) => {
+    if (!value) {
+      setUsernameState("default")
+      return
+    }
+
+    const hasMinLength = value.length >= 3
+    const hasMaxLength = value.length <= 20
+    const isValidFormat = /^[a-z0-9_]+$/.test(value)
+
+    setUsernameState(
+      hasMinLength && hasMaxLength && isValidFormat ? "success" : "error"
+    )
+  }
+
+  const handleChange = (newValue: string) => {
+    setUsername(newValue)
+    validateUsername(newValue)
+  }
+
+  return (
+    <View style={styles.column}>
       <Input
-        label="Phone"
-        placeholder="07123 456789"
-        optionalText="(optional)"
-        state="default"
+        label="Username"
+        placeholder="Enter username"
+        value={username}
+        onValueChange={handleChange}
+        state={usernameState}
+        description="3-20 chars, lowercase letters, numbers, and underscores"
+        error="Custom validation error"
       />
     </View>
-  </View>
-)
+  )
+}
 
 export const Controlled = () => {
-  const [value, setValue] = useState("")
-  const hasError = value.length > 0 && !value.includes("@")
+  const [value, setValue] = React.useState("")
 
   return (
     <View style={styles.column}>
-      <Typography size="sm" weight="semiBold" color="tertiary">
-        Controlled: {value || "(empty)"}
-      </Typography>
       <Input
-        label="Email"
-        placeholder="you@butternutbox.com"
+        label="Controlled Input"
         value={value}
-        onChangeText={setValue}
-        state={hasError ? "error" : "default"}
-        error={hasError ? "Must contain @" : undefined}
-        description="Type to see validation"
+        onValueChange={(newValue) => setValue(newValue)}
+        placeholder="Type something..."
+        description={`You typed: ${value.length} characters`}
       />
     </View>
   )
@@ -134,9 +181,5 @@ const styles = StyleSheet.create({
   column: {
     flexDirection: "column",
     gap: 24
-  },
-  section: {
-    flexDirection: "column",
-    gap: 8
   }
 })

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

@@ -0,0 +1,306 @@
+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 { Input } from "./Input"
+
+describe("Input", () => {
+  describe("when using simple props API", () => {
+    it("renders label when provided", () => {
+      renderWithTheme(<Input label="Email" placeholder="Enter email" />)
+      expect(screen.getByText("Email")).toBeInTheDocument()
+    })
+
+    it("renders description when provided", () => {
+      renderWithTheme(
+        <Input
+          label="Email"
+          placeholder="Enter email"
+          description="We'll never share your email"
+        />
+      )
+      expect(
+        screen.getByText("We'll never share your email")
+      ).toBeInTheDocument()
+    })
+
+    it("renders error message when error prop and state='error' are provided", () => {
+      renderWithTheme(
+        <Input
+          label="Email"
+          placeholder="Enter email"
+          state="error"
+          error="Invalid email address"
+        />
+      )
+      expect(screen.getByText("Invalid email address")).toBeInTheDocument()
+    })
+
+    it("does not render error message when error prop is provided without state='error'", () => {
+      renderWithTheme(
+        <Input
+          label="Email"
+          placeholder="Enter email"
+          error="Invalid email address"
+        />
+      )
+      expect(
+        screen.queryByText("Invalid email address")
+      ).not.toBeInTheDocument()
+    })
+
+    it("shows optionalText when provided", () => {
+      renderWithTheme(
+        <Input
+          label="Email"
+          placeholder="Enter email"
+          optionalText="(optional)"
+        />
+      )
+      expect(screen.getByText("(optional)")).toBeInTheDocument()
+    })
+
+    it("renders input with placeholder", () => {
+      renderWithTheme(<Input label="Email" placeholder="Enter email" />)
+      expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument()
+    })
+
+    it("accepts user input", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(<Input label="Email" placeholder="Enter email" />)
+
+      const input = screen.getByPlaceholderText("Enter email")
+      await user.type(input, "test@example.com")
+      expect(input).toHaveValue("test@example.com")
+    })
+  })
+
+  describe("when using controlled mode", () => {
+    it("updates value when parent updates", async () => {
+      const user = userEvent.setup()
+
+      function ControlledInput() {
+        const [value, setValue] = React.useState("")
+        return (
+          <Input
+            label="Email"
+            value={value}
+            onValueChange={(newValue) => setValue(newValue)}
+            placeholder="Enter email"
+          />
+        )
+      }
+
+      renderWithTheme(<ControlledInput />)
+
+      const input = screen.getByPlaceholderText("Enter email")
+      await user.type(input, "test@example.com")
+      expect(input).toHaveValue("test@example.com")
+    })
+
+    it("calls onValueChange when value changes", async () => {
+      const user = userEvent.setup()
+      const onValueChange = vi.fn()
+
+      renderWithTheme(
+        <Input
+          label="Email"
+          value=""
+          onValueChange={onValueChange}
+          placeholder="Enter email"
+        />
+      )
+
+      const input = screen.getByPlaceholderText("Enter email")
+      await user.type(input, "a")
+      expect(onValueChange).toHaveBeenCalledWith("a")
+    })
+  })
+
+  describe("when disabled", () => {
+    it("disables the input", () => {
+      renderWithTheme(
+        <Input label="Email" placeholder="Enter email" editable={false} />
+      )
+      expect(screen.getByPlaceholderText("Enter email")).toBeDisabled()
+    })
+
+    it("does not accept user input when disabled", async () => {
+      const user = userEvent.setup()
+      renderWithTheme(
+        <Input label="Email" placeholder="Enter email" editable={false} />
+      )
+
+      const input = screen.getByPlaceholderText("Enter email")
+      await user.type(input, "test")
+      expect(input).toHaveValue("")
+    })
+  })
+
+  describe("when using compound component API", () => {
+    it("renders compound components", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Label>Email</Input.Label>
+          <Input.Field placeholder="Enter email" />
+          <Input.Description>Help text</Input.Description>
+        </Input.Root>
+      )
+
+      expect(screen.getByText("Email")).toBeInTheDocument()
+      expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument()
+      expect(screen.getByText("Help text")).toBeInTheDocument()
+    })
+
+    it("renders error in compound mode", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Label state="error">Email</Input.Label>
+          <Input.Field placeholder="Enter email" state="error" />
+          <Input.Error>Invalid email</Input.Error>
+        </Input.Root>
+      )
+      expect(screen.getByText("Invalid email")).toBeInTheDocument()
+    })
+  })
+
+  describe("keyboard types", () => {
+    it("renders with email keyboard type", () => {
+      renderWithTheme(
+        <Input
+          label="Email"
+          keyboardType="email-address"
+          placeholder="Enter email"
+        />
+      )
+      expect(screen.getByPlaceholderText("Enter email")).toBeInTheDocument()
+    })
+
+    it("renders with numeric keyboard type", () => {
+      renderWithTheme(
+        <Input
+          label="Amount"
+          keyboardType="numeric"
+          placeholder="Enter amount"
+        />
+      )
+      expect(screen.getByPlaceholderText("Enter amount")).toBeInTheDocument()
+    })
+
+    it("renders with phone keyboard type", () => {
+      renderWithTheme(
+        <Input
+          label="Phone"
+          keyboardType="phone-pad"
+          placeholder="Enter phone"
+        />
+      )
+      expect(screen.getByPlaceholderText("Enter phone")).toBeInTheDocument()
+    })
+  })
+
+  describe("validation states", () => {
+    it.each(["default", "error", "success"] as const)(
+      "renders %s state without errors",
+      (state) => {
+        renderWithTheme(
+          <Input label="Field" state={state} placeholder="Enter value" />
+        )
+        expect(screen.getByPlaceholderText("Enter value")).toBeInTheDocument()
+      }
+    )
+
+    it("shows error message with error state", () => {
+      renderWithTheme(
+        <Input
+          label="Email"
+          placeholder="Enter email"
+          state="error"
+          error="Invalid email address"
+        />
+      )
+      expect(screen.getByText("Invalid email address")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering icons", () => {
+    it("renders leading icon", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Field
+            placeholder="Search"
+            leadingIcon={<span data-testid="leading-icon">icon</span>}
+          />
+        </Input.Root>
+      )
+      expect(screen.getByTestId("leading-icon")).toBeInTheDocument()
+    })
+
+    it("renders trailing icon", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Field
+            placeholder="Search"
+            trailingIcon={<span data-testid="trailing-icon">icon</span>}
+          />
+        </Input.Root>
+      )
+      expect(screen.getByTestId("trailing-icon")).toBeInTheDocument()
+    })
+
+    it("renders action icon", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Field
+            placeholder="Search"
+            actionIcon={<span data-testid="action-icon">X</span>}
+          />
+        </Input.Root>
+      )
+      expect(screen.getByTestId("action-icon")).toBeInTheDocument()
+    })
+
+    it("hides state icons when hideStateIcons is true", () => {
+      const { container } = renderWithTheme(
+        <Input.Root>
+          <Input.Field placeholder="Email" state="error" hideStateIcons />
+        </Input.Root>
+      )
+      expect(container.querySelectorAll("svg")).toHaveLength(0)
+    })
+  })
+
+  describe("compound component API with states", () => {
+    it("renders error state in compound mode", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Label state="error">Email</Input.Label>
+          <Input.Field placeholder="Enter email" state="error" />
+          <Input.Error>Invalid email</Input.Error>
+        </Input.Root>
+      )
+      expect(screen.getByText("Invalid email")).toBeInTheDocument()
+    })
+
+    it("renders success state in compound mode", () => {
+      renderWithTheme(
+        <Input.Root>
+          <Input.Label state="success">Email</Input.Label>
+          <Input.Field placeholder="Enter email" state="success" />
+          <Input.Description state="success">Email verified</Input.Description>
+        </Input.Root>
+      )
+      expect(screen.getByText("Email verified")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref to input element", () => {
+      const ref = React.createRef<TextInput>()
+      renderWithTheme(<Input ref={ref} label="Test" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/Input/Input.tsx

@@ -12,6 +12,7 @@ type InputOwnProps = {
   error?: string
   state?: InputState
   optionalText?: string
+  onValueChange?: (value: string) => void
 }
 
 export type InputProps = InputOwnProps &
@@ -41,6 +42,8 @@ const StyledRoot = styled(View)(({ theme }) => {
  *   error="Invalid email address"
  *   state="error"
  *   optionalText="(optional)"
+ *   leadingIcon={<Icon icon={Search} size="md" />}
+ *   onValueChange={(value) => setValue(value)}
  * />
  *
  * **Compound Component API:**
@@ -60,6 +63,7 @@ const InputRoot = React.forwardRef<View, InputProps>(
       error,
       state = "default",
       optionalText,
+      onValueChange,
       children,
       // InputField props
       ...inputFieldProps
@@ -79,7 +83,11 @@ const InputRoot = React.forwardRef<View, InputProps>(
             {label}
           </InputLabel>
         )}
-        <InputField state={state} {...inputFieldProps} />
+        <InputField
+          state={state}
+          onChangeText={onValueChange}
+          {...inputFieldProps}
+        />
         {description && (
           <InputDescription state={state}>{description}</InputDescription>
         )}