create-snapify-app 0.0.0-stage → 1.1.0

package/template/sdk-kit/templates/module/src/public.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { definePublicModule, matchesPaths, type PublicModuleProps, type WidgetProps } from '@snapify/sdk';
+import type { MessageOptions, Settings } from './types';
+
+/** Emplacement `floating` : bannière fixée en bas de l’écran. */
+function Banner({ settings, path, isPreview, api }: PublicModuleProps<Settings>) {
+  const [closed, setClosed] = useState(false);
+  if (closed || isPreview || !settings.enabled) return null;
+  if (settings.showOnPages.length && !matchesPaths(settings.showOnPages, path)) return null;
+
+  return (
+    <div className="fixed bottom-5 left-5 z-40 flex items-center gap-3 rounded-full bg-px-navy py-2 pl-5 pr-2 text-sm text-white shadow-lg">
+      <button type="button" className="font-semibold" onClick={() => api.post('/click').catch(() => undefined)}>
+        {settings.message}
+      </button>
+      <button type="button" aria-label="Fermer" className="grid h-7 w-7 place-items-center rounded-full hover:bg-white/15" onClick={() => setClosed(true)}>
+        ×
+      </button>
+    </div>
+  );
+}
+
+/** Widget inséré dans une page avec le bloc « Module » de l’éditeur. */
+function MessageWidget({ options, navigate }: WidgetProps<Settings, MessageOptions>) {
+  return (
+    <section className="mx-auto w-[min(100%-2.5rem,48rem)] rounded-2xl border border-black/10 bg-white p-8 text-center shadow-sm">
+      <h2 className="text-2xl font-bold text-px-navy">{options.title}</h2>
+      {options.text ? <p className="mt-3 text-slate-600">{options.text}</p> : null}
+      {options.buttonLabel ? (
+        <a
+          href={options.buttonLink}
+          className="mt-6 inline-flex rounded-full bg-px-primary px-6 py-3 font-semibold text-white hover:bg-px-primary-dark"
+          onClick={(e) => {
+            if (!options.buttonLink.startsWith('/')) return;
+            e.preventDefault();
+            navigate(options.buttonLink);
+          }}
+        >
+          {options.buttonLabel}
+        </a>
+      ) : null}
+    </section>
+  );
+}
+
+export default definePublicModule<Settings>({
+  slots: { floating: Banner },
+  widgets: { message: MessageWidget },
+});

package/template/sdk-kit/templates/module/src/server.ts

@@ -0,0 +1,30 @@
+import { defineServerModule } from '@snapify/sdk';
+import type { Settings, Stats } from './types';
+
+const EMPTY: Stats = { clicks: 0, lastClickAt: null };
+
+export default defineServerModule<Settings>({
+  activate(ctx) {
+    const read = async () => (await ctx.storage.get<Stats>('stats')) ?? EMPTY;
+
+    /** POST /api/modules/<id>/click — appelé par la bannière. */
+    ctx.http.post('/click', () =>
+      ctx.lock('stats', async () => {
+        const stats = await read();
+        const next: Stats = { clicks: stats.clicks + 1, lastClickAt: new Date().toISOString() };
+        await ctx.storage.set('stats', next);
+        return { clicks: next.clicks };
+      })
+    );
+
+    /** Routes réservées à l’administration (/api/admin/modules/<id>/api/…). */
+    ctx.admin.get('/stats', read);
+    ctx.admin.post('/reset', async () => {
+      await ctx.storage.set('stats', EMPTY);
+      return EMPTY;
+    });
+
+    /** Indicateurs affichés sur la fiche du module. */
+    ctx.admin.status(async () => ({ stats: [{ label: 'Clics', value: (await read()).clicks }] }));
+  },
+});

package/template/sdk-kit/templates/module/src/types.ts

@@ -0,0 +1,19 @@
+/** Réglages du module (snapify.module.json → settings). */
+export interface Settings {
+  enabled: boolean;
+  message: string;
+  showOnPages: string[];
+}
+
+/** Options du widget « message » (snapify.module.json → widgets[].fields). */
+export interface MessageOptions {
+  title: string;
+  text: string;
+  buttonLabel: string;
+  buttonLink: string;
+}
+
+export interface Stats {
+  clicks: number;
+  lastClickAt: string | null;
+}

package/template/sdk-kit/templates/theme/snapify.theme.json.tpl

@@ -0,0 +1,22 @@
+{
+  "id": "__ID__",
+  "name": "__NAME__",
+  "version": "1.0.0",
+  "description": "Thème de départ : en-tête, pied de page, articles et blocs principaux du constructeur, aux couleurs de l’identité visuelle du site.",
+  "author": { "name": "__AUTHOR__", "email": "__EMAIL__" },
+  "pricing": "free",
+  "category": "Polyvalent",
+  "engines": { "snapify": "^__API_VERSION__" },
+  "entries": { "public": "src/index.tsx" },
+  "settings": [
+    {
+      "key": "headerStyle", "type": "select", "group": "En-tête", "label": "Style de l’en-tête", "default": "light",
+      "options": [
+        { "value": "light", "label": "Clair" },
+        { "value": "dark", "label": "Foncé" }
+      ]
+    },
+    { "key": "stickyHeader", "type": "boolean", "group": "En-tête", "label": "En-tête fixe", "default": true },
+    { "key": "footerText", "type": "textarea", "group": "Pied de page", "label": "Texte de présentation", "default": "{{societe}} — Contactez-nous au {{telephone}}.", "help": "Variables disponibles : {{societe}}, {{telephone}}, {{email}}, {{annee}}.", "rows": 2 }
+  ]
+}

package/template/sdk-kit/templates/theme/src/Footer.tsx

@@ -0,0 +1,40 @@
+import { useSnapify, type ThemeChromeProps } from '@snapify/sdk/theme';
+import { SiteLink, useMenu, useOptions, useText } from './site';
+
+export function Footer({ openCookies }: ThemeChromeProps) {
+  const { site, info } = useSnapify();
+  const options = useOptions();
+  const t = useText();
+  const menu = useMenu('footer');
+
+  return (
+    <footer className="mt-24 bg-px-navy text-sm text-white/75">
+      <div className="st-container grid gap-10 py-14 md:grid-cols-3">
+        <div className="space-y-3">
+          <p className="text-lg font-bold text-white">{site.branding.siteName}</p>
+          <p>{t(options.footerText)}</p>
+        </div>
+        <nav className="flex flex-col gap-2">
+          {menu.map((item) => (
+            <SiteLink key={item.id} href={item.path} newTab={item.openInNewTab} className="hover:text-white">
+              {item.label}
+            </SiteLink>
+          ))}
+        </nav>
+        <div className="space-y-2">
+          {info.phone ? <a href={`tel:${info.phoneClean}`} className="block hover:text-white">{info.phone}</a> : null}
+          {info.contactEmail ? <a href={`mailto:${info.contactEmail}`} className="block hover:text-white">{info.contactEmail}</a> : null}
+          {info.address ? <p>{info.address}</p> : null}
+        </div>
+      </div>
+      <div className="border-t border-white/10">
+        <div className="st-container flex flex-wrap items-center justify-between gap-3 py-5 text-xs">
+          <span>© {new Date().getFullYear()} {info.legalName || site.branding.siteName}</span>
+          <button type="button" className="hover:text-white" onClick={openCookies}>
+            Gestion des cookies
+          </button>
+        </div>
+      </div>
+    </footer>
+  );
+}

package/template/sdk-kit/templates/theme/src/Header.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { ModuleSlot, useSnapify, type ThemeChromeProps } from '@snapify/sdk/theme';
+import { cx, SiteLink, useMenu, useOptions } from './site';
+
+export function Header({ path }: ThemeChromeProps) {
+  const { site } = useSnapify();
+  const options = useOptions();
+  const menu = useMenu('primary');
+  const [open, setOpen] = useState(false);
+  const dark = options.headerStyle === 'dark';
+  const active = (p: string) => (p === '/' ? path === '/' : path.startsWith(p));
+
+  return (
+    <header className={cx('z-30 border-b', options.stickyHeader && 'sticky top-0', dark ? 'border-white/10 bg-px-navy text-white' : 'border-black/10 bg-white text-px-navy')}>
+      <div className="st-container flex h-16 items-center justify-between gap-6">
+        <SiteLink href="/" className="flex items-center gap-3 font-bold">
+          {site.branding.logoUrl ? <img src={dark && site.branding.logoDarkUrl ? site.branding.logoDarkUrl : site.branding.logoUrl} alt={site.branding.siteName} className="h-9 w-auto" /> : site.branding.siteName}
+        </SiteLink>
+
+        <nav className="hidden items-center gap-6 text-sm font-medium md:flex">
+          {menu.map((item) => (
+            <SiteLink key={item.id} href={item.path} newTab={item.openInNewTab} className={cx('hover:text-px-primary', active(item.path) && 'text-px-primary')}>
+              {item.label}
+            </SiteLink>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-2">
+          <ModuleSlot name="header-actions" />
+          <button type="button" className="rounded-md p-2 md:hidden" aria-label="Menu" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+            ☰
+          </button>
+        </div>
+      </div>
+
+      {open ? (
+        <nav className="st-container flex flex-col gap-1 pb-4 md:hidden" onClick={() => setOpen(false)}>
+          {menu.map((item) => (
+            <SiteLink key={item.id} href={item.path} newTab={item.openInNewTab} className="rounded-md px-3 py-2 hover:bg-black/5">
+              {item.label}
+            </SiteLink>
+          ))}
+        </nav>
+      ) : null}
+    </header>
+  );
+}

package/template/sdk-kit/templates/theme/src/Views.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { BlogPost } from '@snapify/sdk/content';
+import { SiteLink } from './site';
+
+const dateFormat = new Intl.DateTimeFormat('fr-FR', { dateStyle: 'long' });
+
+export function Post({ post, children }: { post: BlogPost; children: ReactNode }) {
+  return (
+    <article>
+      <header className="st-container max-w-3xl space-y-4 pt-16">
+        <SiteLink href="/blog/" className="text-sm font-semibold text-px-primary">
+          ← Tous les articles
+        </SiteLink>
+        <h1 className="text-4xl font-bold leading-tight">{post.title}</h1>
+        {post.excerpt ? <p className="text-lg opacity-80">{post.excerpt}</p> : null}
+        <p className="text-sm opacity-60">
+          {[post.author, post.publishedAt ? dateFormat.format(new Date(post.publishedAt)) : null].filter(Boolean).join(' · ')}
+        </p>
+        {post.coverImage ? <img src={post.coverImage} alt="" className="w-full rounded-2xl object-cover" /> : null}
+      </header>
+      {children}
+    </article>
+  );
+}
+
+export function NotFound({ navigate }: { navigate: (path: string) => void }) {
+  return (
+    <div className="st-container py-32 text-center">
+      <h1 className="text-4xl font-bold">Page introuvable</h1>
+      <p className="mt-4 opacity-70">Cette adresse n’existe pas ou plus.</p>
+      <button type="button" className="st-btn st-btn-primary mt-8" onClick={() => navigate('/')}>
+        Retour à l’accueil
+      </button>
+    </div>
+  );
+}

package/template/sdk-kit/templates/theme/src/blocks.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react';
+import type { BlockProps } from '@snapify/sdk/theme';
+import type { BlockStyle } from '@snapify/sdk/content';
+import { Buttons, cx, useText } from './site';
+
+const SPACING = { none: '0', sm: '2rem', md: '4rem', lg: '6rem', xl: '8rem' } as const;
+const WIDTH = { narrow: 'max-w-3xl', default: 'max-w-6xl', wide: 'max-w-7xl', full: 'max-w-none' } as const;
+const BACKGROUND: Partial<Record<BlockStyle['background'], string>> = {
+  white: 'bg-white',
+  surface: 'bg-px-surface',
+  soft: 'bg-px-primary-light/40',
+  navy: 'bg-px-navy text-white',
+  brand: 'bg-px-primary text-white',
+};
+
+/** Enveloppe commune : fond, marges verticales et largeur choisis dans l’éditeur. */
+function Section({ style, children, className }: { style: BlockStyle; children: ReactNode; className?: string }) {
+  return (
+    <section className={cx(BACKGROUND[style.background], className)} style={{ paddingTop: SPACING[style.paddingTop], paddingBottom: SPACING[style.paddingBottom] }}>
+      <div className={cx('mx-auto w-[min(100%-2.5rem,80rem)]', WIDTH[style.width])}>{children}</div>
+    </section>
+  );
+}
+
+export function HeroBlock({ d, style }: BlockProps<'hero'>) {
+  const t = useText();
+  const centered = d.layout === 'centered';
+  return (
+    <Section style={style}>
+      <div className={cx('grid items-center gap-12', !centered && d.mainImage && 'lg:grid-cols-2', centered && 'text-center')}>
+        <div className={cx('space-y-6', centered && 'mx-auto max-w-3xl')}>
+          {d.badgeText ? <p className="text-sm font-semibold uppercase tracking-wider text-px-primary">{t(d.badgeText)}</p> : null}
+          <h1 className="text-4xl font-bold leading-tight sm:text-5xl">
+            {t(d.title)} {d.highlight ? <span className="text-px-primary">{t(d.highlight)}</span> : null}
+          </h1>
+          {d.subtitle ? <p className="text-lg opacity-80">{t(d.subtitle)}</p> : null}
+          <Buttons buttons={d.buttons} className={centered ? 'justify-center' : undefined} />
+        </div>
+        {!centered && d.media === 'image' && d.mainImage ? <img src={d.mainImage} alt={d.mainImageAlt ?? ''} className="w-full rounded-2xl object-cover" /> : null}
+      </div>
+    </Section>
+  );
+}
+
+export function PageHeaderBlock({ d, style }: BlockProps<'pageHeader'>) {
+  const t = useText();
+  return (
+    <Section style={style}>
+      {d.eyebrow ? <p className="text-sm font-semibold uppercase tracking-wider text-px-primary">{t(d.eyebrow)}</p> : null}
+      <h1 className="mt-2 text-4xl font-bold">
+        {t(d.title)} {d.highlight ? <span className="text-px-primary">{t(d.highlight)}</span> : null}
+      </h1>
+      {d.intro ? <p className="mt-4 max-w-2xl text-lg opacity-80">{t(d.intro)}</p> : null}
+      <Buttons buttons={d.buttons} className="mt-6" />
+    </Section>
+  );
+}
+
+export function RichTextBlock({ d, style }: BlockProps<'richText'>) {
+  return (
+    <Section style={{ ...style, width: style.width === 'default' ? 'narrow' : style.width }}>
+      <div className={cx('st-prose', d.size === 'large' && 'text-lg')} dangerouslySetInnerHTML={{ __html: d.html }} />
+    </Section>
+  );
+}
+
+export function ImageBlock({ d, style }: BlockProps<'image'>) {
+  if (!d.url) return null;
+  return (
+    <Section style={style}>
+      <figure>
+        <img src={d.url} alt={d.alt} loading="lazy" className={cx('w-full object-cover', d.rounded && 'rounded-2xl')} />
+        {d.caption ? <figcaption className="mt-3 text-center text-sm opacity-70">{d.caption}</figcaption> : null}
+      </figure>
+    </Section>
+  );
+}
+
+export function CtaBlock({ d, style }: BlockProps<'cta'>) {
+  const t = useText();
+  const dark = d.variant !== 'light';
+  return (
+    <Section style={style}>
+      <div className={cx('rounded-3xl p-10 text-center sm:p-16', dark ? 'bg-px-navy text-white' : 'border border-black/10 bg-white')}>
+        <h2 className="text-3xl font-bold">
+          {t(d.title)} {d.highlight ? <span className="text-px-primary">{t(d.highlight)}</span> : null}
+        </h2>
+        {d.text ? <p className="mx-auto mt-4 max-w-2xl opacity-80">{t(d.text)}</p> : null}
+        <Buttons buttons={d.buttons} className="mt-8 justify-center" />
+      </div>
+    </Section>
+  );
+}

package/template/sdk-kit/templates/theme/src/index.tsx

@@ -0,0 +1,30 @@
+import './styles.css';
+import type { ReactNode } from 'react';
+import { defineTheme } from '@snapify/sdk/theme';
+import { Header } from './Header';
+import { Footer } from './Footer';
+import { NotFound, Post } from './Views';
+import { CtaBlock, HeroBlock, ImageBlock, PageHeaderBlock, RichTextBlock } from './blocks';
+
+function Layout({ children }: { children: ReactNode }) {
+  return <div className="st-root min-h-screen bg-px-surface text-px-navy">{children}</div>;
+}
+
+/**
+ * Un bloc sans rendu n’est pas affiché : ajoutez les autres types du constructeur
+ * (textMedia, cards, faq, gallery, contactForm…) avant de publier le thème.
+ */
+export default defineTheme({
+  Layout,
+  Header,
+  Footer,
+  Post,
+  NotFound,
+  blocks: {
+    hero: HeroBlock,
+    pageHeader: PageHeaderBlock,
+    richText: RichTextBlock,
+    image: ImageBlock,
+    cta: CtaBlock,
+  },
+});

package/template/sdk-kit/templates/theme/src/site.tsx

@@ -0,0 +1,59 @@
+import type { MouseEvent, ReactNode } from 'react';
+import { isPreviewMode, useSnapify } from '@snapify/sdk/theme';
+import { applyTokens, type ButtonData, type MenuItemDto } from '@snapify/sdk/content';
+
+/** Options du thème (snapify.theme.json → settings), réglées dans Apparence › Personnaliser. */
+export interface ThemeOptions {
+  headerStyle: 'light' | 'dark';
+  stickyHeader: boolean;
+  footerText: string;
+}
+
+export const useOptions = () => useSnapify<ThemeOptions>().settings;
+
+/** Remplace {{nom}}, {{telephone}}… par les coordonnées du site. */
+export function useText() {
+  const { tokens } = useSnapify();
+  return (text: string | undefined) => applyTokens(text, tokens);
+}
+
+export function useMenu(id: 'primary' | 'footer'): MenuItemDto[] {
+  const { site } = useSnapify();
+  return site.menus.find((m) => m.id === id)?.items ?? [];
+}
+
+export const cx = (...classes: (string | false | null | undefined)[]) => classes.filter(Boolean).join(' ');
+
+const isInternal = (href: string) => href.startsWith('/') && !href.startsWith('//');
+
+/** Lien du site : navigation sans rechargement pour les adresses internes, nouvel onglet sinon. */
+export function SiteLink({ href, newTab, className, children }: { href: string; newTab?: boolean; className?: string; children: ReactNode }) {
+  const { navigate } = useSnapify();
+  const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (newTab || !isInternal(href) || e.metaKey || e.ctrlKey) return;
+    e.preventDefault();
+    navigate(href);
+    window.scrollTo({ top: 0 });
+  };
+  const external = newTab || /^https?:\/\//.test(href);
+  if (external && isPreviewMode()) return <span className={className}>{children}</span>;
+  return (
+    <a href={href} onClick={onClick} className={className} {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}>
+      {children}
+    </a>
+  );
+}
+
+export function Buttons({ buttons, className }: { buttons: ButtonData[]; className?: string }) {
+  const t = useText();
+  if (!buttons.length) return null;
+  return (
+    <div className={cx('flex flex-wrap gap-3', className)}>
+      {buttons.map((b) => (
+        <SiteLink key={b.id} href={b.link} newTab={b.newTab} className={cx('st-btn', b.variant === 'primary' ? 'st-btn-primary' : 'st-btn-outline')}>
+          {t(b.label)}
+        </SiteLink>
+      ))}
+    </div>
+  );
+}

package/template/sdk-kit/templates/theme/src/styles.css

@@ -0,0 +1,71 @@
+/*
+ * Les couleurs `px-*` (bg-px-primary, text-px-navy…) suivent l’identité visuelle du site.
+ * Préfixez vos classes (ici `st-`) pour ne pas entrer en conflit avec celles des modules.
+ */
+.st-root {
+  font-family: var(--px-font-body, system-ui, sans-serif);
+}
+.st-root h1,
+.st-root h2,
+.st-root h3 {
+  font-family: var(--px-font-heading, inherit);
+}
+
+.st-container {
+  width: min(100% - 2.5rem, 80rem);
+  margin-inline: auto;
+}
+
+.st-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 999px;
+  padding: 0.75rem 1.5rem;
+  font-weight: 600;
+  transition: background-color 0.15s, color 0.15s;
+}
+.st-btn-primary {
+  background: var(--px-primary);
+  color: #fff;
+}
+.st-btn-primary:hover {
+  background: var(--px-primary-dark);
+}
+.st-btn-outline {
+  border: 1px solid currentColor;
+}
+
+.st-prose > * + * {
+  margin-top: 1em;
+}
+.st-prose h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin-top: 1.6em;
+}
+.st-prose h3 {
+  font-size: 1.35rem;
+  font-weight: 700;
+  margin-top: 1.4em;
+}
+.st-prose a {
+  color: var(--px-primary);
+  text-decoration: underline;
+}
+.st-prose ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+}
+.st-prose ol {
+  list-style: decimal;
+  padding-left: 1.5rem;
+}
+.st-prose blockquote {
+  border-left: 3px solid var(--px-primary);
+  padding-left: 1rem;
+  font-style: italic;
+}
+.st-prose img {
+  border-radius: 1rem;
+}