@butternutbox/pawprint-native 0.0.1

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,159 @@
+import React from "react"
+import { View } from "react-native"
+import * as AvatarPrimitive from "@rn-primitives/avatar"
+import styled from "@emotion/native"
+import { Typography } from "../Typography"
+
+export type AvatarSize = "sm" | "md" | "lg"
+export type AvatarBorder = "none" | "sm" | "md"
+export type AvatarFallbackType = "string" | "image"
+
+export interface AvatarProps {
+  src?: string
+  alt: string
+  size?: AvatarSize
+  border?: AvatarBorder
+  fallbackType?: AvatarFallbackType
+  fallbackString?: string
+}
+
+const SIZE_MAP = {
+  sm: "small",
+  md: "medium",
+  lg: "large"
+} as const
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(AvatarPrimitive.Root)<{
+  size: AvatarSize
+  border: AvatarBorder
+}>(({ theme, size, border }) => {
+  const { avatar } = theme.tokens.components
+  const { borderRadius } = theme.tokens.semantics.dimensions
+
+  const tokenSize = SIZE_MAP[size]
+  const avatarSize = parseTokenValue(avatar.size[tokenSize])
+
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: parseTokenValue(borderRadius.round),
+    width: avatarSize,
+    height: avatarSize,
+    ...(border !== "none" && {
+      borderWidth: parseTokenValue(
+        avatar.borderWidth[border === "sm" ? "small" : "medium"]
+      ),
+      borderColor: avatar.colour.border.default,
+      borderStyle: "solid" as const
+    })
+  }
+})
+
+const StyledImage = styled(AvatarPrimitive.Image)({
+  width: "100%",
+  height: "100%",
+  resizeMode: "cover"
+})
+
+const StyledFallback = styled(AvatarPrimitive.Fallback)(({ theme }) => {
+  const { background, text } = theme.tokens.semantics.colour
+  return {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    height: "100%",
+    backgroundColor: background.container.disabled,
+    color: text.disabled
+  }
+})
+
+const AVATAR_TO_BODY_SIZE = {
+  sm: "xs",
+  md: "sm",
+  lg: "md"
+} as const
+
+/**
+ * Avatar component for displaying user profile pictures or fallback initials.
+ * Built on @rn-primitives/avatar with design system styling.
+ *
+ * Features:
+ * - Three size variants (sm, md, lg)
+ * - Optional borders (none, sm, md)
+ * - Automatic fallback handling when image fails to load
+ * - String fallback (user initials) or image fallback (default icon)
+ * - Accessible with required alt text
+ *
+ * @example
+ * ```tsx
+ * import { Avatar } from "@butternutbox/pawprint-native"
+ *
+ * // With image
+ * <Avatar src="https://example.com/photo.jpg" alt="User Name" size="md" />
+ *
+ * // With initials fallback
+ * <Avatar alt="John Doe" fallbackString="JD" size="sm" border="sm" />
+ *
+ * // With icon fallback
+ * <Avatar alt="User avatar" fallbackType="image" size="lg" />
+ * ```
+ *
+ * @param {string} [src] - Image source URL.
+ * @param {string} alt - Accessible label for the avatar.
+ * @param {"sm" | "md" | "lg"} [size="md"] - Size variant.
+ * @param {"none" | "sm" | "md"} [border="none"] - Border width variant.
+ * @param {"string" | "image"} [fallbackType] - Fallback type (auto-detected based on fallbackString if not specified).
+ * @param {string} [fallbackString] - Text to display as fallback (typically user initials).
+ */
+const AvatarRoot = React.forwardRef<View, AvatarProps>(
+  (
+    {
+      src,
+      alt,
+      size = "md",
+      border = "none",
+      fallbackType,
+      fallbackString,
+      ...rest
+    },
+    ref
+  ) => {
+    // Auto-detect fallback type based on whether fallbackString is provided
+    const effectiveFallbackType =
+      fallbackType ?? (fallbackString ? "string" : "image")
+
+    const showStringFallback =
+      effectiveFallbackType === "string" && fallbackString
+
+    return (
+      <StyledRoot ref={ref} alt={alt} size={size} border={border} {...rest}>
+        {src && <StyledImage source={{ uri: src }} />}
+        <StyledFallback>
+          {showStringFallback ? (
+            <Typography
+              size={AVATAR_TO_BODY_SIZE[size]}
+              weight="bold"
+              color="disabled"
+            >
+              {fallbackString}
+            </Typography>
+          ) : (
+            // TODO: replace with the Icon when available
+            <Typography size={AVATAR_TO_BODY_SIZE[size]} color="disabled">
+              👤
+            </Typography>
+          )}
+        </StyledFallback>
+      </StyledRoot>
+    )
+  }
+)
+
+AvatarRoot.displayName = "Avatar"
+
+export const Avatar = AvatarRoot

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

@@ -0,0 +1,7 @@
+export { Avatar } from "./Avatar"
+export type {
+  AvatarProps,
+  AvatarSize,
+  AvatarBorder,
+  AvatarFallbackType
+} from "./Avatar"

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

@@ -0,0 +1,231 @@
+import React from "react"
+import { View, StyleSheet, Text } from "react-native"
+import { Badge } from "./Badge"
+import type { BadgeProps } from "./Badge"
+
+const PlaceholderIcon = ({
+  width = 24,
+  height = 24,
+  color = "#000"
+}: {
+  width?: number
+  height?: number
+  color?: string
+}) => (
+  <View
+    style={{
+      width,
+      height,
+      borderRadius: 4,
+      backgroundColor: color,
+      opacity: 0.3
+    }}
+  />
+)
+
+export default {
+  title: "Atoms/Badge",
+  component: Badge,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Badge component for displaying labels with optional icons. Used to highlight status, categories, or notifications."
+      }
+    }
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "promo", "success", "warning", "error"],
+      description: "Visual style variant"
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+      description: "Size of the badge"
+    },
+    pinned: {
+      control: { type: "boolean" },
+      description: "If true, applies pinned styling (left border radius = 0)"
+    },
+    children: {
+      control: { type: "text" },
+      description: "Badge label text"
+    }
+  }
+}
+
+const variants = ["primary", "promo", "success", "warning", "error"] as const
+const sizes = ["small", "medium", "large"] as const
+
+export const Default = (args: BadgeProps) => <Badge {...args} />
+Default.args = {
+  children: "Badge",
+  variant: "primary",
+  size: "medium"
+}
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    {variants.map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Text style={styles.label}>{variant}</Text>
+        <View style={styles.row}>
+          {sizes.map((size) => (
+            <Badge key={size} variant={variant} size={size}>
+              {size}
+            </Badge>
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const WithIcons = () => (
+  <View style={styles.column}>
+    {variants.map((variant) => (
+      <View key={variant} style={styles.section}>
+        <Text style={styles.label}>{variant} with Icon</Text>
+        <View style={styles.row}>
+          {sizes.map((size) => (
+            <Badge
+              key={size}
+              variant={variant}
+              size={size}
+              icon={PlaceholderIcon}
+            >
+              {size}
+            </Badge>
+          ))}
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const Pinned = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Text style={styles.label}>Pinned Badges - Top Positioning</Text>
+      <View style={styles.row}>
+        {variants.map((variant) => (
+          <View key={variant} style={styles.pinnedContainer}>
+            <Badge
+              variant={variant}
+              size="medium"
+              pinned
+              top={16}
+              icon={PlaceholderIcon}
+            >
+              {variant}
+            </Badge>
+          </View>
+        ))}
+      </View>
+    </View>
+    <View style={styles.section}>
+      <Text style={styles.label}>Pinned Badges - Bottom Positioning</Text>
+      <View style={styles.row}>
+        {variants.map((variant) => (
+          <View key={variant} style={styles.pinnedContainer}>
+            <Badge
+              variant={variant}
+              size="medium"
+              pinned
+              bottom={16}
+              icon={PlaceholderIcon}
+            >
+              {variant}
+            </Badge>
+          </View>
+        ))}
+      </View>
+    </View>
+  </View>
+)
+
+export const UsageExamples = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Text style={styles.label}>Status indicators</Text>
+      <View style={styles.row}>
+        <Badge variant="success" size="small">
+          Active
+        </Badge>
+        <Badge variant="warning" size="small">
+          Pending
+        </Badge>
+        <Badge variant="error" size="small">
+          Expired
+        </Badge>
+      </View>
+    </View>
+    <View style={styles.section}>
+      <Text style={styles.label}>Category labels</Text>
+      <View style={styles.row}>
+        <Badge variant="primary" size="medium">
+          New
+        </Badge>
+        <Badge variant="promo" size="medium">
+          Offer
+        </Badge>
+        <Badge variant="success" size="medium">
+          Verified
+        </Badge>
+      </View>
+    </View>
+    <View style={styles.section}>
+      <Text style={styles.label}>Promotional tags</Text>
+      <View style={styles.row}>
+        <Badge variant="promo" size="large" icon={PlaceholderIcon}>
+          Premium
+        </Badge>
+        <Badge variant="primary" size="large">
+          New
+        </Badge>
+        <Badge variant="warning" size="large">
+          Sale
+        </Badge>
+      </View>
+    </View>
+  </View>
+)
+
+export const Playground = (args: BadgeProps) => <Badge {...args} />
+Playground.args = {
+  variant: "primary",
+  size: "medium",
+  pinned: false,
+  children: "Badge"
+}
+
+const styles = StyleSheet.create({
+  column: {
+    flexDirection: "column",
+    gap: 24
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12,
+    alignItems: "center"
+  },
+  label: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#666"
+  },
+  pinnedContainer: {
+    position: "relative",
+    width: 160,
+    height: 100,
+    backgroundColor: "#f5f5f5",
+    borderRadius: 8,
+    overflow: "hidden"
+  }
+})

package/src/components/atoms/Badge/Badge.tsx

@@ -0,0 +1,184 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../Typography"
+import { Icon, type PawprintIcon } from "../Icon"
+
+type BadgeVariant = "primary" | "promo" | "success" | "warning" | "error"
+type BadgeSize = "small" | "medium" | "large"
+
+type BaseBadgeProps = {
+  children: React.ReactNode
+  variant?: BadgeVariant
+  size?: BadgeSize
+  icon?: PawprintIcon
+}
+
+type PinnedBadgeProps = BaseBadgeProps & {
+  pinned: true
+  top?: number
+  bottom?: number
+}
+
+type UnpinnedBadgeProps = BaseBadgeProps & {
+  pinned?: false
+  top?: never
+  bottom?: never
+}
+
+type BadgeOwnProps = PinnedBadgeProps | UnpinnedBadgeProps
+
+export type BadgeProps = BadgeOwnProps & Omit<ViewProps, keyof BadgeOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledBadge = styled(View)<{
+  badgeVariant: BadgeVariant
+  badgeSize: BadgeSize
+  pinned: boolean
+  top?: number
+  bottom?: number
+}>(({ theme, badgeVariant, badgeSize, pinned, top, bottom }) => {
+  const { sizing, spacing, colour, primary, pinnedBadge } =
+    theme.tokens.components.badges.badge
+
+  const backgroundColorMap = {
+    primary: colour.background.default,
+    promo: colour.background.promo,
+    success: colour.background.success,
+    warning: colour.background.warning,
+    error: colour.background.error
+  } as const
+
+  const borderRadiusStyles = pinned
+    ? {
+        borderTopLeftRadius: parseTokenValue(
+          pinnedBadge.borderRadius.leftRadius
+        ),
+        borderBottomLeftRadius: parseTokenValue(
+          pinnedBadge.borderRadius.leftRadius
+        ),
+        borderTopRightRadius: parseTokenValue(
+          pinnedBadge.borderRadius.rightRadius
+        ),
+        borderBottomRightRadius: parseTokenValue(
+          pinnedBadge.borderRadius.rightRadius
+        )
+      }
+    : {
+        borderRadius: parseTokenValue(primary.borderRadius.default)
+      }
+
+  const positionStyles = pinned
+    ? {
+        position: "absolute" as const,
+        left: 0,
+        ...(top !== undefined && { top }),
+        ...(bottom !== undefined && { bottom })
+      }
+    : {}
+
+  return {
+    flexDirection: "row" as const,
+    alignItems: "center" as const,
+    justifyContent: "center" as const,
+    height: parseTokenValue(sizing[badgeSize].height),
+    minWidth: parseTokenValue(sizing[badgeSize].minWidth),
+    paddingHorizontal: parseTokenValue(spacing[badgeSize].horizontalPadding),
+    gap: parseTokenValue(spacing[badgeSize].gap),
+    backgroundColor: backgroundColorMap[badgeVariant],
+    ...borderRadiusStyles,
+    ...positionStyles
+  }
+})
+
+/**
+ * Badge component for displaying labels with optional icons.
+ * Used to highlight status, categories, or notifications.
+ *
+ * @param {React.ReactNode} children - Badge label text.
+ * @param {"primary" | "promo" | "success" | "warning" | "error"} [variant="primary"] - Visual style variant.
+ * @param {"small" | "medium" | "large"} [size="medium"] - Size of the badge.
+ * @param {boolean} [pinned=false] - If true, applies pinned styling and positions absolutely to the left edge.
+ * @param {PawprintIcon} [icon] - Optional icon from @butternutbox/pawprint-icons.
+ * @param {number} [top] - Top position when pinned.
+ * @param {number} [bottom] - Bottom position when pinned.
+ *
+ * @example
+ * <Badge>New</Badge>
+ * <Badge variant="success" size="large" icon={CheckCircle}>Verified</Badge>
+ *
+ * @example
+ * <View style={{ position: "relative" }}>
+ *   <Badge variant="promo" pinned top={16}>Special</Badge>
+ * </View>
+ */
+export const Badge = React.forwardRef<View, BadgeProps>(
+  (
+    {
+      variant = "primary",
+      size = "medium",
+      pinned = false,
+      icon,
+      children,
+      top,
+      bottom,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { typography, colour } = theme.tokens.components.badges.badge
+
+    const iconSizeMap = {
+      small: "xs",
+      medium: "xs",
+      large: "sm"
+    } as const
+
+    const iconColourMap = {
+      primary: "primary",
+      promo: "promo",
+      success: "alt",
+      warning: "alt",
+      error: "alt"
+    } as const
+
+    const textColorMap = {
+      primary: colour.text.primary,
+      promo: colour.text.promo,
+      success: colour.text.default,
+      warning: colour.text.default,
+      error: colour.text.default
+    }
+
+    return (
+      <StyledBadge
+        ref={ref}
+        badgeVariant={variant}
+        badgeSize={size}
+        pinned={pinned}
+        top={top}
+        bottom={bottom}
+        {...rest}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            size={iconSizeMap[size]}
+            colour={iconColourMap[variant]}
+          />
+        )}
+        <Typography
+          token={typography[size].default}
+          color={textColorMap[variant]}
+        >
+          {children}
+        </Typography>
+      </StyledBadge>
+    )
+  }
+)
+
+Badge.displayName = "Badge"

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

@@ -0,0 +1,2 @@
+export { Badge } from "./Badge"
+export type { BadgeProps } from "./Badge"