Expo Design System Scaffolder

// {file_path} — {ComponentName} surface with slots
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {ComponentName}: PascalCase component name, e.g. AppCard
// - {file_path}:     destination path, written into this header
//
// Rules enforced: api-slots-for-composition, api-no-style-escape-hatch,
// token-elevation-pairs, space-radius-tokens
import type { ReactNode } from 'react'
import { View } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

type {ComponentName}Props = {
  children: ReactNode
  leading?: ReactNode
  trailing?: ReactNode
  tone?: 'default' | 'alert'
  inset?: 'comfortable' | 'compact'
}

// Slots (leading/trailing) accept any node, so the surface never grows a prop per element.
export function {ComponentName}({
  children,
  leading,
  trailing,
  tone = 'default',
  inset = 'comfortable',
}: {ComponentName}Props) {
  styles.useVariants({ tone, inset })
  return (
    <View style={styles.root}>
      {leading}
      <View style={styles.body}>{children}</View>
      {trailing}
    </View>
  )
}

const styles = StyleSheet.create((theme) => ({
  root: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: theme.space.sm,
    borderRadius: theme.radius.md,
    ...theme.elevation.raised,
    variants: {
      tone: {
        default: { backgroundColor: theme.colors.surfaceRaised },
        alert: { backgroundColor: theme.colors.surfaceAlert },
      },
      inset: {
        comfortable: { padding: theme.space.lg },
        compact: { padding: theme.space.sm },
      },
    },
  },
  body: { flex: 1 },
}))

// {file_path} — Design system public entry & inventory
// Generated by expo-design-system-scaffolder
//
// READ THIS FIRST before styling anything (rule: reuse-inventory-first). It is both the single
// public entry of the design system and the catalog of what already exists — so the next agent
// reuses or extends a component instead of forking a near-duplicate.
//
// When you scaffold a component, add TWO lines: an `export` below and a one-line catalog entry
// in the matching section. Keep entries one line each so the whole inventory reads in one shot.
//
// Placeholders:
// - {file_path}: destination path, e.g. packages/design-system/src/index.ts
//
// Rules enforced: govern-design-system-package, reuse-inventory-first, reuse-platform-component-first
//
// ── Components — reuse or extend these before creating anything new (reuse-extend-not-fork) ──
//   AppButton    — pressable primitive; variants: variant(primary|secondary), size(sm|md); web hover/focus/cursor
//   AppCard      — surface with leading/trailing/children slots; variants: tone(default|alert), inset(comfortable|compact)
//   AppText      — typed text; variants: variant(title|body|caption), tone(default|muted|danger)
//   AppTextField — labeled input; controlled/uncontrolled, error variant, web focus ring
//   <add new components here, one line each, on scaffold>
//
// ── Native controls — use these, don't reimplement (reuse-platform-component-first) ──
//   Switch (react-native, cross-platform); DateTimePicker / Picker / segmented control
//   (@expo/ui/swift-ui on iOS, behind a .ios.tsx split — see platform-divergence-split)
//
// ── Tokens — read from the Unistyles theme, never hardcode (token-no-raw-values-in-components) ──
//   theme.colors.*   theme.space.*   theme.radius.*   theme.typography.*   theme.elevation.*

export { AppButton } from './AppButton'
export { AppCard } from './AppCard'
export { AppText } from './AppText'
export { AppTextField } from './AppTextField'
// export { NewComponent } from './NewComponent'  ← add on scaffold

export { lightTheme, darkTheme } from './theme'
export type { AppTheme } from './theme'

// {file_path} — {ComponentName} story (variant catalog)
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {ComponentName}: PascalCase component, e.g. AppButton
// - {file_path}:     destination path, written into this header
//
// Rules enforced: govern-storybook-catalog
//
// This story is shaped for a pressable primitive (variant + title + onPress). Adjust the
// `variants` array and the rendered props to the target component — e.g. a text primitive uses
// variant='title'|'body'|'caption' with children, and a card uses tone/inset with slot content.
import { Card } from '../components/Card'
import { {ComponentName} } from './{ComponentName}'

export default { title: 'DesignSystem/{ComponentName}', component: {ComponentName} }

// Render every variant side by side so visual regressions surface in review.
const variants = ['primary', 'secondary'] as const

export const AllVariants = () => (
  <Card tone="default" inset="comfortable">
    {variants.map((variant) => (
      <{ComponentName} key={variant} variant={variant} title={variant} onPress={() => {}} />
    ))}
  </Card>
)

// {file_path} — {ComponentName} labeled text field
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {ComponentName}: PascalCase component name, e.g. AppTextField
// - {file_path}:     destination path, written into this header
//
// Rules enforced: api-controlled-uncontrolled, api-forward-ref, platform-web-pseudo-states,
// api-accessibility-in-contract, type-respect-font-scaling, token-no-raw-values-in-components
import { useState } from 'react'
import type { Ref } from 'react'
import { View, Text, TextInput } from 'react-native'
import type { TextInputProps } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

type {ComponentName}Props = Omit<TextInputProps, 'style' | 'value' | 'onChangeText'> & {
  label: string
  error?: string
  value?: string
  defaultValue?: string
  onChangeText?: (next: string) => void
  ref?: Ref<TextInput>
}

export function {ComponentName}({
  label,
  error,
  value,
  defaultValue = '',
  onChangeText,
  ref,
  ...props
}: {ComponentName}Props) {
  const [internal, setInternal] = useState(defaultValue)
  const isControlled = value !== undefined
  const current = isControlled ? value : internal
  const handleChange = (next: string) => {
    if (!isControlled) setInternal(next)
    onChangeText?.(next)
  }
  styles.useVariants({ invalid: Boolean(error) })
  return (
    <View style={styles.field}>
      <Text style={styles.label} maxFontSizeMultiplier={1.4}>{label}</Text>
      <TextInput
        ref={ref}
        value={current}
        onChangeText={handleChange}
        style={styles.input}
        accessibilityLabel={label}
        {...props}
      />
      {error ? (
        <Text style={styles.error} accessibilityLiveRegion="polite">{error}</Text>
      ) : null}
    </View>
  )
}

const styles = StyleSheet.create((theme) => ({
  field: { gap: theme.space.xs },
  label: { color: theme.colors.textMuted, fontSize: theme.typography.caption.fontSize },
  input: {
    minHeight: theme.space.touchTarget,
    paddingHorizontal: theme.space.md,
    borderRadius: theme.radius.sm,
    borderWidth: 1,
    color: theme.colors.textPrimary,
    variants: {
      invalid: {
        true: { borderColor: theme.colors.danger },
        false: { borderColor: theme.colors.border },
      },
    },
    // Web keyboard-focus ring; the text cursor is already native on web inputs.
    _web: {
      _focus: { outlineColor: theme.colors.accent, outlineStyle: 'solid', outlineWidth: 2 },
    },
  },
  error: { color: theme.colors.danger, fontSize: theme.typography.caption.fontSize },
}))

// {file_path} — {Entity} list screen composed from design system primitives
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {ScreenName}:    PascalCase screen, e.g. AppointmentsScreen
// - {Entity}:        PascalCase singular, e.g. Appointment
// - {entity}:        camelCase singular, e.g. appointment
// - {entity_plural}: camelCase plural, e.g. appointments
// - {route_path}:    route segment pushed for a row, e.g. appointments
// - {file_path}:     destination path, written into this header
//
// Rules enforced: perf-flashlist-for-lists, perf-memoize-list-items,
// space-safe-area-insets, platform-web-pseudo-states, domain-compose-from-primitives
import { memo, useCallback } from 'react'
import { Pressable, View } from 'react-native'
import { FlashList } from '@shopify/flash-list'
import { router } from 'expo-router'
import { StyleSheet } from 'react-native-unistyles'

import { Card } from '../components/Card'
import { AppText } from '../components/AppText'
import { use{Entity}List } from '../hooks/use{Entity}List'
import type { {Entity} } from '../domain/{entity}'

type RowProps = { item: {Entity}; onPress: (id: string) => void }

const {Entity}Row = memo(({ item, onPress }: RowProps) => (
  <Pressable style={styles.row} onPress={() => onPress(item.id)} accessibilityRole="button">
    <Card tone="default" inset="comfortable">
      <AppText variant="title">{item.title}</AppText>
      <AppText variant="caption" tone="muted">{item.subtitle}</AppText>
    </Card>
  </Pressable>
))
{Entity}Row.displayName = '{Entity}Row'

const Separator = () => <View style={styles.separator} />

export function {ScreenName}() {
  const { {entity_plural} } = use{Entity}List()
  const open = useCallback((id: string) => router.push('/{route_path}/' + id), [])
  return (
    <FlashList
      data={ {entity_plural} }
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.content}
      ItemSeparatorComponent={Separator}
      renderItem={({ item }) => <{Entity}Row item={item} onPress={open} />}
    />
  )
}

const styles = StyleSheet.create((theme, rt) => ({
  content: { padding: theme.space.md, paddingBottom: rt.insets.bottom + theme.space.md },
  row: { _web: { cursor: 'pointer', _hover: { opacity: 0.9 } } },
  separator: { height: theme.space.sm },
}))

// {file_path} — {ComponentName} typed text primitive
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {ComponentName}: PascalCase component name, e.g. AppText
// - {file_path}:     destination path, written into this header
//
// Rules enforced: type-text-component-wrapper, type-scale-tokens, type-respect-font-scaling
import { Text } from 'react-native'
import type { TextProps } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

// Omit `style` so all text styling flows through variant + tone, not raw overrides.
type {ComponentName}Props = Omit<TextProps, 'style'> & {
  variant?: 'title' | 'body' | 'caption'
  tone?: 'default' | 'muted' | 'danger'
}

export function {ComponentName}({
  variant = 'body',
  tone = 'default',
  maxFontSizeMultiplier = 1.6,
  ...props
}: {ComponentName}Props) {
  styles.useVariants({ variant, tone })
  // maxFontSizeMultiplier keeps OS font scaling on with a sane cap.
  return <Text style={styles.text} maxFontSizeMultiplier={maxFontSizeMultiplier} {...props} />
}

const styles = StyleSheet.create((theme) => ({
  text: {
    variants: {
      variant: {
        title: theme.typography.titleL,
        body: theme.typography.body,
        caption: theme.typography.caption,
      },
      tone: {
        default: { color: theme.colors.textPrimary },
        muted: { color: theme.colors.textMuted },
        danger: { color: theme.colors.danger },
      },
    },
  },
}))

// {file_path} — {token_group} token group (merge into the Unistyles theme)
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {token_group}: camelCase group name, e.g. statusBadge
// - {file_path}:   destination path, written into this header
//
// Rules enforced: token-three-layer-scale, token-semantic-naming, token-define-in-unistyles-theme
//
// Three layers — keep all of them inside the design-system theme, never in a feature.

// 1) Raw layer — name by hue and shade; referenced only by the semantic layer below.
export const {token_group}Palette = {
  green600: '#16A34A',
  amber500: '#F59E0B',
  red600: '#DC2626',
} as const

// 2) Semantic layer — add role-named tokens to lightTheme.colors / darkTheme.colors so the
//    name stays honest when the value changes. Provide a value per theme:
//      statusConfirmed: {token_group}Palette.green600,
//      statusPending:   {token_group}Palette.amber500,
//      statusCancelled: {token_group}Palette.red600,

// 3) Component layer (optional) — compose semantic tokens for a specific component:
//      components: { {token_group}: { background: lightTheme.colors.surfaceMuted } }

// {file_path} — {ComponentName} pressable primitive
// Generated by expo-design-system-scaffolder
//
// Placeholders:
// - {ComponentName}: PascalCase component name, e.g. AppButton
// - {file_path}:     destination path, written into this header
//
// Rules enforced: api-variants-over-style-prop, api-no-style-escape-hatch,
// style-variants-api, style-press-states-from-variants, platform-web-pseudo-states,
// api-accessibility-in-contract, api-forward-ref
import { useState } from 'react'
import type { Ref } from 'react'
import { Pressable, Text, View } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

type {ComponentName}Props = {
  title: string
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md'
  disabled?: boolean
  onPress: () => void
  accessibilityLabel?: string
  ref?: Ref<View>
}

// No `style` prop: callers customize via variant/size, never a raw override.
export function {ComponentName}({
  title,
  variant = 'primary',
  size = 'md',
  disabled,
  onPress,
  accessibilityLabel,
  ref,
}: {ComponentName}Props) {
  const [pressed, setPressed] = useState(false)
  styles.useVariants({ variant, size, pressed, disabled })
  return (
    <Pressable
      ref={ref}
      style={styles.root}
      disabled={disabled}
      onPress={onPress}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      accessibilityRole="button"
      accessibilityState={{ disabled: Boolean(disabled) }}
      accessibilityLabel={accessibilityLabel ?? title}
    >
      <Text style={styles.label}>{title}</Text>
    </Pressable>
  )
}

const styles = StyleSheet.create((theme) => ({
  root: {
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: theme.radius.md,
    minHeight: theme.space.touchTarget,
    variants: {
      variant: {
        primary: { backgroundColor: theme.colors.accent },
        secondary: { backgroundColor: theme.colors.surfaceMuted },
      },
      size: {
        sm: { paddingHorizontal: theme.space.sm },
        md: { paddingHorizontal: theme.space.md },
      },
      pressed: { true: { opacity: 0.7 } },
      disabled: { true: { opacity: 0.4 } },
    },
    // Web pointer affordances so the same button feels native on web, not just touch.
    _web: {
      cursor: 'pointer',
      _hover: { opacity: 0.92 },
      _focus: { outlineColor: theme.colors.accent, outlineStyle: 'solid', outlineWidth: 2 },
    },
  },
  label: { color: theme.colors.onAccent, fontSize: theme.typography.body.fontSize },
}))

{
  "design_system_dir": "packages/design-system/src",
  "app_dir": "app",
  "_setup_instructions": {
    "design_system_dir": "Source directory of the @clinic/design-system package where primitives, the theme, and stories live (default packages/design-system/src)",
    "app_dir": "Expo Router routes directory used by the list-screen template (default app)"
  }
}

{
  "version": "0.3.0",
  "organization": "Airbnb DLS / React Native Community",
  "technology": "Expo React Native design system components",
  "discipline": "extraction",
  "type": "scaffolding",
  "date": "May 2026",
  "abstract": "Parameterized templates that scaffold Expo / React Native design system components which obey the expo-design-system rules by construction — Unistyles v3 variants instead of style props, no raw style escape hatch, ref-as-prop, design tokens, built-in accessibility, and web/iOS parity (Unistyles `_web` hover/focus/cursor on interactive primitives) so components feel native on both web and iOS. Covers a variant pressable primitive, a slot-based card surface, a typed text primitive, a labeled form field, a FlashList entity screen, a theme token group, a Storybook variant catalog, and a single component+token index that agents read before styling so they reuse the system instead of restyling locally. Each template cites the expo-design-system rule IDs it satisfies, so generated components match the rule pack without rework.",
  "references": [
    "https://www.unistyl.es/v3/references/variants/",
    "https://www.unistyl.es/v3/guides/theming/",
    "https://www.unistyl.es/v3/references/web-only/",
    "https://react.dev/blog/2024/12/05/react-19",
    "https://shopify.github.io/flash-list/",
    "https://www.infoq.com/news/2020/02/airbnb-design-system-react-conf/"
  ]
}