create-snapify-app 0.0.0-stage → 1.1.1

package/template/modules/calendar/src/admin/EventsPage.tsx

@@ -0,0 +1,217 @@
+/**
+ * Snapify — module Calendrier
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import { useState } from 'react';
+import { Calendar, Pencil, Plus, Trash2 } from 'lucide-react';
+import {
+  Button,
+  EmptyState,
+  ErrorState,
+  Field,
+  Input,
+  Modal,
+  PageHeader,
+  Select,
+  Switch,
+  Table,
+  Td,
+  Textarea,
+  Th,
+  errorMessage,
+  slugify,
+  toast,
+  useAsync,
+  useConfirm,
+  type AdminPageProps,
+} from '@snapify/sdk/admin';
+import type { CalEvent, Settings } from '../types';
+
+type Row = CalEvent & { id: string };
+type Draft = Partial<CalEvent> & { id?: string };
+
+const empty = (): Draft => ({
+  title: '',
+  slug: '',
+  description: '',
+  location: '',
+  date: new Date().toISOString().slice(0, 10),
+  startTime: '09:00',
+  endTime: '10:00',
+  allDay: false,
+  color: '#00C6BA',
+  status: 'published',
+});
+
+export function EventsPage({ api }: AdminPageProps<Settings>) {
+  const confirm = useConfirm();
+  const list = useAsync(() => api.get<{ events: Row[] }>('/events'), []);
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [slugTouched, setSlugTouched] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const rows = list.data?.events ?? [];
+
+  const open = (e?: Row) => {
+    setSlugTouched(!!e);
+    setDraft(e ? { ...e } : empty());
+  };
+
+  const save = async () => {
+    if (!draft) return;
+    setSaving(true);
+    try {
+      if (draft.id) await api.put(`/events/${draft.id}`, draft);
+      else await api.post('/events', draft);
+      toast.success(draft.id ? 'Événement enregistré' : 'Événement créé');
+      setDraft(null);
+      void list.reload();
+    } catch (err) {
+      toast.error(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (e: Row) => {
+    if (!(await confirm({ title: `Supprimer « ${e.title} » ?`, message: 'Cette action est définitive.', confirmLabel: 'Supprimer', danger: true }))) return;
+    try {
+      await api.delete(`/events/${e.id}`);
+      toast.success('Événement supprimé');
+      void list.reload();
+    } catch (err) {
+      toast.error(errorMessage(err));
+    }
+  };
+
+  return (
+    <div>
+      <PageHeader
+        title="Événements"
+        description="Gérez l’agenda affiché sur le site (/agenda/)."
+        actions={
+          <Button icon={Plus} onClick={() => open()}>
+            Nouvel événement
+          </Button>
+        }
+      />
+
+      {list.error ? <ErrorState message={errorMessage(list.error)} onRetry={() => void list.reload()} /> : null}
+      {!list.error && !list.loading && rows.length === 0 ? (
+        <EmptyState
+          icon={Calendar}
+          title="Aucun événement"
+          description="Ajoutez votre premier rendez-vous, atelier ou date importante."
+          action={
+            <Button icon={Plus} onClick={() => open()}>
+              Nouvel événement
+            </Button>
+          }
+        />
+      ) : null}
+
+      {rows.length > 0 ? (
+        <Table>
+          <thead>
+            <tr>
+              <Th>Date</Th>
+              <Th>Titre</Th>
+              <Th>Lieu</Th>
+              <Th>Statut</Th>
+              <Th className="w-28" />
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((e) => (
+              <tr key={e.id}>
+                <Td>
+                  <div className="font-medium">{e.date}</div>
+                  <div className="text-xs text-slate-500">{e.allDay ? 'Journée entière' : `${e.startTime || '—'} – ${e.endTime || '—'}`}</div>
+                </Td>
+                <Td>
+                  <span className="inline-block h-2.5 w-2.5 rounded-full mr-2" style={{ background: e.color }} />
+                  {e.title}
+                </Td>
+                <Td>{e.location || '—'}</Td>
+                <Td>{e.status === 'published' ? 'Publié' : 'Brouillon'}</Td>
+                <Td>
+                  <div className="flex gap-1">
+                    <Button size="sm" variant="ghost" icon={Pencil} onClick={() => open(e)} />
+                    <Button size="sm" variant="ghost" icon={Trash2} onClick={() => void remove(e)} />
+                  </div>
+                </Td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      ) : null}
+
+      {draft ? (
+        <Modal title={draft.id ? 'Modifier l’événement' : 'Nouvel événement'} open onClose={() => setDraft(null)} size="lg">
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Field label="Titre">
+              <Input
+                value={draft.title || ''}
+                onChange={({ target: { value: v } }) =>
+                  setDraft((d) => ({
+                    ...d!,
+                    title: v,
+                    slug: slugTouched ? d!.slug : slugify(`${v}-${d!.date || ''}`),
+                  }))
+                }
+              />
+            </Field>
+            <Field label="Adresse (slug)">
+              <Input
+                value={draft.slug || ''}
+                onChange={({ target: { value: v } }) => {
+                  setSlugTouched(true);
+                  setDraft((d) => ({ ...d!, slug: v }));
+                }}
+              />
+            </Field>
+            <Field label="Date (AAAA-MM-JJ)">
+              <Input value={draft.date || ''} placeholder="2026-10-20" onChange={({ target: { value: v } }) => setDraft((d) => ({ ...d!, date: v }))} />
+            </Field>
+            <Field label="Début (HH:mm)">
+              <Input value={draft.startTime || ''} placeholder="09:00" onChange={({ target: { value: v } }) => setDraft((d) => ({ ...d!, startTime: v }))} />
+            </Field>
+            <Field label="Fin (HH:mm)">
+              <Input value={draft.endTime || ''} placeholder="10:00" onChange={({ target: { value: v } }) => setDraft((d) => ({ ...d!, endTime: v }))} />
+            </Field>
+            <Field label="Lieu">
+              <Input value={draft.location || ''} onChange={({ target: { value: v } }) => setDraft((d) => ({ ...d!, location: v }))} />
+            </Field>
+            <Field label="Description">
+              <Textarea value={draft.description || ''} rows={4} onChange={({ target: { value: v } }) => setDraft((d) => ({ ...d!, description: v }))} />
+            </Field>
+            <Field label="Couleur (#hex)">
+              <Input value={draft.color || '#00C6BA'} placeholder="#00C6BA" onChange={({ target: { value: v } }) => setDraft((d) => ({ ...d!, color: v }))} />
+            </Field>
+            <Field label="Statut">
+              <Select
+                value={draft.status || 'published'}
+                onChange={(v) => setDraft((d) => ({ ...d!, status: v as 'published' | 'draft' }))}
+                options={[
+                  { value: 'published', label: 'Publié' },
+                  { value: 'draft', label: 'Brouillon' },
+                ]}
+              />
+            </Field>
+            <div className="sm:col-span-2 flex items-center gap-3">
+              <Switch checked={!!draft.allDay} onChange={(v) => setDraft((d) => ({ ...d!, allDay: v }))} />
+              <span className="text-sm text-slate-700">Journée entière</span>
+            </div>
+          </div>
+          <div className="mt-6 flex justify-end gap-2">
+            <Button variant="ghost" onClick={() => setDraft(null)}>
+              Annuler
+            </Button>
+            <Button loading={saving} onClick={() => void save()}>
+              Enregistrer
+            </Button>
+          </div>
+        </Modal>
+      ) : null}
+    </div>
+  );
+}

package/template/modules/calendar/src/admin/index.tsx

@@ -0,0 +1,11 @@
+/**
+ * Snapify — module Calendrier
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import { defineAdminModule } from '@snapify/sdk/admin';
+import { EventsPage } from './EventsPage';
+import type { Settings } from '../types';
+
+export default defineAdminModule<Settings>({
+  pages: { events: EventsPage },
+});

package/template/modules/calendar/src/public/index.tsx

@@ -0,0 +1,231 @@
+/**
+ * Snapify — module Calendrier
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { CalendarDays, MapPin, ChevronLeft, ChevronRight } from 'lucide-react';
+import { definePublicModule, type PublicPageProps, type WidgetProps } from '@snapify/sdk';
+import type { Settings } from '../types';
+
+interface EventCard {
+  id: string;
+  title: string;
+  slug: string;
+  description: string;
+  location: string;
+  date: string;
+  startTime: string;
+  endTime: string;
+  allDay: boolean;
+  color: string;
+}
+
+function useEvents(api: PublicPageProps['api'], query: string) {
+  const [events, setEvents] = useState<EventCard[]>([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    api
+      .get<{ events: EventCard[] }>(`/events?${query}`)
+      .then((r) => {
+        if (!cancelled) setEvents(r.events || []);
+      })
+      .catch(() => {
+        if (!cancelled) setEvents([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [api, query]);
+  return { events, loading };
+}
+
+function formatDay(date: string) {
+  try {
+    return new Date(`${date}T12:00:00`).toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
+  } catch {
+    return date;
+  }
+}
+
+function EventList({ events, navigate }: { events: EventCard[]; navigate: (p: string) => void }) {
+  if (!events.length) return <p className="text-sm text-slate-500">Aucun événement pour le moment.</p>;
+  return (
+    <ul className="space-y-3">
+      {events.map((e) => (
+        <li key={e.id}>
+          <button
+            type="button"
+            onClick={() => navigate(`/agenda/${e.slug}/`)}
+            className="flex w-full gap-3 rounded-2xl border border-slate-200 bg-white p-4 text-left shadow-sm transition hover:border-px-primary/40 hover:shadow-md"
+          >
+            <span className="mt-1 h-3 w-3 shrink-0 rounded-full" style={{ background: e.color }} />
+            <div className="min-w-0 flex-1">
+              <div className="text-xs font-semibold uppercase tracking-wide text-px-primary">{formatDay(e.date)}</div>
+              <div className="mt-1 font-semibold text-px-navy">{e.title}</div>
+              <div className="mt-1 text-sm text-slate-500">
+                {e.allDay ? 'Journée entière' : `${e.startTime || '—'} – ${e.endTime || '—'}`}
+                {e.location ? ` · ${e.location}` : ''}
+              </div>
+            </div>
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function MonthWidget({ options, api, navigate }: WidgetProps<Settings, { title?: string }>) {
+  const now = new Date();
+  const [cursor, setCursor] = useState(new Date(now.getFullYear(), now.getMonth(), 1));
+  const y = cursor.getFullYear();
+  const m = cursor.getMonth();
+  const from = `${y}-${String(m + 1).padStart(2, '0')}-01`;
+  const last = new Date(y, m + 1, 0).getDate();
+  const to = `${y}-${String(m + 1).padStart(2, '0')}-${String(last).padStart(2, '0')}`;
+  const { events } = useEvents(api, `from=${from}&to=${to}&limit=100`);
+  const byDay = useMemo(() => {
+    const map = new Map<string, EventCard[]>();
+    for (const e of events) {
+      const list = map.get(e.date) || [];
+      list.push(e);
+      map.set(e.date, list);
+    }
+    return map;
+  }, [events]);
+
+  const startPad = new Date(y, m, 1).getDay(); // 0 Sun
+  const pad = (startPad + 6) % 7; // Monday-first
+  const cells: (number | null)[] = [...Array(pad).fill(null), ...Array.from({ length: last }, (_, i) => i + 1)];
+
+  return (
+    <section className="mx-auto max-w-3xl px-4 py-10">
+      <div className="mb-4 flex items-center justify-between gap-3">
+        <h2 className="text-xl font-bold text-px-navy">{options.title || 'Calendrier'}</h2>
+        <div className="flex items-center gap-2">
+          <button type="button" className="rounded-lg border p-2" onClick={() => setCursor(new Date(y, m - 1, 1))} aria-label="Mois précédent">
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <span className="min-w-36 text-center text-sm font-semibold capitalize">
+            {cursor.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
+          </span>
+          <button type="button" className="rounded-lg border p-2" onClick={() => setCursor(new Date(y, m + 1, 1))} aria-label="Mois suivant">
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-slate-500">
+        {['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map((d) => (
+          <div key={d} className="py-2">
+            {d}
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-7 gap-1">
+        {cells.map((day, i) => {
+          if (!day) return <div key={`e-${i}`} className="aspect-square rounded-xl bg-slate-50/50" />;
+          const key = `${y}-${String(m + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+          const dayEvents = byDay.get(key) || [];
+          return (
+            <button
+              key={key}
+              type="button"
+              onClick={() => dayEvents[0] && navigate(`/agenda/${dayEvents[0].slug}/`)}
+              className={`aspect-square rounded-xl border p-1 text-sm transition ${dayEvents.length ? 'border-px-primary/30 bg-px-primary/5 font-semibold text-px-navy' : 'border-transparent bg-white text-slate-600'}`}
+            >
+              <div>{day}</div>
+              {dayEvents.length ? <div className="mx-auto mt-1 h-1.5 w-1.5 rounded-full bg-px-primary" /> : null}
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+
+function UpcomingWidget({ options, api, navigate }: WidgetProps<Settings, { title?: string; limit?: number; buttonLabel?: string }>) {
+  const { events, loading } = useEvents(api, `limit=${options.limit || 5}`);
+  return (
+    <section className="mx-auto max-w-3xl px-4 py-10">
+      <div className="mb-5 flex items-end justify-between gap-3">
+        <h2 className="text-xl font-bold text-px-navy">{options.title || 'À venir'}</h2>
+        {options.buttonLabel ? (
+          <button type="button" className="text-sm font-semibold text-px-primary" onClick={() => navigate('/agenda/')}>
+            {options.buttonLabel}
+          </button>
+        ) : null}
+      </div>
+      {loading ? <p className="text-sm text-slate-500">Chargement…</p> : <EventList events={events} navigate={navigate} />}
+    </section>
+  );
+}
+
+function AgendaPage({ settings, api, path, navigate, setMeta, search }: PublicPageProps<Settings>) {
+  const slug = path.replace(/^\/(agenda|calendrier)\/?/, '').replace(/\/$/, '');
+  const monthQ = new URLSearchParams(search).get('mois');
+  const [detail, setDetail] = useState<EventCard | null>(null);
+
+  useEffect(() => {
+    setMeta({ title: settings.pageTitle || 'Agenda', description: settings.pageIntro });
+  }, [settings.pageTitle, settings.pageIntro, setMeta]);
+
+  useEffect(() => {
+    if (!slug) {
+      setDetail(null);
+      return;
+    }
+    api
+      .get<{ event: EventCard }>(`/events/${encodeURIComponent(slug)}`)
+      .then((r) => {
+        setDetail(r.event);
+        setMeta({ title: r.event.title });
+      })
+      .catch(() => setDetail(null));
+  }, [api, slug, setMeta]);
+
+  const { events, loading } = useEvents(api, monthQ ? `from=${monthQ}-01&to=${monthQ}-31&limit=100` : 'limit=50');
+
+  if (slug && detail) {
+    return (
+      <article className="mx-auto max-w-2xl px-4 py-12">
+        <button type="button" onClick={() => navigate('/agenda/')} className="mb-6 text-sm font-semibold text-px-primary">
+          ← Retour à l’agenda
+        </button>
+        <div className="mb-2 inline-flex items-center gap-2 text-sm font-semibold text-px-primary">
+          <CalendarDays className="h-4 w-4" />
+          {formatDay(detail.date)}
+        </div>
+        <h1 className="text-3xl font-bold text-px-navy">{detail.title}</h1>
+        <p className="mt-2 text-slate-600">
+          {detail.allDay ? 'Journée entière' : `${detail.startTime || '—'} – ${detail.endTime || '—'}`}
+        </p>
+        {detail.location ? (
+          <p className="mt-2 flex items-center gap-2 text-slate-600">
+            <MapPin className="h-4 w-4" /> {detail.location}
+          </p>
+        ) : null}
+        {detail.description ? <div className="prose prose-slate mt-8 max-w-none whitespace-pre-wrap">{detail.description}</div> : null}
+      </article>
+    );
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-12">
+      <h1 className="text-3xl font-bold text-px-navy">{settings.pageTitle || 'Agenda'}</h1>
+      {settings.pageIntro ? <p className="mt-3 text-slate-600">{settings.pageIntro}</p> : null}
+      <div className="mt-8">{loading ? <p className="text-sm text-slate-500">Chargement…</p> : <EventList events={events} navigate={navigate} />}</div>
+    </div>
+  );
+}
+
+export default definePublicModule<Settings>({
+  page: AgendaPage,
+  widgets: {
+    upcoming: UpcomingWidget,
+    month: MonthWidget,
+  },
+});

package/template/modules/calendar/src/server.ts

@@ -0,0 +1,143 @@
+/**
+ * Snapify — module Calendrier
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+import { defineServerModule, type ModuleRequest, type ServerContext, type StoredRecord } from '@snapify/sdk';
+import type { CalEvent, Settings } from './types';
+
+const str = (v: unknown, max: number) => (typeof v === 'string' ? v.trim().slice(0, max) : '');
+const slugify = (s: string) =>
+  s
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+    .slice(0, 80);
+
+export default defineServerModule<Settings>({
+  activate(ctx: ServerContext<Settings>) {
+    const events = ctx.db.collection<CalEvent>('events');
+
+    function cleanEvent(input: unknown, current?: StoredRecord<CalEvent>): CalEvent {
+      const b = (input && typeof input === 'object' ? input : {}) as Record<string, unknown>;
+      const title = str(b.title ?? current?.title, 160);
+      if (!title) throw ctx.error(422, 'Le titre est obligatoire.');
+      const date = str(b.date ?? current?.date, 10);
+      if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) throw ctx.error(422, 'Date invalide (AAAA-MM-JJ).');
+      const slug = slugify(str(b.slug, 80) || `${title}-${date}`) || `event-${date}`;
+      return {
+        title,
+        slug,
+        description: str(b.description, 5000),
+        location: str(b.location, 200),
+        date,
+        startTime: str(b.startTime, 5),
+        endTime: str(b.endTime, 5),
+        allDay: b.allDay === true || (!str(b.startTime, 5) && !current?.startTime),
+        color: str(b.color, 20) || '#00C6BA',
+        status: b.status === 'draft' ? 'draft' : 'published',
+      };
+    }
+
+    const publicRow = (e: StoredRecord<CalEvent>) => ({
+      id: e.id,
+      title: e.title,
+      slug: e.slug,
+      description: e.description,
+      location: e.location,
+      date: e.date,
+      startTime: e.startTime,
+      endTime: e.endTime,
+      allDay: e.allDay,
+      color: e.color,
+    });
+
+    ctx.http.get('/events', async (req) => {
+      const from = str(req.query.from, 10);
+      const to = str(req.query.to, 10);
+      const limit = Math.min(100, Math.max(1, Number(req.query.limit) || 50));
+      const { items } = await events.find({
+        where: { status: 'published' },
+        orderBy: [{ field: 'date', dir: 'asc' }, { field: 'startTime', dir: 'asc' }],
+        limit: 500,
+      });
+      let list = items;
+      if (from) list = list.filter((e) => e.date >= from);
+      if (to) list = list.filter((e) => e.date <= to);
+      if (!ctx.settings().showPast) {
+        const today = new Date().toISOString().slice(0, 10);
+        list = list.filter((e) => e.date >= today);
+      }
+      return { events: list.slice(0, limit).map(publicRow) };
+    });
+
+    ctx.http.get('/events/:slug', async (req) => {
+      const e = await events.findOne({ slug: req.params.slug, status: 'published' });
+      if (!e) throw ctx.error(404, 'Événement introuvable');
+      return { event: publicRow(e) };
+    });
+
+    ctx.http.get('/widget/upcoming', async (req) => {
+      const limit = Math.min(20, Math.max(1, Number(req.query.limit) || 5));
+      const today = new Date().toISOString().slice(0, 10);
+      const { items } = await events.find({
+        where: { status: 'published' },
+        orderBy: [{ field: 'date', dir: 'asc' }],
+        limit: 200,
+      });
+      return { events: items.filter((e) => e.date >= today).slice(0, limit).map(publicRow) };
+    });
+
+    ctx.admin.get('/events', async () => {
+      const { items, total } = await events.find({
+        orderBy: [{ field: 'date', dir: 'desc' }],
+        limit: 500,
+      });
+      return { events: items, total };
+    });
+
+    ctx.admin.get('/events/:id', async (req) => {
+      const e = await events.get(req.params.id);
+      if (!e) throw ctx.error(404, 'Événement introuvable');
+      return { event: e };
+    });
+
+    ctx.admin.post('/events', async (req: ModuleRequest) => {
+      const data = cleanEvent(req.body);
+      const other = await events.findOne({ slug: data.slug });
+      if (other) throw ctx.error(409, `L’adresse « ${data.slug} » est déjà utilisée.`);
+      const e = await events.insert(data);
+      return { event: e };
+    });
+
+    ctx.admin.put('/events/:id', async (req) => {
+      const current = await events.get(req.params.id);
+      if (!current) throw ctx.error(404, 'Événement introuvable');
+      const data = cleanEvent(req.body, current);
+      const other = await events.findOne({ slug: data.slug });
+      if (other && other.id !== current.id) throw ctx.error(409, `L’adresse « ${data.slug} » est déjà utilisée.`);
+      const e = await events.update(current.id, data);
+      return { event: e };
+    });
+
+    ctx.admin.delete('/events/:id', async (req) => {
+      if (!(await events.delete(req.params.id))) throw ctx.error(404, 'Événement introuvable');
+      return { ok: true };
+    });
+
+    ctx.admin.status(async () => {
+      const today = new Date().toISOString().slice(0, 10);
+      const [all, upcoming] = await Promise.all([
+        events.count({ where: { status: 'published' } }),
+        events.count({ where: { status: 'published' }, filters: [{ field: 'date', op: 'gte', value: today }] }),
+      ]);
+      return {
+        stats: [
+          { label: 'Événements publiés', value: all },
+          { label: 'À venir', value: upcoming },
+        ],
+      };
+    });
+  },
+});

package/template/modules/calendar/src/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Snapify — module Calendrier
+ * © 2026 NOVALABS WEB DESIGN — Tunisie
+ */
+export interface Settings {
+  pageTitle: string;
+  pageIntro: string;
+  timezone: string;
+  showPast: boolean;
+}
+
+export interface CalEvent {
+  title: string;
+  slug: string;
+  description: string;
+  location: string;
+  /** ISO date YYYY-MM-DD */
+  date: string;
+  /** HH:mm ou vide */
+  startTime: string;
+  endTime: string;
+  allDay: boolean;
+  color: string;
+  status: 'published' | 'draft';
+}