create-snapify-app 0.0.0-stage → 1.1.1

package/template/src/admin/lib/hooks.ts

@@ -0,0 +1,125 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useBlocker } from 'react-router-dom';
+import { toast } from 'sonner';
+import { ApiError } from './api';
+
+export function errorMessage(e: unknown): string {
+  if (e instanceof ApiError || e instanceof Error) return e.message;
+  return 'Une erreur inattendue est survenue';
+}
+
+/** Chargement asynchrone avec état, erreur et rechargement. */
+export function useAsync<T>(loader: () => Promise<T>, deps: unknown[] = []) {
+  const [data, setData] = useState<T | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const loaderRef = useRef(loader);
+  loaderRef.current = loader;
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const d = await loaderRef.current();
+      setData(d);
+      return d;
+    } catch (e) {
+      setError(errorMessage(e));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void reload();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { data, setData, error, loading, reload };
+}
+
+const stable = (v: unknown) => JSON.stringify(v);
+
+/**
+ * État de formulaire avec suivi des modifications, sauvegarde (Ctrl/Cmd+S),
+ * et protection contre la perte de données (navigation interne et fermeture d'onglet).
+ */
+export function useEditable<T>(initial: T | null, save: (value: T) => Promise<T | void>, opts: { successMessage?: string } = {}) {
+  const [value, setValue] = useState<T | null>(initial);
+  const [baseline, setBaseline] = useState<string>(stable(initial));
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (initial !== null) {
+      setValue(initial);
+      setBaseline(stable(initial));
+    }
+  }, [initial]);
+
+  const dirty = value !== null && stable(value) !== baseline;
+
+  const commit = useCallback(async () => {
+    if (value === null || saving) return false;
+    setSaving(true);
+    try {
+      const result = await save(value);
+      const next = (result ?? value) as T;
+      setValue(next);
+      setBaseline(stable(next));
+      toast.success(opts.successMessage || 'Modifications enregistrées');
+      return true;
+    } catch (e) {
+      toast.error(errorMessage(e));
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }, [value, saving, save, opts.successMessage]);
+
+  const reset = useCallback(() => {
+    setValue(JSON.parse(baseline) as T);
+  }, [baseline]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+        e.preventDefault();
+        if (dirty) void commit();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [dirty, commit]);
+
+  useEffect(() => {
+    if (!dirty) return;
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+    };
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => window.removeEventListener('beforeunload', onBeforeUnload);
+  }, [dirty]);
+
+  const blocker = useBlocker(({ currentLocation, nextLocation }) => dirty && currentLocation.pathname !== nextLocation.pathname);
+
+  /** Mise à jour partielle ergonomique : patch({ field: v }) */
+  const patch = useCallback((p: Partial<T>) => setValue((v) => (v === null ? v : { ...v, ...p })), []);
+
+  return { value, setValue, patch, dirty, saving, commit, reset, blocker };
+}
+
+export function useDebounced<T>(value: T, delay = 300): T {
+  const [v, setV] = useState(value);
+  useEffect(() => {
+    const t = setTimeout(() => setV(value), delay);
+    return () => clearTimeout(t);
+  }, [value, delay]);
+  return v;
+}

package/template/src/admin/main.tsx

@@ -0,0 +1,16 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import AdminApp from './AdminApp';
+import './admin.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <AdminApp />
+  </StrictMode>
+);

package/template/src/admin/modules/InstallDialog.tsx

@@ -0,0 +1,160 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+/** Confirmation d'installation : provenance, signature, licence et permissions demandées. */
+import { useRef, useState } from 'react';
+import { BadgeCheck, KeyRound, ShieldAlert, ShieldCheck, Upload } from 'lucide-react';
+import { toast } from 'sonner';
+import type { InstalledModuleInfo, StagedPackageInfo } from '../../../server/modules/types';
+import { api } from '../lib/api';
+import { errorMessage } from '../lib/hooks';
+import { Alert, Badge, Button } from '../ui/primitives';
+import { Modal } from '../ui/overlays';
+import { fileToBase64, ModuleIcon, notifyModulesChanged, PermissionList, PRICING_LABEL } from './labels';
+
+const EXTENSION = { module: '.snapmod', theme: '.snaptheme' } as const;
+
+/** Import manuel d'un paquet `.snapmod` ou `.snaptheme` (vérifié côté serveur avant toute confirmation). */
+export function ImportPackageButton({ kind = 'module', onInstalled }: { kind?: 'module' | 'theme'; onInstalled?: (m: InstalledModuleInfo) => void }) {
+  const ext = EXTENSION[kind];
+  const input = useRef<HTMLInputElement>(null);
+  const [busy, setBusy] = useState(false);
+  const [staged, setStaged] = useState<StagedPackageInfo | null>(null);
+
+  const pick = async (file: File | undefined) => {
+    if (!file) return;
+    if (!file.name.toLowerCase().endsWith(ext)) {
+      toast.error(`Choisissez un fichier ${ext}`);
+      return;
+    }
+    setBusy(true);
+    try {
+      setStaged(await api.modules.upload(file.name, await fileToBase64(file)));
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(false);
+      if (input.current) input.current.value = '';
+    }
+  };
+
+  return (
+    <>
+      <input ref={input} type="file" accept={ext} hidden onChange={(e) => void pick(e.target.files?.[0])} />
+      <Button icon={Upload} loading={busy} onClick={() => input.current?.click()}>
+        {kind === 'theme' ? 'Importer un thème' : 'Importer un module'}
+      </Button>
+      <InstallDialog staged={staged} onClose={() => setStaged(null)} onInstalled={onInstalled} />
+    </>
+  );
+}
+
+const ACTION_LABEL: Record<StagedPackageInfo['action'], string> = {
+  install: 'Installer',
+  update: 'Mettre à jour',
+  reinstall: 'Réinstaller',
+  downgrade: 'Revenir à cette version',
+};
+
+export function InstallDialog({ staged, onClose, onInstalled }: { staged: StagedPackageInfo | null; onClose: () => void; onInstalled?: (m: InstalledModuleInfo) => void }) {
+  const [busy, setBusy] = useState(false);
+  if (!staged) return null;
+  const m = staged.manifest;
+  const isTheme = m.kind === 'theme';
+  const blocked = staged.blockers.length > 0;
+
+  const install = async () => {
+    setBusy(true);
+    try {
+      const installed = await api.modules.install(staged.token);
+      toast.success(`${installed.name} ${installed.version} installé`);
+      notifyModulesChanged();
+      onInstalled?.(installed);
+      onClose();
+    } catch (e) {
+      toast.error(errorMessage(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      open
+      onClose={onClose}
+      size="md"
+      title={`${ACTION_LABEL[staged.action]} « ${m.name} »`}
+      description={staged.installedVersion ? `Version installée : ${staged.installedVersion} → ${m.version}` : `Version ${m.version}`}
+      footer={
+        <>
+          <Button onClick={onClose}>Annuler</Button>
+          <Button variant="primary" onClick={install} loading={busy} disabled={blocked}>
+            {ACTION_LABEL[staged.action]}
+          </Button>
+        </>
+      }
+    >
+      <div className="space-y-5">
+        {isTheme && m.screenshot ? (
+          <img src={m.screenshot} alt={`Aperçu du thème ${m.name}`} className="aspect-[4/3] w-full rounded-xl border border-slate-200 object-cover object-top" />
+        ) : null}
+        <div className="flex items-start gap-3">
+          {isTheme ? null : <ModuleIcon name={m.icon} />}
+          <div className="min-w-0">
+            <p className="flex flex-wrap items-center gap-2 text-sm font-semibold text-slate-900">
+              {m.name}
+              {isTheme ? <Badge tone="info">Thème</Badge> : null}
+              <Badge tone={m.pricing === 'free' ? 'success' : 'brand'}>{PRICING_LABEL[m.pricing]}</Badge>
+            </p>
+            <p className="text-xs text-slate-500">
+              {m.id} · par {m.author.name}
+            </p>
+            <p className="mt-1.5 text-sm leading-relaxed text-slate-600">{m.description}</p>
+          </div>
+        </div>
+
+        {staged.blockers.map((b) => (
+          <Alert key={b} tone="danger" icon={ShieldAlert} title="Installation bloquée">
+            {b}
+          </Alert>
+        ))}
+
+        <div className="space-y-2 rounded-xl border border-slate-200 p-4">
+          {staged.signature.valid ? (
+            <p className="flex items-center gap-2 text-sm text-emerald-700">
+              <ShieldCheck className="h-4 w-4" /> Signé par NOVALABS (clé {staged.signature.kid}) : contenu authentique et intact
+            </p>
+          ) : staged.signature.devUnsigned ? (
+            <p className="flex items-center gap-2 text-sm text-amber-700">
+              <ShieldAlert className="h-4 w-4" /> Paquet non signé, accepté uniquement parce que le mode développeur est actif
+            </p>
+          ) : (
+            <p className="flex items-center gap-2 text-sm text-rose-700">
+              <ShieldAlert className="h-4 w-4" /> Signature absente ou invalide
+            </p>
+          )}
+          <p className={`flex items-center gap-2 text-sm ${staged.license.state === 'valid' ? 'text-emerald-700' : 'text-amber-700'}`}>
+            {staged.license.state === 'valid' ? <BadgeCheck className="h-4 w-4" /> : <KeyRound className="h-4 w-4" />}
+            {staged.license.message}
+            {staged.license.state === 'missing' && m.pricing === 'paid' ? ' — vous pourrez la saisir après l’installation' : ''}
+          </p>
+        </div>
+
+        {isTheme ? (
+          <p className="text-sm text-slate-500">
+            Un thème ne change que l’apparence du site : il n’exécute aucun code serveur et n’a accès à aucune donnée privée.
+            {staged.action === 'install' ? ' Après l’installation, vous pourrez le prévisualiser avant de l’activer.' : ''}
+          </p>
+        ) : (
+          <div>
+            <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Ce module pourra</p>
+            <PermissionList permissions={m.permissions} hasServer={m.hasServer} />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

package/template/src/admin/modules/SettingsForm.tsx

@@ -0,0 +1,145 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+/** Formulaire de réglages généré à partir du manifeste d'un module. */
+import { RotateCcw } from 'lucide-react';
+import type { SettingField } from '../../../sdk/index';
+import { Button, cx, Field, Input, Section, Select, Switch, Textarea } from '../ui/primitives';
+import { TagInput } from '../ui/TagInput';
+
+type Values = Record<string, unknown>;
+
+function FieldControl({ field, value, onChange, error }: { field: SettingField; value: unknown; onChange: (v: unknown) => void; error?: string }) {
+  const isDefault = JSON.stringify(value) === JSON.stringify(field.default);
+  switch (field.type) {
+    case 'boolean':
+      return <Switch checked={value === true} onChange={onChange} label={field.label} description={field.help} />;
+    case 'select':
+      return (
+        <Field label={field.label} hint={field.help} error={error}>
+          <Select value={String(value ?? '')} onChange={onChange} options={field.options ?? []} />
+        </Field>
+      );
+    case 'number': {
+      const n = typeof value === 'number' ? value : Number(field.default);
+      if (field.slider) {
+        return (
+          <Field label={`${field.label} : ${n.toLocaleString('fr-FR')}`} hint={field.help} error={error}>
+            <input
+              type="range"
+              min={field.min ?? 0}
+              max={field.max ?? 100}
+              step={field.step ?? 1}
+              value={n}
+              onChange={(e) => onChange(Number(e.target.value))}
+              className="w-full accent-brand-600"
+            />
+          </Field>
+        );
+      }
+      return (
+        <Field label={field.label} hint={field.help} error={error}>
+          <Input
+            type="number"
+            min={field.min}
+            max={field.max}
+            step={field.step}
+            value={Number.isFinite(n) ? n : ''}
+            onChange={(e) => onChange(e.target.value === '' ? field.default : Number(e.target.value))}
+            className="w-44 tabular-nums"
+          />
+        </Field>
+      );
+    }
+    case 'paths':
+      return (
+        <Field label={field.label} hint={field.help} error={error}>
+          <TagInput value={Array.isArray(value) ? (value as string[]) : []} onChange={onChange} placeholder="/contact/ puis Entrée" validate={(v) => v.startsWith('/')} />
+        </Field>
+      );
+    case 'textarea': {
+      const text = String(value ?? '');
+      return (
+        <Field
+          label={field.label}
+          hint={field.help}
+          error={error}
+          counter={field.maxLength && field.maxLength <= 2000 ? { value: text.length, max: field.maxLength } : undefined}
+        >
+          <Textarea
+            value={text}
+            rows={field.rows ?? 3}
+            maxLength={field.maxLength}
+            placeholder={field.placeholder}
+            onChange={(e) => onChange(e.target.value)}
+            className={cx(field.monospace && 'font-mono text-xs leading-relaxed')}
+          />
+          {!isDefault && (field.rows ?? 3) > 4 ? (
+            <div className="mt-2 flex justify-end">
+              <Button size="sm" icon={RotateCcw} onClick={() => onChange(field.default)}>
+                Revenir à la valeur par défaut
+              </Button>
+            </div>
+          ) : null}
+        </Field>
+      );
+    }
+    default:
+      return (
+        <Field label={field.label} hint={field.help} error={error}>
+          <Input
+            type={field.type === 'phone' ? 'tel' : 'text'}
+            value={String(value ?? '')}
+            maxLength={field.maxLength}
+            placeholder={field.placeholder}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        </Field>
+      );
+  }
+}
+
+/** Variante compacte (sans sections), pour les panneaux étroits de l'éditeur. */
+export function SettingsFields({ fields, value, onChange }: { fields: SettingField[]; value: Values; onChange: (patch: Values) => void }) {
+  return (
+    <div className="space-y-3.5">
+      {fields.map((f) => (
+        <FieldControl key={f.key} field={f} value={value[f.key] ?? f.default} onChange={(v) => onChange({ [f.key]: v })} />
+      ))}
+    </div>
+  );
+}
+
+export function SettingsForm({
+  fields,
+  value,
+  onChange,
+  errors = {},
+}: {
+  fields: SettingField[];
+  value: Values;
+  onChange: (patch: Values) => void;
+  errors?: Record<string, string>;
+}) {
+  const groups: { title: string; fields: SettingField[] }[] = [];
+  for (const f of fields) {
+    const title = f.group || 'Réglages';
+    const last = groups[groups.length - 1];
+    if (last && last.title === title) last.fields.push(f);
+    else groups.push({ title, fields: [f] });
+  }
+  return (
+    <div className="space-y-6">
+      {groups.map((g) => (
+        <Section key={g.title} title={g.title}>
+          {g.fields.map((f) => (
+            <FieldControl key={f.key} field={f} value={value[f.key]} error={errors[f.key]} onChange={(v) => onChange({ [f.key]: v })} />
+          ))}
+        </Section>
+      ))}
+    </div>
+  );
+}

package/template/src/admin/modules/kit.tsx

@@ -0,0 +1,127 @@
+/**
+ * Snapify
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ * Contact : contact@novalabs.tn · +216 24 734 647
+ * Tous droits réservés. Toute reproduction, modification ou diffusion sans autorisation écrite est interdite.
+ */
+/**
+ * Composants et outils de l'administration prêtés aux pages d'administration des modules
+ * (`@snapify/sdk/admin`) : un module garde ainsi l'apparence et le comportement du back-office.
+ */
+import React, { createContext, useContext } from 'react';
+import { toast } from 'sonner';
+import { RichTextEditor } from '../editor/RichTextEditor';
+import { downloadCsv, fmtDate, fmtDateTime, fmtNumber, slugify, timeAgo } from '../lib/format';
+import { errorMessage, useAsync, useDebounced } from '../lib/hooks';
+import { Drawer as BaseDrawer, Dropdown, DropdownItem, Modal as BaseModal, useConfirm } from '../ui/overlays';
+import { ImageField, MediaPicker } from '../ui/media';
+import { Pagination, usePagination, usePaging } from '../ui/Pagination';
+import {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  cx,
+  EmptyState,
+  ErrorState,
+  Field,
+  Input,
+  PageHeader,
+  PageSkeleton,
+  Section,
+  Segmented,
+  Select,
+  Skeleton,
+  Spinner,
+  StatCard,
+  Switch,
+  Table,
+  Tabs,
+  Td,
+  Textarea,
+  Th,
+} from '../ui/primitives';
+import { TagInput } from '../ui/TagInput';
+
+/** Identifiant du module dont la page est affichée : les fenêtres (rendues hors de la page) gardent ses styles. */
+export const AdminScopeContext = createContext<string>('');
+
+function Scoped({ children }: { children: React.ReactNode }) {
+  const id = useContext(AdminScopeContext);
+  return (
+    <div data-snapify-scope={id} style={{ display: 'contents' }}>
+      {children}
+    </div>
+  );
+}
+
+function Modal(props: React.ComponentProps<typeof BaseModal>) {
+  return <BaseModal {...props} footer={props.footer ? <Scoped>{props.footer}</Scoped> : undefined}><Scoped>{props.children}</Scoped></BaseModal>;
+}
+
+function Drawer(props: React.ComponentProps<typeof BaseDrawer>) {
+  return <BaseDrawer {...props} footer={props.footer ? <Scoped>{props.footer}</Scoped> : undefined}><Scoped>{props.children}</Scoped></BaseDrawer>;
+}
+
+type ToastMessage = string | React.ReactNode;
+type ToastOptions = { description?: React.ReactNode; duration?: number };
+
+/** Notifications prêtées aux modules : partie stable de l'API de `sonner`, sans dépendre de ses types. */
+export interface AdminToast {
+  (message: ToastMessage, options?: ToastOptions): string | number;
+  success: (message: ToastMessage, options?: ToastOptions) => string | number;
+  error: (message: ToastMessage, options?: ToastOptions) => string | number;
+  info: (message: ToastMessage, options?: ToastOptions) => string | number;
+  warning: (message: ToastMessage, options?: ToastOptions) => string | number;
+  dismiss: (id?: string | number) => string | number;
+}
+
+export const ADMIN_KIT = {
+  Alert,
+  Badge,
+  Button,
+  Card,
+  cx,
+  Drawer,
+  Dropdown,
+  DropdownItem,
+  EmptyState,
+  ErrorState,
+  Field,
+  ImageField,
+  Input,
+  MediaPicker,
+  Modal,
+  PageHeader,
+  PageSkeleton,
+  Pagination,
+  RichTextEditor,
+  Section,
+  Segmented,
+  Select,
+  Skeleton,
+  Spinner,
+  StatCard,
+  Switch,
+  Table,
+  Tabs,
+  TagInput,
+  Td,
+  Textarea,
+  Th,
+  toast: toast as AdminToast,
+  useAsync,
+  useConfirm,
+  useDebounced,
+  usePagination,
+  usePaging,
+  errorMessage,
+  fmtDate,
+  fmtDateTime,
+  fmtNumber,
+  timeAgo,
+  slugify,
+  downloadCsv,
+};
+
+export type AdminKit = typeof ADMIN_KIT;