@pradip1995/create-storefront-app 0.2.0

package/bin/create-storefront-app.js

@@ -0,0 +1,198 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "fs"
+import { join, dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+import { execSync } from "child_process"
+import { buildDependencies } from "../lib/deps.js"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const PKG_ROOT = join(__dirname, "..")
+
+const THEME_MAP = { valero: "valero", impulse: "impulse", sahsha: "impulse" }
+
+function parseArgs(argv) {
+  const args = {
+    preset: "full",
+    theme: "valero",
+    dir: process.cwd(),
+    backendUrl: "http://localhost:9000",
+    baseUrl: "http://localhost:8000",
+    defaultRegion: "in",
+    publishableKey: "pk_test",
+    port: 8000,
+    install: true,
+    noPrompt: false,
+  }
+  const positional = []
+
+  for (let i = 2; i < argv.length; i++) {
+    const arg = argv[i]
+    if (arg === "--preset" && argv[i + 1]) args.preset = argv[++i]
+    else if (arg === "--theme" && argv[i + 1]) args.theme = argv[++i]
+    else if (arg === "--dir" && argv[i + 1]) args.dir = resolve(argv[++i])
+    else if (arg === "--backend-url" && argv[i + 1]) args.backendUrl = argv[++i]
+    else if (arg === "--publishable-key" && argv[i + 1]) args.publishableKey = argv[++i]
+    else if (arg === "--base-url" && argv[i + 1]) args.baseUrl = argv[++i]
+    else if (arg === "--default-region" && argv[i + 1]) args.defaultRegion = argv[++i]
+    else if (arg === "--port" && argv[i + 1]) args.port = Number(argv[++i])
+    else if (arg === "--no-install") args.install = false
+    else if (arg === "--no-prompt" || arg === "-y") args.noPrompt = true
+    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-app — Scaffold a segment-based Medusa storefront
+
+Usage:
+  npx @pradip1995/create-storefront-app <project-name> [options]
+
+Options:
+  --preset <full|minimal>     Page/segment preset (default: full)
+  --theme <valero|impulse>    CSS theme token set (default: valero)
+  --dir <path>                Parent directory (default: cwd)
+  --backend-url <url>         Medusa backend URL (default: http://localhost:9000)
+  --publishable-key <key>     Medusa publishable API key (default: pk_test)
+  --base-url <url>            Storefront URL (default: http://localhost:8000)
+  --default-region <code>     Default country code (default: in)
+  --port <number>             Dev server port (default: 8000)
+  --no-install                Skip npm install after scaffold
+  --no-prompt, -y             Non-interactive (use flag defaults)
+
+Examples:
+  npx @pradip1995/create-storefront-app my-shop
+  npx @pradip1995/create-storefront-app my-shop --preset minimal --theme impulse \\
+    --publishable-key pk_xxx --backend-url http://localhost:9000
+`)
+}
+
+function writeJson(path, data) {
+  writeFileSync(path, JSON.stringify(data, null, 2) + "\n")
+}
+
+function applyTemplate(content, vars) {
+  return content.replace(/\{\{(\w+)\}\}/g, (_, key) => vars[key] ?? "")
+}
+
+function scaffoldProject(args) {
+  const projectRoot = join(args.dir, args.name)
+  if (existsSync(projectRoot)) {
+    console.error(`Error: ${projectRoot} already exists`)
+    process.exit(1)
+  }
+
+  const presetDir = join(PKG_ROOT, "templates", args.preset)
+  if (!existsSync(join(presetDir, "pages.config.json"))) {
+    console.error(`Unknown preset "${args.preset}". Use full or minimal.`)
+    process.exit(1)
+  }
+
+  const cssTheme = THEME_MAP[args.theme] || args.theme
+  mkdirSync(projectRoot, { recursive: true })
+  mkdirSync(join(projectRoot, "public"), { recursive: true })
+
+  const pagesConfig = JSON.parse(
+    readFileSync(join(presetDir, "pages.config.json"), "utf8")
+  )
+  writeJson(join(projectRoot, "pages.config.json"), pagesConfig)
+
+  const storefrontConfig = JSON.parse(
+    readFileSync(join(PKG_ROOT, "templates/shared/storefront.config.json"), "utf8")
+  )
+  storefrontConfig.theme = cssTheme
+  storefrontConfig.defaultCountryCode = args.defaultRegion
+  writeJson(join(projectRoot, "storefront.config.json"), storefrontConfig)
+
+  cpSync(join(PKG_ROOT, "templates/shared/public"), join(projectRoot, "public"), {
+    recursive: true,
+  })
+
+  writeFileSync(
+    join(projectRoot, ".gitignore"),
+    readFileSync(join(PKG_ROOT, "templates/shared/gitignore"), "utf8")
+  )
+  writeFileSync(
+    join(projectRoot, ".npmrc"),
+    readFileSync(join(PKG_ROOT, "templates/shared/npmrc"), "utf8")
+  )
+
+  const envTemplate = readFileSync(
+    join(PKG_ROOT, "templates/shared/env.example"),
+    "utf8"
+  )
+  writeFileSync(
+    join(projectRoot, ".env.local"),
+    applyTemplate(envTemplate, {
+      BACKEND_URL: args.backendUrl,
+      BASE_URL: args.baseUrl,
+      DEFAULT_REGION: args.defaultRegion,
+      PUBLISHABLE_KEY: args.publishableKey,
+      THEME: args.theme,
+    })
+  )
+  writeFileSync(
+    join(projectRoot, ".env.example"),
+    applyTemplate(envTemplate, {
+      BACKEND_URL: "http://localhost:9000",
+      BASE_URL: "http://localhost:8000",
+      DEFAULT_REGION: "in",
+      PUBLISHABLE_KEY: "pk_test",
+      THEME: "valero",
+    })
+  )
+
+  const pkg = {
+    name: args.name,
+    private: true,
+    scripts: {
+      "storefront:build": "storefront-build",
+      dev: `npm run storefront:build && cd .generated-app && npm install && npm run dev -- -p ${args.port}`,
+      build: "npm run storefront:build && cd .generated-app && npm install && npm run build",
+      start: "npm run storefront:build && cd .generated-app && npm install && npm run start",
+    },
+    dependencies: buildDependencies(pagesConfig),
+  }
+  writeJson(join(projectRoot, "package.json"), pkg)
+
+  return projectRoot
+}
+
+function main() {
+  const args = parseArgs(process.argv)
+  if (args.help || !args.name) {
+    printHelp()
+    process.exit(args.help ? 0 : 1)
+  }
+
+  console.log(
+    `Creating storefront "${args.name}" (preset: ${args.preset}, theme: ${args.theme})...`
+  )
+
+  const projectRoot = scaffoldProject(args)
+
+  if (args.install) {
+    console.log("\nInstalling dependencies...")
+    try {
+      execSync("npm install", { cwd: projectRoot, stdio: "inherit" })
+    } catch {
+      console.warn("\nWarning: npm install failed. Run `npm install` manually in the project directory.")
+    }
+  }
+
+  console.log(`
+Done! Created ${projectRoot}
+
+Next steps:
+  cd ${args.name}
+  npm run dev
+
+Edit pages.config.json and storefront.config.json, then rebuild with npm run storefront:build.
+`)
+}
+
+main()

package/lib/deps.js

@@ -0,0 +1,89 @@
+import {
+  COMMERCE_CORE_VERSION,
+  FRAMEWORK_VERSION,
+  COMPONENTS_VERSION,
+  FRAMEWORK_PACKAGES,
+  RUNTIME_DEPS,
+} from "./versions.js"
+
+function packageBaseName(pkg) {
+  if (!pkg.includes("/")) return pkg
+  const parts = pkg.split("/")
+  if (parts[0].startsWith("@") && parts.length >= 2) {
+    return `${parts[0]}/${parts[1]}`
+  }
+  return pkg
+}
+
+/** Mirror framework-compiler collectPackages for dependency resolution. */
+export function collectPackages(pages) {
+  const segments = new Set()
+  const layouts = new Set()
+  const workflows = new Set()
+
+  for (const page of pages) {
+    workflows.add(page.workflow)
+    layouts.add(packageBaseName(page.layout))
+    for (const s of page.segments) segments.add(s)
+  }
+
+  if (segments.has("@pradip1995/segment-product-grid")) {
+    segments.add("@pradip1995/segment-product-card")
+  }
+  if (
+    segments.has("@pradip1995/segment-new-arrivals") ||
+    segments.has("@pradip1995/segment-loved-by-moms") ||
+    segments.has("@pradip1995/segment-bestsellers-carousel") ||
+    segments.has("@pradip1995/segment-collections-showcase")
+  ) {
+    segments.add("@pradip1995/segment-product-card")
+  }
+
+  return {
+    segments: [...segments],
+    layouts: [...layouts],
+    workflows: [...workflows],
+  }
+}
+
+const CHROME_SEGMENTS = [
+  "@pradip1995/segment-nav",
+  "@pradip1995/segment-footer",
+  "@pradip1995/segment-promo-bar",
+]
+
+const BASE_COMPONENT_PACKAGES = [
+  "@pradip1995/segment-tokens",
+  "@pradip1995/segment-primitives",
+  "@pradip1995/segment-loader",
+  "@pradip1995/segment-assets",
+]
+
+/** Build package.json dependencies from pages.config.json content. */
+export function buildDependencies(pages) {
+  const { segments, layouts, workflows } = collectPackages(pages)
+  const deps = {
+    ...RUNTIME_DEPS,
+    "@pradip1995/commerce-core": COMMERCE_CORE_VERSION,
+  }
+
+  for (const name of FRAMEWORK_PACKAGES) {
+    deps[name] = FRAMEWORK_VERSION
+  }
+
+  for (const name of [
+    ...BASE_COMPONENT_PACKAGES,
+    ...CHROME_SEGMENTS,
+    ...layouts,
+    ...workflows,
+    ...segments,
+  ]) {
+    deps[name] = COMPONENTS_VERSION
+  }
+
+  if (segments.includes("@pradip1995/segment-google-login")) {
+    deps["@pradip1995/commerce-auth"] = "^4.0.0"
+  }
+
+  return deps
+}

package/lib/versions.js

@@ -0,0 +1,31 @@
+/** Published package semver ranges — bump when releasing framework/components. */
+export const COMMERCE_CORE_VERSION = "^4.0.0"
+export const FRAMEWORK_VERSION = "^0.2.0"
+export const COMPONENTS_VERSION = "^0.2.0"
+
+export const FRAMEWORK_PACKAGES = [
+  "@pradip1995/plugin-sdk",
+  "@pradip1995/framework-core",
+  "@pradip1995/framework-runtime",
+  "@pradip1995/framework-compiler",
+  "@pradip1995/medusa-connector",
+  "@pradip1995/workflow-home",
+  "@pradip1995/workflow-layout",
+  "@pradip1995/workflow-store",
+  "@pradip1995/workflow-product",
+  "@pradip1995/workflow-cart",
+  "@pradip1995/workflow-checkout",
+  "@pradip1995/workflow-account",
+  "@pradip1995/workflow-order",
+  "@pradip1995/workflow-wishlist",
+  "@pradip1995/workflow-help",
+]
+
+export const RUNTIME_DEPS = {
+  next: "15.3.8",
+  react: "19.0.3",
+  "react-dom": "19.0.3",
+  tailwindcss: "^3.4.17",
+  postcss: "^8.4.49",
+  autoprefixer: "^10.4.20",
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@pradip1995/create-storefront-app",
+  "version": "0.2.0",
+  "description": "Scaffold a segment-based Medusa storefront using @pradip1995/framework packages",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SmartByteLabs/storefront-framework.git",
+    "directory": "packages/create-storefront-app"
+  },
+  "bin": {
+    "create-storefront-app": "./bin/create-storefront-app.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "typecheck": "node --check bin/create-storefront-app.js && node --check lib/deps.js && node --check lib/versions.js"
+  }
+}

package/templates/full/pages.config.json

@@ -0,0 +1,102 @@
+[
+  {
+    "route": "/",
+    "workflow": "@pradip1995/workflow-home",
+    "layout": "@pradip1995/layout-default",
+    "segments": [
+      "@pradip1995/segment-hero",
+      "@pradip1995/segment-shop-by-category",
+      "@pradip1995/segment-new-arrivals",
+      "@pradip1995/segment-promotional-banners",
+      "@pradip1995/segment-collections-showcase",
+      "@pradip1995/segment-why-choose-us",
+      "@pradip1995/segment-bestsellers-carousel",
+      "@pradip1995/segment-reviews-marquee",
+      "@pradip1995/segment-features"
+    ],
+    "metadata": {
+      "title": "Home",
+      "description": "Welcome to our store"
+    }
+  },
+  {
+    "route": "/store",
+    "workflow": "@pradip1995/workflow-store",
+    "layout": "@pradip1995/layout-default/store",
+    "segments": [
+      "@pradip1995/segment-mobile-filters",
+      "@pradip1995/segment-refinement-list",
+      "@pradip1995/segment-product-grid"
+    ]
+  },
+  {
+    "route": "/products/[handle]",
+    "workflow": "@pradip1995/workflow-product",
+    "layout": "@pradip1995/layout-product",
+    "segments": [
+      "@pradip1995/segment-product-gallery",
+      "@pradip1995/segment-product-info",
+      "@pradip1995/segment-product-actions",
+      "@pradip1995/segment-related-products"
+    ]
+  },
+  {
+    "route": "/cart",
+    "workflow": "@pradip1995/workflow-cart",
+    "layout": "@pradip1995/layout-default/cart",
+    "segments": [
+      "@pradip1995/segment-cart-item",
+      "@pradip1995/segment-cart-summary"
+    ]
+  },
+  {
+    "route": "/checkout",
+    "workflow": "@pradip1995/workflow-checkout",
+    "layout": "@pradip1995/layout-checkout",
+    "segments": [
+      "@pradip1995/segment-checkout-form",
+      "@pradip1995/segment-checkout-summary"
+    ]
+  },
+  {
+    "route": "/account/*",
+    "workflow": "@pradip1995/workflow-account",
+    "layout": "@pradip1995/layout-account",
+    "segments": [
+      "@pradip1995/segment-login-template",
+      "@pradip1995/segment-google-login"
+    ]
+  },
+  {
+    "route": "/wishlist",
+    "workflow": "@pradip1995/workflow-wishlist",
+    "layout": "@pradip1995/layout-default/wishlist",
+    "segments": ["@pradip1995/segment-wishlist"],
+    "metadata": {
+      "title": "Wishlist",
+      "description": "Your saved items"
+    }
+  },
+  {
+    "route": "/help",
+    "workflow": "@pradip1995/workflow-help",
+    "layout": "@pradip1995/layout-default",
+    "segments": ["@pradip1995/segment-help"],
+    "metadata": {
+      "title": "Help & FAQs",
+      "description": "Get answers to your questions and contact our support team"
+    }
+  },
+  {
+    "route": "/orders/[id]",
+    "workflow": "@pradip1995/workflow-order",
+    "layout": "@pradip1995/layout-default",
+    "segments": ["@pradip1995/segment-order-details"]
+  },
+  {
+    "route": "/order/[id]/confirmed",
+    "workflow": "@pradip1995/workflow-order",
+    "layout": "@pradip1995/layout-default",
+    "segments": ["@pradip1995/segment-order-details"]
+  }
+]

package/templates/minimal/pages.config.json

@@ -0,0 +1,65 @@
+[
+  {
+    "route": "/",
+    "workflow": "@pradip1995/workflow-home",
+    "layout": "@pradip1995/layout-default",
+    "segments": [
+      "@pradip1995/segment-hero",
+      "@pradip1995/segment-shop-by-category",
+      "@pradip1995/segment-new-arrivals",
+      "@pradip1995/segment-features"
+    ],
+    "metadata": {
+      "title": "Home",
+      "description": "Welcome to our store"
+    }
+  },
+  {
+    "route": "/store",
+    "workflow": "@pradip1995/workflow-store",
+    "layout": "@pradip1995/layout-default/store",
+    "segments": [
+      "@pradip1995/segment-mobile-filters",
+      "@pradip1995/segment-refinement-list",
+      "@pradip1995/segment-product-grid"
+    ]
+  },
+  {
+    "route": "/products/[handle]",
+    "workflow": "@pradip1995/workflow-product",
+    "layout": "@pradip1995/layout-product",
+    "segments": [
+      "@pradip1995/segment-product-gallery",
+      "@pradip1995/segment-product-info",
+      "@pradip1995/segment-product-actions",
+      "@pradip1995/segment-related-products"
+    ]
+  },
+  {
+    "route": "/cart",
+    "workflow": "@pradip1995/workflow-cart",
+    "layout": "@pradip1995/layout-default/cart",
+    "segments": [
+      "@pradip1995/segment-cart-item",
+      "@pradip1995/segment-cart-summary"
+    ]
+  },
+  {
+    "route": "/checkout",
+    "workflow": "@pradip1995/workflow-checkout",
+    "layout": "@pradip1995/layout-checkout",
+    "segments": [
+      "@pradip1995/segment-checkout-form",
+      "@pradip1995/segment-checkout-summary"
+    ]
+  },
+  {
+    "route": "/account/*",
+    "workflow": "@pradip1995/workflow-account",
+    "layout": "@pradip1995/layout-account",
+    "segments": [
+      "@pradip1995/segment-login-template",
+      "@pradip1995/segment-google-login"
+    ]
+  }
+]

package/templates/shared/env.example

@@ -0,0 +1,14 @@
+# Medusa backend
+MEDUSA_BACKEND_URL={{BACKEND_URL}}
+NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY={{PUBLISHABLE_KEY}}
+NEXT_PUBLIC_MEDUSA_BACKEND_URL={{BACKEND_URL}}
+NEXT_PUBLIC_BASE_URL={{BASE_URL}}
+NEXT_PUBLIC_DEFAULT_REGION={{DEFAULT_REGION}}
+NEXT_PUBLIC_STOREFRONT_THEME={{THEME}}
+
+# Payments (Razorpay test — replace for production)
+# NEXT_PUBLIC_RAZORPAY_KEY=
+
+# Google OAuth — client ID must match backend GOOGLE_CLIENT_ID
+# NEXT_PUBLIC_GOOGLE_CLIENT_ID=
+# NEXT_PUBLIC_GOOGLE_OAUTH_CALLBACK_URL={{BASE_URL}}/auth/customer/google/callback

package/templates/shared/gitignore

@@ -0,0 +1,8 @@
+node_modules
+.generated-app
+.next
+.turbo
+*.tsbuildinfo
+.env
+.env.local
+.DS_Store

package/templates/shared/npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

package/templates/shared/public/README.md

@@ -0,0 +1,6 @@
+# Store assets
+
+Place brand logos and static files here. Files in `public/` are copied into the generated Next.js app at build time.
+
+- `Logo.png` — used in nav/footer when configured
+- Override segment assets by adding files with the same path as in `@pradip1995/segment-assets`

package/templates/shared/storefront.config.json

@@ -0,0 +1,8 @@
+{
+  "theme": "valero",
+  "defaultCountryCode": "in",
+  "loader": {
+    "variant": "spinner",
+    "enabled": true
+  }
+}