@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -1,14 +1,30 @@
-import React from "react"
-import { View, TextInput, TextInputProps } from "react-native"
+import React, { useState, useRef, useEffect, useCallback } from "react"
+import {
+  View,
+  TextInput,
+  TextInputProps,
+  Animated,
+  Easing,
+  Pressable
+} from "react-native"
 import styled from "@emotion/native"
 import { useTheme } from "@emotion/react"
+import {
+  Error as ErrorIcon,
+  CheckCircle as SuccessIcon
+} from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../Icon"
 
 export type InputState = "default" | "error" | "success"
 
 type InputFieldOwnProps = {
   leadingIcon?: React.ReactNode
   trailingIcon?: React.ReactNode
+  actionIcon?: React.ReactNode
   state?: InputState
+  hideStateIcons?: boolean
+  containerWidth?: number
+  containerHeight?: number
 }
 
 export type InputFieldProps = InputFieldOwnProps &
@@ -16,52 +32,55 @@ export type InputFieldProps = InputFieldOwnProps &
 
 const parseTokenValue = (value: string): number => parseFloat(value)
 
-const StyledInputWrapper = styled(View)<{
-  wrapperGap: number
-  wrapperMinWidth: number
-  wrapperHeight: number
-  wrapperPaddingVertical: number
-  wrapperPaddingHorizontal: number
-  wrapperBgColor: string
-  wrapperBorderWidth: number
-  wrapperBorderColor: string
-  wrapperBorderRadius: number
-}>(
-  ({
-    wrapperGap,
-    wrapperMinWidth,
-    wrapperHeight,
-    wrapperPaddingVertical,
-    wrapperPaddingHorizontal,
-    wrapperBgColor,
-    wrapperBorderWidth,
-    wrapperBorderColor,
-    wrapperBorderRadius
-  }) => ({
+const StyledInputWrapper = styled(Animated.View)<{
+  isDisabled: boolean
+  containerWidth?: number
+  containerHeight?: number
+}>(({ theme, isDisabled, containerWidth, containerHeight }) => {
+  const { spacing, colour, borderRadius, size } = theme.tokens.components.inputs
+  return {
     flexDirection: "row",
     alignItems: "center",
-    gap: wrapperGap,
-    minWidth: wrapperMinWidth,
-    width: "100%",
-    height: wrapperHeight,
-    paddingVertical: wrapperPaddingVertical,
-    paddingHorizontal: wrapperPaddingHorizontal,
-    backgroundColor: wrapperBgColor,
-    borderWidth: wrapperBorderWidth,
-    borderColor: wrapperBorderColor,
-    borderRadius: wrapperBorderRadius
-  })
-)
+    gap: parseTokenValue(spacing.field.gap),
+    minWidth:
+      containerWidth !== undefined
+        ? undefined
+        : parseTokenValue(size.field.minWidth),
+    width: containerWidth !== undefined ? containerWidth : "100%",
+    height:
+      containerHeight !== undefined
+        ? containerHeight
+        : parseTokenValue(size.field.height),
+    backgroundColor: isDisabled
+      ? colour.field.background.inactive
+      : colour.field.background.default,
+    borderRadius: parseTokenValue(borderRadius.field.default),
+    flexShrink: containerWidth !== undefined ? 0 : undefined
+  }
+})
 
-const StyledInput = styled(TextInput)<{
-  inputColor: string
-}>(({ inputColor }) => ({
-  flex: 1,
-  minWidth: 0,
-  minHeight: 0,
-  padding: 0,
-  color: inputColor
-}))
+const StyledInput = styled(TextInput)(({ theme }) => {
+  const { colour } = theme.tokens.components.inputs
+  return {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    padding: 0,
+    color: colour.field.text.default,
+    // Suppress the browser default focus outline on React Native Web —
+    // the focus indicator is rendered on the wrapper instead.
+    ...({
+      outlineStyle: "none",
+      outlineWidth: 0,
+      outlineColor: "transparent"
+    } as object)
+  }
+})
+
+const StyledFocusRing = styled(View)({
+  position: "absolute",
+  pointerEvents: "none"
+})
 
 const StyledIconSlot = styled(View)({
   alignItems: "center",
@@ -74,44 +93,177 @@ const StyledIconSlot = styled(View)({
  *
  * @param {React.ReactNode} [leadingIcon] - Icon to display before the input
  * @param {React.ReactNode} [trailingIcon] - Icon to display after the input
+ * @param {React.ReactNode} [actionIcon] - Interactive icon at the rightmost position (e.g. clear button, password toggle)
  * @param {InputState} [state] - Visual state of the input (default, error, success)
+ * @param {boolean} [hideStateIcons] - Hide automatic error/success icons
  */
 export const InputField = React.forwardRef<TextInput, InputFieldProps>(
-  ({ leadingIcon, trailingIcon, state = "default", style, ...rest }, ref) => {
+  (
+    {
+      leadingIcon,
+      trailingIcon,
+      actionIcon,
+      state = "default",
+      hideStateIcons,
+      containerWidth,
+      containerHeight,
+      style,
+      editable,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref
+  ) => {
     const theme = useTheme()
-    const { spacing, colour, borderWidth, borderRadius, size } =
+    const { spacing, colour, borderWidth, borderRadius } =
       theme.tokens.components.inputs
+    const focusBorderColor = theme.tokens.semantics.colour.border.focus
+
+    const [isFocused, setIsFocused] = useState(false)
+
+    const internalInputRef = useRef<TextInput>(null)
+    const combinedRef = useCallback(
+      (node: TextInput | null) => {
+        internalInputRef.current = node
+        if (typeof ref === "function") {
+          ref(node)
+        } else if (ref) {
+          ;(ref as React.MutableRefObject<TextInput | null>).current = node
+        }
+      },
+      [ref]
+    )
+    const isDisabled = editable === false
+    const hasState = state === "error" || state === "success"
+
+    const baseBorderWidth = parseTokenValue(borderWidth.field.default)
+    const selectedBorderWidth = parseTokenValue(borderWidth.field.selected)
+    const focusBorderWidth = parseTokenValue(borderWidth.field.focus)
+    const fieldBorderRadius = parseTokenValue(borderRadius.field.default)
+    const baseVerticalPadding = parseTokenValue(spacing.field.verticalPadding)
+    const baseHorizontalPadding = parseTokenValue(
+      spacing.field.horizontalPadding
+    )
+    const borderDelta = selectedBorderWidth - baseBorderWidth
+
+    const borderColor =
+      state === "error"
+        ? colour.field.border.error
+        : state === "success"
+          ? colour.field.border.success
+          : isFocused
+            ? colour.field.border.selected
+            : colour.field.border.default
+
+    const isActiveBorder = isFocused || hasState
+    const borderAnim = useRef(
+      new Animated.Value(isActiveBorder ? 1 : 0)
+    ).current
 
-    const stateBorderColorMap = {
-      error: colour.field.border.error,
-      success: colour.field.border.success,
-      default: colour.field.border.default
+    useEffect(() => {
+      const animation = Animated.timing(borderAnim, {
+        toValue: isActiveBorder ? 1 : 0,
+        duration: 50,
+        easing: Easing.ease,
+        useNativeDriver: false
+      })
+      animation.start()
+      return () => animation.stop()
+    }, [isActiveBorder, borderAnim])
+
+    const animatedBorderWidth = borderAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [baseBorderWidth, selectedBorderWidth]
+    })
+
+    const animatedPaddingVertical = borderAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [baseVerticalPadding, baseVerticalPadding - borderDelta]
+    })
+
+    const animatedPaddingHorizontal = borderAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [baseHorizontalPadding, baseHorizontalPadding - borderDelta]
+    })
+
+    const stateIconMap = {
+      error: { icon: ErrorIcon, colour: "error" as const },
+      success: { icon: SuccessIcon, colour: "success" as const }
     }
 
-    return (
-      <StyledInputWrapper
-        wrapperGap={parseTokenValue(spacing.field.gap)}
-        wrapperMinWidth={parseTokenValue(size.field.minWidth)}
-        wrapperHeight={parseTokenValue(size.field.height)}
-        wrapperPaddingVertical={parseTokenValue(spacing.field.verticalPadding)}
-        wrapperPaddingHorizontal={parseTokenValue(
-          spacing.field.horizontalPadding
-        )}
-        wrapperBgColor={colour.field.background.default}
-        wrapperBorderWidth={parseTokenValue(borderWidth.field.default)}
-        wrapperBorderColor={stateBorderColorMap[state]}
-        wrapperBorderRadius={parseTokenValue(borderRadius.field.default)}
-      >
-        {leadingIcon && <StyledIconSlot>{leadingIcon}</StyledIconSlot>}
-        <StyledInput
-          ref={ref}
-          inputColor={colour.field.text.default}
-          style={style}
-          placeholderTextColor={colour.field.text.placeholder}
-          {...rest}
+    const stateIconConfig = state !== "default" ? stateIconMap[state] : null
+
+    const stateIcon =
+      !hideStateIcons && stateIconConfig ? (
+        <Icon
+          icon={stateIconConfig.icon}
+          size="md"
+          colour={stateIconConfig.colour}
         />
-        {trailingIcon && <StyledIconSlot>{trailingIcon}</StyledIconSlot>}
-      </StyledInputWrapper>
+      ) : null
+
+    const handleFocus = (
+      e: Parameters<NonNullable<TextInputProps["onFocus"]>>[0]
+    ) => {
+      setIsFocused(true)
+      onFocus?.(e)
+    }
+
+    const handleBlur = (
+      e: Parameters<NonNullable<TextInputProps["onBlur"]>>[0]
+    ) => {
+      setIsFocused(false)
+      onBlur?.(e)
+    }
+
+    const handleWrapperPress = () => {
+      internalInputRef.current?.focus()
+    }
+
+    return (
+      <Pressable onPress={handleWrapperPress}>
+        <StyledInputWrapper
+          isDisabled={isDisabled}
+          containerWidth={containerWidth}
+          containerHeight={containerHeight}
+          style={[
+            {
+              borderColor,
+              borderWidth: animatedBorderWidth,
+              paddingVertical: animatedPaddingVertical,
+              paddingHorizontal: animatedPaddingHorizontal
+            }
+          ]}
+        >
+          {isFocused && !hasState && (
+            <StyledFocusRing
+              style={{
+                top: -focusBorderWidth,
+                left: -focusBorderWidth,
+                right: -focusBorderWidth,
+                bottom: -focusBorderWidth,
+                borderWidth: focusBorderWidth,
+                borderColor: focusBorderColor,
+                borderRadius: fieldBorderRadius + focusBorderWidth
+              }}
+            />
+          )}
+          {leadingIcon && <StyledIconSlot>{leadingIcon}</StyledIconSlot>}
+          <StyledInput
+            ref={combinedRef}
+            style={style}
+            placeholderTextColor={colour.field.text.placeholder}
+            editable={editable}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...rest}
+          />
+          {trailingIcon && <StyledIconSlot>{trailingIcon}</StyledIconSlot>}
+          {stateIcon && <StyledIconSlot>{stateIcon}</StyledIconSlot>}
+          {actionIcon && <StyledIconSlot>{actionIcon}</StyledIconSlot>}
+        </StyledInputWrapper>
+      </Pressable>
     )
   }
 )

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

@@ -0,0 +1,89 @@
+import React from "react"
+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 { Link } from "./Link"
+
+describe("Link", () => {
+  describe("when component is rendering", () => {
+    it("renders children text", () => {
+      renderWithTheme(<Link>Find out more</Link>)
+      expect(screen.getByText("Find out more")).toBeInTheDocument()
+    })
+
+    it("renders with default inline style", () => {
+      renderWithTheme(<Link>Inline link</Link>)
+      expect(screen.getByText("Inline link")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering standalone", () => {
+    it("renders with trailing arrow icon", () => {
+      const { container } = renderWithTheme(<Link standalone>Standalone</Link>)
+      expect(screen.getByText("Standalone")).toBeInTheDocument()
+      expect(container.querySelector("svg")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering sizes", () => {
+    it.each(["sm", "md", "lg"] as const)("renders %s size", (size) => {
+      renderWithTheme(<Link size={size}>Link</Link>)
+      expect(screen.getByText("Link")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering weights", () => {
+    it.each(["medium", "semiBold", "bold"] as const)(
+      "renders %s weight",
+      (weight) => {
+        renderWithTheme(<Link weight={weight}>Link</Link>)
+        expect(screen.getByText("Link")).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when component is interactive", () => {
+    it("calls onPress when pressed", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(<Link onPress={onPress}>Press me</Link>)
+
+      await user.click(screen.getByText("Press me"))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not call onPress when disabled", async () => {
+      const user = userEvent.setup()
+      const onPress = vi.fn()
+      renderWithTheme(
+        <Link onPress={onPress} disabled>
+          Disabled
+        </Link>
+      )
+
+      await user.click(screen.getByText("Disabled"))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("accessibility", () => {
+    it("has link role", () => {
+      renderWithTheme(<Link>Accessible</Link>)
+      expect(screen.getByRole("link")).toBeInTheDocument()
+    })
+
+    it("sets disabled accessibility state", () => {
+      renderWithTheme(<Link disabled>Disabled</Link>)
+      expect(screen.getByRole("link")).toBeDisabled()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Link ref={ref}>Ref test</Link>)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})

package/src/components/atoms/Link/Link.tsx

@@ -7,6 +7,8 @@ import {
   ViewStyle
 } from "react-native"
 import { useTheme } from "@emotion/react"
+import { ArrowForward } from "@butternutbox/pawprint-icons/core"
+import { Icon } from "../Icon"
 import { Typography } from "../Typography"
 
 export type LinkSize = "sm" | "md" | "lg"
@@ -101,12 +103,11 @@ export const Link = React.forwardRef<View, LinkProps>(
               {children}
             </Typography>
             {standalone && (
-              <Typography
-                token={typography.link[weight][size]}
-                color={pressed ? linkColour.hover : linkColour.default}
-              >
-                {" →"}
-              </Typography>
+              <Icon
+                icon={ArrowForward}
+                size="xs"
+                customColour={pressed ? linkColour.hover : linkColour.default}
+              />
             )}
           </>
         )}

package/src/components/atoms/Logo/Logo.registry.ts

@@ -1,4 +1,17 @@
 import React from "react"
+import {
+  BCorp,
+  ButternutFavicon,
+  ButternutPrimary,
+  ButternutTabbedBottom,
+  ButternutTabbedTop,
+  ButternutWordmark,
+  PsiBufetFavicon,
+  PsiBufetPrimary,
+  PsiBufetTabbedBottom,
+  PsiBufetTabbedTop,
+  PsiBufetWordmark
+} from "./assets"
 import type { LogoBrand, LogoVariant } from "./Logo"
 
 type LogoSvgComponent = React.ComponentType<{
@@ -6,15 +19,27 @@ type LogoSvgComponent = React.ComponentType<{
   height?: number
 }>
 
-// Logo registry - consumers should register their logo components here
-// or provide them via a registration function
 const LOGOS: Record<
   LogoBrand,
   Partial<Record<LogoVariant, LogoSvgComponent>>
 > = {
-  butternut: {},
-  psibufet: {},
-  bcorp: {}
+  butternut: {
+    wordmark: ButternutWordmark,
+    primary: ButternutPrimary,
+    "tabbed-top": ButternutTabbedTop,
+    "tabbed-bottom": ButternutTabbedBottom,
+    favicon: ButternutFavicon
+  },
+  psibufet: {
+    wordmark: PsiBufetWordmark,
+    primary: PsiBufetPrimary,
+    "tabbed-top": PsiBufetTabbedTop,
+    "tabbed-bottom": PsiBufetTabbedBottom,
+    favicon: PsiBufetFavicon
+  },
+  bcorp: {
+    primary: BCorp
+  }
 }
 
 function resolveLogo(

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

@@ -0,0 +1,108 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Logo } from "./Logo"
+import type { LogoProps, LogoBrand, LogoVariant } from "./Logo"
+
+export default {
+  title: "Atoms/Logo",
+  component: Logo,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Renders a brand logo SVG for ButternutBox, PsiBufet, or BCorp."
+      }
+    }
+  },
+  argTypes: {
+    brand: {
+      control: { type: "select" },
+      options: ["butternut", "psibufet", "bcorp"],
+      description: "Brand identity"
+    },
+    variant: {
+      control: { type: "select" },
+      options: [
+        "wordmark",
+        "primary",
+        "tabbed-top",
+        "tabbed-bottom",
+        "favicon"
+      ],
+      description: "Logo variant"
+    }
+  }
+}
+
+const variants: LogoVariant[] = [
+  "wordmark",
+  "primary",
+  "tabbed-top",
+  "tabbed-bottom",
+  "favicon"
+]
+
+const brands: LogoBrand[] = ["butternut", "psibufet"]
+
+export const Default = (args: LogoProps) => <Logo {...args} />
+Default.args = {
+  brand: "butternut",
+  variant: "primary",
+  "aria-label": "ButternutBox"
+}
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {variants.map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Text style={styles.label}>{variant}</Text>
+        <Logo
+          brand="butternut"
+          variant={variant}
+          aria-label={`Butternut ${variant}`}
+        />
+      </View>
+    ))}
+  </View>
+)
+
+export const AllBrands = () => (
+  <View style={styles.column}>
+    {brands.map((brand) => (
+      <View key={brand} style={styles.section}>
+        <Text style={styles.label}>{brand}</Text>
+        <Logo brand={brand} variant="primary" aria-label={brand} />
+      </View>
+    ))}
+  </View>
+)
+
+export const BCorp = () => (
+  <View style={styles.section}>
+    <Text style={styles.label}>BCorp</Text>
+    <Logo brand="bcorp" aria-label="B Corp Certified" />
+  </View>
+)
+
+export const Playground = (args: LogoProps) => <Logo {...args} />
+Playground.args = {
+  brand: "butternut",
+  variant: "primary",
+  "aria-label": "Playground logo"
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#666"
+  }
+})

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

@@ -0,0 +1,56 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect, vi } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Logo } from "./Logo"
+
+const MockLogo = () => <svg data-testid="logo-svg" />
+
+vi.mock("./Logo.registry", () => ({
+  resolveLogo: (_brand: string, _variant: string) => MockLogo
+}))
+
+describe("Logo", () => {
+  describe("when component is rendering", () => {
+    it("renders the logo", () => {
+      renderWithTheme(<Logo brand="butternut" />)
+      expect(screen.getByTestId("logo-svg")).toBeInTheDocument()
+    })
+
+    it("renders with primary variant by default", () => {
+      renderWithTheme(<Logo brand="butternut" />)
+      expect(screen.getByTestId("logo-svg")).toBeInTheDocument()
+    })
+  })
+
+  describe("when rendering different brands", () => {
+    it.each(["butternut", "psibufet", "bcorp"] as const)(
+      "renders %s brand",
+      (brand) => {
+        renderWithTheme(<Logo brand={brand} />)
+        expect(screen.getByTestId("logo-svg")).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("accessibility", () => {
+    it("sets image role when aria-label is provided", () => {
+      renderWithTheme(<Logo brand="butternut" aria-label="ButternutBox" />)
+      expect(screen.getByRole("image")).toBeInTheDocument()
+      expect(screen.getByLabelText("ButternutBox")).toBeInTheDocument()
+    })
+
+    it("does not set role when aria-label is not provided", () => {
+      renderWithTheme(<Logo brand="butternut" />)
+      expect(screen.queryByRole("image")).not.toBeInTheDocument()
+    })
+  })
+
+  describe("when using with ref", () => {
+    it("forwards ref", () => {
+      const ref = React.createRef<any>()
+      renderWithTheme(<Logo ref={ref} brand="butternut" />)
+      expect(ref.current).toBeTruthy()
+    })
+  })
+})