@deneb-ui/create-template 2.0.0

package/template/src/app/page.tsx

@@ -0,0 +1,244 @@
+'use client';
+
+import {
+  contentList,
+  contentObject,
+  contentText,
+  useSiteData,
+} from '@/lib/siteDataContext';
+import { pageRoute, withBasePath } from '@/lib/utils';
+import {
+  EditableText,
+  EditableImage,
+  EditableList,
+  EditableCard,
+  EditableBox,
+  EditableGrid,
+} from '@deneb-ui/ui';
+
+
+function navigate(pageKey: string) {
+  window.location.href = withBasePath(pageRoute(pageKey));
+}
+
+export default function HomePage() {
+  const siteData = useSiteData();
+  const content = contentObject(siteData.content);
+  const home = contentObject(content.home);
+  const features = contentList(home.features);
+  const selectedPages =
+    siteData.requirements?.requiredPages ??
+    siteData.template?.structure?.pages ??
+    [];
+
+  return (
+    <div data-preview-page-key="home">
+      <section className="hero" data-design-section="home-hero">
+        <div className="hero-copy">
+          <EditableText
+            variant="eyebrow"
+            color="primary"
+            className="eyebrow"
+            data-preview-field-path="home.heroEyebrow"
+            defaultValue={contentText(home.heroEyebrow)}
+          />
+          <EditableText
+            variant="h1"
+            size="5xl"
+            weight="bold"
+            align="left"
+            color="heading"
+            data-preview-field-path="home.heroTitle"
+            defaultValue={contentText(home.heroTitle)}
+          />
+          <EditableText
+            variant="lead"
+            color="muted"
+            data-preview-field-path="home.heroSummary"
+            defaultValue={contentText(home.heroSummary)}
+          />
+          <div className="cta-row">
+            {selectedPages.includes('contact') ? (
+              <button
+                type="button"
+                data-target-page="contact"
+                className="button-primary"
+                onClick={() => navigate('contact')}
+              >
+                <span data-preview-field-path="home.primaryCtaLabel">
+                  {contentText(home.primaryCtaLabel)}
+                </span>
+              </button>
+            ) : (
+              <span
+                data-target-page="contact"
+                className="button-primary unavailable"
+                data-preview-field-path="home.primaryCtaLabel"
+              >
+                {contentText(home.primaryCtaLabel)}
+              </span>
+            )}
+            {selectedPages.includes('about_us') ? (
+              <button
+                type="button"
+                data-target-page="about_us"
+                className="button-secondary"
+                onClick={() => navigate('about_us')}
+              >
+                <span data-preview-field-path="home.secondaryCtaLabel">
+                  {contentText(home.secondaryCtaLabel)}
+                </span>
+              </button>
+            ) : (
+              <span
+                data-target-page="about_us"
+                className="button-secondary unavailable"
+                data-preview-field-path="home.secondaryCtaLabel"
+              >
+                {contentText(home.secondaryCtaLabel)}
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="hero-fivora-wrap">
+          <img
+            className="hero-image"
+            src={withBasePath(
+              contentText(home.bannerImageUrl) || '/fivora-icon.svg',
+            )}
+            alt="Fivora"
+            data-preview-field-path="home.bannerImageUrl"
+          />
+        </div>
+      </section>
+
+      <section
+        className="page-section dev-guide-section"
+        data-design-section="home-developer-guide"
+      >
+        <div className="dev-guide-header">
+          <span className="dev-badge" data-preview-static="dev-guidance">
+            ⚡ Template Developer Quickstart
+          </span>
+          <h2 data-preview-static="dev-guidance">
+            Build, Test, and Package with Fivora
+          </h2>
+          <p data-preview-static="dev-guidance">
+            Run these commands directly in your template terminal:
+          </p>
+        </div>
+
+        <div className="dev-command-grid">
+          <div className="dev-cmd-card">
+            <div className="cmd-header">
+              <span className="cmd-tag" data-preview-static="dev-tag">Development</span>
+              <code data-preview-static="dev-command">npm run dev</code>
+            </div>
+            <p data-preview-static="dev-description">Hot-reloading local development with Next.js &amp; React 19.</p>
+          </div>
+
+          <div className="dev-cmd-card">
+            <div className="cmd-header">
+              <span className="cmd-tag" data-preview-static="dev-tag">Simulate</span>
+              <code data-preview-static="dev-command">npm run lab</code>
+            </div>
+            <p data-preview-static="dev-description">Visual Editing Lab simulating merchant field clicks &amp; edits.</p>
+          </div>
+
+          <div className="dev-cmd-card">
+            <div className="cmd-header">
+              <span className="cmd-tag" data-preview-static="dev-tag">Compliance</span>
+              <code data-preview-static="dev-command">npm run validate</code>
+            </div>
+            <p data-preview-static="dev-description">Runs fivora preflight contract tests &amp; empty states.</p>
+          </div>
+
+          <div className="dev-cmd-card">
+            <div className="cmd-header">
+              <span className="cmd-tag" data-preview-static="dev-tag">1-Click Upload</span>
+              <code data-preview-static="dev-command">npm run zip</code>
+            </div>
+            <p data-preview-static="dev-description">Automatically packages clean ZIP excluding caches &amp; junk files.</p>
+          </div>
+        </div>
+      </section>
+
+      <section
+        className="page-section"
+        data-design-section="home-introduction"
+      >
+        <div className="home-intro-copy">
+          <EditableText
+            variant="h2"
+            size="3xl"
+            weight="bold"
+            align="center"
+            color="heading"
+            data-preview-field-path="home.introTitle"
+            defaultValue={contentText(home.introTitle)}
+          />
+          <EditableText
+            variant="lead"
+            align="center"
+            color="muted"
+            data-preview-field-path="home.introBody"
+            defaultValue={contentText(home.introBody)}
+          />
+        </div>
+      </section>
+
+      <section
+        className="page-section alt"
+        data-design-section="home-features"
+      >
+        <div className="section-header">
+          <EditableText
+            variant="h2"
+            size="3xl"
+            weight="bold"
+            align="center"
+            color="heading"
+            className="section-title"
+            data-preview-field-path="home.featuresHeading"
+            defaultValue={contentText(home.featuresHeading)}
+          />
+        </div>
+        <EditableList
+          data-preview-list-path="home.features"
+          items={features}
+          className="card-grid"
+          itemAs={false}
+        >
+          {(rawFeature, index) => {
+            const feature = contentObject(rawFeature);
+            return (
+              <EditableCard
+                className="card"
+                key={index}
+                itemPath={`home.features[${index}]`}
+                data-preview-item-path={`home.features[${index}]`}
+                item={feature as any}
+                balance
+                minHeight="220px"
+                radius="16px"
+              >
+                <EditableText
+                  variant="h3"
+                  color="heading"
+                  data-preview-field-path={`home.features[${index}].title`}
+                  defaultValue={contentText(feature.title)}
+                />
+                <EditableText
+                  variant="p"
+                  color="muted"
+                  data-preview-field-path={`home.features[${index}].body`}
+                  defaultValue={contentText(feature.body)}
+                />
+              </EditableCard>
+            );
+          }}
+        </EditableList>
+      </section>
+    </div>
+  );
+}

package/template/src/app/services/page.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { contentList, contentObject, contentText, useSiteData } from '@/lib/siteDataContext';
+import { withBasePath } from '@/lib/utils';
+
+export default function ServicesPage() {
+  const siteData = useSiteData();
+  const content = contentObject(siteData.content);
+  const page = contentObject(content.servicesPage);
+  const services = contentList(content.services);
+
+  return (
+    <div data-preview-page-key="services">
+      <section className="page-section page-heading" data-design-section="services-heading">
+        <h1 data-preview-field-path="servicesPage.heading">{contentText(page.heading)}</h1>
+        <p data-preview-field-path="servicesPage.intro">{contentText(page.intro)}</p>
+      </section>
+      <section className="page-section alt" data-design-section="services-list">
+        <div className="card-grid" data-preview-list-path="services">
+          {services.map((rawService, index) => {
+            const service = contentObject(rawService);
+            const features = contentList(service.features);
+            return (
+              <article className="card" key={contentText(service.id) || index} data-preview-item-path={`services[${index}]`}>
+                <img
+                  className="card-image"
+                  src={withBasePath(contentText(service.imageUrl) || '/placeholder.svg')}
+                  alt=""
+                  data-preview-field-path={`services[${index}].imageUrl`}
+                />
+                <h2 data-preview-field-path={`services[${index}].name`}>{contentText(service.name)}</h2>
+                <p data-preview-field-path={`services[${index}].description`}>{contentText(service.description)}</p>
+                <ul data-preview-list-path={`services[${index}].features`}>
+                  {features.map((feature, featureIndex) => (
+                    <li
+                      key={featureIndex}
+                      data-preview-item-path={`services[${index}].features[${featureIndex}]`}
+                      data-preview-field-path={`services[${index}].features[${featureIndex}]`}
+                    >
+                      {contentText(feature)}
+                    </li>
+                  ))}
+                </ul>
+              </article>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}

package/template/src/components/SiteChrome.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { usePathname } from 'next/navigation';
+import { useSiteData } from '@/lib/siteDataContext';
+import { Navbar, Footer, getThemeCssProperties } from '@deneb-ui/ui';
+
+export default function SiteChrome({ children }: { children: ReactNode }) {
+  const siteData = useSiteData();
+  const pathname = usePathname();
+  const themeStyle = getThemeCssProperties(
+    siteData?.template?.structure?.theme as any,
+  );
+
+  return (
+    <div className="site-shell" style={themeStyle}>
+      <Navbar activeRoute={pathname} />
+      <main>{children}</main>
+      <Footer />
+    </div>
+  );
+}

package/template/src/data/site-data.json

@@ -0,0 +1,99 @@
+{
+  "project": { "id": "starter-demo", "title": "Fivora Starter Demo", "status": "APPROVED" },
+  "merchant": {
+    "businessName": "Fivora Store",
+    "description": "A modern high-converting digital storefront built on the Fivora platform."
+  },
+  "template": {
+    "id": "starter-template",
+    "name": "Fivora Starter",
+    "engine": "NEXT_STATIC_EXPORT",
+    "structure": {
+      "pages": ["home", "about_us", "services", "contact"],
+      "theme": {
+        "primaryColor": "#016a7e",
+        "secondaryColor": "#0a1931",
+        "accentColor": "#00adb5",
+        "backgroundColor": "#ffffff",
+        "textColor": "#0f172a",
+        "headingFont": "Inter",
+        "bodyFont": "Inter",
+        "baseSize": "16px",
+        "heroMinHeight": "72vh",
+        "sectionPadding": "5rem"
+      }
+    }
+  },
+  "requirements": {
+    "requiredPages": ["home", "about_us", "services", "contact"],
+    "requiredFeatures": []
+  },
+  "content": {
+    "common": {
+      "websiteTitle": "Fivora Store",
+      "shortDescription": "Next-generation commerce templates built for the Fivora with reusable components and strict visual editing.",
+      "logoUrl": "/fivora-logo.png",
+      "headerCtaLabel": "Contact Us",
+      "navLabels": {
+        "home": "Home",
+        "about_us": "About",
+        "services": "Services",
+        "contact": "Contact"
+      },
+      "footerHeading": "Build something extraordinary with Fivora.",
+      "copyright": "Fivora. All rights reserved."
+    },
+    "home": {
+      "heroEyebrow": "⚡ Fivora Template Starter",
+      "heroTitle": "Design Stores That Captivate",
+      "heroSummary": "Built with @fivora/editable-components. Hot-reload locally, simulate merchant visual editing in the Lab, validate preflight contracts, and package with 1-click.",
+      "bannerImageUrl": "/fivora-icon.svg",
+      "primaryCtaLabel": "Explore Services",
+      "secondaryCtaLabel": "About This Starter",
+      "introTitle": "Engineered for high conversion and effortless editing",
+      "introBody": "Every editable value comes directly from Fivora site data with auto-balancing layouts, responsive typography, and strict contract validation out of the box.",
+      "featuresHeading": "Why build with the Fivora Authoring Kit?",
+      "features": [
+        { "title": "Auto-Balancing Layouts", "body": "Cards, grids, and containers automatically balance and fill space seamlessly across all screen sizes." },
+        { "title": "Strict Visual Editing", "body": "Direct bindings enable merchants to click, edit, and preview changes without breaking template styles." },
+        { "title": "1-Click Clean Packaging", "body": "Built-in zip command strips heavy caches, node_modules, and git files so uploads pass instantly." }
+      ]
+    },
+    "about": {
+      "heading": "Built for the next generation of online storefronts",
+      "body": "The Fivora connects businesses with high-converting, beautifully crafted templates. This starter template demonstrates clean monorepo architecture, responsive typography, and auto-balancing components.",
+      "imageUrl": "/placeholder.svg"
+    },
+    "servicesPage": {
+      "heading": "Template Services & Capabilities",
+      "intro": "Each service card is an atomic component featuring an image, heading, description, and repeatable checklist."
+    },
+    "services": [
+      {
+        "id": "visual-editing",
+        "name": "Visual Editing Lab",
+        "description": "Simulate how merchants customize your template in real time with the built-in local development lab.",
+        "imageUrl": "/placeholder.svg",
+        "features": ["Zero-server static preview", "Field focus bridge", "Instant feedback"]
+      },
+      {
+        "id": "clean-packaging",
+        "name": "Automated Packager",
+        "description": "Automatically produce clean, upload-ready ZIP archives excluding junk and cache files.",
+        "imageUrl": "/placeholder.svg",
+        "features": ["Excludes node_modules", "Excludes .next and .git", "100% preflight compliant"]
+      }
+    ],
+    "contact": {
+      "heading": "Get in touch with our team",
+      "intro": "Have questions about building or customizing Fivora templates? Contact us today.",
+      "phone": "+94 11 234 5678",
+      "email": "developer@fivora.lk",
+      "address": "Colombo, Sri Lanka",
+      "formTitle": "Send an enquiry",
+      "submitLabel": "Send Message"
+    }
+  },
+  "media": {},
+  "seo": null
+}

package/template/src/lib/siteDataContext.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React from 'react';
+import {
+  SiteDataProvider as BaseSiteDataProvider,
+  useSiteData,
+  contentText,
+  contentObject,
+  contentList,
+  type SiteData,
+  type SiteDataProviderProps,
+  PREVIEW_DATA_MESSAGE,
+  LEGACY_PREVIEW_DATA_MESSAGE,
+  PREVIEW_READY_MESSAGE,
+  LEGACY_PREVIEW_READY_MESSAGE,
+  PREVIEW_FOCUS_MESSAGE,
+  LEGACY_PREVIEW_FOCUS_MESSAGE,
+  PREVIEW_FIELD_ATTRIBUTE,
+} from '@deneb-ui/ui';
+
+import initialSiteData from '@/data/site-data.json';
+
+export function SiteDataProvider({
+  children,
+  initialSiteData: providedInitialData,
+  ...props
+}: {
+  children: React.ReactNode;
+  initialSiteData?: SiteData;
+}) {
+  return (
+    <BaseSiteDataProvider
+      initialSiteData={providedInitialData ?? (initialSiteData as SiteData)}
+      {...props}
+    >
+      {children}
+    </BaseSiteDataProvider>
+  );
+}
+
+export {
+  useSiteData,
+  contentText,
+  contentObject,
+  contentList,
+  PREVIEW_DATA_MESSAGE,
+  LEGACY_PREVIEW_DATA_MESSAGE,
+  PREVIEW_READY_MESSAGE,
+  LEGACY_PREVIEW_READY_MESSAGE,
+  PREVIEW_FOCUS_MESSAGE,
+  LEGACY_PREVIEW_FOCUS_MESSAGE,
+  PREVIEW_FIELD_ATTRIBUTE,
+};
+
+export type { SiteData, SiteDataProviderProps };

package/template/src/lib/utils.ts

@@ -0,0 +1,14 @@
+export function withBasePath(value?: string | null) {
+  const url = value?.trim() ?? '';
+  if (!url || /^(?:[a-z][a-z0-9+.-]*:|\/\/|#)/i.test(url)) return url;
+  const basePath = (process.env.NEXT_PUBLIC_SITE_BASE_PATH ?? '').replace(
+    /\/$/,
+    '',
+  );
+  const path = url.startsWith('/') ? url : `/${url}`;
+  return `${basePath}${path}`;
+}
+
+export function pageRoute(pageKey: string) {
+  return pageKey === 'home' ? '/' : `/${pageKey}`;
+}

package/template/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}