@salifbiaye/create-boutique 0.7.1 → 0.7.2

package/templates/backend/src/modules/customization/models/site-text.ts

@@ -0,0 +1,17 @@
+import { model } from "@medusajs/framework/utils"
+
+/**
+ * Texte d'interface remplacé (admin → Personnaliser → Textes du site).
+ * scope = « all » (toutes les boutiques du projet) ou l'id du sales channel d'une boutique (prioritaire).
+ * key = clé de storefront/locales/<langue>.json (ex. « cart.title ») ; texte simple uniquement.
+ */
+const SiteText = model
+  .define("site_text", {
+    id: model.id({ prefix: "stxt" }).primaryKey(),
+    scope: model.text(),
+    key: model.text(),
+    value: model.text(),
+  })
+  .indexes([{ on: ["scope", "key"], unique: true }])
+
+export default SiteText

package/templates/backend/src/modules/customization/service.ts

@@ -0,0 +1,7 @@
+import { MedusaService } from "@medusajs/framework/utils"
+import CssVersion from "./models/css-version"
+import SiteText from "./models/site-text"
+
+class CustomizationModuleService extends MedusaService({ SiteText, CssVersion }) {}
+
+export default CustomizationModuleService

package/templates/backend/src/modules/customization/validators.ts

@@ -0,0 +1,49 @@
+import { z } from "@medusajs/framework/zod"
+
+/**
+ * Personnalisation : textes d'interface (texte simple, pas de HTML) et style CSS (taille bornée, rien qui charge
+ * du contenu externe ou sorte de la balise <style>).
+ */
+export const KEY_RE = /^[a-zA-Z0-9_.-]{1,120}$/
+export const SCOPE_RE = /^(all|sc_[A-Za-z0-9]+)$/
+
+export const TextsInput = z.object({
+  scope: z.string().regex(SCOPE_RE, "boutique invalide"),
+  /** clé → nouveau texte ; null = revenir au texte d'origine */
+  values: z.record(
+    z.string().regex(KEY_RE, "clé invalide"),
+    z
+      .string()
+      .max(1000, "1000 caractères maximum")
+      .refine((v) => !/[<>]/.test(v), "Texte simple uniquement (pas de HTML)")
+      .nullable()
+  ),
+})
+export type TextsInput = z.infer<typeof TextsInput>
+
+export const MAX_CSS = 200_000
+
+/** Interdits : sortie de la balise <style>, @import et url() externes (chargement depuis un autre site), anciens vecteurs de script */
+export function cssProblem(css: string): string | null {
+  if (css.length > MAX_CSS) return `CSS trop long (${Math.round(MAX_CSS / 1000)} Ko maximum)`
+  if (/<\/?\s*style|<!--|<script/i.test(css)) return "Balises HTML interdites dans le CSS"
+  if (/@import/i.test(css)) return "@import interdit : mettez les polices dans public/custom/ ou utilisez celles du thème"
+  if (/expression\s*\(|javascript:|behavior\s*:|-moz-binding/i.test(css)) return "Instruction interdite dans le CSS"
+  const urls = [...css.matchAll(/url\(\s*(['"]?)([^'")]+)\1\s*\)/gi)].map((m) => m[2].trim())
+  const bad = urls.find((u) => !(u.startsWith("/") || u.startsWith("data:image/") || u.startsWith("#")))
+  if (bad) return `url(${bad}) interdite : seulement des fichiers du site (/custom/…) ou des images data:`
+  return null
+}
+
+export const CssInput = z.object({
+  css: z.string().superRefine((v, ctx) => {
+    const p = cssProblem(v)
+    if (p) ctx.addIssue({ code: "custom", message: p })
+  }),
+  use_file: z.boolean(),
+  note: z.string().trim().max(120).optional(),
+})
+export type CssInput = z.infer<typeof CssInput>
+
+export const CssRestoreInput = z.object({ id: z.string().regex(/^scss_[A-Za-z0-9]+$/) })
+export type CssRestoreInput = z.infer<typeof CssRestoreInput>

package/templates/backend/src/workflows/customization.ts

@@ -0,0 +1,15 @@
+import { createWorkflow, WorkflowResponse } from "@medusajs/framework/workflows-sdk"
+import { type SaveCssData, saveCssVersionStep } from "./steps/save-css-version"
+import { type SaveSiteTextsData, saveSiteTextsStep } from "./steps/save-site-texts"
+
+/** Admin → Personnaliser → Textes du site */
+export const saveSiteTextsWorkflow = createWorkflow("save-site-texts", function (input: SaveSiteTextsData) {
+  const result = saveSiteTextsStep(input)
+  return new WorkflowResponse(result)
+})
+
+/** Admin → Personnaliser → Style : enregistrer, restaurer une version, revenir au thème */
+export const saveCssWorkflow = createWorkflow("save-css-version", function (input: SaveCssData) {
+  const version = saveCssVersionStep(input)
+  return new WorkflowResponse(version)
+})

package/templates/backend/src/workflows/steps/save-css-version.ts

@@ -0,0 +1,20 @@
+import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
+import { CUSTOMIZATION_MODULE } from "../../modules/customization"
+import type CustomizationModuleService from "../../modules/customization/service"
+
+export type SaveCssData = { css: string; use_file: boolean; note: string | null; author: string | null }
+
+/** Nouvelle version du style (la plus récente est appliquée) ; rollback : supprime la version créée. */
+export const saveCssVersionStep = createStep(
+  "save-css-version",
+  async (input: SaveCssData, { container }) => {
+    const service: CustomizationModuleService = container.resolve(CUSTOMIZATION_MODULE)
+    const version = await service.createCssVersions(input)
+    return new StepResponse(version, version.id)
+  },
+  async (id, { container }) => {
+    if (!id) return
+    const service: CustomizationModuleService = container.resolve(CUSTOMIZATION_MODULE)
+    await service.deleteCssVersions(id)
+  }
+)

package/templates/backend/src/workflows/steps/save-site-texts.ts

@@ -0,0 +1,56 @@
+import { createStep, StepResponse } from "@medusajs/framework/workflows-sdk"
+import { CUSTOMIZATION_MODULE } from "../../modules/customization"
+import type CustomizationModuleService from "../../modules/customization/service"
+
+export type SaveSiteTextsData = { scope: string; values: Record<string, string | null> }
+type Previous = { scope: string; key: string; value: string | null }[]
+
+/**
+ * Enregistre des textes remplacés pour une portée (projet entier ou une boutique) : valeur = remplacer,
+ * null ou vide = revenir au texte d'origine. Rollback : remet les valeurs d'avant.
+ */
+export const saveSiteTextsStep = createStep(
+  "save-site-texts",
+  async (input: SaveSiteTextsData, { container }) => {
+    const service: CustomizationModuleService = container.resolve(CUSTOMIZATION_MODULE)
+    const keys = Object.keys(input.values)
+    if (!keys.length) return new StepResponse({ changed: 0 }, [] as Previous)
+    const existing = await service.listSiteTexts({ scope: input.scope, key: keys })
+    const byKey = new Map(existing.map((e) => [e.key, e]))
+    const previous: Previous = keys.map((key) => ({ scope: input.scope, key, value: byKey.get(key)?.value ?? null }))
+
+    let changed = 0
+    for (const key of keys) {
+      const value = input.values[key]?.trim() ? input.values[key] : null
+      const row = byKey.get(key)
+      if (value === null) {
+        if (row) {
+          await service.deleteSiteTexts(row.id)
+          changed++
+        }
+      } else if (row) {
+        if (row.value !== value) {
+          await service.updateSiteTexts({ id: row.id, value })
+          changed++
+        }
+      } else {
+        await service.createSiteTexts({ scope: input.scope, key, value })
+        changed++
+      }
+    }
+    return new StepResponse({ changed }, previous)
+  },
+  async (previous, { container }) => {
+    if (!previous?.length) return
+    const service: CustomizationModuleService = container.resolve(CUSTOMIZATION_MODULE)
+    const scope = previous[0].scope
+    const current = await service.listSiteTexts({ scope, key: previous.map((p) => p.key) })
+    const byKey = new Map(current.map((c) => [c.key, c]))
+    for (const p of previous) {
+      const row = byKey.get(p.key)
+      if (p.value === null && row) await service.deleteSiteTexts(row.id)
+      else if (p.value !== null && row) await service.updateSiteTexts({ id: row.id, value: p.value })
+      else if (p.value !== null) await service.createSiteTexts({ scope, key: p.key, value: p.value })
+    }
+  }
+)

package/templates/storefront/Dockerfile

@@ -29,6 +29,8 @@ COPY --from=build --chown=app:app /app/.next/static ./.next/static
 COPY --from=build --chown=app:app /app/public ./public
 COPY --from=build --chown=app:app /app/themes ./themes
 COPY --from=build --chown=app:app /app/locales ./locales
+# Retouches du projet : lues à l'exécution (désactivables depuis l'admin → Personnaliser)
+COPY --from=build --chown=app:app /app/src/styles/custom.css ./custom/custom.css
 
 USER app
 EXPOSE 8000

package/templates/storefront/PERSONNALISER.md

@@ -1,8 +1,19 @@
 # Personnaliser l'apparence d'un projet
 
-Tout se fait dans **`storefront/src/styles/custom.css`** (+ images et polices dans `storefront/public/custom/`).
-Ces deux emplacements sont **conservés par `create-boutique update`** ; le reste du code est remplacé à chaque mise à jour.
-Après une modification : `docker compose up -d --build`.
+Deux endroits, qui se cumulent (le second passe après le premier) :
+
+1. **Admin → Personnaliser → Style (CSS)** : éditeur dans le navigateur, **sans reconstruire** (visible en ~1 minute),
+   avec historique des versions, « Annuler les modifications », « Restaurer » une version, « Revenir au CSS du thème ».
+   Idéal pour les retouches du client ou les essais.
+2. **`storefront/src/styles/custom.css`** (+ images et polices dans `storefront/public/custom/`) : retouches dans le code,
+   conservées par `create-boutique update` ; après une modification : `docker compose up -d --build`.
+   Affiché en lecture seule dans l'admin ; un interrupteur l'applique ou non (« Revenir au CSS du thème » le désactive aussi).
+
+Les deux sont injectés à l'exécution après les feuilles du thème : pas besoin de `!important`. Refusé dans l'éditeur de
+l'admin : `@import`, `url()` vers un autre site, balises HTML (sécurité) ; images : `/custom/…` ou `data:image/…`.
+
+**Textes de l'interface** (boutons, panier, paiement, compte…) : **admin → Personnaliser → Textes du site**, pour toutes les
+boutiques ou une seule, sans reconstruire. Les textes de campagne (titre du hero, bandeau, dates, visuels) : **admin → Mes boutiques**.
 
 Ce fichier-ci (`PERSONNALISER.md`) est remis à jour par `update` : il décrit toujours la version installée.
 
@@ -16,7 +27,7 @@ Ce fichier-ci (`PERSONNALISER.md`) est remis à jour par `update` : il décrit t
 | Image de fond, motif, décoration (`::before`, `::after`, `url("/custom/…")`) | Modifier un e-mail, une règle de prix, de livraison |
 | Cibler une seule boutique, un thème, une page, l'ordinateur ou le mobile | |
 
-Les **textes** (titres, sous-titres, bandeau, bouton, dates, visuels) se changent dans l'**admin → Mes boutiques**, pas ici.
+Les **textes** se changent dans l'admin, pas ici : textes de campagne dans **Mes boutiques**, textes de l'interface dans **Personnaliser**.
 Un besoin de la colonne de droite : on le fait dans le modèle (dépôt create-boutique), puis `create-boutique update` sur les projets.
 Modifier directement un autre fichier du projet reste possible, mais `update` le remplacera (il le liste et le sauvegarde
 dans `backups/` avant).

package/templates/storefront/src/app/layout.tsx

@@ -36,7 +36,9 @@ import "styles/ub/responsive.css"
 import "styles/ub/fonts.css"
 import "styles/ub/medusa-ui.css"
 import "styles/ub/overrides.css"
-import "styles/custom.css" // retouches du projet, conservées par update (toujours en dernier)
+// Retouches du projet : styles/custom.css (code) et le style de l'admin (Personnaliser), injectés à l'exécution
+// en dernier dans <head> (voir lib/boutique/customization.ts) : modifiables ou désactivables sans reconstruire.
+import { customCssFile, getCustomization, safeCss, shortHash } from "@lib/boutique/customization"
 
 // Tout dépend de la boutique de l'instance (lue à l'exécution) : rien n'est pré-rendu au build.
 export const dynamic = "force-dynamic"
@@ -70,12 +72,25 @@ export async function generateMetadata(): Promise<Metadata> {
   }
 }
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default async function RootLayout(props: { children: React.ReactNode }) {
   const b = getBoutique()
+  // Avant le rendu : textes remplacés disponibles pour t() et messages()
+  const custom = await getCustomization()
 
   return (
     <html lang={b.locale} data-theme={b.theme.layout ?? b.theme.id} data-variant={b.theme.layout ? b.theme.id : undefined} data-event={b.theme.id.replace(/-2$/, "")} data-boutique={b.slug} data-mode="light" className={themeFontClasses(b.theme)}>
       <body className="ub">
+        {/* React place ces styles dans <head>, après les feuilles du thème (precedence découverte en dernier) */}
+        {custom.useFile && customCssFile() && (
+          <style href="ub-custom-file" precedence="ub-custom">
+            {safeCss(customCssFile())}
+          </style>
+        )}
+        {custom.css && (
+          <style href={`ub-custom-admin-${shortHash(custom.css)}`} precedence="ub-custom">
+            {safeCss(custom.css)}
+          </style>
+        )}
         <I18nProvider messages={messages("")} locale={b.locale}>
           <main className="relative">{props.children}</main>
           <Motion event={b.theme.id.replace(/-2$/, "")} />

package/templates/storefront/src/lib/boutique/customization.ts

@@ -0,0 +1,76 @@
+import "server-only"
+
+import fs from "node:fs"
+import path from "node:path"
+import { sdk } from "@lib/config"
+import { getBoutique } from "./config"
+
+/**
+ * Personnalisation faite dans l'admin (Personnaliser) : textes d'interface remplacés et style CSS, lus sur
+ * GET /store/customization (la boutique est déterminée par sa publishable key). Gardés 60 s en mémoire par boutique :
+ * une modification apparaît en une minute, sans reconstruire ni redémarrer.
+ * Le backend injoignable ne casse jamais le site : textes d'origine et fichier custom.css seulement.
+ */
+export type Customization = { texts: Record<string, string>; css: string; useFile: boolean }
+
+const TTL = 60_000
+const EMPTY: Customization = { texts: {}, css: "", useFile: true }
+const g = globalThis as unknown as { __ubCustom?: Map<string, { at: number; value: Customization; loading?: Promise<Customization> }> }
+const store = (g.__ubCustom ??= new Map())
+
+async function load(): Promise<Customization> {
+  try {
+    const r = await sdk.client.fetch<{ texts?: Record<string, string>; css?: string; use_file?: boolean }>("/store/customization", { method: "GET", cache: "no-store" })
+    return { texts: r.texts ?? {}, css: r.css ?? "", useFile: r.use_file !== false }
+  } catch {
+    return EMPTY
+  }
+}
+
+/** Personnalisation de la boutique affichée (rechargée au plus toutes les 60 s) */
+export async function getCustomization(): Promise<Customization> {
+  const slug = getBoutique().slug
+  const entry = store.get(slug)
+  if (entry && Date.now() - entry.at < TTL) return entry.value
+  if (entry?.loading) return entry.loading
+  const loading = load().then((value) => {
+    store.set(slug, { at: Date.now(), value })
+    return value
+  })
+  store.set(slug, { at: entry?.at ?? 0, value: entry?.value ?? EMPTY, loading })
+  return loading
+}
+
+/** Textes remplacés connus pour la boutique affichée (synchrone : utilisé par t()) */
+export function textOverrides(): Record<string, string> {
+  return store.get(getBoutique().slug)?.value.texts ?? {}
+}
+
+/**
+ * Fichier custom.css du projet (storefront/src/styles/custom.css) : copié dans l'image (custom/custom.css),
+ * lu à l'exécution pour pouvoir être désactivé depuis l'admin (« Revenir au CSS du thème »).
+ */
+let fileCss: string | null = null
+export function customCssFile(): string {
+  if (fileCss !== null) return fileCss
+  for (const file of [path.join(/*turbopackIgnore: true*/ process.cwd(), "custom", "custom.css"), path.join(/*turbopackIgnore: true*/ process.cwd(), "src", "styles", "custom.css")]) {
+    try {
+      fileCss = fs.readFileSync(file, "utf8")
+      return fileCss
+    } catch {
+      // fichier suivant
+    }
+  }
+  fileCss = ""
+  return fileCss
+}
+
+/** Texte CSS sûr dans une balise <style> : impossible d'en sortir (le backend refuse déjà ces séquences) */
+export const safeCss = (css: string) => css.replace(/<\/?(style|script)/gi, "").replace(/<!--|-->/g, "")
+
+/** Empreinte courte d'un texte (identifiant du <style> : un style modifié remplace l'ancien même en navigation) */
+export function shortHash(text: string): string {
+  let h = 5381
+  for (let i = 0; i < text.length; i++) h = ((h << 5) + h + text.charCodeAt(i)) | 0
+  return (h >>> 0).toString(36)
+}

package/templates/storefront/src/lib/boutique/i18n.ts

@@ -3,6 +3,7 @@ import "server-only"
 import fs from "node:fs"
 import path from "node:path"
 import { getBoutique } from "./config"
+import { textOverrides } from "./customization"
 
 type Dict = Record<string, string>
 
@@ -24,7 +25,8 @@ function dict(lang: string): Dict {
  */
 export function t(key: string, vars?: Record<string, string | number>): string {
   const { language } = getBoutique()
-  const text = dict(language)[key] ?? dict("en")[key] ?? key
+  // Texte remplacé dans l'admin (Personnaliser → Textes du site), sinon celui de la langue, sinon l'anglais
+  const text = textOverrides()[key] ?? dict(language)[key] ?? dict("en")[key] ?? key
   return vars ? text.replace(/\{(\w+)\}/g, (m, k: string) => (k in vars ? String(vars[k]) : m)) : text
 }
 
@@ -32,7 +34,7 @@ export function t(key: string, vars?: Record<string, string | number>): string {
 export function messages(prefix: string): Dict {
   const { language } = getBoutique()
   const out: Dict = {}
-  for (const d of [dict("en"), dict(language)]) {
+  for (const d of [dict("en"), dict(language), textOverrides()]) {
     for (const [k, v] of Object.entries(d)) if (k.startsWith(prefix)) out[k] = v
   }
   return out

package/templates/storefront/src/styles/custom.css

@@ -8,6 +8,8 @@
  * - Jamais remplacé par `create-boutique update` (le reste du code, si).
  * - Images ou polices utilisées ici : dans public/custom/ (conservé aussi), puis url("/custom/mon-image.png").
  * - Après modification : docker compose up -d --build
+ * - Sans reconstruire : admin → Personnaliser → Style (CSS), appliqué après ce fichier (historique, retour au thème).
+ *   Ce fichier y est affiché en lecture seule ; « Revenir au CSS du thème » le désactive.
  *
  * CIBLER :
  *   tout le projet ...................... directement (ex. .ub-tc-ticker { display: none; })