@salifbiaye/create-boutique 0.1.1

package/templates/storefront/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "usine-storefront",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Storefront Usine à Boutiques (fork de nextjs-starter-medusa) — une image, une instance par boutique (BOUTIQUE=<slug>)",
+  "scripts": {
+    "sync-design": "node scripts/sync-design.mjs",
+    "dev": "next dev -p 8000",
+    "build": "next build",
+    "start": "next start -p 8000",
+    "typecheck": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "dependencies": {
+    "@headlessui/react": "2.2.10",
+    "@medusajs/icons": "2.21.2",
+    "@medusajs/js-sdk": "2.21.2",
+    "@medusajs/ui": "4.2.6",
+    "@radix-ui/react-accordion": "1.2.20",
+    "@stripe/react-stripe-js": "5.6.1",
+    "@stripe/stripe-js": "8.11.0",
+    "lodash": "4.18.1",
+    "next": "16.3.6",
+    "qs": "6.16.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "server-only": "0.0.1",
+    "tailwindcss-radix": "2.9.0",
+    "zod": "4.6.5"
+  },
+  "devDependencies": {
+    "@medusajs/types": "2.21.2",
+    "@medusajs/ui-preset": "2.21.2",
+    "@types/lodash": "4.17.25",
+    "@types/node": "24.19.0",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "autoprefixer": "10.6.1",
+    "postcss": "8.5.28",
+    "tailwindcss": "3.4.19",
+    "typescript": "5.9.3"
+  },
+  "overrides": {
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  }
+}

package/templates/storefront/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/storefront/scripts/sync-design.mjs

@@ -0,0 +1,30 @@
+// Copie design/tokens.css et design/bundle.css dans le template (src/styles/ub/).
+// À lancer dans le repo du générateur après une modification du design : `npm run sync-design`.
+// Les fichiers copiés sont versionnés : un projet généré n'a pas de dossier design/.
+// Seule transformation : l'@import Google Fonts est retiré (polices servies par next/font,
+// pas d'appel à fonts.googleapis.com depuis le navigateur ni d'exception CSP).
+import fs from "node:fs"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+const designDir = path.resolve(here, "../../../design")
+const outDir = path.resolve(here, "../src/styles/ub")
+
+if (!fs.existsSync(designDir)) {
+  console.error(`design/ introuvable (${designDir}) : à lancer depuis le repo usine-a-boutiques.`)
+  process.exit(1)
+}
+
+fs.mkdirSync(outDir, { recursive: true })
+
+const header = "/* COPIE de design/ par scripts/sync-design.mjs — ne pas modifier ici. */\n"
+
+fs.writeFileSync(path.join(outDir, "tokens.css"), header + fs.readFileSync(path.join(designDir, "tokens.css"), "utf8"))
+
+const bundle = fs
+  .readFileSync(path.join(designDir, "bundle.css"), "utf8")
+  .replace(/^@import url\("https:\/\/fonts\.googleapis\.com[^\n]*\n/m, "")
+fs.writeFileSync(path.join(outDir, "bundle.css"), header + bundle)
+
+console.log(`design synchronisé → ${path.relative(process.cwd(), outDir)}`)

package/templates/storefront/src/app/(checkout)/checkout/page.tsx

@@ -0,0 +1,31 @@
+import { t } from "@lib/boutique/i18n"
+import { retrieveCart } from "@lib/data/cart"
+import { retrieveCustomer } from "@lib/data/customer"
+import PaymentWrapper from "@modules/checkout/components/payment-wrapper"
+import CheckoutForm from "@modules/checkout/templates/checkout-form"
+import CheckoutSummary from "@modules/checkout/templates/checkout-summary"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("checkout.title") }
+}
+
+export default async function Checkout() {
+  const cart = await retrieveCart()
+
+  if (!cart) {
+    return notFound()
+  }
+
+  const customer = await retrieveCustomer()
+
+  return (
+    <div className="grid grid-cols-1 small:grid-cols-[1fr_416px] content-container gap-x-40 py-12">
+      <PaymentWrapper cart={cart} stripeKey={process.env.STRIPE_PUBLISHABLE_KEY || undefined}>
+        <CheckoutForm cart={cart} customer={customer} />
+      </PaymentWrapper>
+      <CheckoutSummary cart={cart} />
+    </div>
+  )
+}

package/templates/storefront/src/app/(checkout)/layout.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link"
+import { t } from "@lib/boutique/i18n"
+import { Icon } from "@modules/ub/icons"
+import { Logo } from "@modules/ub/nav"
+
+export default function CheckoutLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="w-full relative small:min-h-screen">
+      <header className="ub-nav">
+        <div className="ub-wrap">
+          <Link href="/cart" className="ub-more" data-testid="back-to-cart-link">
+            <Icon name="arrowRight" style={{ transform: "rotate(180deg)" }} />
+            {t("checkout.back")}
+          </Link>
+          <Logo />
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 13 }}>
+            <Icon name="lock" style={{ width: 16, height: 16 }} />
+          </span>
+        </div>
+      </header>
+      <div className="relative" data-testid="checkout-container">
+        {children}
+      </div>
+      <p className="ub-wrap" style={{ padding: "24px", fontSize: 13, textAlign: "center" }}>
+        {t("checkout.secure")}
+      </p>
+    </div>
+  )
+}

package/templates/storefront/src/app/(checkout)/not-found.tsx

@@ -0,0 +1,20 @@
+import { T } from "@lib/boutique/i18n-client"
+import InteractiveLink from "@modules/common/components/interactive-link"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default async function NotFound() {
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-ui-fg-base"><T k="notFound.title" /></h1>
+      <p className="text-small-regular text-ui-fg-base">
+        <T k="notFound.text" />
+      </p>
+      <InteractiveLink href="/"><T k="notFound.cta" /></InteractiveLink>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/account/@dashboard/addresses/page.tsx

@@ -0,0 +1,34 @@
+import { T } from "@lib/boutique/i18n-client"
+import { t } from "@lib/boutique/i18n"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import AddressBook from "@modules/account/components/address-book"
+
+import { getRegion } from "@lib/data/regions"
+import { retrieveCustomer } from "@lib/data/customer"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("account.addresses") }
+}
+
+export default async function Addresses() {
+  const customer = await retrieveCustomer()
+  const region = await getRegion()
+
+  if (!customer || !region) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="addresses-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-2xl-semi"><T k="account.shippingAddresses" /></h1>
+        <p className="text-base-regular">
+          <T k="account.addressesText" />
+        </p>
+      </div>
+      <AddressBook customer={customer} region={region} />
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/account/@dashboard/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "@modules/common/icons/spinner"
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-full h-full text-ui-fg-base">
+      <Spinner size={36} />
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/account/@dashboard/orders/details/[id]/page.tsx

@@ -0,0 +1,33 @@
+import { retrieveOrder } from "@lib/data/orders"
+import OrderDetailsTemplate from "@modules/order/templates/order-details-template"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: Promise<{ id: string }>
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    notFound()
+  }
+
+  return {
+    title: `Order #${order.display_id}`,
+    description: `View your order`,
+  }
+}
+
+export default async function OrderDetailPage(props: Props) {
+  const params = await props.params
+  const order = await retrieveOrder(params.id).catch(() => null)
+
+  if (!order) {
+    notFound()
+  }
+
+  return <OrderDetailsTemplate order={order} />
+}

package/templates/storefront/src/app/(main)/account/@dashboard/orders/page.tsx

@@ -0,0 +1,37 @@
+import { T } from "@lib/boutique/i18n-client"
+import { t } from "@lib/boutique/i18n"
+import { Metadata } from "next"
+
+import OrderOverview from "@modules/account/components/order-overview"
+import { notFound } from "next/navigation"
+import { listOrders } from "@lib/data/orders"
+import Divider from "@modules/common/components/divider"
+import TransferRequestForm from "@modules/account/components/transfer-request-form"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("account.orders") }
+}
+
+export default async function Orders() {
+  const orders = await listOrders()
+
+  if (!orders) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="orders-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-2xl-semi"><T k="account.orders" /></h1>
+        <p className="text-base-regular">
+          <T k="account.ordersText" />
+        </p>
+      </div>
+      <div>
+        <OrderOverview orders={orders} />
+        <Divider className="my-16" />
+        <TransferRequestForm />
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/account/@dashboard/page.tsx

@@ -0,0 +1,22 @@
+import { t } from "@lib/boutique/i18n"
+import { Metadata } from "next"
+
+import Overview from "@modules/account/components/overview"
+import { notFound } from "next/navigation"
+import { retrieveCustomer } from "@lib/data/customer"
+import { listOrders } from "@lib/data/orders"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("account.title") }
+}
+
+export default async function OverviewTemplate() {
+  const customer = await retrieveCustomer().catch(() => null)
+  const orders = (await listOrders().catch(() => null)) || null
+
+  if (!customer) {
+    notFound()
+  }
+
+  return <Overview customer={customer} orders={orders} />
+}

package/templates/storefront/src/app/(main)/account/@dashboard/profile/page.tsx

@@ -0,0 +1,53 @@
+import { T } from "@lib/boutique/i18n-client"
+import { t } from "@lib/boutique/i18n"
+import { Metadata } from "next"
+
+import ProfilePhone from "@modules/account//components/profile-phone"
+import ProfileBillingAddress from "@modules/account/components/profile-billing-address"
+import ProfileEmail from "@modules/account/components/profile-email"
+import ProfileName from "@modules/account/components/profile-name"
+import ProfilePassword from "@modules/account/components/profile-password"
+
+import { notFound } from "next/navigation"
+import { listRegions } from "@lib/data/regions"
+import { retrieveCustomer } from "@lib/data/customer"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("account.profile") }
+}
+
+export default async function Profile() {
+  const customer = await retrieveCustomer()
+  const regions = await listRegions()
+
+  if (!customer || !regions) {
+    notFound()
+  }
+
+  return (
+    <div className="w-full" data-testid="profile-page-wrapper">
+      <div className="mb-8 flex flex-col gap-y-4">
+        <h1 className="text-2xl-semi"><T k="account.profile" /></h1>
+        <p className="text-base-regular">
+          <T k="account.profileText" />
+        </p>
+      </div>
+      <div className="flex flex-col gap-y-8 w-full">
+        <ProfileName customer={customer} />
+        <Divider />
+        <ProfileEmail customer={customer} />
+        <Divider />
+        <ProfilePhone customer={customer} />
+        <Divider />
+        {/* <ProfilePassword customer={customer} />
+        <Divider /> */}
+        <ProfileBillingAddress customer={customer} regions={regions} />
+      </div>
+    </div>
+  )
+}
+
+const Divider = () => {
+  return <div className="w-full h-px bg-gray-200" />
+}
+;``

package/templates/storefront/src/app/(main)/account/@login/page.tsx

@@ -0,0 +1,12 @@
+import { t } from "@lib/boutique/i18n"
+import { Metadata } from "next"
+
+import LoginTemplate from "@modules/account/templates/login-template"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("account.signIn") }
+}
+
+export default function Login() {
+  return <LoginTemplate />
+}

package/templates/storefront/src/app/(main)/account/layout.tsx

@@ -0,0 +1,20 @@
+import { retrieveCustomer } from "@lib/data/customer"
+import { Toaster } from "@medusajs/ui"
+import AccountLayout from "@modules/account/templates/account-layout"
+
+export default async function AccountPageLayout({
+  dashboard,
+  login,
+}: {
+  dashboard?: React.ReactNode
+  login?: React.ReactNode
+}) {
+  const customer = await retrieveCustomer().catch(() => null)
+
+  return (
+    <AccountLayout customer={customer}>
+      {customer ? dashboard : login}
+      <Toaster />
+    </AccountLayout>
+  )
+}

package/templates/storefront/src/app/(main)/account/loading.tsx

@@ -0,0 +1,9 @@
+import Spinner from "@modules/common/icons/spinner"
+
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center w-full h-full text-ui-fg-base">
+      <Spinner size={36} />
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/cart/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonCartPage from "@modules/skeletons/templates/skeleton-cart-page"
+
+export default function Loading() {
+  return <SkeletonCartPage />
+}

package/templates/storefront/src/app/(main)/cart/not-found.tsx

@@ -0,0 +1,21 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Metadata } from "next"
+
+import InteractiveLink from "@modules/common/components/interactive-link"
+
+export const metadata: Metadata = {
+  title: "404",
+  description: "Something went wrong",
+}
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-64px)]">
+      <h1 className="text-2xl-semi text-ui-fg-base"><T k="notFound.title" /></h1>
+      <p className="text-small-regular text-ui-fg-base">
+        <T k="cart.notFound" />
+      </p>
+      <InteractiveLink href="/"><T k="notFound.cta" /></InteractiveLink>
+    </div>
+  )
+}

package/templates/storefront/src/app/(main)/cart/page.tsx

@@ -0,0 +1,21 @@
+import { t } from "@lib/boutique/i18n"
+import { retrieveCart } from "@lib/data/cart"
+import { retrieveCustomer } from "@lib/data/customer"
+import CartTemplate from "@modules/cart/templates"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return { title: t("cart.title") }
+}
+
+export default async function Cart() {
+  const cart = await retrieveCart().catch((error) => {
+    console.error(error)
+    return notFound()
+  })
+
+  const customer = await retrieveCustomer()
+
+  return <CartTemplate cart={cart} customer={customer} />
+}

package/templates/storefront/src/app/(main)/categories/[...category]/page.tsx

@@ -0,0 +1,55 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { getCategoryByHandle } from "@lib/data/categories"
+import CategoryTemplate from "@modules/categories/templates"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+
+type Props = {
+  params: Promise<{ category: string[] }>
+  searchParams: Promise<{
+    sortBy?: SortOptions
+    page?: string
+  }>
+}
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+  try {
+    const productCategory = await getCategoryByHandle(params.category)
+
+    const title = productCategory.name
+
+    const description = productCategory.description ?? `${title} category.`
+
+    return {
+      title,
+      description,
+      alternates: {
+        canonical: `${params.category.join("/")}`,
+      },
+    }
+  } catch (error) {
+    notFound()
+  }
+}
+
+export default async function CategoryPage(props: Props) {
+  const searchParams = await props.searchParams
+  const params = await props.params
+  const { sortBy, page } = searchParams
+
+  const productCategory = await getCategoryByHandle(params.category)
+
+  if (!productCategory) {
+    notFound()
+  }
+
+  return (
+    <CategoryTemplate
+      category={productCategory}
+      sortBy={sortBy}
+      page={page}
+    />
+  )
+}

package/templates/storefront/src/app/(main)/collections/[handle]/page.tsx

@@ -0,0 +1,55 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { getCollectionByHandle } from "@lib/data/collections"
+import { StoreCollection } from "@medusajs/types"
+import CollectionTemplate from "@modules/collections/templates"
+import { SortOptions } from "@modules/store/components/refinement-list/sort-products"
+
+type Props = {
+  params: Promise<{ handle: string }>
+  searchParams: Promise<{
+    page?: string
+    sortBy?: SortOptions
+  }>
+}
+
+export const PRODUCT_LIMIT = 12
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params
+  const collection = await getCollectionByHandle(params.handle)
+
+  if (!collection) {
+    notFound()
+  }
+
+  const metadata = {
+    title: collection.title,
+    description: `${collection.title} collection`,
+  } as Metadata
+
+  return metadata
+}
+
+export default async function CollectionPage(props: Props) {
+  const searchParams = await props.searchParams
+  const params = await props.params
+  const { sortBy, page } = searchParams
+
+  const collection = await getCollectionByHandle(params.handle).then(
+    (collection: StoreCollection) => collection
+  )
+
+  if (!collection) {
+    notFound()
+  }
+
+  return (
+    <CollectionTemplate
+      collection={collection}
+      page={page}
+      sortBy={sortBy}
+    />
+  )
+}

package/templates/storefront/src/app/(main)/layout.tsx

@@ -0,0 +1,43 @@
+import { Suspense } from "react"
+
+import { getCampaign } from "@lib/boutique/campaign"
+import { listCartOptions, retrieveCart } from "@lib/data/cart"
+import { retrieveCustomer } from "@lib/data/customer"
+import { StoreCartShippingOption } from "@medusajs/types"
+import CartMismatchBanner from "@modules/layout/components/cart-mismatch-banner"
+import FreeShippingPriceNudge from "@modules/shipping/components/free-shipping-price-nudge"
+import Footer from "@modules/ub/footer"
+import Nav from "@modules/ub/nav"
+import TopBar from "@modules/ub/top-bar"
+
+async function CartNotices() {
+  const [customer, cart] = await Promise.all([retrieveCustomer(), retrieveCart()])
+  if (!cart) return null
+
+  let shippingOptions: StoreCartShippingOption[] = []
+  const { shipping_options } = await listCartOptions()
+  shippingOptions = shipping_options
+
+  return (
+    <>
+      {customer && <CartMismatchBanner customer={customer} cart={cart} />}
+      <FreeShippingPriceNudge variant="popup" cart={cart} shippingOptions={shippingOptions} />
+    </>
+  )
+}
+
+export default async function PageLayout(props: { children: React.ReactNode }) {
+  const campaign = await getCampaign()
+
+  return (
+    <>
+      <TopBar messages={campaign.topbar} />
+      <Nav />
+      <Suspense fallback={null}>
+        <CartNotices />
+      </Suspense>
+      {props.children}
+      <Footer />
+    </>
+  )
+}

package/templates/storefront/src/app/(main)/legal/[page]/page.tsx

@@ -0,0 +1,42 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
+
+const PAGES = ["shipping", "returns", "privacy", "terms", "contact"] as const
+type Page = (typeof PAGES)[number]
+
+type Props = { params: Promise<{ page: string }> }
+
+const isPage = (p: string): p is Page => (PAGES as readonly string[]).includes(p)
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const { page } = await props.params
+  return isPage(page) ? { title: t(`legal.${page}`) } : {}
+}
+
+export default async function LegalPage(props: Props) {
+  const { page } = await props.params
+  if (!isPage(page)) notFound()
+
+  const { storeName, merchantEmail } = getBoutique()
+
+  return (
+    <section className="ub-section">
+      <div className="ub-wrap" style={{ maxWidth: 760 }}>
+        <h1 className="ub-head" style={{ fontSize: 36, lineHeight: "44px", marginBottom: 24 }}>
+          {t(`legal.${page}`)}
+        </h1>
+        <p>{t(`legal.${page}.body`, { storeName })}</p>
+        {page === "contact" && merchantEmail && (
+          <p style={{ marginTop: 16 }}>
+            {t("legal.contact.email", { email: "" })}
+            <a href={`mailto:${merchantEmail}`} style={{ textDecoration: "underline" }}>
+              {merchantEmail}
+            </a>
+          </p>
+        )}
+      </div>
+    </section>
+  )
+}