@butternutbox/pawprint-native 0.0.1

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

@@ -0,0 +1,200 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Icon } from "./Icon"
+import type { IconProps, PawprintIcon, IconColour, IconSize } from "./Icon"
+import * as core from "@butternutbox/pawprint-icons/core"
+import * as marketing from "@butternutbox/pawprint-icons/marketing"
+import * as payments from "@butternutbox/pawprint-icons/payments"
+import * as flags from "@butternutbox/pawprint-icons/flags"
+
+type IconCategory = "core" | "marketing" | "payments" | "flags"
+
+function isComponent(value: unknown): value is PawprintIcon {
+  if (typeof value === "function") return true
+  if (value && typeof value === "object" && "$$typeof" in value) return true
+  return false
+}
+
+const categorised: Record<IconCategory, Record<string, unknown>> = {
+  core,
+  marketing,
+  payments,
+  flags
+}
+
+const iconMap: Record<string, PawprintIcon> = {}
+for (const [category, mod] of Object.entries(categorised)) {
+  for (const [name, value] of Object.entries(mod)) {
+    if (isComponent(value)) {
+      iconMap[`${category}/${name}`] = value
+    }
+  }
+}
+
+const iconNames = Object.keys(iconMap)
+const defaultIcon = iconNames[0]!
+
+export default {
+  title: "Atoms/Icon",
+  component: Icon,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg", "xl", "2xl"] as IconSize[],
+      description: "Size variant based on design tokens"
+    },
+    colour: {
+      control: { type: "select" },
+      options: [
+        "primary",
+        "secondary",
+        "disabled",
+        "success",
+        "warning",
+        "error",
+        "promo",
+        "info",
+        "alt",
+        "action-default",
+        "action-inverse"
+      ] as IconColour[],
+      description: "Semantic colour from icon tokens"
+    },
+    icon: {
+      control: { type: "select" },
+      options: iconNames,
+      mapping: iconMap,
+      description: "Icon component from pawprint-icons"
+    }
+  }
+}
+
+export const Default = (args: Omit<IconProps, "icon"> & { icon?: string }) => (
+  <Icon
+    icon={
+      (iconMap[args.icon ?? defaultIcon] ??
+        iconMap[defaultIcon]) as PawprintIcon
+    }
+    size={args.size}
+    colour={args.colour}
+    aria-label="Icon"
+  />
+)
+Default.args = {
+  icon: defaultIcon,
+  size: "md",
+  colour: "primary"
+}
+
+const sizes: IconSize[] = ["xs", "sm", "md", "lg", "xl", "2xl"]
+
+export const AllSizes = () => {
+  const sampleIcon = iconMap[defaultIcon] as PawprintIcon
+  return (
+    <View style={styles.column}>
+      <Text style={styles.label}>Sizes</Text>
+      <View style={styles.row}>
+        {sizes.map((size) => (
+          <View key={size} style={styles.cell}>
+            <Icon icon={sampleIcon} size={size} colour="primary" />
+            <Text style={styles.sizeLabel}>{size}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+const colours: IconColour[] = [
+  "primary",
+  "secondary",
+  "disabled",
+  "success",
+  "warning",
+  "error",
+  "promo",
+  "info",
+  "alt",
+  "action-default",
+  "action-inverse"
+]
+
+export const AllColours = () => {
+  const sampleIcon = iconMap[defaultIcon] as PawprintIcon
+  return (
+    <View style={styles.column}>
+      <Text style={styles.label}>Colours</Text>
+      <View style={styles.row}>
+        {colours.map((colour) => (
+          <View key={colour} style={styles.cell}>
+            <Icon icon={sampleIcon} size="md" colour={colour} />
+            <Text style={styles.sizeLabel}>{colour}</Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}
+
+export const AllIcons = () => (
+  <View style={styles.column}>
+    {Object.entries(categorised).map(([category, mod]) => (
+      <View key={category} style={styles.section}>
+        <Text style={styles.label}>{category}</Text>
+        <View style={styles.grid}>
+          {Object.entries(mod)
+            .filter(([, value]) => isComponent(value))
+            .map(([name, Component]) => (
+              <View key={name} style={styles.cell}>
+                <Icon
+                  icon={Component as PawprintIcon}
+                  size="md"
+                  colour="primary"
+                />
+                <Text style={styles.sizeLabel} numberOfLines={1}>
+                  {name}
+                </Text>
+              </View>
+            ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    gap: 16,
+    alignItems: "center",
+    flexWrap: "wrap"
+  },
+  grid: {
+    flexDirection: "row",
+    gap: 12,
+    flexWrap: "wrap"
+  },
+  cell: {
+    alignItems: "center",
+    gap: 4,
+    minWidth: 48
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#666"
+  },
+  sizeLabel: {
+    fontSize: 10,
+    color: "#999",
+    textAlign: "center"
+  }
+})

package/src/components/atoms/Icon/Icon.tsx

@@ -0,0 +1,112 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+
+type IconCategory = "core" | "marketing" | "payments" | "flags"
+type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+type IconColour =
+  | "primary"
+  | "secondary"
+  | "disabled"
+  | "success"
+  | "warning"
+  | "error"
+  | "promo"
+  | "info"
+  | "alt"
+  | "action-default"
+  | "action-inverse"
+
+type PawprintIcon = React.ComponentType<{
+  width?: number
+  height?: number
+  color?: string
+}> & {
+  category?: IconCategory
+}
+
+type IconOwnProps = {
+  icon: PawprintIcon
+  size?: IconSize
+  colour?: IconColour
+  "aria-label"?: string
+}
+
+type IconProps = IconOwnProps & Omit<ViewProps, keyof IconOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledIconRoot = styled(View)<{
+  iconDimension: number
+}>(({ iconDimension }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: iconDimension,
+  height: iconDimension
+}))
+
+/**
+ * Renders an SVG icon with token-based sizing and colour.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from "@butternutbox/pawprint-native"
+ * import { ArrowRight } from "@butternutbox/pawprint-icons/core"
+ *
+ * <Icon icon={ArrowRight} size="md" colour="primary" aria-label="Go forward" />
+ * ```
+ *
+ * @param icon - **(required)** Icon component from `@butternutbox/pawprint-icons/{category}`
+ * @param size - *(optional)* Size variant: xs, sm, md (default), lg, xl, 2xl
+ * @param colour - *(optional)* Colour variant from semantic icon tokens (default: primary)
+ * @param aria-label - *(optional)* Accessible label; omit for decorative icons
+ */
+const Icon = React.forwardRef<View, IconProps>(
+  (
+    {
+      icon: IconComponent,
+      size = "md",
+      colour = "primary",
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const category = (IconComponent as PawprintIcon).category || "core"
+
+    const iconTokens = theme.tokens.semantics.colour.icon
+    let color: string
+    if (colour === "action-default") {
+      color = iconTokens.action.default
+    } else if (colour === "action-inverse") {
+      color = iconTokens.action.inverse
+    } else {
+      color = iconTokens[colour]
+    }
+
+    const sizing = theme.tokens.components.icons.sizing.icons
+    const categorySizing = sizing[category] as unknown as Record<string, string>
+    const dimension = parseTokenValue(categorySizing[size])
+
+    return (
+      <StyledIconRoot
+        ref={ref}
+        iconDimension={dimension}
+        accessibilityRole={ariaLabel ? "image" : undefined}
+        accessibilityLabel={ariaLabel}
+        accessible={!!ariaLabel}
+        {...rest}
+      >
+        <IconComponent width={dimension} height={dimension} color={color} />
+      </StyledIconRoot>
+    )
+  }
+)
+
+Icon.displayName = "Icon"
+
+export { Icon }
+export type { IconProps, PawprintIcon, IconCategory, IconSize, IconColour }

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

@@ -0,0 +1,8 @@
+export { Icon } from "./Icon"
+export type {
+  IconProps,
+  PawprintIcon,
+  IconCategory,
+  IconSize,
+  IconColour
+} from "./Icon"

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

@@ -0,0 +1,162 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { IconButton } from "./IconButton"
+import type { IconButtonProps } from "./IconButton"
+import { Typography } from "../Typography"
+
+const PlaceholderIcon = ({
+  width,
+  height,
+  color
+}: {
+  width?: number
+  height?: number
+  color?: string
+}) => (
+  <View
+    style={{
+      width: width || 24,
+      height: height || 24,
+      borderRadius: 4,
+      backgroundColor: color || "#000"
+    }}
+  />
+)
+
+export default {
+  title: "Atoms/IconButton",
+  component: IconButton,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["filled", "outlined", "text"],
+      description: "Visual style variant"
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size of the button"
+    },
+    colour: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "tertiary"],
+      description: "Colour scheme"
+    },
+    loading: {
+      control: { type: "boolean" },
+      description: "Shows spinner and disables interaction"
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Prevents interaction"
+    }
+  }
+}
+
+export const Playground = (args: Partial<IconButtonProps>) => (
+  <IconButton
+    icon={PlaceholderIcon}
+    aria-label="Placeholder action"
+    {...args}
+  />
+)
+Playground.args = {
+  variant: "filled",
+  size: "md",
+  colour: "primary",
+  loading: false,
+  disabled: false
+}
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {variant}
+        </Typography>
+        <View style={styles.row}>
+          {(["primary", "secondary", "tertiary"] as const).map((colour) => (
+            <IconButton
+              key={colour}
+              icon={PlaceholderIcon}
+              variant={variant}
+              colour={colour}
+              aria-label={`${variant} ${colour}`}
+            />
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const AllSizes = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {variant}
+        </Typography>
+        <View style={styles.row}>
+          {(["sm", "md", "lg"] as const).map((size) => (
+            <IconButton
+              key={size}
+              icon={PlaceholderIcon}
+              variant={variant}
+              size={size}
+              aria-label={`${variant} ${size}`}
+            />
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const AllStates = () => (
+  <View style={styles.column}>
+    {(["filled", "outlined", "text"] as const).map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {variant}
+        </Typography>
+        <View style={styles.row}>
+          <IconButton
+            icon={PlaceholderIcon}
+            variant={variant}
+            aria-label={`${variant} default`}
+          />
+          <IconButton
+            icon={PlaceholderIcon}
+            variant={variant}
+            disabled
+            aria-label={`${variant} disabled`}
+          />
+          <IconButton
+            icon={PlaceholderIcon}
+            variant={variant}
+            loading
+            aria-label={`${variant} loading`}
+          />
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    alignItems: "center"
+  }
+})

package/src/components/atoms/IconButton/IconButton.tsx

@@ -0,0 +1,227 @@
+import React from "react"
+import { Pressable, View, PressableProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Spinner } from "../Spinner"
+import type { PawprintIcon } from "../Icon"
+
+type IconButtonVariant = "filled" | "outlined" | "text"
+type IconButtonSize = "sm" | "md" | "lg"
+type IconButtonColour = "primary" | "secondary" | "tertiary"
+
+type IconButtonOwnProps = {
+  icon: PawprintIcon
+  variant?: IconButtonVariant
+  size?: IconButtonSize
+  colour?: IconButtonColour
+  loading?: boolean
+  disabled?: boolean
+  "aria-label": string
+}
+
+type IconButtonProps = IconButtonOwnProps &
+  Omit<PressableProps, keyof IconButtonOwnProps | "children">
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const sizeToIconSizeToken = {
+  lg: "xl",
+  md: "lg",
+  sm: "md"
+} as const
+
+const StyledIconButton = styled(Pressable)<{
+  buttonDimension: number
+  buttonBorderRadius: number
+  buttonBgColor: string
+  buttonOpacity: number
+  buttonBorderWidth?: number
+  buttonBorderColor?: string
+}>(
+  ({
+    buttonDimension,
+    buttonBorderRadius,
+    buttonBgColor,
+    buttonOpacity,
+    buttonBorderWidth,
+    buttonBorderColor
+  }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    width: buttonDimension,
+    height: buttonDimension,
+    borderRadius: buttonBorderRadius,
+    backgroundColor: buttonBgColor,
+    opacity: buttonOpacity,
+    ...(buttonBorderWidth
+      ? { borderWidth: buttonBorderWidth, borderColor: buttonBorderColor }
+      : {})
+  })
+)
+
+const StyledIconWrapper = styled(View)<{
+  iconDimension: number
+  iconOpacity: number
+}>(({ iconDimension, iconOpacity }) => ({
+  width: iconDimension,
+  height: iconDimension,
+  opacity: iconOpacity
+}))
+
+const StyledSpinnerWrapper = styled(View)({
+  position: "absolute",
+  alignItems: "center",
+  justifyContent: "center"
+})
+
+/**
+ * A circular icon-only button with token-based styling.
+ *
+ * @example
+ * ```tsx
+ * import { IconButton } from "@butternutbox/pawprint-native"
+ * import { Add } from "@butternutbox/pawprint-icons/core"
+ *
+ * <IconButton icon={Add} aria-label="Add item" />
+ * <IconButton icon={Add} variant="outlined" aria-label="Add item" />
+ * ```
+ *
+ * @param icon - **(required)** Icon component
+ * @param variant - *(optional)* Visual variant: filled (default), outlined, or text.
+ * @param size - *(optional)* Size variant: sm, md (default), lg
+ * @param colour - *(optional)* Colour variant: primary (default), secondary, tertiary
+ * @param loading - *(optional)* Shows spinner and disables interaction
+ * @param aria-label - **(required)** Accessible label for the button
+ */
+const IconButton = React.forwardRef<View, IconButtonProps>(
+  (
+    {
+      icon: IconComponent,
+      variant = "filled",
+      size = "md",
+      colour = "primary",
+      loading = false,
+      disabled,
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const isDisabled = disabled || loading
+    const buttons = theme.tokens.components.buttons
+    const sizeTokens = buttons.size[size]
+    const dimension = parseTokenValue(sizeTokens.height)
+    const iconSizing = theme.tokens.components.icons.sizing.icons.core
+    const iconDimension = parseTokenValue(iconSizing[sizeToIconSizeToken[size]])
+
+    const [pressed, setPressed] = React.useState(false)
+
+    const getVariantStyles = (
+      isPressed: boolean
+    ): {
+      backgroundColor: string
+      borderWidth?: number
+      borderColor?: string
+      iconColor: string
+    } => {
+      if (variant === "filled") {
+        const filled = buttons.iconButton.filledButton
+        const bgTokens = filled.colour.background[colour]
+        const iconTokens = filled.colour.icon[colour]
+        const hasStatefulIconColor =
+          "hover" in (iconTokens as unknown as Record<string, unknown>)
+        return {
+          backgroundColor: isDisabled
+            ? bgTokens.disabled
+            : loading || isPressed
+              ? bgTokens.selected
+              : bgTokens.default,
+          iconColor:
+            (loading || isPressed) && hasStatefulIconColor
+              ? (iconTokens as unknown as Record<string, string>).selected
+              : (iconTokens as unknown as Record<string, string>).default
+        }
+      }
+
+      if (variant === "outlined") {
+        const outline = buttons.iconButton.outlineButton
+        return {
+          backgroundColor:
+            loading || isPressed
+              ? outline.colour.background.selected
+              : "transparent",
+          borderWidth: parseTokenValue(outline.border.default),
+          borderColor: outline.colour.border.default,
+          iconColor:
+            loading || isPressed
+              ? outline.colour.icon.selected
+              : outline.colour.icon.default
+        }
+      }
+
+      // text variant
+      const text = buttons.iconButton.textButton
+      return {
+        backgroundColor:
+          loading || isPressed ? text.background.selected : "transparent",
+        iconColor: loading || isPressed ? text.icon.selected : text.icon.default
+      }
+    }
+
+    const variantStyles = getVariantStyles(pressed)
+
+    return (
+      <StyledIconButton
+        ref={ref}
+        disabled={isDisabled}
+        accessibilityLabel={ariaLabel}
+        accessibilityState={{ disabled: isDisabled, busy: loading }}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+        buttonDimension={dimension}
+        buttonBorderRadius={parseTokenValue(buttons.borderRadius.default)}
+        buttonBgColor={variantStyles.backgroundColor}
+        buttonOpacity={
+          isDisabled && !loading ? parseFloat(buttons.opacity.disabled) : 1
+        }
+        buttonBorderWidth={variantStyles.borderWidth}
+        buttonBorderColor={variantStyles.borderColor}
+        {...rest}
+      >
+        <StyledIconWrapper
+          iconDimension={iconDimension}
+          iconOpacity={loading ? 0 : 1}
+        >
+          <IconComponent
+            width={iconDimension}
+            height={iconDimension}
+            color={variantStyles.iconColor}
+          />
+        </StyledIconWrapper>
+        {loading && (
+          <StyledSpinnerWrapper>
+            <Spinner
+              size={size}
+              style={{
+                borderColor: "transparent",
+                borderTopColor: "currentColor"
+              }}
+            />
+          </StyledSpinnerWrapper>
+        )}
+      </StyledIconButton>
+    )
+  }
+)
+
+IconButton.displayName = "IconButton"
+
+export { IconButton }
+export type {
+  IconButtonProps,
+  IconButtonVariant,
+  IconButtonSize,
+  IconButtonColour
+}