@pradip1995/create-storefront 1.0.1

package/bin/create-storefront.js

@@ -0,0 +1,239 @@
+#!/usr/bin/env node
+
+const fs = require("fs")
+const path = require("path")
+const { execSync } = require("child_process")
+const {
+  resolveThemePath,
+  createKitNextConfig,
+  THEME_PACKAGES,
+} = require("../lib/kit-next-config")
+
+const KIT_VERSION = "^1.0.0"
+const TEMPLATE_DIR = path.join(__dirname, "..", "templates", "storefront")
+
+function parseArgs(argv) {
+  const args = { theme: "valero", themeMode: "copy", dir: process.cwd() }
+  const positional = []
+
+  for (let i = 2; i < argv.length; i++) {
+    const arg = argv[i]
+    if (arg === "--theme" && argv[i + 1]) {
+      args.theme = argv[++i]
+    } else if (arg === "--use-package") {
+      args.themeMode = "package"
+    } else if (arg === "--copy-theme") {
+      args.themeMode = "copy"
+    } else if (arg === "--dir" && argv[i + 1]) {
+      args.dir = path.resolve(argv[++i])
+    } else if (arg === "--help" || arg === "-h") {
+      args.help = true
+    } else if (!arg.startsWith("-")) {
+      positional.push(arg)
+    }
+  }
+
+  args.name = positional[0]
+  return args
+}
+
+function printHelp() {
+  console.log(`
+create-storefront — Scaffold a Medusa storefront
+
+Usage:
+  npx @pradip1995/create-storefront <project-name> [options]
+
+Options:
+  --theme <slug>     Theme base (default: valero)
+  --copy-theme       Copy theme into src/theme/<slug> (default, editable)
+  --use-package      Use @pradip1995/theme-<slug> from npm (CSS overrides only)
+  --dir <path>       Parent directory (default: cwd)
+
+Examples:
+  npx @pradip1995/create-storefront acme-shop --theme valero
+  npx @pradip1995/create-storefront acme-shop --theme valero --use-package
+`)
+}
+
+function copyDir(src, dest) {
+  fs.cpSync(src, dest, { recursive: true })
+}
+
+function writeJson(filePath, data) {
+  fs.writeFileSync(filePath, JSON.stringify(data, null, 2) + "\n")
+}
+
+function patchFile(filePath, replacements) {
+  let content = fs.readFileSync(filePath, "utf8")
+  for (const [from, to] of replacements) {
+    content = content.split(from).join(to)
+  }
+  fs.writeFileSync(filePath, content)
+}
+
+function scaffoldTheme(projectRoot, theme, themeMode) {
+  if (themeMode === "package") {
+    return
+  }
+
+  const themePkg = THEME_PACKAGES[theme]
+  const sources = [
+    path.join(projectRoot, "node_modules", themePkg || `@pradip1995/theme-${theme}`, "src"),
+    path.join(__dirname, "..", "..", "theme-valero", "src"),
+    path.join(__dirname, "..", "..", `theme-${theme}`, "src"),
+  ]
+
+  const source = sources.find((s) => fs.existsSync(s))
+  if (!source) {
+    console.warn(`Warning: theme source not found for "${theme}". Add src/theme/${theme} manually.`)
+    return
+  }
+
+  const target = path.join(projectRoot, "src/theme", theme)
+  fs.mkdirSync(path.dirname(target), { recursive: true })
+  copyDir(source, target)
+}
+
+function main() {
+  const args = parseArgs(process.argv)
+
+  if (args.help || !args.name) {
+    printHelp()
+    process.exit(args.help ? 0 : 1)
+  }
+
+  if (!fs.existsSync(TEMPLATE_DIR)) {
+    console.error("Template not found. Run from medusa-storefront-kit or publish create-storefront.")
+    process.exit(1)
+  }
+
+  const projectRoot = path.join(args.dir, args.name)
+  if (fs.existsSync(projectRoot)) {
+    console.error(`Error: ${projectRoot} already exists`)
+    process.exit(1)
+  }
+
+  console.log(`Creating storefront "${args.name}" (theme: ${args.theme}, mode: ${args.themeMode})...`)
+  copyDir(TEMPLATE_DIR, projectRoot)
+
+  const pkgPath = path.join(projectRoot, "package.json")
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"))
+  pkg.name = args.name
+  pkg.dependencies = {
+    ...pkg.dependencies,
+    "@pradip1995/commerce-core": KIT_VERSION,
+    "@pradip1995/commerce-auth": KIT_VERSION,
+    "@pradip1995/storefront-controllers": KIT_VERSION,
+    "@pradip1995/storefront-registry": KIT_VERSION,
+  }
+  delete pkg.dependencies["@pradip1995/create-storefront"]
+  delete pkg.dependencies["@pradip1995/theme-valero"]
+  Object.keys(pkg.dependencies).forEach((key) => {
+    if (pkg.dependencies[key] === "workspace:*") delete pkg.dependencies[key]
+  })
+  if (args.themeMode === "package") {
+    pkg.dependencies[`@pradip1995/theme-${args.theme}`] =
+      THEME_PACKAGES[args.theme] ? KIT_VERSION : KIT_VERSION
+    if (THEME_PACKAGES[args.theme]) {
+      pkg.dependencies[THEME_PACKAGES[args.theme]] = KIT_VERSION
+    }
+  } else if (args.theme !== "valero" || !fs.existsSync(path.join(projectRoot, "src/theme/valero"))) {
+    /* theme copied after install */
+  }
+  writeJson(pkgPath, pkg)
+
+  const themePathPattern = args.themeMode === "package" ? "valero" : args.theme
+  patchFile(path.join(projectRoot, "tsconfig.json"), [
+    ['"theme/valero/*"', `"theme/${themePathPattern}/*"`],
+    ['theme/valero/*', `theme/${args.themeMode === "package" ? "valero" : args.theme}/*`],
+  ])
+
+  if (args.themeMode === "package") {
+    patchFile(path.join(projectRoot, "tsconfig.json"), [
+      [
+        `"../node_modules/@pradip1995/commerce-core/src/*"`,
+        `"../node_modules/@pradip1995/commerce-core/src/*"`,
+      ],
+    ])
+    const themePkg = THEME_PACKAGES[args.theme] || `@pradip1995/theme-${args.theme}`
+    const tsconfig = JSON.parse(fs.readFileSync(path.join(projectRoot, "tsconfig.json"), "utf8"))
+    tsconfig.compilerOptions.paths["@theme/*"] = [`../node_modules/${themePkg}/src/*`]
+    writeJson(path.join(projectRoot, "tsconfig.json"), tsconfig)
+  }
+
+  fs.writeFileSync(
+    path.join(projectRoot, "src/storefront.config.ts"),
+    `import { storefrontConfig as baseConfig } from "@pradip1995/storefront-registry/storefront.config"
+
+/** Customize block order or enabled slots per brand. */
+export const storefrontConfig = {
+  ...baseConfig,
+  theme: "${args.theme}",
+  baseDir: "${args.themeMode === "package" ? `theme/${args.theme}` : `theme/${args.theme}`}",
+} as const
+
+export type { HomeBlockType } from "@pradip1995/storefront-registry/storefront.config"
+`
+  )
+
+  const nextConfigContent = `const path = require("path")
+const checkEnvVariables = require("./check-env-variables")
+const { createKitNextConfig } = require("./kit-next-config")
+
+checkEnvVariables()
+
+const projectRoot = __dirname
+
+/** @type {import('next').NextConfig} */
+const nextConfig = createKitNextConfig(projectRoot, {
+  theme: "${args.theme}",
+  themeMode: "${args.themeMode}",
+  extra: {
+    reactStrictMode: true,
+    eslint: { ignoreDuringBuilds: true },
+    typescript: { ignoreBuildErrors: true },
+    experimental: {
+      serverActions: { bodySizeLimit: "10mb" },
+    },
+  },
+})
+
+module.exports = nextConfig
+`
+  fs.writeFileSync(path.join(projectRoot, "next.config.js"), nextConfigContent)
+
+  fs.writeFileSync(
+    path.join(projectRoot, ".env.example"),
+    `MEDUSA_BACKEND_URL=http://localhost:9000
+NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_
+NEXT_PUBLIC_BASE_URL=http://localhost:8000
+`
+  )
+
+  console.log("Installing dependencies...")
+  try {
+    execSync("npm install --legacy-peer-deps", { cwd: projectRoot, stdio: "inherit" })
+  } catch {
+    console.warn("npm install failed — run manually inside the project.")
+  }
+
+  if (args.themeMode === "copy") {
+    scaffoldTheme(projectRoot, args.theme, args.themeMode)
+    if (args.theme !== "valero" && fs.existsSync(path.join(projectRoot, "src/theme/valero"))) {
+      fs.rmSync(path.join(projectRoot, "src/theme/valero"), { recursive: true, force: true })
+    }
+  }
+
+  console.log(`
+Done! Next steps:
+  cd ${projectRoot}
+  cp .env.example .env.local   # add Medusa keys
+  npm run dev
+
+Customize design:
+  ${args.themeMode === "package" ? `Override CSS or fork @pradip1995/theme-${args.theme}` : `Edit src/theme/${args.theme}/tokens/theme.css and components`}
+`)
+}
+
+main()

package/lib/kit-next-config.js

@@ -0,0 +1,84 @@
+const path = require("path")
+
+const KIT_PACKAGES = [
+  "@pradip1995/commerce-core",
+  "@pradip1995/commerce-auth",
+  "@pradip1995/storefront-controllers",
+  "@pradip1995/storefront-registry",
+]
+
+const THEME_PACKAGES = {
+  valero: "@pradip1995/theme-valero",
+}
+
+/**
+ * Resolve @theme alias path for webpack.
+ * @param {string} projectRoot
+ * @param {{ theme?: string, themeMode?: 'copy' | 'package' }} options
+ */
+function resolveThemePath(projectRoot, options = {}) {
+  const theme = options.theme || "valero"
+  if (options.themeMode === "package") {
+    const pkg = THEME_PACKAGES[theme] || `@pradip1995/theme-${theme}`
+    return path.join(projectRoot, "node_modules", pkg, "src")
+  }
+  return path.join(projectRoot, "src/theme", theme)
+}
+
+/**
+ * Webpack/tsconfig aliases for published kit packages.
+ */
+function getKitAliases(projectRoot, options = {}) {
+  return {
+    "@core": path.join(projectRoot, "node_modules/@pradip1995/commerce-core/src"),
+    "@registry": path.join(
+      projectRoot,
+      "node_modules/@pradip1995/storefront-registry/src"
+    ),
+    "@controllers": path.join(
+      projectRoot,
+      "node_modules/@pradip1995/storefront-controllers/src"
+    ),
+    "@commerce-auth": path.join(
+      projectRoot,
+      "node_modules/@pradip1995/commerce-auth/src"
+    ),
+    "@modules": path.join(projectRoot, "src/modules"),
+    "@theme": resolveThemePath(projectRoot, options),
+  }
+}
+
+/**
+ * Create Next.js config for a kit-based storefront.
+ * @param {string} projectRoot
+ * @param {{ theme?: string, themeMode?: 'copy' | 'package', extra?: object }} options
+ */
+function createKitNextConfig(projectRoot, options = {}) {
+  const { extra = {}, theme, themeMode } = options
+  const aliases = getKitAliases(projectRoot, { theme, themeMode })
+
+  return {
+    transpilePackages: [
+      ...KIT_PACKAGES,
+      ...(themeMode === "package"
+        ? [THEME_PACKAGES[theme] || `@pradip1995/theme-${theme}`]
+        : []),
+    ],
+    webpack(config) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        ...aliases,
+      }
+      return config
+    },
+    ...extra,
+  }
+}
+
+module.exports = {
+  KIT_PACKAGES,
+  THEME_PACKAGES,
+  getKitAliases,
+  resolveThemePath,
+  createKitNextConfig,
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@pradip1995/create-storefront",
+  "version": "1.0.1",
+  "description": "Scaffold a Medusa storefront app with published kit packages and a theme",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SmartByteLabs/medusa-storefront-kit.git",
+    "directory": "packages/create-storefront"
+  },
+  "bin": {
+    "create-storefront": "./bin/create-storefront.js"
+  },
+  "exports": {
+    "./lib/kit-next-config": "./lib/kit-next-config.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "templates"
+  ],
+  "dependencies": {
+    "prompts": "^2.4.2"
+  },
+  "scripts": {
+    "typecheck": "node -c lib/kit-next-config.js && node -c bin/create-storefront.js"
+  }
+}

package/templates/storefront/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals"]
+}

package/templates/storefront/README.md

@@ -0,0 +1,35 @@
+# Storefront Template
+
+Reference Next.js app for **medusa-storefront-kit**. Copy this folder when starting a new brand.
+
+## What lives here (dynamic)
+
+- `src/theme/default/` — design tokens, blocks, slots, primitives
+- `src/modules/` — legacy UI shims (replace over time)
+- `src/storefront.config.ts` — block order, enabled slots
+- `.env.local` — Medusa backend URL and keys
+
+## What comes from packages (fixed)
+
+| Package                                         | Purpose                             |
+| ----------------------------------------------- | ----------------------------------- |
+| `@pradip1995/commerce-core`          | Cart, orders, hooks, server actions |
+| `@pradip1995/commerce-auth`          | Login, register, OTP                |
+| `@pradip1995/storefront-controllers` | Page controllers                    |
+| `@pradip1995/storefront-registry`    | Component registry                  |
+
+## New brand checklist
+
+1. Copy `apps/storefront-template` → `apps/storefront-<brand>`
+2. Copy `src/theme/default` → `src/theme/<brand>` and customize `tokens/theme.css`
+3. Update `tsconfig.json` → `@theme/*` path
+4. Set Medusa env vars in `.env.local`
+5. Replace stub theme slots with real designs
+6. Bump package versions when kit releases fixes
+
+## Dev
+
+```bash
+pnpm install
+pnpm --filter storefront-template dev
+```

package/templates/storefront/check-env-variables.js

@@ -0,0 +1,51 @@
+// Try to require ansi-colors, fallback to plain console if not available
+let c;
+try {
+  c = require("ansi-colors");
+} catch (e) {
+  // Fallback when ansi-colors is not available (production builds)
+  c = {
+    red: { bold: (str) => str },
+    yellow: (str) => str,
+    bold: (str) => str,
+    dim: (str) => str,
+  };
+}
+
+const requiredEnvs = [
+  {
+    key: "NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY",
+    // TODO: we need a good doc to point this to
+    description:
+      "Learn how to create a publishable key: https://docs.medusajs.com/v2/resources/storefront-development/publishable-api-keys",
+  },
+]
+
+function checkEnvVariables() {
+  const missingEnvs = requiredEnvs.filter(function (env) {
+    return !process.env[env.key]
+  })
+
+  if (missingEnvs.length > 0) {
+    console.error(
+      c.red.bold("\n🚫 Error: Missing required environment variables\n")
+    )
+
+    missingEnvs.forEach(function (env) {
+      console.error(c.yellow(`  ${c.bold(env.key)}`))
+      if (env.description) {
+        console.error(c.dim(`    ${env.description}\n`))
+      }
+    })
+
+    console.error(
+      c.yellow(
+        "\nPlease set these variables in your .env file or environment before starting the application.\n"
+      )
+    )
+
+    process.exit(1)
+  }
+}
+
+module.exports = checkEnvVariables

package/templates/storefront/kit-next-config.js

@@ -0,0 +1,71 @@
+const path = require("path")
+
+const KIT_PACKAGES = [
+  "@pradip1995/commerce-core",
+  "@pradip1995/commerce-auth",
+  "@pradip1995/storefront-controllers",
+  "@pradip1995/storefront-registry",
+]
+
+const THEME_PACKAGES = {
+  valero: "@pradip1995/theme-valero",
+}
+
+function resolveThemePath(projectRoot, options = {}) {
+  const theme = options.theme || "valero"
+  if (options.themeMode === "package") {
+    const pkg = THEME_PACKAGES[theme] || `@pradip1995/theme-${theme}`
+    return path.join(projectRoot, "node_modules", pkg, "src")
+  }
+  return path.join(projectRoot, "src/theme", theme)
+}
+
+function getKitAliases(projectRoot, options = {}) {
+  return {
+    "@core": path.join(projectRoot, "node_modules/@pradip1995/commerce-core/src"),
+    "@registry": path.join(
+      projectRoot,
+      "node_modules/@pradip1995/storefront-registry/src"
+    ),
+    "@controllers": path.join(
+      projectRoot,
+      "node_modules/@pradip1995/storefront-controllers/src"
+    ),
+    "@commerce-auth": path.join(
+      projectRoot,
+      "node_modules/@pradip1995/commerce-auth/src"
+    ),
+    "@modules": path.join(projectRoot, "src/modules"),
+    "@theme": resolveThemePath(projectRoot, options),
+  }
+}
+
+function createKitNextConfig(projectRoot, options = {}) {
+  const { extra = {}, theme, themeMode } = options
+  const aliases = getKitAliases(projectRoot, { theme, themeMode })
+
+  return {
+    transpilePackages: [
+      ...KIT_PACKAGES,
+      ...(themeMode === "package"
+        ? [THEME_PACKAGES[theme] || `@pradip1995/theme-${theme}`]
+        : []),
+    ],
+    webpack(config) {
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        ...aliases,
+      }
+      return config
+    },
+    ...extra,
+  }
+}
+
+module.exports = {
+  KIT_PACKAGES,
+  THEME_PACKAGES,
+  getKitAliases,
+  resolveThemePath,
+  createKitNextConfig,
+}

package/templates/storefront/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/storefront/next.config.js

@@ -0,0 +1,25 @@
+const checkEnvVariables = require("./check-env-variables")
+const { createKitNextConfig } = require("./kit-next-config")
+
+checkEnvVariables()
+
+const projectRoot = __dirname
+
+/** @type {import('next').NextConfig} */
+module.exports = createKitNextConfig(projectRoot, {
+  theme: "valero",
+  themeMode: "copy",
+  extra: {
+    reactStrictMode: true,
+    logging: { fetches: { fullUrl: true } },
+    experimental: { serverActions: { bodySizeLimit: "10mb" } },
+    eslint: { ignoreDuringBuilds: true },
+    typescript: { ignoreBuildErrors: true },
+    images: {
+      remotePatterns: [
+        { protocol: "http", hostname: "localhost" },
+        { protocol: "https", hostname: "medusa-public-images.s3.eu-west-1.amazonaws.com" },
+      ],
+    },
+  },
+})

package/templates/storefront/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "storefront-template",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Medusa storefront template — logic from @pradip1995 packages, design in src/theme/",
+  "scripts": {
+    "dev": "next dev --turbopack -p 8000",
+    "build": "next build",
+    "start": "next start -p 8000",
+    "lint": "tsc --noEmit --pretty false",
+    "typecheck": "tsc --noEmit --pretty false"
+  },
+  "dependencies": {
+    "@pradip1995/commerce-auth": "workspace:*",
+    "@pradip1995/commerce-core": "workspace:*",
+    "@pradip1995/create-storefront": "workspace:*",
+    "@pradip1995/storefront-controllers": "workspace:*",
+    "@pradip1995/storefront-registry": "workspace:*",
+    "@pradip1995/theme-valero": "workspace:*",
+    "@headlessui/react": "^2.2.0",
+    "@medusajs/js-sdk": "latest",
+    "@medusajs/ui": "latest",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@stripe/react-stripe-js": "^5.3.0",
+    "@stripe/stripe-js": "^8.2.0",
+    "country-state-city": "^3.2.1",
+    "firebase": "^12.8.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.563.0",
+    "next": "15.3.8",
+    "pg": "^8.11.3",
+    "qs": "^6.12.1",
+    "react": "19.0.3",
+    "react-country-flag": "^3.1.0",
+    "react-dom": "19.0.3",
+    "react-phone-input-2": "^2.15.1",
+    "react-razorpay": "^3.0.1",
+    "server-only": "^0.0.1",
+    "tailwindcss-radix": "^2.8.0"
+  },
+  "devDependencies": {
+    "@medusajs/types": "latest",
+    "@medusajs/ui-preset": "latest",
+    "@types/lodash": "^4.14.195",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "ansi-colors": "^4.1.3",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8.4.8",
+    "tailwindcss": "^3.0.23",
+    "typescript": "^5.7.2"
+  }
+}

package/templates/storefront/postcss.config.js

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

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

@@ -0,0 +1,23 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+import { loadCheckoutData } from "@controllers/checkout/load-checkout-data"
+import { CheckoutPage } from "@controllers/checkout/checkout-page"
+
+export const metadata: Metadata = {
+  title: "Checkout",
+}
+
+export default async function Checkout(props: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}) {
+  const searchParams = await props.searchParams
+  const cartIdFromUrl = searchParams.cart_id as string | undefined
+
+  const data = await loadCheckoutData(cartIdFromUrl)
+  if (!data) {
+    return notFound()
+  }
+
+  return <CheckoutPage data={data} />
+}