@situaction/traquiste-mobile 1.0.0-next.2 → 1.0.0-next.4

package/docs/src/lib/createComponentPage.tsx

@@ -1,270 +0,0 @@
-/** Factory that generates a full documentation page for a component */
-import { useState } from 'react'
-import PropsTable from '../components/PropsTable'
-import LiveEditor from '../components/LiveEditor'
-import TableOfContents from '../components/TableOfContents'
-import type { PropDef } from '../components/PropsTable'
-import type { TocItem } from '../components/TableOfContents'
-
-export type { PropDef }
-
-export interface Demo {
-  /** Optional H2 section heading rendered above this demo */
-  section?: string
-  /** Optional description rendered below the section heading */
-  sectionDescription?: string
-  /** Label shown in the demo card header */
-  title: string
-  /** JSX expression shown and evaluated live */
-  code: string
-}
-
-export type ComponentStatus = 'stable' | 'beta' | 'new' | 'deprecated'
-
-export interface ComponentPageConfig {
-  title: string
-  description: string
-  /** Maturity status of the component */
-  status?: ComponentStatus
-  /** Link to the Figma component (opens in a new tab) */
-  figma?: string
-  /** Components available in the live editor. React is injected automatically. */
-  scope: Record<string, unknown>
-  demos: Demo[]
-  props: PropDef[]
-}
-
-const STATUS_CONFIG: Record<ComponentStatus, { label: string; color: string; bg: string; border: string }> = {
-  stable:     { label: 'Stable',     color: '#16a34a', bg: '#f0fdf4', border: '#bbf7d0' },
-  beta:       { label: 'Beta',       color: '#d97706', bg: '#fffbeb', border: '#fde68a' },
-  new:        { label: 'Nouveau',    color: '#2563eb', bg: '#eff6ff', border: '#bfdbfe' },
-  deprecated: { label: 'Déprécié',  color: '#dc2626', bg: '#fef2f2', border: '#fecaca' },
-}
-
-function StatusBadge({ status }: { status: ComponentStatus }) {
-  const { label, color, bg, border } = STATUS_CONFIG[status]
-  return (
-    <span style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      fontSize: 11,
-      fontWeight: 700,
-      letterSpacing: '0.05em',
-      textTransform: 'uppercase' as const,
-      color,
-      backgroundColor: bg,
-      border: `1px solid ${border}`,
-      borderRadius: 999,
-      padding: '3px 10px',
-    }}>
-      {label}
-    </span>
-  )
-}
-
-function ImportBlock({ componentName }: { componentName: string }) {
-  const [copied, setCopied] = useState(false)
-  const snippet = `import { ${componentName} } from '@situaction/traquiste-mobile'`
-
-  function handleCopy() {
-    navigator.clipboard.writeText(snippet).then(() => {
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    })
-  }
-
-  return (
-    <div style={S.importBlock}>
-      <code style={S.importCode}>{snippet}</code>
-      <button
-        style={{ ...S.importBtn, ...(copied ? S.importBtnCopied : {}) }}
-        onClick={handleCopy}
-      >
-        {copied ? '✓ Copié' : 'Copier'}
-      </button>
-    </div>
-  )
-}
-
-function FigmaIcon() {
-  return (
-    <svg width="12" height="16" viewBox="0 0 38 57" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M19 28.5A9.5 9.5 0 1 1 28.5 19 9.5 9.5 0 0 1 19 28.5Z" fill="#1ABCFE"/>
-      <path d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19V47.5A9.5 9.5 0 0 1 0 47.5Z" fill="#0ACF83"/>
-      <path d="M19 0V19H28.5A9.5 9.5 0 0 0 19 0Z" fill="#FF7262"/>
-      <path d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5Z" fill="#F24E1E"/>
-      <path d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5Z" fill="#A259FF"/>
-    </svg>
-  )
-}
-
-function slugify(text: string): string {
-  return text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
-}
-
-const S = {
-  layout: { display: 'flex', gap: 48, alignItems: 'flex-start' as const },
-  content: { flex: 1, minWidth: 0 },
-  title: {
-    fontSize: 36,
-    fontWeight: 700,
-    marginBottom: 8,
-    color: 'var(--docs-text-primary)',
-    letterSpacing: '-0.02em',
-  },
-  description: {
-    fontSize: 16,
-    color: 'var(--docs-text-secondary)',
-    marginBottom: 40,
-    lineHeight: 1.6,
-  },
-  sectionHeading: {
-    fontSize: 22,
-    fontWeight: 600,
-    color: 'var(--docs-text-primary)',
-    marginBottom: 12,
-    marginTop: 40,
-    paddingTop: 24,
-    borderTop: '1px solid var(--docs-border)',
-    scrollMarginTop: 80,
-  },
-  sectionDescription: {
-    fontSize: 15,
-    color: 'var(--docs-text-secondary)',
-    lineHeight: 1.65,
-    marginBottom: 20,
-  },
-  meta: {
-    display: 'flex',
-    alignItems: 'center' as const,
-    gap: 8,
-    marginBottom: 40,
-  },
-  importBlock: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between' as const,
-    gap: 12,
-    backgroundColor: '#0d1117',
-    border: '1px solid var(--docs-border)',
-    borderRadius: 8,
-    padding: '12px 16px',
-    marginBottom: 40,
-  },
-  importCode: {
-    fontFamily: 'ui-monospace, Consolas, monospace',
-    fontSize: 13,
-    color: '#e6edf3',
-    flex: 1,
-  },
-  importBtn: {
-    fontSize: 11,
-    fontWeight: 500,
-    padding: '3px 8px',
-    border: '1px solid #30363d',
-    borderRadius: 5,
-    cursor: 'pointer',
-    backgroundColor: '#21262d',
-    color: '#8b949e',
-    fontFamily: 'inherit',
-    whiteSpace: 'nowrap' as const,
-    flexShrink: 0,
-  },
-  importBtnCopied: {
-    color: '#3fb950',
-    borderColor: '#238636',
-    backgroundColor: '#0d1117',
-  },
-  figmaBtn: {
-    display: 'inline-flex',
-    alignItems: 'center' as const,
-    gap: 6,
-    fontSize: 13,
-    fontWeight: 500,
-    color: 'var(--docs-text-secondary)',
-    backgroundColor: 'var(--docs-surface)',
-    border: '1px solid var(--docs-border)',
-    borderRadius: 6,
-    padding: '5px 12px',
-    textDecoration: 'none',
-    boxShadow: 'var(--docs-shadow-sm)',
-    transition: 'color 0.15s, border-color 0.15s',
-  },
-  propsHeading: {
-    fontSize: 22,
-    fontWeight: 600,
-    color: 'var(--docs-text-primary)',
-    marginBottom: 16,
-    marginTop: 40,
-    paddingTop: 24,
-    borderTop: '1px solid var(--docs-border)',
-    scrollMarginTop: 80,
-  },
-}
-
-export function createComponentPage(config: ComponentPageConfig) {
-  const tocItems: TocItem[] = []
-  const seenSections = new Set<string>()
-  for (const demo of config.demos) {
-    if (demo.section && !seenSections.has(demo.section)) {
-      seenSections.add(demo.section)
-      tocItems.push({ id: slugify(demo.section), label: demo.section })
-    }
-  }
-  tocItems.push({ id: 'props', label: 'Props' })
-
-  return function ComponentPage() {
-    let lastSection = ''
-
-    return (
-      <div style={S.layout}>
-        <div style={S.content}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
-            <h1 style={{ ...S.title, marginBottom: 0 }}>{config.title}</h1>
-            {config.status && <StatusBadge status={config.status} />}
-          </div>
-          <div style={S.meta}>
-            <p style={{ ...S.description, margin: 0, flex: 1 }}>{config.description}</p>
-            {config.figma && (
-              <a href={config.figma} target="_blank" rel="noreferrer" style={S.figmaBtn}>
-                <FigmaIcon />
-                Figma
-              </a>
-            )}
-          </div>
-
-          <ImportBlock componentName={config.title} />
-
-          <section>
-            {config.demos.map((demo, i) => {
-              const showSection = !!demo.section && demo.section !== lastSection
-              if (demo.section) lastSection = demo.section
-              return (
-                <div key={i}>
-                  {showSection && (
-                    <>
-                      <h2 id={slugify(demo.section!)} style={S.sectionHeading}>
-                        {demo.section}
-                      </h2>
-                      {demo.sectionDescription && (
-                        <p style={S.sectionDescription}>{demo.sectionDescription}</p>
-                      )}
-                    </>
-                  )}
-                  <LiveEditor title={demo.title} initialCode={demo.code} scope={config.scope} />
-                </div>
-              )
-            })}
-          </section>
-
-          <section>
-            <h2 id="props" style={S.propsHeading}>Props</h2>
-            <PropsTable props={config.props} />
-          </section>
-        </div>
-
-        <TableOfContents items={tocItems} />
-      </div>
-    )
-  }
-}

package/docs/src/main.tsx

@@ -1,13 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>,
-)

package/docs/src/pages/Examples.tsx

@@ -1,273 +0,0 @@
-/** Real-world usage examples — showcases components in realistic UI scenarios */
-import { Text, TouchableOpacity, View, StyleSheet } from 'react-native'
-import LiveEditor from '../components/LiveEditor'
-
-// Button stub — mirrors docs/src/pages/components/button.tsx
-function Button({
-  label = 'Button',
-  variant = 'primary',
-  disabled = false,
-  onPress,
-}: {
-  label?: string
-  variant?: 'primary' | 'secondary'
-  disabled?: boolean
-  onPress?: () => void
-}) {
-  return (
-    <TouchableOpacity
-      style={[
-        btnStyles.base,
-        variant === 'secondary' ? btnStyles.secondary : btnStyles.primary,
-        disabled && btnStyles.disabled,
-      ]}
-      disabled={disabled}
-      onPress={onPress}
-      activeOpacity={0.8}
-    >
-      <Text style={[btnStyles.label, variant === 'secondary' && btnStyles.labelSecondary]}>
-        {label}
-      </Text>
-    </TouchableOpacity>
-  )
-}
-
-const btnStyles = StyleSheet.create({
-  base: { paddingHorizontal: 24, paddingVertical: 12, borderRadius: 8, alignItems: 'center' },
-  primary: { backgroundColor: '#0072E5' },
-  secondary: { backgroundColor: 'transparent', borderWidth: 1, borderColor: '#0072E5' },
-  disabled: { opacity: 0.4 },
-  label: { color: '#fff', fontSize: 14, fontWeight: '600' },
-  labelSecondary: { color: '#0072E5' },
-})
-
-const SCOPE = { Button, View, Text, StyleSheet }
-
-interface Example {
-  section: string
-  sectionDescription: string
-  title: string
-  description: string
-  code: string
-}
-
-const EXAMPLES: Example[] = [
-  {
-    section: 'Authentification',
-    sectionDescription:
-      'Les boutons guident l\'utilisateur à travers les formulaires d\'identification. Le bouton primary valide, le secondary offre une alternative.',
-    title: 'Formulaire de connexion',
-    description: 'Le bouton primary déclenche la soumission. Il peut être désactivé tant que les champs sont vides.',
-    code: `<View style={{ width: 320, backgroundColor: '#ffffff', borderRadius: 16, padding: 28, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.08, shadowRadius: 16, elevation: 4 }}>
-  <Text style={{ fontSize: 22, fontWeight: '700', color: '#18181b', marginBottom: 4 }}>Connexion</Text>
-  <Text style={{ fontSize: 14, color: '#71717a', marginBottom: 28 }}>Accédez à votre espace de travail</Text>
-
-  <Text style={{ fontSize: 13, fontWeight: '500', color: '#3f3f46', marginBottom: 6 }}>Email</Text>
-  <View style={{ borderWidth: 1, borderColor: '#e4e4e7', borderRadius: 8, paddingHorizontal: 12, paddingVertical: 11, marginBottom: 16, backgroundColor: '#fafafa' }}>
-    <Text style={{ fontSize: 14, color: '#a1a1aa' }}>exemple@situaction.fr</Text>
-  </View>
-
-  <Text style={{ fontSize: 13, fontWeight: '500', color: '#3f3f46', marginBottom: 6 }}>Mot de passe</Text>
-  <View style={{ borderWidth: 1, borderColor: '#e4e4e7', borderRadius: 8, paddingHorizontal: 12, paddingVertical: 11, marginBottom: 28, backgroundColor: '#fafafa' }}>
-    <Text style={{ fontSize: 14, color: '#a1a1aa' }}>••••••••</Text>
-  </View>
-
-  <Button label="Se connecter" />
-</View>`,
-  },
-  {
-    section: 'Authentification',
-    sectionDescription: '',
-    title: 'Connexion désactivée',
-    description: 'Bouton désactivé tant que les champs obligatoires ne sont pas remplis.',
-    code: `<View style={{ width: 320, backgroundColor: '#ffffff', borderRadius: 16, padding: 28, shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.08, shadowRadius: 16, elevation: 4 }}>
-  <Text style={{ fontSize: 22, fontWeight: '700', color: '#18181b', marginBottom: 4 }}>Connexion</Text>
-  <Text style={{ fontSize: 14, color: '#71717a', marginBottom: 28 }}>Accédez à votre espace de travail</Text>
-
-  <Text style={{ fontSize: 13, fontWeight: '500', color: '#3f3f46', marginBottom: 6 }}>Email</Text>
-  <View style={{ borderWidth: 1, borderColor: '#e4e4e7', borderRadius: 8, paddingHorizontal: 12, paddingVertical: 11, marginBottom: 16, backgroundColor: '#fafafa' }}>
-    <Text style={{ fontSize: 14, color: '#d4d4d8' }}>—</Text>
-  </View>
-
-  <Text style={{ fontSize: 13, fontWeight: '500', color: '#3f3f46', marginBottom: 6 }}>Mot de passe</Text>
-  <View style={{ borderWidth: 1, borderColor: '#e4e4e7', borderRadius: 8, paddingHorizontal: 12, paddingVertical: 11, marginBottom: 28, backgroundColor: '#fafafa' }}>
-    <Text style={{ fontSize: 14, color: '#d4d4d8' }}>—</Text>
-  </View>
-
-  <Button label="Se connecter" disabled />
-</View>`,
-  },
-  {
-    section: 'Confirmations',
-    sectionDescription:
-      'Les actions destructives ou irréversibles nécessitent une confirmation explicite. Le bouton secondary permet d\'annuler, le primary confirme l\'action.',
-    title: 'Suppression d\'un élément',
-    description: 'Dialogue de confirmation avec deux choix clairs : annuler (secondary) et confirmer (primary).',
-    code: `<View style={{ width: 320, backgroundColor: '#ffffff', borderRadius: 16, padding: 28, shadowColor: '#000', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.12, shadowRadius: 24, elevation: 8 }}>
-  <View style={{ width: 44, height: 44, borderRadius: 12, backgroundColor: '#fef2f2', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
-    <Text style={{ fontSize: 22 }}>🗑</Text>
-  </View>
-  <Text style={{ fontSize: 18, fontWeight: '700', color: '#18181b', marginBottom: 8 }}>Supprimer l'intervention ?</Text>
-  <Text style={{ fontSize: 14, color: '#71717a', lineHeight: 22, marginBottom: 28 }}>
-    Cette action est irréversible. L'intervention et toutes ses données seront définitivement supprimées.
-  </Text>
-  <View style={{ flexDirection: 'row', gap: 12 }}>
-    <View style={{ flex: 1 }}>
-      <Button label="Annuler" variant="secondary" />
-    </View>
-    <View style={{ flex: 1 }}>
-      <Button label="Supprimer" />
-    </View>
-  </View>
-</View>`,
-  },
-  {
-    section: 'Confirmations',
-    sectionDescription: '',
-    title: 'Validation d\'un rapport',
-    description: 'Confirmation positive avec action principale mise en avant.',
-    code: `<View style={{ width: 320, backgroundColor: '#ffffff', borderRadius: 16, padding: 28, shadowColor: '#000', shadowOffset: { width: 0, height: 8 }, shadowOpacity: 0.12, shadowRadius: 24, elevation: 8 }}>
-  <View style={{ width: 44, height: 44, borderRadius: 12, backgroundColor: '#f0fdf4', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
-    <Text style={{ fontSize: 22 }}>✅</Text>
-  </View>
-  <Text style={{ fontSize: 18, fontWeight: '700', color: '#18181b', marginBottom: 8 }}>Valider le rapport ?</Text>
-  <Text style={{ fontSize: 14, color: '#71717a', lineHeight: 22, marginBottom: 28 }}>
-    Le rapport DEV-2024-0312 sera transmis au responsable de site pour approbation finale.
-  </Text>
-  <View style={{ flexDirection: 'row', gap: 12 }}>
-    <View style={{ flex: 1 }}>
-      <Button label="Plus tard" variant="secondary" />
-    </View>
-    <View style={{ flex: 1 }}>
-      <Button label="Valider" />
-    </View>
-  </View>
-</View>`,
-  },
-  {
-    section: 'Navigation et actions',
-    sectionDescription:
-      'Les barres d\'actions ancrent les boutons en bas d\'écran pour faciliter l\'accès aux actions principales sur mobile.',
-    title: 'Barre d\'actions principale',
-    description: 'Action principale en primary et action secondaire en dessous.',
-    code: `<View style={{ width: 360, backgroundColor: '#ffffff', borderTopWidth: 1, borderTopColor: '#e4e4e7', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 32, gap: 10 }}>
-  <Text style={{ fontSize: 12, color: '#a1a1aa', textAlign: 'center', marginBottom: 4 }}>
-    Rapport DEV-2024-0312 · En attente de validation
-  </Text>
-  <Button label="Valider l'intervention" />
-  <Button label="Signaler un problème" variant="secondary" />
-</View>`,
-  },
-  {
-    section: 'Navigation et actions',
-    sectionDescription: '',
-    title: 'Actions sur une fiche',
-    description: 'Deux actions côte à côte dans un contexte de fiche détail.',
-    code: `<View style={{ width: 360, backgroundColor: '#ffffff', borderRadius: 16, overflow: 'hidden', shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.06, shadowRadius: 8, elevation: 2 }}>
-  <View style={{ padding: 20, borderBottomWidth: 1, borderBottomColor: '#e4e4e7' }}>
-    <Text style={{ fontSize: 12, color: '#a1a1aa', marginBottom: 4 }}>Intervention #DEV-2024-0312</Text>
-    <Text style={{ fontSize: 17, fontWeight: '600', color: '#18181b', marginBottom: 4 }}>Remplacement chaudière</Text>
-    <Text style={{ fontSize: 14, color: '#71717a' }}>12 rue des Lilas, 75011 Paris</Text>
-  </View>
-  <View style={{ padding: 20, flexDirection: 'row', gap: 12 }}>
-    <View style={{ flex: 1 }}>
-      <Button label="Refuser" variant="secondary" />
-    </View>
-    <View style={{ flex: 1 }}>
-      <Button label="Accepter" />
-    </View>
-  </View>
-</View>`,
-  },
-]
-
-const S = {
-  header: {
-    marginBottom: 48,
-  },
-  badge: {
-    display: 'inline-flex' as const,
-    alignItems: 'center',
-    fontSize: 12,
-    fontWeight: 600,
-    color: 'var(--docs-accent)',
-    backgroundColor: 'var(--docs-accent-subtle)',
-    padding: '3px 10px',
-    borderRadius: 999,
-    marginBottom: 16,
-    letterSpacing: '0.02em',
-  },
-  title: {
-    fontSize: 36,
-    fontWeight: 700,
-    color: 'var(--docs-text-primary)',
-    marginBottom: 12,
-    letterSpacing: '-0.02em',
-  },
-  subtitle: {
-    fontSize: 16,
-    color: 'var(--docs-text-secondary)',
-    lineHeight: 1.65,
-    maxWidth: 540,
-  },
-  section: {
-    marginBottom: 40,
-  },
-  sectionHeading: {
-    fontSize: 22,
-    fontWeight: 600,
-    color: 'var(--docs-text-primary)',
-    marginBottom: 10,
-    marginTop: 40,
-    paddingTop: 24,
-    borderTop: '1px solid var(--docs-border)',
-  },
-  sectionDescription: {
-    fontSize: 15,
-    color: 'var(--docs-text-secondary)',
-    lineHeight: 1.65,
-    marginBottom: 20,
-  },
-  exampleMeta: {
-    fontSize: 13,
-    color: 'var(--docs-text-muted)',
-    marginBottom: 10,
-    lineHeight: 1.5,
-  },
-}
-
-export default function Examples() {
-  let lastSection = ''
-
-  return (
-    <div>
-      <div style={S.header}>
-        <span style={S.badge}>Cas d'usage</span>
-        <h1 style={S.title}>Exemples</h1>
-        <p style={S.subtitle}>
-          Les composants utilisés dans des contextes réels de l'application. Chaque exemple est
-          éditable pour explorer les variantes et états.
-        </p>
-      </div>
-
-      {EXAMPLES.map((ex, i) => {
-        const showSection = ex.section !== lastSection
-        if (showSection) lastSection = ex.section
-        return (
-          <div key={i}>
-            {showSection && (
-              <div style={S.section}>
-                <h2 style={S.sectionHeading}>{ex.section}</h2>
-                {ex.sectionDescription && (
-                  <p style={S.sectionDescription}>{ex.sectionDescription}</p>
-                )}
-              </div>
-            )}
-            {ex.description && <p style={S.exampleMeta}>{ex.description}</p>}
-            <LiveEditor title={ex.title} initialCode={ex.code} scope={SCOPE} />
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/docs/src/pages/Home.tsx

@@ -1,70 +0,0 @@
-/** Documentation home page */
-const S = {
-  badge: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    fontSize: 12,
-    fontWeight: 600,
-    color: 'var(--docs-accent)',
-    backgroundColor: 'var(--docs-accent-subtle)',
-    padding: '3px 10px',
-    borderRadius: 999,
-    marginBottom: 20,
-    letterSpacing: '0.02em',
-  },
-  title: {
-    fontSize: 42,
-    fontWeight: 700,
-    color: 'var(--docs-text-primary)',
-    marginBottom: 16,
-    letterSpacing: '-0.03em',
-    lineHeight: 1.15,
-  },
-  subtitle: {
-    fontSize: 17,
-    color: 'var(--docs-text-secondary)',
-    marginBottom: 40,
-    lineHeight: 1.7,
-    maxWidth: 500,
-  },
-  installWrap: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 12,
-    backgroundColor: 'var(--docs-surface)',
-    border: '1px solid var(--docs-border)',
-    borderRadius: 10,
-    padding: '12px 18px',
-    boxShadow: 'var(--docs-shadow-sm)',
-  },
-  installCode: {
-    fontFamily: 'ui-monospace, Consolas, monospace',
-    fontSize: 14,
-    color: 'var(--docs-text-primary)',
-  },
-  installLabel: {
-    fontSize: 11,
-    fontWeight: 600,
-    color: 'var(--docs-text-muted)',
-    letterSpacing: '0.06em',
-    textTransform: 'uppercase' as const,
-    marginBottom: 10,
-  },
-}
-
-export default function Home() {
-  return (
-    <div>
-      <span style={S.badge}>v0.1.0-alpha</span>
-      <h1 style={S.title}>traquiste-mobile</h1>
-      <p style={S.subtitle}>
-        Bibliothèque de composants React Native pour les applications Situaction.
-        Construite avec Expo, TypeScript strict et StyleSheet natif.
-      </p>
-      <p style={S.installLabel}>Installation</p>
-      <div style={S.installWrap}>
-        <code style={S.installCode}>npm install @situaction/traquiste-mobile</code>
-      </div>
-    </div>
-  )
-}