@salifbiaye/create-boutique 0.1.1

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

@@ -0,0 +1,152 @@
+import "server-only"
+
+import fs from "node:fs"
+import path from "node:path"
+import { z } from "zod"
+import { projectSchema, themeSchema, type Theme } from "./schema"
+
+/**
+ * Configuration de l'instance. La boutique est fixée par la variable
+ * d'environnement BOUTIQUE et par rien d'autre : aucun paramètre d'URL,
+ * cookie ou en-tête ne peut en changer.
+ */
+export type Boutique = {
+  project: string
+  slug: string
+  theme: Theme
+  storeName: string
+  currency: string
+  country: string
+  /** Pays livrés : "all" ou liste de codes pays (inclut toujours `country`) */
+  shipsTo: "all" | string[]
+  language: string
+  /** ex. "en-US" : pour Intl et <html lang> */
+  locale: string
+  port: number
+  publishableKey: string
+  merchantEmail?: string
+  /** URL publique des autres boutiques du projet (lien « campagne suivante ») */
+  siblings: Record<string, string>
+}
+
+export const CONFIG_DIR = process.env.CONFIG_DIR || "/app/config"
+export const KEYS_DIR = process.env.KEYS_DIR || "/app/keys"
+export const THEMES_DIR = path.join(process.cwd(), "themes")
+
+export class BoutiqueConfigError extends Error {
+  constructor(message: string) {
+    super(`[boutique] ${message}`)
+    this.name = "BoutiqueConfigError"
+  }
+}
+
+function readJson(file: string): unknown {
+  let raw: string
+  try {
+    raw = fs.readFileSync(file, "utf8")
+  } catch {
+    throw new BoutiqueConfigError(`fichier introuvable : ${file}`)
+  }
+  try {
+    return JSON.parse(raw)
+  } catch (e) {
+    throw new BoutiqueConfigError(`JSON invalide dans ${file} : ${(e as Error).message}`)
+  }
+}
+
+export function parseOrThrow<T>(schema: z.ZodType<T>, data: unknown, file: string): T {
+  const res = schema.safeParse(data)
+  if (!res.success) {
+    throw new BoutiqueConfigError(`${file} invalide :\n${z.prettifyError(res.error)}`)
+  }
+  return res.data
+}
+
+export function listThemes(): string[] {
+  if (!fs.existsSync(THEMES_DIR)) return []
+  return fs
+    .readdirSync(THEMES_DIR, { withFileTypes: true })
+    .filter((d) => d.isDirectory() && fs.existsSync(path.join(THEMES_DIR, d.name, "theme.json")))
+    .map((d) => d.name)
+}
+
+function loadTheme(id: string): Theme {
+  const file = path.join(THEMES_DIR, id, "theme.json")
+  if (!fs.existsSync(file)) {
+    throw new BoutiqueConfigError(`thème inconnu « ${id} ». Thèmes disponibles : ${listThemes().join(", ")}`)
+  }
+  return parseOrThrow(themeSchema, readJson(file), file)
+}
+
+function load(): Boutique {
+  const slug = process.env.BOUTIQUE
+  if (!slug) {
+    throw new BoutiqueConfigError("variable d'environnement BOUTIQUE absente (ex. BOUTIQUE=yout-black-friday)")
+  }
+
+  const projectFile = path.join(/*turbopackIgnore: true*/ CONFIG_DIR, "project.json")
+  const project = parseOrThrow(projectSchema, readJson(projectFile), projectFile)
+
+  const entry = project.boutiques.find((b) => b.slug === slug)
+  if (!entry) {
+    throw new BoutiqueConfigError(
+      `boutique « ${slug} » absente de ${projectFile}. Boutiques déclarées : ${project.boutiques.map((b) => b.slug).join(", ")}`
+    )
+  }
+
+  const theme = loadTheme(entry.theme)
+
+  const keyFile = path.join(/*turbopackIgnore: true*/ KEYS_DIR, slug)
+  let publishableKey = ""
+  try {
+    publishableKey = fs.readFileSync(keyFile, "utf8").trim()
+  } catch {
+    // traité juste en dessous
+  }
+  if (!publishableKey.startsWith("pk_")) {
+    throw new BoutiqueConfigError(
+      `publishable key manquante ou invalide dans ${keyFile} (écrite par le backend au premier démarrage)`
+    )
+  }
+
+  const { defaults } = project
+  const country = entry.country ?? defaults.country
+  const shipsTo = entry.shipsTo ?? defaults.shipsTo
+  if (shipsTo !== "all" && !shipsTo.includes(country)) {
+    throw new BoutiqueConfigError(`${slug} : le pays principal « ${country} » doit faire partie de shipsTo`)
+  }
+  const language = defaults.language
+
+  return {
+    project: project.project,
+    slug,
+    theme,
+    storeName: entry.storeName ?? defaults.storeName,
+    currency: entry.currency ?? defaults.currency,
+    country,
+    shipsTo,
+    language,
+    locale: `${language}-${country.toUpperCase()}`,
+    port: entry.port,
+    publishableKey,
+    merchantEmail: defaults.merchantEmail,
+    siblings: Object.fromEntries(
+      project.boutiques.map((b) => [b.slug, b.url ?? `http://localhost:${b.port}`])
+    ),
+  }
+}
+
+let cached: Boutique | undefined
+
+/**
+ * Boutique de cette instance. Lue une fois (au démarrage via instrumentation.ts),
+ * puis gardée en mémoire : modifier project.json demande un redémarrage (`apply`).
+ */
+export function getBoutique(): Boutique {
+  if (!cached) {
+    cached = load()
+    // Lu par lib/util/money.ts, partagé avec les composants client (qui lisent <html lang>).
+    process.env.BOUTIQUE_LOCALE = cached.locale
+  }
+  return cached
+}

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

@@ -0,0 +1,29 @@
+import { Inter, Oswald, Outfit, Plus_Jakarta_Sans, Poppins, Sora, Space_Grotesk } from "next/font/google"
+import type { FontId, Theme } from "./schema"
+
+// Polices des presets (design/bundle.css). Servies par next/font (auto-hébergées) :
+// seules les 2 polices du thème de l'instance sont appliquées.
+// Chaque police expose --nf-<id>, repris par --font-<id> dans styles/ub/fonts.css.
+const inter = Inter({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--nf-inter", preload: false })
+const jakarta = Plus_Jakarta_Sans({ subsets: ["latin"], weight: ["500", "700", "800"], variable: "--nf-jakarta", preload: false })
+const oswald = Oswald({ subsets: ["latin"], weight: ["500", "700"], variable: "--nf-oswald", preload: false })
+const outfit = Outfit({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--nf-outfit", preload: false })
+const poppins = Poppins({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--nf-poppins", preload: false })
+const sora = Sora({ subsets: ["latin"], weight: ["400", "600", "700"], variable: "--nf-sora", preload: false })
+const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], weight: ["500", "700"], variable: "--nf-space-grotesk", preload: false })
+
+const fonts: Partial<Record<FontId, { variable: string }>> = {
+  inter,
+  jakarta,
+  oswald,
+  outfit,
+  poppins,
+  sora,
+  "space-grotesk": spaceGrotesk,
+}
+
+/** Classes à poser sur <html> : variables CSS des polices du thème (+ Inter, police des formulaires du starter). */
+export function themeFontClasses(theme: Theme): string {
+  const ids = new Set<FontId>([theme.fonts.head, theme.fonts.body, "inter"])
+  return [...ids].map((id) => fonts[id]?.variable).filter(Boolean).join(" ")
+}

package/templates/storefront/src/lib/boutique/i18n-client.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+type Dict = Record<string, string>
+
+const I18nContext = createContext<Dict>({})
+
+/**
+ * Dictionnaire de l'instance pour les composants client (checkout, panier, compte).
+ * Rempli par le layout racine (serveur) avec locales/<lang>.json + repli anglais.
+ */
+export function I18nProvider({ messages, children }: { messages: Dict; children: React.ReactNode }) {
+  return <I18nContext.Provider value={messages}>{children}</I18nContext.Provider>
+}
+
+export function format(text: string, vars?: Record<string, string | number>) {
+  return vars ? text.replace(/\{(\w+)\}/g, (m, k: string) => (k in vars ? String(vars[k]) : m)) : text
+}
+
+/**
+ * Traduction côté client : mêmes clés et mêmes variables que t() côté serveur.
+ * Une clé inconnue est renvoyée telle quelle : les composants partagés (Input, Checkbox…)
+ * peuvent donc recevoir une clé ou un texte déjà traduit.
+ */
+export function useT() {
+  const messages = useContext(I18nContext)
+  return (key: string, vars?: Record<string, string | number>) => format(messages[key] ?? key, vars)
+}
+
+/** Texte traduit dans du JSX, utilisable depuis un composant serveur ou client : <T k="cart.title" />. */
+export function T({ k, vars }: { k: string; vars?: Record<string, string | number> }) {
+  return <>{useT()(k, vars)}</>
+}

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

@@ -0,0 +1,43 @@
+import "server-only"
+
+import fs from "node:fs"
+import path from "node:path"
+import { getBoutique } from "./config"
+
+type Dict = Record<string, string>
+
+const LOCALES_DIR = path.join(process.cwd(), "locales")
+const dicts = new Map<string, Dict>()
+
+function dict(lang: string): Dict {
+  if (!dicts.has(lang)) {
+    const file = path.join(LOCALES_DIR, `${lang}.json`)
+    dicts.set(lang, fs.existsSync(file) ? JSON.parse(fs.readFileSync(file, "utf8")) : {})
+  }
+  return dicts.get(lang)!
+}
+
+/**
+ * Traduction des textes d'interface (locales/<lang>.json), repli en anglais.
+ * Variables : t("cart.count", { count: 2 }) avec "{count} items" dans le fichier.
+ * Une clé absente partout renvoie la clé (signalé par `check`), jamais une chaîne vide.
+ */
+export function t(key: string, vars?: Record<string, string | number>): string {
+  const { language } = getBoutique()
+  const text = dict(language)[key] ?? dict("en")[key] ?? key
+  return vars ? text.replace(/\{(\w+)\}/g, (m, k: string) => (k in vars ? String(vars[k]) : m)) : text
+}
+
+/** Sous-ensemble du dictionnaire à passer à un composant client (préfixe "cart." etc.). */
+export function messages(prefix: string): Dict {
+  const { language } = getBoutique()
+  const out: Dict = {}
+  for (const d of [dict("en"), dict(language)]) {
+    for (const [k, v] of Object.entries(d)) if (k.startsWith(prefix)) out[k] = v
+  }
+  return out
+}
+
+export function formatDate(iso: string, opts: Intl.DateTimeFormatOptions = { dateStyle: "long" }): string {
+  return new Intl.DateTimeFormat(getBoutique().locale, opts).format(new Date(iso))
+}

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

@@ -0,0 +1,131 @@
+import { z } from "zod"
+
+/**
+ * Schémas partagés : config/project.json, themes/<id>/theme.json,
+ * config/campaigns/<slug>.json. Les textes affichés sont du texte simple :
+ * aucun caractère < ou > (pas de HTML), longueurs bornées.
+ */
+
+const plain = (max: number) =>
+  z
+    .string()
+    .trim()
+    .max(max)
+    .refine((v) => !/[<>]/.test(v), "texte simple uniquement (pas de HTML)")
+
+export const SLUG = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+const currency = z.string().regex(/^[a-z]{3}$/, "code devise ISO 4217 en minuscules (ex. usd)")
+const country = z.string().regex(/^[a-z]{2}$/, "code pays ISO 3166-1 alpha-2 en minuscules (ex. us)")
+const language = z.string().regex(/^[a-z]{2}$/, "code langue ISO 639-1 (ex. en)")
+
+/** Pays livrés : "all" (monde entier) ou une liste de codes pays. */
+const shipsTo = z.union([z.literal("all"), z.array(country).min(1)])
+
+const overridable = {
+  storeName: plain(60).min(1),
+  currency,
+  /** Pays principal : format des prix et des dates (ex. en-US), pays proposé par défaut au checkout. */
+  country,
+  shipsTo,
+}
+
+export const projectSchema = z.object({
+  project: z.string().regex(SLUG),
+  templateVersion: z.string().optional(),
+  defaults: z
+    .object({
+      ...overridable,
+      shipsTo: shipsTo.default("all"),
+      language: language.default("en"),
+      merchantEmail: z.email().optional(),
+      email: z.object({ mode: z.enum(["platform", "merchant"]) }).loose().optional(),
+    })
+    .loose(),
+  boutiques: z
+    .array(
+      z
+        .object({
+          slug: z.string().regex(SLUG, "slug : minuscules, chiffres et tirets"),
+          theme: z.string().regex(SLUG),
+          port: z.number().int().min(1).max(65535),
+          url: z.url().optional(),
+          storeName: overridable.storeName.optional(),
+          currency: overridable.currency.optional(),
+          country: overridable.country.optional(),
+          shipsTo: overridable.shipsTo.optional(),
+          language: z.never({ error: "la langue se règle dans defaults, pas par boutique" }).optional(),
+        })
+        .strict()
+    )
+    .min(1, "au moins une boutique")
+    .refine((b) => new Set(b.map((x) => x.slug)).size === b.length, "slug en double"),
+})
+
+export type Project = z.infer<typeof projectSchema>
+
+export const themeSchema = z.object({
+  id: z.string().regex(SLUG),
+  name: z.string().min(1),
+  reference: z.string().optional(),
+  fonts: z.object({
+    head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
+    body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
+  }),
+})
+
+export type Theme = z.infer<typeof themeSchema>
+export type FontId = Theme["fonts"]["head"]
+
+const date = z.iso.datetime({ offset: true })
+
+/** Textes par défaut d'un thème (themes/<id>/campaign.<lang>.json), avec variables {discount}, {endDate}, {freeShipping}. */
+export const campaignTextsSchema = z.object({
+  topbar: z.array(plain(80)).max(5),
+  hero: z.object({
+    eyebrow: plain(40),
+    title: plain(60).min(1),
+    highlight: plain(40).optional(),
+    sub: plain(160),
+    cta: plain(30),
+    cta2: plain(30).optional(),
+    image: z.string().max(500).optional(),
+    bubble: z.array(plain(12)).max(3),
+  }),
+  promo: z.object({
+    eyebrow: plain(40),
+    title: plain(60),
+    text: plain(160),
+    cta: plain(30),
+    seal: plain(20).optional(),
+    image: z.string().max(500).optional(),
+  }),
+  sections: z
+    .object({ categories: plain(40), products: plain(40) })
+    .optional(),
+})
+
+export type CampaignTexts = z.infer<typeof campaignTextsSchema>
+
+/** Fichier d'une boutique (config/campaigns/<slug>.json) : tout est optionnel sauf les dates, et remplace les textes du thème. */
+export const campaignFileSchema = z
+  .object({
+    startsAt: date,
+    endsAt: date,
+    nextCampaign: z.string().regex(SLUG).optional(),
+    vars: z
+      .object({ discount: plain(12), freeShipping: plain(20) })
+      .partial()
+      .optional(),
+    topbar: campaignTextsSchema.shape.topbar.optional(),
+    hero: campaignTextsSchema.shape.hero.partial().optional(),
+    promo: campaignTextsSchema.shape.promo.partial().optional(),
+    sections: campaignTextsSchema.shape.sections.unwrap().partial().optional(),
+    /** Logo de la boutique (URL du stockage), aussi utilisé comme favicon */
+    logo: z.url().max(500).optional(),
+    /** undefined = selon le thème */
+    showCountdown: z.boolean().optional(),
+  })
+  .refine((c) => new Date(c.startsAt) < new Date(c.endsAt), "startsAt doit précéder endsAt")
+
+export type CampaignFile = z.infer<typeof campaignFileSchema>

package/templates/storefront/src/lib/config.ts

@@ -0,0 +1,39 @@
+import "server-only"
+
+import { getBoutique } from "@lib/boutique/config"
+import Medusa, { FetchArgs, FetchInput } from "@medusajs/js-sdk"
+
+// URL interne du backend (réseau Docker) : jamais exposée au navigateur.
+const MEDUSA_BACKEND_URL = process.env.MEDUSA_BACKEND_URL || "http://localhost:9000"
+
+let client: Medusa | undefined
+
+/**
+ * Client Medusa de la boutique : la publishable key vient de KEYS_DIR/<slug>,
+ * lue à l'exécution (pas de variable NEXT_PUBLIC_* figée au build).
+ * Créé au premier usage pour que `next build` n'ait besoin d'aucune boutique.
+ */
+function getClient(): Medusa {
+  if (client) return client
+
+  const boutique = getBoutique()
+  const medusa = new Medusa({
+    baseUrl: MEDUSA_BACKEND_URL,
+    debug: process.env.NODE_ENV === "development",
+    publishableKey: boutique.publishableKey,
+  })
+
+  // Langue fixée par l'instance : les traductions Medusa suivent la langue du projet.
+  const originalFetch = medusa.client.fetch.bind(medusa.client)
+  medusa.client.fetch = async <T>(input: FetchInput, init?: FetchArgs): Promise<T> => {
+    const headers = { "x-medusa-locale": boutique.locale, ...(init?.headers ?? {}) }
+    return originalFetch(input, { ...init, headers })
+  }
+
+  client = medusa
+  return client
+}
+
+export const sdk = new Proxy({} as Medusa, {
+  get: (_target, prop) => Reflect.get(getClient(), prop),
+})

package/templates/storefront/src/lib/constants.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import { CreditCard } from "@medusajs/icons"
+
+import Ideal from "@modules/common/icons/ideal"
+import Bancontact from "@modules/common/icons/bancontact"
+import PayPal from "@modules/common/icons/paypal"
+
+/* Map of payment provider_id to their title and icon. Add in any payment providers you want to use. */
+export const paymentInfoMap: Record<
+  string,
+  { title: string; icon: React.JSX.Element }
+> = {
+  pp_stripe_stripe: {
+    title: "Credit card",
+    icon: <CreditCard />,
+  },
+  "pp_medusa-payments_default": {
+    title: "Credit card",
+    icon: <CreditCard />,
+  },
+  "pp_stripe-ideal_stripe": {
+    title: "iDeal",
+    icon: <Ideal />,
+  },
+  "pp_stripe-bancontact_stripe": {
+    title: "Bancontact",
+    icon: <Bancontact />,
+  },
+  pp_paypal_paypal: {
+    title: "PayPal",
+    icon: <PayPal />,
+  },
+  pp_system_default: {
+    title: "Manual Payment",
+    icon: <CreditCard />,
+  },
+  // Add more payment providers here
+}
+
+// This only checks if it is native stripe or medusa payments for card payments, it ignores the other stripe-based providers
+export const isStripeLike = (providerId?: string) => {
+  return (
+    providerId?.startsWith("pp_stripe_") || providerId?.startsWith("pp_medusa-")
+  )
+}
+
+export const isPaypal = (providerId?: string) => {
+  return providerId?.startsWith("pp_paypal")
+}
+export const isManual = (providerId?: string) => {
+  return providerId?.startsWith("pp_system_default")
+}
+
+// Add currencies that don't need to be divided by 100
+export const noDivisionCurrencies = [
+  "krw",
+  "jpy",
+  "vnd",
+  "clp",
+  "pyg",
+  "xaf",
+  "xof",
+  "bif",
+  "djf",
+  "gnf",
+  "kmf",
+  "mga",
+  "rwf",
+  "xpf",
+  "htg",
+  "vuv",
+  "xag",
+  "xdr",
+  "xau",
+]

package/templates/storefront/src/lib/context/modal-context.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import React, { createContext, useContext } from "react"
+
+interface ModalContext {
+  close: () => void
+}
+
+const ModalContext = createContext<ModalContext | null>(null)
+
+interface ModalProviderProps {
+  children?: React.ReactNode
+  close: () => void
+}
+
+export const ModalProvider = ({ children, close }: ModalProviderProps) => {
+  return (
+    <ModalContext.Provider
+      value={{
+        close,
+      }}
+    >
+      {children}
+    </ModalContext.Provider>
+  )
+}
+
+export const useModal = () => {
+  const context = useContext(ModalContext)
+  if (context === null) {
+    throw new Error("useModal must be used within a ModalProvider")
+  }
+  return context
+}