@butternutbox/pawprint-native 0.0.1

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

@@ -0,0 +1,315 @@
+import { View, StyleSheet } from "react-native"
+import { Typography } from "./Typography"
+import type { TypographyProps } from "./Typography"
+
+const bodyText =
+  "We're all familiar with the various sounds our dogs make. The polite little 'woof' at the door, the frantic yipping during a game of fetch."
+const headingText = "Fresh food. Happy dogs."
+const shortText = "Fresh food. Happy dogs."
+
+export default {
+  title: "Atoms/Typography",
+  component: Typography,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["body", "heading", "display"],
+      description: "Text style variant"
+    },
+    size: {
+      control: { type: "select" },
+      options: ["2xs", "xs", "sm", "md", "lg", "xl"],
+      description: "Size (available options vary by variant)"
+    },
+    weight: {
+      control: { type: "select" },
+      options: ["medium", "semiBold", "bold"],
+      description: "Font weight (body variant only)"
+    },
+    color: {
+      control: { type: "select" },
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "error",
+        "promo",
+        "placeholder",
+        "disabled",
+        "tertiary",
+        "alt"
+      ],
+      description: "Semantic text colour"
+    },
+    align: {
+      control: { type: "select" },
+      options: ["left", "center", "right", "justify"],
+      description: "Text alignment"
+    },
+    textTransform: {
+      control: { type: "select" },
+      options: ["none", "uppercase", "lowercase", "capitalize"],
+      description: "CSS text-transform"
+    },
+    textDecoration: {
+      control: { type: "select" },
+      options: ["none", "underline", "line-through"],
+      description: "Text decoration style"
+    },
+    noWrap: {
+      control: { type: "boolean" },
+      description: "Truncate with ellipsis instead of wrapping"
+    }
+  }
+}
+
+export const Playground = (args: TypographyProps) => (
+  <View style={styles.container}>
+    <Typography {...args}>{bodyText}</Typography>
+  </View>
+)
+Playground.args = {
+  variant: "body",
+  size: "md",
+  weight: "medium",
+  color: "primary"
+} as TypographyProps
+
+export const AllVariants = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm" color="tertiary">
+        Display
+      </Typography>
+      {(["lg", "md"] as const).map((size) => (
+        <View key={size} style={styles.item}>
+          <Typography size="sm" weight="semiBold" color="promo">
+            Display {size.toUpperCase()}
+          </Typography>
+          <Typography variant="display" size={size}>
+            {headingText}
+          </Typography>
+        </View>
+      ))}
+    </View>
+
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm" color="tertiary">
+        Heading
+      </Typography>
+      {(["xl", "lg", "md", "sm", "xs", "2xs"] as const).map((size) => (
+        <View key={size} style={styles.item}>
+          <Typography size="sm" weight="semiBold" color="promo">
+            Heading {size.toUpperCase()}
+          </Typography>
+          <Typography variant="heading" size={size}>
+            {headingText}
+          </Typography>
+        </View>
+      ))}
+    </View>
+
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm" color="tertiary">
+        Body
+      </Typography>
+      {(["lg", "md", "sm", "xs"] as const).map((size) => (
+        <View key={size} style={styles.item}>
+          <Typography size="sm" weight="semiBold" color="promo">
+            Body {size.toUpperCase()} — medium / semiBold / bold
+          </Typography>
+          <View style={styles.weightColumn}>
+            {(["medium", "semiBold", "bold"] as const).map((weight) => (
+              <Typography key={weight} size={size} weight={weight}>
+                {bodyText}
+              </Typography>
+            ))}
+          </View>
+        </View>
+      ))}
+    </View>
+  </View>
+)
+
+export const Body = () => (
+  <View style={styles.column}>
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm" color="tertiary">
+        All Sizes
+      </Typography>
+      {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        <View key={size} style={styles.item}>
+          <Typography size="sm" weight="semiBold" color="promo">
+            Body {size.toUpperCase()}
+          </Typography>
+          <Typography size={size}>{bodyText}</Typography>
+        </View>
+      ))}
+    </View>
+
+    <View style={styles.section}>
+      <Typography variant="heading" size="sm" color="tertiary">
+        All Weights
+      </Typography>
+      {(["medium", "semiBold", "bold"] as const).map((weight) => (
+        <View key={weight} style={styles.item}>
+          <Typography size="sm" weight="semiBold" color="promo">
+            {weight}
+          </Typography>
+          <Typography size="md" weight={weight}>
+            {bodyText}
+          </Typography>
+        </View>
+      ))}
+    </View>
+  </View>
+)
+
+export const Heading = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm" color="tertiary">
+      All Sizes
+    </Typography>
+    {(["xl", "lg", "md", "sm", "xs", "2xs"] as const).map((size) => (
+      <View key={size} style={styles.item}>
+        <Typography size="sm" weight="semiBold" color="promo">
+          Heading {size.toUpperCase()}
+        </Typography>
+        <Typography variant="heading" size={size}>
+          {headingText}
+        </Typography>
+      </View>
+    ))}
+  </View>
+)
+
+export const Display = () => (
+  <View style={styles.column}>
+    <Typography variant="heading" size="sm" color="tertiary">
+      All Sizes
+    </Typography>
+    {(["lg", "md"] as const).map((size) => (
+      <View key={size} style={styles.item}>
+        <Typography size="sm" weight="semiBold" color="promo">
+          Display {size.toUpperCase()}
+        </Typography>
+        <Typography variant="display" size={size}>
+          {headingText}
+        </Typography>
+      </View>
+    ))}
+  </View>
+)
+
+export const TextAlignment = () => (
+  <View style={styles.column}>
+    {(["left", "center", "right", "justify"] as const).map((align) => (
+      <View key={align} style={styles.item}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {align.charAt(0).toUpperCase() + align.slice(1)}
+        </Typography>
+        <Typography align={align}>{bodyText}</Typography>
+      </View>
+    ))}
+  </View>
+)
+
+export const TextTransform = () => (
+  <View style={styles.column}>
+    {(["none", "uppercase", "lowercase", "capitalize"] as const).map(
+      (transform) => (
+        <View key={transform} style={styles.item}>
+          <Typography size="sm" weight="semiBold" color="tertiary">
+            {transform}
+          </Typography>
+          <Typography textTransform={transform}>
+            {transform === "capitalize" ? "fresh food. happy dogs." : shortText}
+          </Typography>
+        </View>
+      )
+    )}
+  </View>
+)
+
+export const TextDecoration = () => (
+  <View style={styles.column}>
+    {(["none", "underline", "line-through"] as const).map((decoration) => (
+      <View key={decoration} style={styles.item}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {decoration}
+        </Typography>
+        <Typography textDecoration={decoration}>{shortText}</Typography>
+      </View>
+    ))}
+  </View>
+)
+
+export const NoWrap = () => (
+  <View style={styles.column}>
+    <View style={styles.item}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        Normal (wraps)
+      </Typography>
+      <View style={styles.constrainedBox}>
+        <Typography>{bodyText}</Typography>
+      </View>
+    </View>
+
+    <View style={styles.item}>
+      <Typography size="sm" weight="semiBold" color="tertiary">
+        No Wrap (truncates with ellipsis)
+      </Typography>
+      <View style={styles.constrainedBox}>
+        <Typography noWrap>{bodyText}</Typography>
+      </View>
+    </View>
+  </View>
+)
+
+export const Colors = () => (
+  <View style={styles.column}>
+    {(
+      [
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "error",
+        "promo",
+        "placeholder",
+        "disabled",
+        "tertiary"
+      ] as const
+    ).map((color) => (
+      <Typography key={color} color={color}>
+        {`${color} — ${shortText}`}
+      </Typography>
+    ))}
+  </View>
+)
+
+const styles = StyleSheet.create({
+  container: {
+    maxWidth: 600
+  },
+  column: {
+    flexDirection: "column",
+    gap: 32
+  },
+  section: {
+    flexDirection: "column",
+    gap: 16
+  },
+  item: {
+    flexDirection: "column",
+    gap: 4
+  },
+  weightColumn: {
+    flexDirection: "column",
+    gap: 4
+  },
+  constrainedBox: {
+    maxWidth: 300
+  }
+})

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

@@ -0,0 +1,284 @@
+import React from "react"
+import { Text, TextStyle, TextProps } from "react-native"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/native"
+import { type BrandThemeSemanticsColourText } from "@butternutbox/pawprint-tokens"
+import { resolveFont } from "../../../fonts"
+
+type BodySize = "xs" | "sm" | "md" | "lg"
+type HeadingSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl"
+type DisplaySize = "md" | "lg"
+type BodyWeight = "medium" | "semiBold" | "bold"
+
+type TextAlign = "left" | "right" | "center" | "justify"
+type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase"
+type TextDecoration = "none" | "underline" | "line-through"
+
+type SemanticTextColorKey = Exclude<
+  keyof BrandThemeSemanticsColourText,
+  "link" | "action"
+>
+
+type FlattenTextColorValues<T> = T extends string
+  ? T
+  : T extends object
+    ? {
+        [K in keyof T]: FlattenTextColorValues<T[K]>
+      }[keyof T]
+    : never
+
+type SemanticTextColorValue =
+  FlattenTextColorValues<BrandThemeSemanticsColourText>
+
+type NativeTypographyToken = {
+  fontFamily?: string
+  fontWeight?: string
+  fontSize?: string
+  lineHeight?: string
+  letterSpacing?: string
+}
+
+type NativeTextProps = Omit<TextProps, "style">
+
+type BodyVariant = {
+  variant?: "body"
+  size?: BodySize
+  weight?: BodyWeight
+}
+
+type HeadingVariant = {
+  variant: "heading"
+  size?: HeadingSize
+  weight?: never
+}
+
+type DisplayVariant = {
+  variant: "display"
+  size?: DisplaySize
+  weight?: never
+}
+
+type CommonProps = {
+  align?: TextAlign
+  noWrap?: boolean
+  textTransform?: TextTransform
+  textDecoration?: TextDecoration
+}
+
+type SemanticVariant = (BodyVariant | HeadingVariant | DisplayVariant) & {
+  color?: SemanticTextColorKey
+  token?: never
+} & CommonProps
+
+type TokenVariant = {
+  token: NativeTypographyToken
+  color?: SemanticTextColorValue
+} & CommonProps
+
+export type TypographyProps =
+  | (SemanticVariant & NativeTextProps)
+  | (TokenVariant & NativeTextProps)
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+/**
+ * Converts a letter-spacing token value to an absolute pixel number.
+ * Token values can be percentage strings (e.g. "2%", "0.12%") or
+ * pixel strings (e.g. "1px"). Percentages are resolved relative to fontSize.
+ */
+const resolveLetterSpacing = (
+  letterSpacing: string,
+  fontSize: number
+): number => {
+  if (letterSpacing.endsWith("%")) {
+    return (parseFloat(letterSpacing) / 100) * fontSize
+  }
+  return parseFloat(letterSpacing)
+}
+
+const semanticToStyle = (token: {
+  fontFamily: string
+  fontWeight: string
+  fontSize: string
+  lineHeight: string
+  letterSpacing?: string
+}): TextStyle => {
+  const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight)
+  const fontSize = parseTokenValue(token.fontSize)
+  return {
+    fontFamily,
+    fontSize,
+    lineHeight: parseTokenValue(token.lineHeight),
+    ...(token.letterSpacing && {
+      letterSpacing: resolveLetterSpacing(token.letterSpacing, fontSize)
+    })
+  }
+}
+
+const nativeTokenToStyle = (token: NativeTypographyToken): TextStyle => {
+  const style: TextStyle = {}
+  if (token.fontFamily && token.fontWeight) {
+    const { fontFamily } = resolveFont(token.fontFamily, token.fontWeight)
+    style.fontFamily = fontFamily
+  } else if (token.fontFamily) {
+    style.fontFamily = token.fontFamily
+  }
+  if (token.fontSize) style.fontSize = parseTokenValue(token.fontSize)
+  if (token.lineHeight) style.lineHeight = parseTokenValue(token.lineHeight)
+  if (token.letterSpacing && style.fontSize) {
+    style.letterSpacing = resolveLetterSpacing(
+      token.letterSpacing,
+      style.fontSize
+    )
+  }
+  return style
+}
+
+const VARIANT_DEFAULTS = {
+  body: { size: "md" } as const,
+  heading: { size: "md" } as const,
+  display: { size: "lg" } as const
+}
+
+const StyledText = styled(Text)({})
+
+/**
+ * Typography component for body text, headings, and display copy.
+ * Styling and semantics only — no i18n concerns.
+ *
+ * **Semantic mode:**
+ * - `variant="body"` — 4 sizes (xs–lg), 3 weights.
+ * - `variant="heading"` — 6 sizes (2xs–xl), responsive (steps down one size on narrow screens).
+ * - `variant="display"` — 2 sizes (md/lg), responsive.
+ *
+ * **Token mode:**
+ * - `token` — Pass resolved typography token object from theme.tokens.components
+ *
+ * @param {"body" | "heading" | "display"} [variant="body"] - Text style variant.
+ * @param {"xs" | "sm" | "md" | "lg" | "2xs" | "xl"} [size="md"] - Size token. Available sizes depend on variant.
+ * @param {"medium" | "semiBold" | "bold"} [weight="medium"] - Font weight. Body only — heading and display have fixed weight.
+ * @param {NativeTypographyToken} [token] - Resolved typography token object (alternative to semantic props).
+ * @param {SemanticTextColorKey} [color] - Semantic text color key for semantic mode.
+ * @param {SemanticTextColorValue} [color] - Hex color string for token mode.
+ * @param {"left" | "right" | "center" | "justify"} [align] - Text alignment.
+ * @param {boolean} [noWrap] - If true, text is truncated to one line with an ellipsis.
+ * @param {"none" | "capitalize" | "uppercase" | "lowercase"} [textTransform] - Text transformation.
+ * @param {"none" | "underline" | "line-through"} [textDecoration] - Text decoration.
+ *
+ * @example
+ * // Semantic usage
+ * <Typography size="md" weight="semiBold">Body text</Typography>
+ * <Typography variant="heading" size="xl">Page title</Typography>
+ * <Typography variant="display" size="lg" color="secondary">Hero copy</Typography>
+ *
+ * // Token usage (for component-owned text)
+ * <Typography
+ *   token={theme.tokens.components.checkbox.typography.label}
+ *   color={theme.tokens.components.checkbox.colour.text.title}
+ * >
+ *   Accept terms
+ * </Typography>
+ */
+export const Typography = React.forwardRef<Text, TypographyProps>(
+  (props, ref) => {
+    const theme = useTheme()
+    const { typography, colour } = theme.tokens.semantics
+
+    const getCommonStyles = (
+      align?: TextAlign,
+      textTransform?: TextTransform,
+      textDecoration?: TextDecoration
+    ): TextStyle => ({
+      ...(align && { textAlign: align }),
+      ...(textTransform && { textTransform }),
+      ...(textDecoration && {
+        textDecorationLine: textDecoration as TextStyle["textDecorationLine"]
+      })
+    })
+
+    if ("token" in props && props.token) {
+      const {
+        token,
+        color,
+        align,
+        noWrap,
+        textTransform,
+        textDecoration,
+        ...rest
+      } = props
+
+      const style: TextStyle = {
+        ...nativeTokenToStyle(token),
+        ...(color ? { color } : {}),
+        ...getCommonStyles(align, textTransform, textDecoration)
+      }
+
+      return (
+        <StyledText
+          ref={ref}
+          style={style}
+          numberOfLines={noWrap ? 1 : undefined}
+          ellipsizeMode={noWrap ? "tail" : undefined}
+          {...rest}
+        />
+      )
+    }
+
+    const {
+      variant = "body",
+      size,
+      weight = "medium",
+      color = "primary",
+      align,
+      noWrap,
+      textTransform,
+      textDecoration,
+      ...rest
+    } = props
+
+    const resolvedSize = size ?? VARIANT_DEFAULTS[variant].size
+    const commonStyles = getCommonStyles(align, textTransform, textDecoration)
+
+    const getSemanticColor = (colorKey: SemanticTextColorKey): TextStyle => ({
+      color: colour.text[colorKey]
+    })
+
+    let textStyle: TextStyle = {}
+
+    if (variant === "body") {
+      textStyle = {
+        ...semanticToStyle(typography.body[weight][resolvedSize as BodySize]),
+        ...getSemanticColor(color),
+        ...commonStyles
+      }
+    } else if (variant === "heading") {
+      const headingSize = resolvedSize as HeadingSize
+      const tokenSet = typography.heading.mobile[headingSize]
+      textStyle = {
+        ...semanticToStyle(tokenSet),
+        ...getSemanticColor(color),
+        ...commonStyles
+      }
+    } else if (variant === "display") {
+      const displaySize = resolvedSize as DisplaySize
+      const tokenSet = typography.heading.display.mobile[displaySize]
+      textStyle = {
+        ...semanticToStyle(tokenSet),
+        ...getSemanticColor(color),
+        ...commonStyles
+      }
+    }
+
+    return (
+      <StyledText
+        ref={ref}
+        style={textStyle}
+        numberOfLines={noWrap ? 1 : undefined}
+        ellipsizeMode={noWrap ? "tail" : undefined}
+        {...rest}
+      />
+    )
+  }
+)
+
+Typography.displayName = "Typography"

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

@@ -0,0 +1,2 @@
+export { Typography } from "./Typography"
+export type { TypographyProps } from "./Typography"

package/src/components/atoms/index.ts

@@ -0,0 +1,14 @@
+export * from "./Avatar"
+export * from "./Typography"
+export * from "./Badge"
+export * from "./Button"
+export * from "./Hint"
+export * from "./Icon"
+export * from "./IconButton"
+export * from "./Illustration"
+export * from "./Input"
+export * from "./Link"
+export * from "./Logo"
+export * from "./Spinner"
+export * from "./Switch"
+export * from "./Tag"

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./atoms"
+export * from "./molecules"