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

package/docs/src/components/LiveEditor.tsx

@@ -1,294 +0,0 @@
-/** 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

@@ -1,101 +0,0 @@
-/** 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

@@ -1,103 +0,0 @@
-/** 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

@@ -1,75 +0,0 @@
-/** 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

@@ -1,34 +0,0 @@
-/** 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

@@ -1,76 +0,0 @@
-*, *::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;
-}