Chapitre 4.5 — Le design system de Drill

// components/ui/AppText.tsx
import { Text, TextProps } from 'react-native'
import { cn } from '../../lib/cn'
 
type Variant = 'title' | 'heading' | 'body' | 'caption' | 'mono'
 
const variants: Record<Variant, string> = {
  title: 'text-3xl font-extrabold text-ink-100',
  heading: 'text-xl font-bold text-ink-100',
  body: 'text-base text-ink-100',
  caption: 'text-[13px] text-ink-400',
  mono: 'font-mono text-base text-brand-light',   // extraits de code dans les questions
}
 
type Props = TextProps & { variant?: Variant; className?: string }
 
export function AppText({ variant = 'body', className, ...rest }: Props) {
  return <Text className={cn(variants[variant], className)} {...rest} />
}

// lib/cn.ts — le mini-helper (logique pure → lib/)
export function cn(...parts: Array<string | false | null | undefined>) {
  return parts.filter(Boolean).join(' ')
}

// components/ui/Screen.tsx
import { ScrollView, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { cn } from '../../lib/cn'
 
type Props = {
  children: React.ReactNode
  scroll?: boolean          // contenu borné → true ; l'écran gère un FlatList → false
  className?: string
}
 
export function Screen({ children, scroll = false, className }: Props) {
  const insets = useSafeAreaInsets()
  const Wrapper = scroll ? ScrollView : View
  return (
    <View className="flex-1 bg-ink-950">
      <Wrapper
        className={cn('flex-1', className)}
        style={{ paddingTop: insets.top }}
        {...(scroll
          ? { contentContainerStyle: { padding: 16, paddingBottom: insets.bottom + 16 } }
          : {})}
      >
        {children}
      </Wrapper>
    </View>
  )
}

// components/ui/Button.tsx
import { Pressable, PressableProps } from 'react-native'
import { AppText } from './AppText'
import { cn } from '../../lib/cn'
 
type Variant = 'primary' | 'secondary' | 'ghost'
 
const base = 'min-h-[52px] flex-row items-center justify-center gap-2 rounded-xl px-5'
const variants: Record<Variant, { box: string; label: string }> = {
  primary: { box: 'bg-brand active:bg-brand/85', label: 'text-white font-bold text-base' },
  secondary: { box: 'border border-ink-700 bg-ink-900 active:opacity-85', label: 'text-ink-100 font-semibold text-base' },
  ghost: { box: 'active:opacity-70', label: 'text-brand-light font-semibold text-base' },
}
 
type Props = PressableProps & {
  label: string
  variant?: Variant
  className?: string
}
 
export function Button({ label, variant = 'primary', className, disabled, ...rest }: Props) {
  const v = variants[variant]
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityState={{ disabled: !!disabled }}
      disabled={disabled}
      className={cn(base, v.box, disabled && 'opacity-40', className)}
      {...rest}
    >
      <AppText className={v.label}>{label}</AppText>
    </Pressable>
  )
}

// components/ui/Card.tsx
export function Card({ className, ...rest }: ViewProps & { className?: string }) {
  return <View className={cn('rounded-2xl border border-ink-700 bg-ink-900 p-4', className)} {...rest} />
}

// components/ui/Badge.tsx — difficulté des questions, streak…
type Tone = 'neutral' | 'success' | 'danger' | 'streak' | 'brand'
const tones: Record<Tone, string> = {
  neutral: 'bg-ink-700/50 text-ink-100',
  success: 'bg-green-500/15 text-green-500',
  danger: 'bg-red-500/15 text-red-500',
  streak: 'bg-streak/15 text-streak',
  brand: 'bg-brand/15 text-brand-light',
}
 
export function Badge({ label, tone = 'neutral' }: { label: string; tone?: Tone }) {
  return (
    <View className={cn('self-start rounded-full px-2.5 py-1', tones[tone].split(' ')[0])}>
      <AppText className={cn('text-xs font-bold', tones[tone].split(' ')[1])}>{label}</AppText>
    </View>
  )
}

// components/ui/ProgressBar.tsx — progression dans la session (question 3/10)
export function ProgressBar({ ratio }: { ratio: number }) {
  return (
    <View
      accessibilityRole="progressbar"
      accessibilityValue={{ min: 0, max: 100, now: Math.round(ratio * 100) }}
      className="h-2 overflow-hidden rounded-full bg-ink-700/60"
    >
      <View className="h-full rounded-full bg-brand" style={{ width: `${ratio * 100}%` }} />
    </View>
  )
}