@fraza/start 0.0.0-stage → 0.3.4

package/templates/components/fraza/blocks/accordion/fields.js

@@ -0,0 +1,19 @@
+// Métadonnées du bloc « Accordéon » : un en-tête cliquable qui révèle un contenu.
+// Lu sans React au démarrage (slash menu, defaults, validation CLI).
+//
+// Cet exemple montre un **rendu public interactif** : son `render.js` porte
+// `'use client'` (voir le fichier). C'est le pendant interactif de `callout/`
+// et `three-cards/`, qui sont eux des server components statiques.
+
+export const meta = {
+  id: 'accordion',
+  label: 'Accordéon',
+  icon: 'ChevronDownIcon',
+  keywords: ['accordion', 'accordéon', 'toggle', 'faq', 'repliable', 'détails'],
+  category: 'Contenu',
+};
+
+export const defaults = {
+  title: '',
+  body: '',
+};

package/templates/components/fraza/blocks/accordion/render.js

@@ -0,0 +1,47 @@
+'use client';
+
+// Rendu public du bloc « Accordéon ».
+//
+// Ce render est **interactif** : il porte `'use client'` et utilise `useState`
+// pour ouvrir/fermer le contenu. Importé par le manifeste serveur
+// `app/.fraza/blocks.server.js`, il s'y résout en référence client : React
+// franchit la frontière serveur-client automatiquement à l'instanciation.
+//
+// Style du site : classes Tailwind et jetons du thème du projet. À adapter
+// librement.
+
+import { useState } from 'react';
+// Une icône par fichier : le barrel des icônes entrerait en entier dans le
+// bundle client du site.
+import { ChevronDownIcon } from '@fraza/icons/ChevronDownIcon';
+
+export default function AccordionRender({ block }) {
+  const [open, setOpen] = useState(false);
+  const title = block.title || 'Détails';
+
+  return (
+    // `id={block.anchor || undefined}` rend l'ancre du bloc (menu d'actions ▸
+    // Ancre) comme cible d'un lien `#slug`. Posée en inline plutôt que via le
+    // helper `anchorProps` du core : ce render est `'use client'` et
+    // `@fraza/core/blocks-registry/render` est un module serveur-strict.
+    <div id={block.anchor || undefined} className="my-4 rounded-card border border-line bg-surface">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="w-full flex items-center justify-between gap-3 rounded-card px-4 py-3 text-left font-medium text-fg transition-colors duration-120 ease-out hover:bg-surface-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+      >
+        <span>{title}</span>
+        <ChevronDownIcon
+          aria-hidden="true"
+          className={`h-4 w-4 shrink-0 text-fg-muted transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {open && (
+        <div className="px-4 pb-4 pt-1 text-fg-secondary whitespace-pre-wrap leading-relaxed">
+          {block.body}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/components/fraza/blocks/accordion/template.js

@@ -0,0 +1,28 @@
+'use client';
+
+// Vue éditeur du bloc « Accordéon » dans l'administration.
+// Style neutre de l'administration, homogène quel que soit le style du site.
+
+import { TextField, TextareaField, FrazaBlockShell } from '@fraza/core/blocks-registry/fields-ui';
+
+export default function AccordionTemplate({ block, onChange, disabled }) {
+  return (
+    <FrazaBlockShell>
+      <TextField
+        label="Titre"
+        value={block.title}
+        onChange={(title) => onChange?.({ title })}
+        placeholder="En-tête cliquable..."
+        disabled={disabled}
+      />
+      <TextareaField
+        label="Contenu"
+        value={block.body}
+        onChange={(body) => onChange?.({ body })}
+        placeholder="Révélé au clic sur le site public..."
+        disabled={disabled}
+        rows={4}
+      />
+    </FrazaBlockShell>
+  );
+}

package/templates/components/fraza/blocks/callout/fields.js

@@ -0,0 +1,15 @@
+// Métadonnées du bloc « Encadré » : un message et une couleur.
+// Lu sans React au démarrage (slash menu, defaults, validation CLI).
+
+export const meta = {
+  id: 'callout',
+  label: 'Encadré',
+  icon: 'InfoCircleIcon',
+  keywords: ['callout', 'encadré', 'note', 'info', 'warning'],
+  category: 'Contenu',
+};
+
+export const defaults = {
+  text: '',
+  variant: 'info',
+};

package/templates/components/fraza/blocks/callout/render.js

@@ -0,0 +1,28 @@
+// Rendu public du bloc « Encadré ». Server component par défaut.
+// Style du site : classes Tailwind et jetons du thème du projet, sur le modèle
+// des alertes de la charte (fond doux et bordure du statut, icône à gauche).
+// À adapter librement.
+
+import { WarningIcon } from '@fraza/icons/WarningIcon';
+import { CloseCircleIcon } from '@fraza/icons/CloseCircleIcon';
+import { InfoCircleIcon } from '@fraza/icons/InfoCircleIcon';
+import { CheckIcon } from '@fraza/icons/CheckIcon';
+
+const VARIANTS = {
+  info: { classes: 'bg-info-soft border-info-line text-info', Icon: InfoCircleIcon },
+  success: { classes: 'bg-success-soft border-success-line text-success', Icon: CheckIcon },
+  warning: { classes: 'bg-warning-soft border-warning-line text-warning', Icon: WarningIcon },
+  danger: { classes: 'bg-danger-soft border-danger-line text-danger', Icon: CloseCircleIcon },
+};
+
+export default function CalloutRender({ block }) {
+  const { classes, Icon } = VARIANTS[block.variant] || VARIANTS.info;
+  return (
+    // `id={block.anchor || undefined}` : ancre du bloc (menu d'actions ▸ Ancre),
+    // cible d'un lien interne `#slug`.
+    <div id={block.anchor || undefined} className={`my-6 flex gap-3 rounded-[10px] border px-4 py-3 ${classes}`}>
+      <Icon aria-hidden="true" className="mt-1 h-4 w-4 shrink-0" />
+      <p className="whitespace-pre-wrap leading-relaxed">{block.text}</p>
+    </div>
+  );
+}

package/templates/components/fraza/blocks/callout/template.js

@@ -0,0 +1,37 @@
+'use client';
+
+// Vue éditeur du bloc « Encadré » dans l'administration.
+// Style neutre de l'administration : dimensions fixes, couleurs sobres, aucune
+// classe propre au site. L'administration reste ainsi homogène, quel que soit
+// le style du site public.
+
+import { TextareaField, SelectField, FrazaBlockShell } from '@fraza/core/blocks-registry/fields-ui';
+
+const VARIANT_OPTIONS = [
+  { value: 'info', label: 'Information' },
+  { value: 'success', label: 'Succès' },
+  { value: 'warning', label: 'Attention' },
+  { value: 'danger', label: 'Erreur' },
+];
+
+export default function CalloutTemplate({ block, onChange, disabled }) {
+  return (
+    <FrazaBlockShell>
+      <SelectField
+        label="Variante"
+        value={block.variant}
+        onChange={(variant) => onChange?.({ variant })}
+        options={VARIANT_OPTIONS}
+        disabled={disabled}
+      />
+      <TextareaField
+        label="Message"
+        value={block.text}
+        onChange={(text) => onChange?.({ text })}
+        placeholder="Tape ton message ici..."
+        disabled={disabled}
+        rows={3}
+      />
+    </FrazaBlockShell>
+  );
+}

package/templates/components/fraza/blocks/icon-list/fields.js

@@ -0,0 +1,20 @@
+// Métadonnées du bloc « Liste d'icônes » : une liste verticale d'éléments,
+// chacun avec une icône à gauche, un texte, et un lien optionnel
+// (tel:, mailto: ou URL).
+
+export const meta = {
+  id: 'icon-list',
+  label: "Liste d'icônes",
+  icon: 'ChecklistIcon',
+  keywords: ['icone', 'icon', 'liste', 'list', 'contact', 'coordonnées', 'features'],
+  category: 'Contenu',
+};
+
+export const defaults = {
+  title: '',
+  iconColor: '', // '' = hérite de la couleur du texte
+  items: [
+    { icon: 'SmartphoneIcon', text: '', href: '' },
+    { icon: 'AtIcon', text: '', href: '' },
+  ],
+};

package/templates/components/fraza/blocks/icon-list/render.js

@@ -0,0 +1,44 @@
+// Rendu public du bloc « Liste d'icônes ».
+// Server component : affiche une liste verticale icône + texte, avec lien
+// optionnel (tel:/mailto:/URL). `<Icon name>` charge seulement l'icône choisie
+// de @fraza/icons ; un nom inconnu n'affiche rien.
+
+import { sanitizeUrl } from '@fraza/core/blocks-registry/url';
+import { Icon } from '@fraza/core/shared/components/Icon';
+
+export default function IconListRender({ block }) {
+  const items = Array.isArray(block.items) ? block.items : [];
+  const iconColor = block.iconColor || undefined;
+
+  return (
+    <section id={block.anchor || undefined} className="my-12 max-w-3xl mx-auto px-4">
+      {block.title && (
+        <h2 className="text-2xl font-bold tracking-[-0.03em] text-fg mb-6">{block.title}</h2>
+      )}
+      <ul className="flex flex-col gap-3">
+        {items.map((item, i) => {
+          // Même liste blanche que les liens du core : une adresse refusée
+          // (`javascript:`, `data:`…) rend l'élément sans lien.
+          const href = sanitizeUrl(item.href);
+          const content = (
+            <>
+              <Icon name={item.icon} className="w-5 h-5 shrink-0" style={iconColor ? { color: iconColor } : undefined} />
+              <span>{item.text}</span>
+            </>
+          );
+          return (
+            <li key={i} className="flex items-center gap-3">
+              {href ? (
+                <a href={href} className="flex items-center gap-3 rounded-md text-accent underline-offset-[3px] transition-colors duration-120 ease-out hover:text-accent-hover hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-canvas">
+                  {content}
+                </a>
+              ) : (
+                content
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/templates/components/fraza/blocks/icon-list/template.js

@@ -0,0 +1,89 @@
+'use client';
+
+// Vue éditeur du bloc « Liste d'icônes » dans l'administration.
+// Un titre et une couleur d'icône commune, puis une liste d'éléments (icône,
+// texte, lien) à ajouter ou retirer. Style neutre de l'administration.
+
+import { TextField, IconField, ColorField, FrazaBlockShell } from '@fraza/core/blocks-registry/fields-ui';
+import { Button } from '@fraza/core/shared/components';
+import { PlusIcon } from '@fraza/icons/PlusIcon';
+
+export default function IconListTemplate({ block, onChange, disabled }) {
+  const items = Array.isArray(block.items) ? block.items : [];
+
+  const patchItem = (index, patch) =>
+    onChange?.({ items: items.map((it, i) => (i === index ? { ...it, ...patch } : it)) });
+  const addItem = () =>
+    onChange?.({ items: [...items, { icon: 'SmartphoneIcon', text: '', href: '' }] });
+  const removeItem = (index) =>
+    onChange?.({ items: items.filter((_, i) => i !== index) });
+
+  return (
+    <FrazaBlockShell>
+      <TextField
+        label="Titre de la section"
+        value={block.title}
+        onChange={(title) => onChange?.({ title })}
+        placeholder="Optionnel"
+        disabled={disabled}
+      />
+      <ColorField
+        label="Couleur des icônes"
+        value={block.iconColor}
+        onChange={(iconColor) => onChange?.({ iconColor })}
+        disabled={disabled}
+      />
+
+      <div className="flex flex-col gap-3 mt-3">
+        {items.map((item, i) => (
+          <div
+            key={i}
+            className="border border-line rounded-control p-3 bg-surface"
+          >
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-[12.5px] font-medium text-fg-secondary">Élément {i + 1}</span>
+              <Button
+                variant="dangerSoft"
+                size="sm"
+                onClick={() => removeItem(i)}
+                disabled={disabled}
+              >
+                Retirer
+              </Button>
+            </div>
+            <IconField
+              label="Icône"
+              value={item.icon}
+              onChange={(icon) => patchItem(i, { icon })}
+              disabled={disabled}
+            />
+            <TextField
+              label="Texte"
+              value={item.text}
+              onChange={(text) => patchItem(i, { text })}
+              disabled={disabled}
+            />
+            <TextField
+              label="Lien (optionnel)"
+              value={item.href}
+              onChange={(href) => patchItem(i, { href })}
+              placeholder="tel:..., mailto:... ou https://..."
+              disabled={disabled}
+            />
+          </div>
+        ))}
+      </div>
+
+      <Button
+        variant="secondary"
+        size="sm"
+        icon={PlusIcon}
+        onClick={addItem}
+        disabled={disabled}
+        className="mt-3"
+      >
+        Ajouter un élément
+      </Button>
+    </FrazaBlockShell>
+  );
+}

package/templates/components/fraza/blocks/three-cards/fields.js

@@ -0,0 +1,19 @@
+// Métadonnées du bloc « Trois cartes » : une rangée de 3 cartes, chacune avec
+// une image, un titre et un texte.
+
+export const meta = {
+  id: 'three-cards',
+  label: 'Trois cartes',
+  icon: 'LayersIcon',
+  keywords: ['cartes', 'colonnes', 'grid', 'three', 'features'],
+  category: 'Layout',
+};
+
+export const defaults = {
+  title: '',
+  cards: [
+    { title: '', text: '', image: null },
+    { title: '', text: '', image: null },
+    { title: '', text: '', image: null },
+  ],
+};

package/templates/components/fraza/blocks/three-cards/render.js

@@ -0,0 +1,33 @@
+// Rendu public du bloc « Trois cartes ». Server component par défaut.
+// Style du site : grille Tailwind responsive.
+
+export default function ThreeCardsRender({ block }) {
+  const cards = Array.isArray(block.cards) ? block.cards : [];
+  return (
+    // `id={block.anchor || undefined}` : ancre du bloc (menu d'actions ▸ Ancre),
+    // cible d'un lien interne `#slug`.
+    <section id={block.anchor || undefined} className="my-12 max-w-6xl mx-auto px-4">
+      {block.title && (
+        <h2 className="text-3xl font-bold tracking-[-0.03em] text-fg mb-8 text-center">{block.title}</h2>
+      )}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {cards.map((card, i) => (
+          <article key={i} className="rounded-card overflow-hidden bg-surface border border-line">
+            {card.image?.src && (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                src={card.image.src}
+                alt={card.image.alt || card.title || ''}
+                className="w-full aspect-[4/3] object-cover"
+              />
+            )}
+            <div className="p-5">
+              {card.title && <h3 className="text-xl font-semibold text-fg mb-2">{card.title}</h3>}
+              {card.text && <p className="text-fg-secondary leading-relaxed">{card.text}</p>}
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/components/fraza/blocks/three-cards/template.js

@@ -0,0 +1,57 @@
+'use client';
+
+// Vue éditeur du bloc « Trois cartes » dans l'administration.
+// Affiche un titre et 3 cartes modifiables côte à côte, dans le style neutre de
+// l'administration.
+
+import { TextField, TextareaField, ImageField, FrazaBlockShell } from '@fraza/core/blocks-registry/fields-ui';
+
+export default function ThreeCardsTemplate({ block, onChange, disabled }) {
+  const cards = Array.isArray(block.cards) ? block.cards : [];
+
+  function patchCard(index, patch) {
+    const next = cards.map((c, i) => (i === index ? { ...c, ...patch } : c));
+    onChange?.({ cards: next });
+  }
+
+  return (
+    <FrazaBlockShell>
+      <TextField
+        label="Titre de la section"
+        value={block.title}
+        onChange={(title) => onChange?.({ title })}
+        placeholder="Optionnel"
+        disabled={disabled}
+      />
+      <div className="grid grid-cols-3 gap-3 mt-3">
+        {[0, 1, 2].map((i) => {
+          const card = cards[i] || { title: '', text: '', image: null };
+          return (
+            <div key={i} className="border border-line rounded-control p-3 bg-surface">
+              <div className="text-[12.5px] font-medium text-fg-secondary mb-2">Carte {i + 1}</div>
+              <ImageField
+                label="Image"
+                value={card.image}
+                onChange={(image) => patchCard(i, { image })}
+                disabled={disabled}
+              />
+              <TextField
+                label="Titre"
+                value={card.title}
+                onChange={(title) => patchCard(i, { title })}
+                disabled={disabled}
+              />
+              <TextareaField
+                label="Texte"
+                value={card.text}
+                onChange={(text) => patchCard(i, { text })}
+                rows={2}
+                disabled={disabled}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </FrazaBlockShell>
+  );
+}