@butternutbox/pawprint-native 0.0.1 → 0.2.0

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

@@ -0,0 +1,304 @@
+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"
+import type { InputState } from "../Input/InputField"
+
+type TextAreaFieldOwnProps = {
+  leadingIcon?: React.ReactNode
+  trailingIcon?: React.ReactNode
+  state?: InputState
+  hideStateIcons?: boolean
+  rows?: number
+}
+
+export type TextAreaFieldProps = TextAreaFieldOwnProps &
+  Omit<TextInputProps, keyof TextAreaFieldOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledTextAreaWrapper = styled(Animated.View)<{
+  isDisabled: boolean
+}>(({ theme, isDisabled }) => {
+  const { spacing, colour, borderRadius, size } = theme.tokens.components.inputs
+  const { dimensions } = theme.tokens.semantics
+
+  return {
+    flexDirection: "column",
+    gap: parseTokenValue(spacing.field.gap),
+    width: "100%",
+    minWidth: parseTokenValue(size.field.minWidth),
+    minHeight: parseTokenValue(dimensions.sizing["3xl"]),
+    backgroundColor: isDisabled
+      ? colour.field.background.inactive
+      : colour.field.background.default,
+    borderRadius: parseTokenValue(borderRadius.field.default),
+    position: "relative"
+  }
+})
+
+const StyledTextArea = styled(TextInput)(({ theme }) => {
+  const { colour } = theme.tokens.components.inputs
+  return {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 0,
+    padding: 0,
+    color: colour.field.text.default,
+    textAlignVertical: "top",
+    // 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 TextAreaContainer = styled(View)({
+  position: "relative",
+  width: "100%",
+  flex: 1,
+  flexDirection: "column"
+})
+
+const IconWrapper = styled(View)<{ side: "left" | "right" }>(({ side }) => {
+  return {
+    position: "absolute",
+    top: 0,
+    [side]: 0,
+    alignItems: "center",
+    justifyContent: "flex-start",
+    flexShrink: 0,
+    zIndex: 1
+  }
+})
+
+/**
+ * TextAreaField component - Multi-line text input field with icons and visual states.
+ *
+ * @param {React.ReactNode} [leadingIcon] - Icon to display at the start of the textarea (top-left, should be 24px)
+ * @param {React.ReactNode} [trailingIcon] - Icon to display at the end of the textarea (top-right, overrides automatic state icons)
+ * @param {InputState} [state] - Visual state of the textarea (default, error, success)
+ * @param {boolean} [hideStateIcons] - Hide automatic error/success icons
+ * @param {number} [rows=2] - Number of visible text rows (used to calculate minHeight)
+ */
+export const TextAreaField = React.forwardRef<TextInput, TextAreaFieldProps>(
+  (
+    {
+      leadingIcon,
+      trailingIcon,
+      state = "default",
+      hideStateIcons,
+      rows = 2,
+      style,
+      editable,
+      onFocus,
+      onBlur,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { spacing, colour, borderWidth, borderRadius, size } =
+      theme.tokens.components.inputs
+    const { dimensions } = theme.tokens.semantics
+    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
+
+    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 }
+    }
+
+    const stateIconConfig = state !== "default" ? stateIconMap[state] : null
+
+    // Trailing icons should be 16px (sm), leading icons 24px (md)
+    const effectiveTrailingIcon =
+      trailingIcon ||
+      (!hideStateIcons && stateIconConfig ? (
+        <Icon
+          icon={stateIconConfig.icon}
+          size="sm"
+          colour={stateIconConfig.colour}
+        />
+      ) : 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()
+    }
+
+    const fieldHeight = parseTokenValue(size.field.height)
+    const textAreaMinHeight = fieldHeight
+
+    // Calculate icon padding using tokens
+    const iconGap = parseTokenValue(spacing.field.gap)
+    const leadingIconSize = parseTokenValue(dimensions.sizing.xl) // 24px
+    const trailingIconSize = parseTokenValue(dimensions.sizing.md) // 16px
+    const leadingIconPadding = leadingIconSize + iconGap
+    const trailingIconPadding = trailingIconSize + iconGap
+
+    return (
+      <Pressable onPress={handleWrapperPress}>
+        <StyledTextAreaWrapper
+          isDisabled={isDisabled}
+          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
+              }}
+            />
+          )}
+          <TextAreaContainer>
+            {leadingIcon && (
+              <IconWrapper side="left">{leadingIcon}</IconWrapper>
+            )}
+            {effectiveTrailingIcon && (
+              <IconWrapper side="right">{effectiveTrailingIcon}</IconWrapper>
+            )}
+            <View
+              style={{
+                flex: 1,
+                paddingLeft: leadingIcon ? leadingIconPadding : 0,
+                paddingRight: effectiveTrailingIcon ? trailingIconPadding : 0
+              }}
+            >
+              <StyledTextArea
+                ref={combinedRef}
+                style={[
+                  style,
+                  {
+                    minHeight: textAreaMinHeight
+                  }
+                ]}
+                placeholderTextColor={colour.field.text.placeholder}
+                editable={editable}
+                multiline
+                numberOfLines={rows}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                {...rest}
+              />
+            </View>
+          </TextAreaContainer>
+        </StyledTextAreaWrapper>
+      </Pressable>
+    )
+  }
+)
+
+TextAreaField.displayName = "TextArea.Field"

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

@@ -0,0 +1,103 @@
+import React from "react"
+import { View } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+import { Icon } from "../Icon"
+import { Error as ErrorIcon } from "@butternutbox/pawprint-icons/core"
+import type { InputState } from "../Input/InputField"
+
+type TextAreaLabelOwnProps = {
+  optionalText?: string
+  state?: InputState
+  children: React.ReactNode
+  maxLength?: number
+  currentLength?: number
+}
+
+export type TextAreaLabelProps = TextAreaLabelOwnProps
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledLabelWrapper = styled(View)({
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%"
+})
+
+const StyledLabel = styled(View)<{ labelGap: number }>(({ labelGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: labelGap
+}))
+
+const StyledCharCountWrapper = styled(View)<{
+  charCountGap: number
+  charCountPadding: number
+}>(({ charCountGap, charCountPadding }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: charCountGap,
+  paddingLeft: charCountPadding
+}))
+
+export const TextAreaLabel = React.forwardRef<View, TextAreaLabelProps>(
+  (
+    {
+      optionalText,
+      state = "default",
+      children,
+      maxLength,
+      currentLength,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { colour, text, spacing } = theme.tokens.components.inputs
+
+    const showCharacterCount =
+      maxLength !== undefined && currentLength !== undefined
+    const isOverLimit =
+      currentLength !== undefined &&
+      maxLength !== undefined &&
+      currentLength > maxLength
+
+    return (
+      <StyledLabelWrapper ref={ref} {...rest}>
+        <StyledLabel labelGap={parseTokenValue(spacing.label.gap)}>
+          <Typography
+            token={text.label}
+            color={
+              state === "error" ? colour.label.error : colour.label.default
+            }
+          >
+            {children}
+          </Typography>
+          {optionalText && (
+            <Typography token={text.optional} color={colour.label.optional}>
+              {optionalText}
+            </Typography>
+          )}
+        </StyledLabel>
+        {showCharacterCount && (
+          <StyledCharCountWrapper
+            charCountGap={parseTokenValue(spacing.field.gap)}
+            charCountPadding={parseTokenValue(spacing.description.leftPadding)}
+          >
+            {isOverLimit && <Icon icon={ErrorIcon} size="sm" colour="error" />}
+            <Typography
+              token={text.characterCount}
+              color={colour.characterCount.default}
+            >
+              {currentLength}/{maxLength}
+            </Typography>
+          </StyledCharCountWrapper>
+        )}
+      </StyledLabelWrapper>
+    )
+  }
+)
+
+TextAreaLabel.displayName = "TextArea.Label"

package/src/components/atoms/TextArea/index.ts

@@ -0,0 +1,6 @@
+export { TextArea } from "./TextArea"
+export type { TextAreaProps } from "./TextArea"
+export { TextAreaField } from "./TextAreaField"
+export type { TextAreaFieldProps } from "./TextAreaField"
+export { TextAreaLabel } from "./TextAreaLabel"
+export type { TextAreaLabelProps } from "./TextAreaLabel"

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

@@ -0,0 +1,94 @@
+import React from "react"
+import { screen } from "@testing-library/react"
+import { describe, it, expect } from "vitest"
+import { renderWithTheme } from "../../../test-utils"
+import { Typography } from "./Typography"
+
+describe("Typography", () => {
+  describe("when component is rendering", () => {
+    it("renders children text", () => {
+      renderWithTheme(<Typography>Hello world</Typography>)
+      expect(screen.getByText("Hello world")).toBeInTheDocument()
+    })
+
+    it("renders with default body variant", () => {
+      renderWithTheme(<Typography>Body text</Typography>)
+      expect(screen.getByText("Body text")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using semantic variants", () => {
+    it("renders body variant", () => {
+      renderWithTheme(<Typography variant="body">Body</Typography>)
+      expect(screen.getByText("Body")).toBeInTheDocument()
+    })
+
+    it("renders heading variant", () => {
+      renderWithTheme(<Typography variant="heading">Heading</Typography>)
+      expect(screen.getByText("Heading")).toBeInTheDocument()
+    })
+
+    it("renders display variant", () => {
+      renderWithTheme(<Typography variant="display">Display</Typography>)
+      expect(screen.getByText("Display")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using body sizes", () => {
+    it.each(["xs", "sm", "md", "lg"] as const)(
+      "renders body size %s",
+      (size) => {
+        renderWithTheme(<Typography size={size}>Size {size}</Typography>)
+        expect(screen.getByText(`Size ${size}`)).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when using body weights", () => {
+    it.each(["medium", "semiBold", "bold"] as const)(
+      "renders weight %s",
+      (weight) => {
+        renderWithTheme(<Typography weight={weight}>Weight</Typography>)
+        expect(screen.getByText("Weight")).toBeInTheDocument()
+      }
+    )
+  })
+
+  describe("when using token mode", () => {
+    it("renders with a token object", () => {
+      renderWithTheme(
+        <Typography
+          token={{
+            fontFamily: "IBM Plex Sans Condensed",
+            fontWeight: "500",
+            fontSize: "16",
+            lineHeight: "24"
+          }}
+          color="#000000"
+        >
+          Token text
+        </Typography>
+      )
+      expect(screen.getByText("Token text")).toBeInTheDocument()
+    })
+  })
+
+  describe("when using common props", () => {
+    it("renders with noWrap", () => {
+      renderWithTheme(<Typography noWrap>Truncated</Typography>)
+      expect(screen.getByText("Truncated")).toBeInTheDocument()
+    })
+
+    it("renders with textTransform", () => {
+      renderWithTheme(<Typography textTransform="uppercase">upper</Typography>)
+      expect(screen.getByText("upper")).toBeInTheDocument()
+    })
+
+    it("renders with textDecoration", () => {
+      renderWithTheme(
+        <Typography textDecoration="underline">underlined</Typography>
+      )
+      expect(screen.getByText("underlined")).toBeInTheDocument()
+    })
+  })
+})

package/src/components/atoms/index.ts

@@ -1,4 +1,5 @@
 export * from "./Avatar"
+export * from "./CarouselControls"
 export * from "./Typography"
 export * from "./Badge"
 export * from "./Button"
@@ -9,6 +10,8 @@ export * from "./Illustration"
 export * from "./Input"
 export * from "./Link"
 export * from "./Logo"
+export * from "./NumberInput"
 export * from "./Spinner"
 export * from "./Switch"
 export * from "./Tag"
+export * from "./TextArea"

package/src/components/molecules/Accordion/Accordion.stories.tsx

@@ -0,0 +1,177 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Accordion } from "./Accordion"
+import type { AccordionProps } from "./Accordion"
+
+export default {
+  title: "Molecules/Accordion",
+  component: Accordion,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A vertically stacked list of items that reveal or hide content when clicked."
+      }
+    }
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "large"],
+      description: "Title size variant"
+    },
+    multiple: {
+      control: { type: "boolean" },
+      description: "Allow multiple items open simultaneously"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Disables all items"
+    }
+  }
+}
+
+const faqItems = [
+  {
+    title: "What ingredients do you use?",
+    content:
+      "We use 60% human-quality protein paired with fresh vegetables and wholesome grains."
+  },
+  {
+    title: "How is the food delivered?",
+    content:
+      "Your order is fresh-frozen and delivered straight to your door in an insulated box."
+  },
+  {
+    title: "Is it suitable for puppies?",
+    content:
+      "Yes! Our recipes are nutritionally complete for all life stages, including puppies over 4 months."
+  }
+]
+
+export const Small = () => (
+  <Accordion size="small">
+    {faqItems.map((item) => (
+      <Accordion.Item key={item.title} title={item.title}>
+        {item.content}
+      </Accordion.Item>
+    ))}
+  </Accordion>
+)
+
+export const Large = () => (
+  <Accordion size="large">
+    {faqItems.map((item) => (
+      <Accordion.Item key={item.title} title={item.title}>
+        {item.content}
+      </Accordion.Item>
+    ))}
+  </Accordion>
+)
+
+export const Multiple = () => (
+  <Accordion multiple>
+    {faqItems.map((item) => (
+      <Accordion.Item key={item.title} title={item.title}>
+        {item.content}
+      </Accordion.Item>
+    ))}
+  </Accordion>
+)
+
+export const DefaultOpen = () => (
+  <Accordion defaultValue={["ingredients"]}>
+    <Accordion.Item value="ingredients" title="What ingredients do you use?">
+      We use 60% human-quality protein paired with fresh vegetables and
+      wholesome grains.
+    </Accordion.Item>
+    <Accordion.Item value="delivery" title="How is the food delivered?">
+      Your order is fresh-frozen and delivered straight to your door in an
+      insulated box.
+    </Accordion.Item>
+    <Accordion.Item value="puppies" title="Is it suitable for puppies?">
+      Yes! Our recipes are nutritionally complete for all life stages, including
+      puppies over 4 months.
+    </Accordion.Item>
+  </Accordion>
+)
+
+export const Disabled = () => (
+  <Accordion disabled>
+    {faqItems.slice(0, 2).map((item) => (
+      <Accordion.Item key={item.title} title={item.title}>
+        {item.content}
+      </Accordion.Item>
+    ))}
+  </Accordion>
+)
+
+export const AllStates = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Text style={styles.label}>Default (closed)</Text>
+      <Accordion>
+        <Accordion.Item title="Accordion title">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Accordion.Item>
+      </Accordion>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={styles.label}>Open</Text>
+      <Accordion defaultValue={["open-item"]}>
+        <Accordion.Item value="open-item" title="Accordion title">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Accordion.Item>
+      </Accordion>
+    </View>
+
+    <View style={styles.section}>
+      <Text style={styles.label}>Multiple items</Text>
+      <Accordion>
+        <Accordion.Item title="Accordion title one">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </Accordion.Item>
+        <Accordion.Item title="Accordion title two">
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </Accordion.Item>
+        <Accordion.Item title="Accordion title three">
+          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+        </Accordion.Item>
+      </Accordion>
+    </View>
+  </View>
+)
+
+export const Playground = (args: AccordionProps) => (
+  <Accordion {...args}>
+    {faqItems.map((item) => (
+      <Accordion.Item key={item.title} title={item.title}>
+        {item.content}
+      </Accordion.Item>
+    ))}
+  </Accordion>
+)
+Playground.args = {
+  size: "small",
+  multiple: false,
+  disabled: false
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 12
+  },
+  label: {
+    fontSize: 12,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    color: "#999"
+  }
+})