@deneb-ui/create-template 2.0.0

package/README.md

@@ -0,0 +1,65 @@
+# @fivora/create-template
+
+Scaffold a modern, pre-validated **Fivora** template in seconds (Vite-style initializer).
+
+[![npm version](https://img.shields.io/npm/v/@fivora/create-template.svg)](https://www.npmjs.com/package/@fivora/create-template)
+[![License: MIT](https://img.shields.io/badge/License-MIT-teal.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## Quick Start
+
+Create a new Fivora template with a single command:
+
+```bash
+# Using npm
+npm create @fivora/template my-store
+
+# Or using npx
+npx @fivora/create-template my-store
+
+# Or yarn / pnpm
+yarn create @fivora/template my-store
+pnpm create @fivora/template my-store
+```
+
+Then start developing:
+
+```bash
+cd my-store
+npm install
+npm run dev       # Start Next.js local development
+npm run lab       # Test in Fivora Visual Editing Lab
+npm run validate  # Run Fivora preflight compliance checks
+npm run zip       # Create upload-ready clean ZIP
+```
+
+---
+
+## What is Included?
+
+Each generated template comes pre-configured with:
+- ⚡ **Next.js App Router**: Modern React 19 / Next.js with static HTML export support
+- 🎨 **`@fivora/editable-components`**: Pre-configured visual editing primitives and theme palettes
+- 🛠️ **`@fivora/cli`**: Built-in developer tools (`lab`, `validate`, `zip`)
+- 📋 **`fivora-template.json`**: Strict Version 2 template manifest
+- 📦 **`src/data/site-data.json`**: Merchant defaults and editable content structure
+
+---
+
+## Command Options
+
+```bash
+npx @fivora/create-template <project-name> [options]
+```
+
+| Option | Description |
+| :--- | :--- |
+| `<project-name>` | Target directory name (e.g. `my-fashion-store`) |
+| `--skip-install` | Do not run `npm install` automatically after scaffolding |
+
+---
+
+## License
+
+MIT © [Fivora](https://fivora.com)

package/bin/index.js

@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+
+const path = require('node:path');
+const fs = require('node:fs');
+const readline = require('node:readline');
+
+const args = process.argv.slice(2);
+let targetDirInput = args[0];
+
+function printBanner() {
+  console.log(`
+  \x1b[36m╔═══════════════════════════════════════════════════════╗
+  ║              \x1b[1mDENEB TEMPLATE CREATOR\x1b[0m\x1b[36m                  ║
+  ║       \x1b[90mScaffold a fast, compliant commerce template\x1b[0m\x1b[36m    ║
+  ║     \x1b[90mCreated by Chamika Gayashan (CEE G)\x1b[0m\x1b[36m      ║
+  ╚═══════════════════════════════════════════════════════╝\x1b[0m
+`);
+}
+
+function copyFolderSync(src, dest) {
+  if (!fs.existsSync(dest)) {
+    fs.mkdirSync(dest, { recursive: true });
+  }
+
+  const entries = fs.readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyFolderSync(srcPath, destPath);
+    } else if (entry.isFile()) {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+function runScaffolding(targetInput) {
+  const targetPath = path.resolve(process.cwd(), targetInput.trim());
+  const folderName = path.basename(targetPath);
+  const sanitizedPkgName = folderName.toLowerCase().replace(/[^a-z0-9_-]/g, '-');
+  const templateDir = path.resolve(__dirname, '..', 'template');
+
+  if (!fs.existsSync(templateDir)) {
+    console.error(`\n\x1b[31mError:\x1b[0m Template directory not found at ${templateDir}`);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(targetPath) && fs.readdirSync(targetPath).length > 0) {
+    console.error(`\n\x1b[31mError:\x1b[0m Target folder "${folderName}" already exists and is not empty.\n`);
+    process.exit(1);
+  }
+
+  console.log(`\n\x1b[32mCreating DENEB template in:\x1b[0m ${targetPath}...\n`);
+  copyFolderSync(templateDir, targetPath);
+
+  // Restore .gitignore if preserved as _gitignore
+  const gitignorePath = path.join(targetPath, '_gitignore');
+  if (fs.existsSync(gitignorePath)) {
+    fs.renameSync(gitignorePath, path.join(targetPath, '.gitignore'));
+  }
+
+  // Update package.json name
+  const pkgPath = path.join(targetPath, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    try {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+      pkg.name = sanitizedPkgName;
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    } catch {
+      // ignore
+    }
+  }
+
+  console.log(`\x1b[32m✔ Template structure created!\x1b[0m`);
+  console.log(`  \x1b[90m- Pre-configured @deneb-ui/ui (Visual editing & smart template components)\x1b[0m`);
+  console.log(`  \x1b[90m- Pre-configured @deneb-ui/cli (lab, validate, zip tools)\x1b[0m\n`);
+
+  const skipInstall = process.argv.includes('--skip-install');
+
+  if (!skipInstall) {
+    console.log(`📦 Installing dependencies with npm (this may take a minute)...`);
+    try {
+      const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+      const installRes = require('node:child_process').spawnSync(npmCmd, ['install'], {
+        cwd: targetPath,
+        stdio: 'inherit',
+      });
+
+      if (installRes.status === 0) {
+        console.log(`\n\x1b[32m✔ All dependencies and DENEB UI packages installed successfully!\x1b[0m\n`);
+      } else {
+        console.log(`\n\x1b[33mNote: npm install exited with code ${installRes.status}. You can run 'npm install' inside the folder manually.\x1b[0m\n`);
+      }
+    } catch {
+      console.log(`\n\x1b[33mNote: Could not run npm install automatically. Run 'npm install' inside the folder.\x1b[0m\n`);
+    }
+  }
+
+  console.log(`Ready to develop! Run:`);
+  console.log(`  \x1b[36mcd ${folderName}\x1b[0m`);
+  if (skipInstall) {
+    console.log(`  \x1b[36mnpm install\x1b[0m`);
+  }
+  console.log(`  \x1b[36mnpm run dev\x1b[0m       \x1b[90m# Start local Next.js development\x1b[0m`);
+  console.log(`  \x1b[36mnpm run lab\x1b[0m       \x1b[90m# Start Visual Editing Lab\x1b[0m`);
+  console.log(`  \x1b[36mnpm run validate\x1b[0m  \x1b[90m# Verify contract compliance\x1b[0m`);
+  console.log(`  \x1b[36mnpm run zip\x1b[0m       \x1b[90m# Package clean ZIP for 1-click upload\x1b[0m\n`);
+  console.log(`Happy coding with DENEB UI! 🚀\n`);
+}
+
+printBanner();
+
+if (targetDirInput) {
+  runScaffolding(targetDirInput);
+} else {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  rl.question('Project name (e.g. my-deneb-store): ', (answer) => {
+    rl.close();
+    const name = answer.trim() || 'deneb-template';
+    runScaffolding(name);
+  });
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@deneb-ui/create-template",
+  "version": "2.0.0",
+  "description": "Scaffold a modern, pre-validated DENEB UI storefront template in seconds. Created by Chamika Gayashan (CEE G).",
+  "bin": {
+    "create-deneb-template": "bin/index.js",
+    "create-deneb": "bin/index.js",
+    "create-fivora-template": "bin/index.js",
+    "create-fivora": "bin/index.js",
+    "create-template": "bin/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "bin",
+    "template",
+    "README.md"
+  ],
+  "scripts": {
+    "sync-template": "node ./scripts/sync-template.js",
+    "prepublishOnly": "npm run sync-template"
+  },
+  "keywords": [
+    "deneb",
+    "deneb-ui",
+    "fivora",
+    "create",
+    "template",
+    "scaffold",
+    "nextjs",
+    "react"
+  ],
+  "author": "Chamika Gayashan (CEE G)",
+  "license": "MIT",
+  "dependencies": {}
+}

package/template/README.md

@@ -0,0 +1,126 @@
+# Fivora Store Template
+
+A high-performance, conversion-engineered e-commerce storefront built with **Next.js (App Router)** and **`@fivora/editable-components`**, ready for **Fivora**.
+
+---
+
+## Quick Start
+
+### 1. Install Dependencies
+```bash
+npm install
+```
+
+### 2. Start Local Development
+```bash
+npm run dev
+```
+Open [http://localhost:3000](http://localhost:3000) in your browser to view your store.
+
+---
+
+## Developer Commands
+
+This template is pre-configured with official Fivora developer tools:
+
+| Command | Description |
+| :--- | :--- |
+| **`npm run dev`** | Starts the Next.js local development server with hot reload |
+| **`npm run lab`** | Launches the **Fivora Visual Editing Lab** to test live merchant editing |
+| **`npm run validate`** | Runs strict preflight compliance checks against Fivora contract rules |
+| **`npm run zip`** | Packages your template into a clean, upload-ready `.zip` archive |
+| **`npm run build`** | Generates the static production export in the `out/` directory |
+
+---
+
+## Project Structure
+
+```text
+├── fivora-template.json       # Fivora template manifest (Version 2 strict contract)
+├── package.json               # Dependencies and Fivora scripts
+├── next.config.ts             # Next.js configuration (static export enabled)
+├── src/
+│   ├── app/                   # Next.js App Router pages (Home, About, Services, Contact)
+│   │   ├── page.tsx           # Home page
+│   │   ├── about_us/          # About Us route
+│   │   ├── services/          # Services route
+│   │   └── contact/           # Contact form (integrated with Fivora endpoint)
+│   ├── components/            # Reusable UI components & layouts
+│   ├── data/
+│   │   └── site-data.json     # Merchant defaults, theme colors, navigation, & site content
+│   └── lib/                   # Site data context & live preview bridge
+└── public/                    # Static assets & logos
+```
+
+---
+
+## How Visual Editing Works
+
+Fivora allows merchants to click and visually edit any text, image, or product on their website.
+
+To make an element visually editable, use **`data-preview-field-path`** pointing to its key in `src/data/site-data.json`:
+
+```tsx
+import { EditableHeading, EditableText } from '@fivora/editable-components';
+
+// In your component:
+<EditableHeading
+  level={1}
+  data-preview-field-path="home.heroTitle"
+  defaultValue={content.home.heroTitle}
+/>
+```
+
+When you run **`npm run lab`**, you can click directly on any element with a `data-preview-field-path` to test editing in real-time.
+
+---
+
+## How to Customize
+
+### 1. Change Theme & Colors
+Edit `src/data/site-data.json` under `template.structure.theme`:
+```json
+"theme": {
+  "primaryColor": "#016a7e",
+  "secondaryColor": "#0a1931",
+  "accentColor": "#00adb5",
+  "backgroundColor": "#ffffff",
+  "textColor": "#0f172a",
+  "headingFont": "Inter",
+  "bodyFont": "Inter"
+}
+```
+
+### 2. Add New Pages or Routes
+1. Create your page route in `src/app/your-page/page.tsx`.
+2. Declare the page in `fivora-template.json` under `"pages"`:
+   ```json
+   { "id": "your_page", "label": "Your Page", "route": "/your-page" }
+   ```
+3. Add the page content to `src/data/site-data.json`.
+
+---
+
+## Packaging for Fivora
+
+When your template design is ready:
+
+1. **Validate Compliance:**
+   ```bash
+   npm run validate
+   ```
+   Ensures all preview markers, empty states, and required routes pass the Fivora preflight contract.
+
+2. **Generate Upload ZIP:**
+   ```bash
+   npm run zip
+   ```
+   This generates a clean `fivora-template.zip` in your root folder with all cache, build, and `node_modules` files automatically excluded.
+
+3. **Upload:** Go to your **Fivora Merchant/Developer Portal** and upload `fivora-template.zip`.
+
+---
+
+## License
+
+MIT © [Fivora](https://fivora.com)

package/template/_gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.next/
+out/
+.cache/
+.turbo/
+dist/
+build/
+coverage/
+.env*
+*.log
+*.tsbuildinfo
+*.zip
+.DS_Store

package/template/eslint.config.mjs

@@ -0,0 +1,13 @@
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const currentDirectory = dirname(fileURLToPath(import.meta.url));
+const compat = new FlatCompat({ baseDirectory: currentDirectory });
+
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals'),
+  { rules: { '@next/next/no-img-element': 'off' } },
+];
+
+export default eslintConfig;

package/template/fivora-template.json

@@ -0,0 +1,259 @@
+{
+  "framework": "nextjs-static-export",
+  "version": 2,
+  "visualEditing": {
+    "contractVersion": 1,
+    "mode": "strict",
+    "controlOnlyPaths": ["services[*].id"]
+  },
+  "siteDataFile": "src/data/site-data.json",
+  "outputDirectory": "out",
+  "installCommand": "npm install",
+  "buildCommand": "npm run build",
+  "basePathEnvVar": "NEXT_PUBLIC_SITE_BASE_PATH",
+  "pages": [
+    { "id": "home", "label": "Home", "route": "/", "required": true },
+    { "id": "about_us", "label": "About Us", "route": "/about_us" },
+    { "id": "services", "label": "Services", "route": "/services" },
+    {
+      "id": "contact",
+      "label": "Contact",
+      "route": "/contact",
+      "required": true
+    }
+  ],
+  "editorSchema": {
+    "version": 1,
+    "sections": [
+      {
+        "id": "common",
+        "path": "common",
+        "type": "object",
+        "label": "Shared Website Content",
+        "fields": [
+          {
+            "key": "websiteTitle",
+            "type": "text",
+            "label": "Website title",
+            "required": true
+          },
+          {
+            "key": "shortDescription",
+            "type": "textarea",
+            "label": "Short description"
+          },
+          {
+            "key": "logoUrl",
+            "type": "image",
+            "label": "Website logo",
+            "recommendedWidth": 512,
+            "recommendedHeight": 512
+          },
+          {
+            "key": "headerCtaLabel",
+            "type": "text",
+            "label": "Header contact button"
+          },
+          {
+            "key": "navLabels",
+            "type": "object",
+            "label": "Navigation labels",
+            "fields": [
+              { "key": "home", "type": "text", "label": "Home label" },
+              { "key": "about_us", "type": "text", "label": "About label" },
+              { "key": "services", "type": "text", "label": "Services label" },
+              { "key": "contact", "type": "text", "label": "Contact label" }
+            ]
+          },
+          { "key": "footerHeading", "type": "text", "label": "Footer heading" },
+          { "key": "copyright", "type": "text", "label": "Copyright" }
+        ]
+      },
+      {
+        "id": "home",
+        "path": "home",
+        "pageKey": "home",
+        "type": "object",
+        "label": "Home Page",
+        "fields": [
+          { "key": "heroEyebrow", "type": "text", "label": "Hero eyebrow" },
+          {
+            "key": "heroTitle",
+            "type": "text",
+            "label": "Hero title",
+            "required": true
+          },
+          { "key": "heroSummary", "type": "textarea", "label": "Hero summary" },
+          {
+            "key": "bannerImageUrl",
+            "type": "image",
+            "label": "Hero image",
+            "recommendedWidth": 1600,
+            "recommendedHeight": 900
+          },
+          {
+            "key": "primaryCtaLabel",
+            "type": "text",
+            "label": "Contact button"
+          },
+          {
+            "key": "secondaryCtaLabel",
+            "type": "text",
+            "label": "About button"
+          },
+          {
+            "key": "introTitle",
+            "type": "text",
+            "label": "Introduction title"
+          },
+          {
+            "key": "introBody",
+            "type": "textarea",
+            "label": "Introduction body"
+          },
+          {
+            "key": "featuresHeading",
+            "type": "text",
+            "label": "Features heading"
+          },
+          {
+            "key": "features",
+            "type": "list",
+            "label": "Features",
+            "minItems": 0,
+            "maxItems": 8,
+            "fields": [
+              {
+                "key": "title",
+                "type": "text",
+                "label": "Title",
+                "required": true
+              },
+              { "key": "body", "type": "textarea", "label": "Description" }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "about",
+        "path": "about",
+        "pageKey": "about_us",
+        "type": "object",
+        "label": "About Page",
+        "fields": [
+          {
+            "key": "heading",
+            "type": "text",
+            "label": "Heading",
+            "required": true
+          },
+          { "key": "body", "type": "textarea", "label": "About text" },
+          {
+            "key": "imageUrl",
+            "type": "image",
+            "label": "About image",
+            "recommendedWidth": 1200,
+            "recommendedHeight": 900
+          }
+        ]
+      },
+      {
+        "id": "servicesPage",
+        "path": "servicesPage",
+        "pageKey": "services",
+        "type": "object",
+        "label": "Services Page",
+        "fields": [
+          {
+            "key": "heading",
+            "type": "text",
+            "label": "Heading",
+            "required": true
+          },
+          { "key": "intro", "type": "textarea", "label": "Introduction" }
+        ]
+      },
+      {
+        "id": "services",
+        "path": "services",
+        "pageKey": "services",
+        "type": "list",
+        "label": "Services",
+        "minItems": 0,
+        "maxItems": 12,
+        "fields": [
+          { "key": "id", "type": "text", "label": "System ID" },
+          { "key": "name", "type": "text", "label": "Name", "required": true },
+          { "key": "description", "type": "textarea", "label": "Description" },
+          {
+            "key": "imageUrl",
+            "type": "image",
+            "label": "Image",
+            "recommendedWidth": 800,
+            "recommendedHeight": 600
+          },
+          {
+            "key": "features",
+            "type": "list",
+            "label": "Included features",
+            "itemField": { "type": "text", "label": "Feature" }
+          }
+        ]
+      },
+      {
+        "id": "contact",
+        "path": "contact",
+        "pageKey": "contact",
+        "type": "object",
+        "label": "Contact Page",
+        "fields": [
+          {
+            "key": "heading",
+            "type": "text",
+            "label": "Heading",
+            "required": true
+          },
+          { "key": "intro", "type": "textarea", "label": "Introduction" },
+          { "key": "phone", "type": "tel", "label": "Phone" },
+          { "key": "email", "type": "email", "label": "Email" },
+          { "key": "address", "type": "textarea", "label": "Address" },
+          { "key": "formTitle", "type": "text", "label": "Form heading" },
+          { "key": "submitLabel", "type": "text", "label": "Submit button" }
+        ]
+      }
+    ]
+  },
+  "themeSchema": {
+    "version": 1,
+    "tokens": [
+      "colors.primary",
+      "colors.secondary",
+      "colors.accent",
+      "colors.background",
+      "colors.text",
+      "typography.headingFont",
+      "typography.bodyFont",
+      "typography.baseSize",
+      "spacing.heroMinHeight",
+      "spacing.sectionPadding"
+    ],
+    "defaults": {
+      "colors": {
+        "primary": "#2563eb",
+        "secondary": "#0f172a",
+        "accent": "#14b8a6",
+        "background": "#ffffff",
+        "text": "#0f172a"
+      },
+      "typography": {
+        "headingFont": "Inter",
+        "bodyFont": "Inter",
+        "baseSize": "16px"
+      },
+      "spacing": {
+        "heroMinHeight": "72vh",
+        "sectionPadding": "5rem"
+      }
+    }
+  }
+}

package/template/next-env.d.ts

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

package/template/next.config.ts

@@ -0,0 +1,17 @@
+import type { NextConfig } from 'next';
+
+const basePath = (process.env.NEXT_PUBLIC_SITE_BASE_PATH ?? '').replace(
+  /\/$/,
+  '',
+);
+
+const nextConfig: NextConfig = {
+  output: 'export',
+  trailingSlash: true,
+  outputFileTracingRoot: process.cwd(),
+  basePath,
+  assetPrefix: basePath || undefined,
+  images: { unoptimized: true },
+};
+
+export default nextConfig;