create-snapify-app 0.0.0-stage → 1.1.1

package/template/apps/developers/src/styles.css

@@ -0,0 +1,98 @@
+@import "tailwindcss" source(none);
+@source "./";
+@source "../../shared";
+
+@theme inline {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --color-brand: #00c6ba;
+  --color-brand-dark: #00a89d;
+  --color-navy: #0b1528;
+  --color-navy-2: #111f38;
+  /* Alignés sur le backoffice CMS */
+  --color-brand-50: #e6faf8;
+  --color-brand-100: #c2f2ee;
+  --color-brand-200: #8fe6df;
+  --color-brand-400: #2dd4bf;
+  --color-brand-500: #00c6ba;
+  --color-brand-600: #00a89d;
+  --color-brand-700: #00867d;
+  --color-navy-800: #111d33;
+  --color-navy-900: #0b1528;
+  --color-navy-950: #070e1c;
+}
+
+@layer base {
+  html { scroll-padding-top: 88px; }
+  body { font-family: var(--font-sans); }
+  ::selection { background: rgba(0, 198, 186, 0.22); }
+  :focus-visible {
+    outline: 2px solid var(--color-brand-500);
+    outline-offset: 2px;
+  }
+}
+
+@layer components {
+  .dv-prose { color: #334155; font-size: 15.5px; line-height: 1.75; }
+  .dv-prose > * + * { margin-top: 1rem; }
+  .dv-prose h2 {
+    margin-top: 2.75rem;
+    padding-top: 0.25rem;
+    font-size: 1.45rem;
+    line-height: 1.3;
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    color: #0b1528;
+  }
+  .dv-prose h3 { margin-top: 2rem; font-size: 1.1rem; font-weight: 650; color: #0b1528; }
+  .dv-prose h2 + *, .dv-prose h3 + * { margin-top: 0.75rem; }
+  .dv-prose a { color: #00857d; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(0, 168, 157, 0.35); text-underline-offset: 3px; }
+  .dv-prose a:hover { text-decoration-color: currentColor; }
+  .dv-prose ul { list-style: disc; padding-left: 1.25rem; }
+  .dv-prose ol { list-style: decimal; padding-left: 1.25rem; }
+  .dv-prose li + li { margin-top: 0.35rem; }
+  .dv-prose li::marker { color: #94a3b8; }
+  .dv-prose strong { color: #0b1528; font-weight: 600; }
+  .dv-prose :not(pre) > code {
+    font-family: var(--font-mono);
+    font-size: 0.84em;
+    background: #f1f5f9;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 0.1em 0.38em;
+    color: #0b1528;
+    white-space: nowrap;
+    font-variant-ligatures: none;
+  }
+  .dv-prose td :not(pre) > code { white-space: normal; word-break: break-word; }
+
+  .dv-code pre {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    line-height: 1.7;
+    overflow-x: auto;
+    padding: 1rem 1.15rem;
+    color: #e2e8f0;
+    tab-size: 2;
+    font-variant-ligatures: none;
+  }
+  @media (max-width: 640px) {
+    .dv-code pre { font-size: 12px; padding: 0.85rem 0.95rem; }
+  }
+  .dv-code .tk-c { color: #64748b; font-style: italic; }
+  .dv-code .tk-s { color: #7ee2d6; }
+  .dv-code .tk-k { color: #c4b5fd; }
+  .dv-code .tk-n { color: #fbbf24; }
+
+  .dv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
+  .dv-table th { text-align: left; font-weight: 600; color: #0b1528; background: #f8fafc; padding: 0.6rem 0.85rem; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
+  .dv-table td { padding: 0.6rem 0.85rem; border-bottom: 1px solid #eef2f6; vertical-align: top; }
+  .dv-table tr:last-child td { border-bottom: 0; }
+
+  .dv-grid-bg {
+    background-image:
+      linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-size: 44px 44px;
+  }
+}

package/template/apps/developers/src/ui.tsx

@@ -0,0 +1,179 @@
+/**
+ * Snapify Developers — éléments de documentation
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import React, { useState, type ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { AlertTriangle, ArrowRight, Check, Copy, Info, Lightbulb } from 'lucide-react';
+
+export const MARKETPLACE_URL = 'https://marketplace.snapify.tn';
+export const COMMUNITY_URL = 'https://community.snapify.tn';
+export const SITE_URL = 'https://snapify.tn';
+export const CONTACT_EMAIL = 'contact@novalabs.tn';
+export const SDK_DOWNLOAD_URL = 'https://developers.snapify.tn/sdk';
+
+const slug = (s: string) =>
+  s
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '');
+
+const text = (node: ReactNode): string =>
+  typeof node === 'string' || typeof node === 'number'
+    ? String(node)
+    : Array.isArray(node)
+      ? node.map(text).join('')
+      : React.isValidElement<{ children?: ReactNode }>(node)
+        ? text(node.props.children)
+        : '';
+
+export function H2({ children, id }: { children: ReactNode; id?: string }) {
+  return <h2 id={id || slug(text(children))}>{children}</h2>;
+}
+
+export function H3({ children, id }: { children: ReactNode; id?: string }) {
+  return <h3 id={id || slug(text(children))}>{children}</h3>;
+}
+
+export const C = ({ children }: { children: ReactNode }) => <code>{children}</code>;
+
+const KEYWORDS =
+  /^(import|from|export|default|const|let|function|return|async|await|if|else|throw|new|interface|type|extends|true|false|null|undefined|npm|run)$/;
+const TOKEN = /((?<!:)\/\/[^\n]*|(?:^|(?<=\s))#[^\n]*)|('(?:[^'\\\n]|\\.)*'|"(?:[^"\\\n]|\\.)*"|`(?:[^`\\]|\\.)*`)|\b(\d+(?:\.\d+)?)\b|\b([A-Za-z_]+)\b/gm;
+
+function highlight(code: string, lang: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  let last = 0;
+  let i = 0;
+  for (const m of code.matchAll(TOKEN)) {
+    const [all, comment, str, num, word] = m;
+    const at = m.index ?? 0;
+    if (comment && lang !== 'bash' && comment.startsWith('#')) continue;
+    if (comment && lang === 'bash' && comment.startsWith('//')) continue;
+    if (word && !KEYWORDS.test(word)) continue;
+    if (at > last) out.push(code.slice(last, at));
+    const cls = comment ? 'tk-c' : str ? 'tk-s' : num ? 'tk-n' : 'tk-k';
+    out.push(
+      <span key={i++} className={cls}>
+        {all}
+      </span>
+    );
+    last = at + all.length;
+  }
+  out.push(code.slice(last));
+  return out;
+}
+
+export function Code({ children, lang = 'ts', title }: { children: string; lang?: string; title?: string }) {
+  const [copied, setCopied] = useState(false);
+  const code = children.replace(/^\n+|\s+$/g, '');
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch {
+      const ta = document.createElement('textarea');
+      ta.value = code;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      ta.remove();
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  };
+  return (
+    <div className="dv-code overflow-hidden rounded-xl border border-navy-2 bg-navy shadow-sm">
+      <div className="flex items-center justify-between border-b border-white/10 bg-white/[0.03] px-4 py-2">
+        <span className="font-mono text-xs text-slate-400">{title || lang}</span>
+        <button
+          type="button"
+          onClick={copy}
+          className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-slate-400 transition hover:bg-white/10 hover:text-white"
+          aria-label="Copier le code"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-brand" /> : <Copy className="h-3.5 w-3.5" />}
+          {copied ? 'Copié' : 'Copier'}
+        </button>
+      </div>
+      <pre>
+        <code>{highlight(code, lang)}</code>
+      </pre>
+    </div>
+  );
+}
+
+const NOTE_TONES = {
+  info: { icon: Info, box: 'border-sky-200 bg-sky-50', icn: 'text-sky-600', title: 'text-sky-900' },
+  tip: { icon: Lightbulb, box: 'border-teal-200 bg-teal-50/70', icn: 'text-teal-600', title: 'text-teal-900' },
+  warn: { icon: AlertTriangle, box: 'border-amber-200 bg-amber-50', icn: 'text-amber-600', title: 'text-amber-900' },
+} as const;
+
+export function Note({ tone = 'info', title, children }: { tone?: keyof typeof NOTE_TONES; title?: string; children: ReactNode }) {
+  const t = NOTE_TONES[tone];
+  const Icon = t.icon;
+  return (
+    <div className={`flex gap-3 rounded-xl border px-4 py-3.5 text-[14.5px] leading-relaxed ${t.box}`}>
+      <Icon className={`mt-0.5 h-[18px] w-[18px] shrink-0 ${t.icn}`} />
+      <div className="min-w-0 text-slate-700">
+        {title && <div className={`mb-0.5 font-semibold ${t.title}`}>{title}</div>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function Table({ head, rows }: { head: ReactNode[]; rows: ReactNode[][] }) {
+  return (
+    <div className="overflow-x-auto rounded-xl border border-slate-200">
+      <table className="dv-table">
+        <thead>
+          <tr>
+            {head.map((h, i) => (
+              <th key={i}>{h}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r, i) => (
+            <tr key={i}>
+              {r.map((c, j) => (
+                <td key={j}>{c}</td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export function Steps({ items }: { items: { title: string; body: ReactNode }[] }) {
+  return (
+    <ol className="list-none pl-0">
+      {items.map((s, i) => (
+        <li key={s.title} className="relative flex gap-4 pb-6 last:pb-0">
+          {i < items.length - 1 && <span className="absolute left-[15px] top-9 bottom-0 w-px bg-slate-200" aria-hidden />}
+          <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-navy text-sm font-semibold text-white">{i + 1}</span>
+          <div className="min-w-0 pt-1">
+            <div className="font-semibold text-navy">{s.title}</div>
+            <div className="mt-1 text-slate-600">{s.body}</div>
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+export function NextLink({ to, label }: { to: string; label: string }) {
+  return (
+    <Link
+      to={to}
+      className="group no-underline inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-3.5 py-2 text-sm font-medium text-navy transition hover:border-brand hover:bg-teal-50/50"
+    >
+      {label}
+      <ArrowRight className="h-4 w-4 text-brand-dark transition group-hover:translate-x-0.5" />
+    </Link>
+  );
+}