@situaction/traquiste-mobile 1.0.0-next.2

package/docs/src/components/LiveEditor.tsx

@@ -0,0 +1,294 @@
+/** Demo card: live-editable preview powered by @babel/standalone */
+import { useState, useEffect, useRef, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import ReactForScope from 'react'
+import Editor from '@monaco-editor/react'
+import { ThemeProvider } from '@situaction/traquiste-mobile'
+import { useColorMode } from '../context/ColorModeContext'
+
+type BabelModule = typeof import('@babel/standalone')
+
+let babelCache: BabelModule | null = null
+let babelLoading: Promise<BabelModule> | null = null
+
+function loadBabel(): Promise<BabelModule> {
+  if (babelCache) return Promise.resolve(babelCache)
+  if (!babelLoading) {
+    babelLoading = import('@babel/standalone').then((m) => {
+      babelCache = m
+      return m
+    })
+  }
+  return babelLoading
+}
+
+interface LiveEditorProps {
+  title: string
+  initialCode: string
+  scope: Record<string, unknown>
+}
+
+const S = {
+  card: {
+    border: '1px solid var(--docs-border)',
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: 20,
+    boxShadow: 'var(--docs-shadow-sm)',
+  },
+  header: {
+    padding: '10px 14px',
+    borderBottom: '1px solid var(--docs-border)',
+    backgroundColor: 'var(--docs-surface)',
+    display: 'flex',
+    justifyContent: 'space-between' as const,
+    alignItems: 'center' as const,
+    gap: 8,
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: 'var(--docs-text-muted)',
+    letterSpacing: '0.03em',
+    textTransform: 'uppercase' as const,
+    flex: 1,
+  },
+  actions: { display: 'flex', gap: 6, alignItems: 'center' as const },
+  btn: {
+    fontSize: 12,
+    fontWeight: 500,
+    padding: '4px 10px',
+    border: '1px solid var(--docs-border)',
+    borderRadius: 6,
+    cursor: 'pointer',
+    backgroundColor: 'var(--docs-bg)',
+    color: 'var(--docs-text-secondary)',
+    fontFamily: 'inherit',
+    whiteSpace: 'nowrap' as const,
+  },
+  btnCopied: {
+    color: 'var(--docs-badge-default-color)',
+    borderColor: 'var(--docs-badge-default-bg)',
+    backgroundColor: 'var(--docs-badge-default-bg)',
+  },
+  loading: { fontSize: 13, color: 'var(--docs-text-disabled)', fontStyle: 'italic' },
+  error: {
+    color: 'var(--docs-badge-name-color)',
+    fontSize: 12,
+    fontFamily: 'ui-monospace, Consolas, monospace',
+    whiteSpace: 'pre-wrap' as const,
+    margin: 0,
+    maxWidth: '100%',
+    overflowX: 'auto' as const,
+    lineHeight: 1.6,
+  },
+}
+
+/** 6-dot drag indicator (2 cols × 3 rows) */
+function DragDots({ active }: { active: boolean }) {
+  const color = active ? 'var(--docs-accent)' : 'var(--docs-text-muted)'
+  const dot = { width: 2, height: 2, borderRadius: '50%', backgroundColor: color } as const
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+      {[0, 1, 2].map((i) => (
+        <div key={i} style={{ display: 'flex', gap: 3 }}>
+          <div style={dot} /><div style={dot} />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default function LiveEditor({ title, initialCode, scope }: LiveEditorProps) {
+  const [code, setCode] = useState(initialCode)
+  const [showCode, setShowCode] = useState(false)
+  const [preview, setPreview] = useState<ReactNode>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [previewWidth, setPreviewWidth] = useState<number | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const { mode } = useColorMode()
+
+  const wrapperRef = useRef<HTMLDivElement>(null)
+  const scopeRef = useRef(scope)
+  scopeRef.current = scope
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  function handleMouseDown(e: React.MouseEvent) {
+    e.preventDefault()
+    const startX = e.clientX
+    const startWidth = wrapperRef.current?.offsetWidth ?? 600
+    setIsDragging(true)
+
+    function onMouseMove(ev: MouseEvent) {
+      const next = Math.max(280, Math.min(1000, startWidth + (ev.clientX - startX)))
+      setPreviewWidth(next)
+    }
+    function onMouseUp() {
+      setIsDragging(false)
+      window.removeEventListener('mousemove', onMouseMove)
+      window.removeEventListener('mouseup', onMouseUp)
+    }
+    window.addEventListener('mousemove', onMouseMove)
+    window.addEventListener('mouseup', onMouseUp)
+  }
+
+  const evalCode = useCallback((src: string) => {
+    loadBabel()
+      .then((Babel) => {
+        const fullScope = { React: ReactForScope, ...scopeRef.current }
+        const keys = Object.keys(fullScope)
+        const wrapped = `const { ${keys.join(', ')} } = __scope__;\nreturn (${src});`
+        const result = Babel.transform(wrapped, {
+          presets: ['react'],
+          filename: 'preview.jsx',
+          parserOpts: { allowReturnOutsideFunction: true },
+        })
+        if (!result.code) throw new Error('Transpilation failed')
+        // eslint-disable-next-line no-new-func
+        const fn = new Function('__scope__', result.code)
+        setPreview(fn(fullScope) as ReactNode)
+        setError(null)
+      })
+      .catch((e: unknown) => {
+        setError(e instanceof Error ? e.message : String(e))
+      })
+  }, [])
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => { evalCode(initialCode) }, [])
+
+  function handleChange(value: string | undefined) {
+    const src = value ?? ''
+    setCode(src)
+    clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => evalCode(src), 300)
+  }
+
+  function handleCopy() {
+    navigator.clipboard.writeText(code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+
+  function handleReset() {
+    setCode(initialCode)
+    evalCode(initialCode)
+  }
+
+  const editorHeight = Math.max(80, code.split('\n').length * 19 + 24)
+
+  return (
+    <div style={{ ...S.card, userSelect: isDragging ? 'none' : undefined }}>
+      <div style={S.header}>
+        <span style={S.title}>{title}</span>
+        <div style={S.actions}>
+          {code !== initialCode && (
+            <button style={S.btn} onClick={handleReset}>↺ Reset</button>
+          )}
+          <button style={{ ...S.btn, ...(copied ? S.btnCopied : {}) }} onClick={handleCopy}>
+            {copied ? '✓ Copié' : 'Copier'}
+          </button>
+          <button style={S.btn} onClick={() => setShowCode((v) => !v)}>
+            {showCode ? 'Masquer' : '<> Code'}
+          </button>
+        </div>
+      </div>
+
+      {/* Preview zone */}
+      <div style={{
+        backgroundColor: 'var(--docs-bg-subtle)',
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: 140,
+        position: 'relative',
+        transition: 'background 0.2s',
+      }}>
+        {/* Resizable wrapper: content + handle side by side */}
+        <div
+          ref={wrapperRef}
+          style={{
+            display: 'flex',
+            alignItems: 'stretch',
+            width: previewWidth ? `${previewWidth}px` : '100%',
+            maxWidth: '100%',
+          }}
+        >
+          {/* Content */}
+          <div style={{
+            flex: 1,
+            padding: '48px 32px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}>
+            <ThemeProvider colorScheme={mode}>
+              {error
+                ? <pre style={S.error}>{error}</pre>
+                : preview ?? <span style={S.loading}>Chargement…</span>}
+            </ThemeProvider>
+          </div>
+
+          {/* Drag handle */}
+          <div
+            onMouseDown={handleMouseDown}
+            onDoubleClick={() => setPreviewWidth(null)}
+            title="Glisser pour redimensionner · Double-clic pour réinitialiser"
+            style={{
+              width: 20,
+              flexShrink: 0,
+              cursor: 'ew-resize',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderLeft: '1px solid var(--docs-border)',
+              backgroundColor: isDragging ? 'var(--docs-accent-subtle)' : 'transparent',
+              transition: 'background 0.15s',
+            }}
+          >
+            <DragDots active={isDragging} />
+          </div>
+        </div>
+
+        {/* Width badge */}
+        {previewWidth && (
+          <span style={{
+            position: 'absolute',
+            bottom: 6,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            fontSize: 11,
+            fontFamily: 'ui-monospace, Consolas, monospace',
+            color: 'var(--docs-text-muted)',
+            backgroundColor: 'var(--docs-surface)',
+            border: '1px solid var(--docs-border)',
+            borderRadius: 4,
+            padding: '2px 6px',
+            pointerEvents: 'none' as const,
+          }}>
+            {previewWidth}px
+          </span>
+        )}
+      </div>
+
+      {showCode && (
+        <Editor
+          height={editorHeight}
+          language="jsx"
+          theme="vs-dark"
+          value={code}
+          onChange={handleChange}
+          options={{
+            minimap: { enabled: false },
+            scrollBeyondLastLine: false,
+            fontSize: 13,
+            lineNumbers: 'off',
+            padding: { top: 14, bottom: 14 },
+            fontFamily: 'ui-monospace, Consolas, monospace',
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/docs/src/components/PropsTable.tsx

@@ -0,0 +1,101 @@
+/** Typed props API table — one row per prop */
+export interface PropDef {
+  name: string
+  type: string
+  required: boolean
+  default?: string
+  description: string
+}
+
+interface PropsTableProps {
+  props: PropDef[]
+}
+
+const S = {
+  table: {
+    width: '100%',
+    borderCollapse: 'collapse' as const,
+    fontSize: 14,
+    marginTop: 16,
+  },
+  th: {
+    textAlign: 'left' as const,
+    padding: '10px 12px',
+    backgroundColor: 'var(--docs-surface)',
+    borderBottom: '2px solid var(--docs-border)',
+    fontWeight: 600,
+    color: 'var(--docs-text-primary)',
+    fontSize: 13,
+  },
+  td: {
+    padding: '10px 12px',
+    borderBottom: '1px solid var(--docs-border)',
+    verticalAlign: 'top' as const,
+    color: 'var(--docs-text-secondary)',
+    lineHeight: 1.5,
+  },
+  nameMono: {
+    fontFamily: 'ui-monospace, Consolas, monospace',
+    fontSize: 13,
+    color: 'var(--docs-badge-name-color)',
+    backgroundColor: 'var(--docs-badge-name-bg)',
+    padding: '2px 5px',
+    borderRadius: 3,
+  },
+  typeMono: {
+    fontFamily: 'ui-monospace, Consolas, monospace',
+    fontSize: 13,
+    color: 'var(--docs-badge-type-color)',
+    backgroundColor: 'var(--docs-badge-type-bg)',
+    padding: '2px 5px',
+    borderRadius: 3,
+  },
+  defaultMono: {
+    fontFamily: 'ui-monospace, Consolas, monospace',
+    fontSize: 13,
+    color: 'var(--docs-badge-default-color)',
+    backgroundColor: 'var(--docs-badge-default-bg)',
+    padding: '2px 5px',
+    borderRadius: 3,
+  },
+  required: { color: 'var(--docs-badge-name-color)', fontSize: 12, marginLeft: 4 },
+  empty: { color: 'var(--docs-text-disabled)' },
+}
+
+const HEADERS = ['Nom', 'Type', 'Défaut', 'Description']
+
+export default function PropsTable({ props }: PropsTableProps) {
+  return (
+    <table style={S.table}>
+      <thead>
+        <tr>
+          {HEADERS.map((h) => (
+            <th key={h} style={S.th}>{h}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {props.map((prop, i) => (
+          <tr
+            key={prop.name}
+            style={{ backgroundColor: i % 2 === 0 ? 'var(--docs-bg)' : 'var(--docs-bg-subtle)' }}
+          >
+            <td style={S.td}>
+              <code style={S.nameMono}>{prop.name}</code>
+              {prop.required && <span style={S.required}>*</span>}
+            </td>
+            <td style={S.td}>
+              <code style={S.typeMono}>{prop.type}</code>
+            </td>
+            <td style={S.td}>
+              {prop.default
+                ? <code style={S.defaultMono}>{prop.default}</code>
+                : <span style={S.empty}>—</span>}
+            </td>
+            <td style={S.td}>{prop.description}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/docs/src/components/Sidebar.tsx

@@ -0,0 +1,103 @@
+/** Navigation sidebar — always dark, pill-style active states */
+import { useState } from 'react'
+import { NavLink } from 'react-router-dom'
+
+const NAV = [
+  {
+    group: 'Général',
+    items: [{ label: 'Exemples', path: '/examples' }],
+  },
+  {
+    group: 'Composants',
+    items: [
+      { label: 'Button', path: '/components/button' },
+      { label: 'ButtonMenu', path: '/components/button-menu' },
+      { label: 'ButtonAction', path: '/components/button-action' },
+      { label: 'ButtonMap', path: '/components/button-map' },
+      { label: 'FilterChip', path: '/components/filter-chip' },
+    ],
+  },
+]
+
+const S = {
+  container: {
+    padding: '20px 0 24px',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column' as const,
+  },
+  brand: {
+    display: 'block',
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: 700,
+    padding: '0 16px 16px',
+    marginBottom: 8,
+    textDecoration: 'none',
+    letterSpacing: '-0.01em',
+    borderBottom: '1px solid rgba(255,255,255,0.08)',
+  },
+  brandSub: {
+    display: 'block',
+    fontSize: 11,
+    color: 'rgba(255,255,255,0.4)',
+    fontWeight: 400,
+    marginTop: 2,
+  },
+  group: { marginTop: 16, paddingBottom: 8 },
+  groupLabel: {
+    display: 'block',
+    color: 'rgba(255,255,255,0.3)',
+    fontSize: 10,
+    fontWeight: 600,
+    letterSpacing: '0.1em',
+    textTransform: 'uppercase' as const,
+    padding: '0 16px 6px',
+  },
+  link: (active: boolean, hovered: boolean): React.CSSProperties => ({
+    display: 'block',
+    padding: '6px 12px',
+    margin: '1px 8px',
+    color: active ? '#fff' : hovered ? 'rgba(255,255,255,0.85)' : 'rgba(255,255,255,0.55)',
+    textDecoration: 'none',
+    fontSize: 14,
+    fontWeight: active ? 500 : 400,
+    borderRadius: 6,
+    backgroundColor: active
+      ? 'rgba(255,255,255,0.1)'
+      : hovered
+        ? 'rgba(255,255,255,0.05)'
+        : 'transparent',
+    transition: 'background 0.15s, color 0.15s',
+  }),
+}
+
+export default function Sidebar() {
+  const [hovered, setHovered] = useState<string | null>(null)
+
+  return (
+    <div style={S.container}>
+      <NavLink to="/" style={S.brand}>
+        traquiste-mobile
+        <span style={S.brandSub}>by Situaction</span>
+      </NavLink>
+
+      {NAV.map(({ group, items }) => (
+        <div key={group} style={S.group}>
+          <span style={S.groupLabel}>{group}</span>
+          {items.map(({ label, path }) => (
+            <NavLink
+              key={path}
+              to={path}
+              style={({ isActive }) => S.link(isActive, hovered === path)}
+              onMouseEnter={() => setHovered(path)}
+              onMouseLeave={() => setHovered(null)}
+            >
+              {label}
+            </NavLink>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}

package/docs/src/components/TableOfContents.tsx

@@ -0,0 +1,75 @@
+/** Sticky right-side table of contents with active section tracking */
+import { useState, useEffect } from 'react'
+
+export interface TocItem {
+  id: string
+  label: string
+}
+
+interface TableOfContentsProps {
+  items: TocItem[]
+}
+
+const S = {
+  container: {
+    width: 200,
+    flexShrink: 0,
+    position: 'sticky' as const,
+    top: 80,
+    alignSelf: 'flex-start' as const,
+  },
+  heading: {
+    fontSize: 11,
+    fontWeight: 700,
+    letterSpacing: '0.08em',
+    textTransform: 'uppercase' as const,
+    color: 'var(--docs-text-muted)',
+    marginBottom: 12,
+  },
+  link: (active: boolean): React.CSSProperties => ({
+    display: 'block',
+    fontSize: 13,
+    padding: '4px 0 4px 12px',
+    color: active ? 'var(--docs-accent)' : 'var(--docs-text-muted)',
+    textDecoration: 'none',
+    borderLeft: `2px solid ${active ? 'var(--docs-accent)' : 'var(--docs-border)'}`,
+    marginBottom: 2,
+    fontWeight: active ? 600 : 400,
+    transition: 'color 0.15s, border-color 0.15s',
+  }),
+}
+
+export default function TableOfContents({ items }: TableOfContentsProps) {
+  const [activeId, setActiveId] = useState(items[0]?.id ?? '')
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries.filter((e) => e.isIntersecting)
+        if (visible.length > 0) setActiveId(visible[0].target.id)
+      },
+      { rootMargin: '-10% 0% -70% 0%', threshold: 0 },
+    )
+    items.forEach(({ id }) => {
+      const el = document.getElementById(id)
+      if (el) observer.observe(el)
+    })
+    return () => observer.disconnect()
+  }, [items])
+
+  return (
+    <nav style={S.container}>
+      <p style={S.heading}>Sur cette page</p>
+      {items.map(({ id, label }) => (
+        <a
+          key={id}
+          href={`#${id}`}
+          style={S.link(activeId === id)}
+          onClick={() => setActiveId(id)}
+        >
+          {label}
+        </a>
+      ))}
+    </nav>
+  )
+}

package/docs/src/context/ColorModeContext.tsx

@@ -0,0 +1,34 @@
+/** Docs-level global color mode state — syncs with data-theme on <html> */
+import { createContext, useContext, useState, useEffect } from 'react'
+import type { ReactNode } from 'react'
+import type { ColorMode } from '@situaction/traquiste-mobile'
+
+interface ColorModeContextValue {
+  mode: ColorMode
+  toggle: () => void
+}
+
+const ColorModeContext = createContext<ColorModeContextValue>({
+  mode: 'light',
+  toggle: () => {},
+})
+
+export function ColorModeProvider({ children }: { children: ReactNode }) {
+  const [mode, setMode] = useState<ColorMode>('light')
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', mode)
+  }, [mode])
+
+  const toggle = () => setMode((m) => (m === 'light' ? 'dark' : 'light'))
+
+  return (
+    <ColorModeContext.Provider value={{ mode, toggle }}>
+      {children}
+    </ColorModeContext.Provider>
+  )
+}
+
+export function useColorMode(): ColorModeContextValue {
+  return useContext(ColorModeContext)
+}

package/docs/src/index.css

@@ -0,0 +1,76 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* ===== Light theme (default) ===== */
+:root {
+  --docs-bg:             #ffffff;
+  --docs-bg-subtle:      #f9fafb;
+  --docs-surface:        #f4f4f5;
+  --docs-border:         #e4e4e7;
+
+  --docs-text-primary:   #18181b;
+  --docs-text-secondary: #52525b;
+  --docs-text-muted:     #a1a1aa;
+  --docs-text-disabled:  #d4d4d8;
+
+  --docs-accent:         #0072E5;
+  --docs-accent-subtle:  rgba(0, 114, 229, 0.08);
+
+  --docs-shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
+  --docs-shadow-md:      0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
+
+  --docs-badge-name-color:    #dc2626;
+  --docs-badge-name-bg:       #fef2f2;
+  --docs-badge-type-color:    #2563eb;
+  --docs-badge-type-bg:       #eff6ff;
+  --docs-badge-default-color: #16a34a;
+  --docs-badge-default-bg:    #f0fdf4;
+}
+
+/* ===== Dark theme ===== */
+[data-theme="dark"] {
+  --docs-bg:             #09090b;
+  --docs-bg-subtle:      #18181b;
+  --docs-surface:        #27272a;
+  --docs-border:         #3f3f46;
+
+  --docs-text-primary:   #fafafa;
+  --docs-text-secondary: #a1a1aa;
+  --docs-text-muted:     #71717a;
+  --docs-text-disabled:  #52525b;
+
+  --docs-accent:         #60a5fa;
+  --docs-accent-subtle:  rgba(96, 165, 250, 0.1);
+
+  --docs-shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --docs-shadow-md:      0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
+
+  --docs-badge-name-color:    #fca5a5;
+  --docs-badge-name-bg:       #450a0a;
+  --docs-badge-type-color:    #93c5fd;
+  --docs-badge-type-bg:       #0c1a2e;
+  --docs-badge-default-color: #86efac;
+  --docs-badge-default-bg:    #052e16;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 15px;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--docs-bg);
+  color: var(--docs-text-primary);
+  transition: background 0.2s, color 0.2s;
+}
+
+#root {
+  display: contents;
+}