dynamic-zone 1.0.6 → 1.0.8

package/README.md

@@ -1 +1,78 @@
-# Dynamic-zone package
+# dynamic-zone
+
+Scaffold a CMS dynamic zone for Next.js apps. Zero dependencies, zero config.
+
+## Requirements
+
+- Next.js (App Router)
+- An `app` directory in your project
+
+## Installation
+
+```bash
+npm install dynamic-zone
+# or
+pnpm add dynamic-zone
+# or
+yarn add dynamic-zone
+```
+
+## Usage
+
+Run from your Next.js project root:
+
+```bash
+npx dynamic-zone
+```
+
+Or if installed globally:
+
+```bash
+dynamic-zone
+```
+
+## What It Creates
+
+```
+app/
+└── cms/
+    ├── components/          # Add your section components here
+    └── dynamic-zone/
+        └── section-renderer.tsx
+```
+
+## Next Steps
+
+1. **Add section components** to `app/cms/components/` (e.g. `hero.tsx`, `features.tsx`).
+
+2. **Register them** in the `componentMap` in `section-renderer.tsx`:
+
+```tsx
+const componentMap: { [key: string]: ComponentMapType } = {
+  hero: dynamicImport("hero"),
+  features: dynamicImport("features"),
+};
+```
+
+3. **Use the renderer** in your pages:
+
+```tsx
+import SectionRenderer from "@/app/cms/dynamic-zone/section-renderer";
+
+export default function Page({ page }) {
+  return <SectionRenderer sections={page.sections} slug={page.slug} />;
+}
+```
+
+The `__component` field from your CMS (e.g. `sections.hero`) is parsed to match the component key (`hero` → `hero`).
+
+## CLI Options
+
+| Flag            | Description  |
+| --------------- | ------------ |
+| `-h, --help`    | Show help    |
+| `-v, --version` | Show version |
+
+## License
+
+ISC

package/index.js

@@ -3,122 +3,131 @@
 const fs = require("fs");
 const path = require("path");
 
+// ─── ANSI escape codes (no external deps) ─────────────────────────────────────
+const c = {
+  reset: "\x1b[0m",
+  dim: "\x1b[2m",
+  bold: "\x1b[1m",
+  green: "\x1b[32m",
+  red: "\x1b[31m",
+  yellow: "\x1b[33m",
+  cyan: "\x1b[36m",
+  blue: "\x1b[34m",
+};
+
 const basePath = process.cwd();
 
-// Prevent creating inside node_modules
-if (basePath.includes("node_modules")) {
-  console.log("❌ Do not run inside node_modules");
+// ─── CLI flags ───────────────────────────────────────────────────────────────
+const args = process.argv.slice(2);
+if (args.includes("--help") || args.includes("-h")) {
+  console.log(`
+${c.bold}dynamic-zone${c.reset} — Scaffold CMS dynamic zone for Next.js
+
+${c.dim}Usage:${c.reset}
+  dynamic-zone
+  npx dynamic-zone
+
+${c.dim}Options:${c.reset}
+  -h, --help     Show this help
+  -v, --version  Show version
+
+${c.dim}Creates:${c.reset}
+  app/cms/
+  app/cms/components/
+  app/cms/dynamic-zone/section-renderer.tsx
+`);
+  process.exit(0);
+}
+if (args.includes("--version") || args.includes("-v")) {
+  const pkg = require(path.join(__dirname, "package.json"));
+  console.log(pkg.version);
   process.exit(0);
 }
 
-// --- 1️⃣ Check if package.json exists ---
+// ─── Guards ─────────────────────────────────────────────────────────────────
+if (basePath.includes("node_modules")) {
+  console.log(`${c.red}✖${c.reset} Do not run inside node_modules`);
+  process.exit(1);
+}
+
 const packageJsonPath = path.join(basePath, "package.json");
 if (!fs.existsSync(packageJsonPath)) {
-  console.log("❌ package.json not found. Are you in a Node.js project?");
+  console.log(
+    `${c.red}✖${c.reset} package.json not found. Run this from a Node.js project root.`
+  );
   process.exit(1);
 }
 
-// --- 2️⃣ Read package.json and check for next ---
-const packageJson = require(packageJsonPath);
-const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
+let packageJson;
+try {
+  packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf8"));
+} catch {
+  console.log(`${c.red}✖${c.reset} Invalid package.json`);
+  process.exit(1);
+}
 
+const deps = { ...packageJson.dependencies, ...packageJson.devDependencies };
 if (!deps.next) {
   console.log(
-    "❌ This is not a Next.js project. dynamic-zone can only be used in Next.js."
+    `${c.red}✖${c.reset} Not a Next.js project. dynamic-zone requires Next.js.`
   );
   process.exit(1);
 }
 
-// --- 3️⃣ Check if app folder exists ---
 const appPath = path.join(basePath, "app");
 if (!fs.existsSync(appPath)) {
-  console.log("⚠️ No 'app' folder found. Please create an 'app' folder first.");
+  console.log(
+    `${c.yellow}⚠${c.reset} No \`app\` directory found. Create it first (e.g. \`npx create-next-app@latest\`).`
+  );
   process.exit(1);
 }
 
-// Paths for folders
+// ─── Paths ───────────────────────────────────────────────────────────────────
 const cmsPath = path.join(appPath, "cms");
 const componentsPath = path.join(cmsPath, "components");
 const dynamicZonePath = path.join(cmsPath, "dynamic-zone");
 
-// Create folders
-[cmsPath, componentsPath, dynamicZonePath].forEach((dir) => {
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir);
-    console.log("✅ Created:", dir);
+// ─── Banner ──────────────────────────────────────────────────────────────────
+console.log(`
+${c.cyan}${c.bold}  dynamic-zone${c.reset} ${c.dim}v${
+  require(path.join(__dirname, "package.json")).version
+}${c.reset}
+${c.dim}  Scaffolding CMS dynamic zone for Next.js${c.reset}
+`);
+
+// ─── Create directories ─────────────────────────────────────────────────────
+const dirs = [
+  [cmsPath, "app/cms"],
+  [componentsPath, "app/cms/components"],
+  [dynamicZonePath, "app/cms/dynamic-zone"],
+];
+
+for (const [fullPath, label] of dirs) {
+  if (!fs.existsSync(fullPath)) {
+    fs.mkdirSync(fullPath, { recursive: true });
+    console.log(`  ${c.green}✓${c.reset} ${label}`);
+  } else {
+    console.log(`  ${c.dim}○${c.reset} ${label} ${c.dim}(exists)${c.reset}`);
   }
-});
-
-// Section Renderer file content
-const fileContent = `import dynamic from "next/dynamic";
-import { Suspense } from "react";
-
-type SectionContentType = {
-  sections: { __component: string }[];
-};
-type SectionType = NonNullable<SectionContentType["sections"][number]>;
-
-interface Props {
-  sections?: unknown;
-  slug?: string;
 }
 
-type ComponentMapType = React.ComponentType<{
-  index?: number;
-  content?: unknown;
-}>;
-
-const dynamicImport = (path: string) =>
-  dynamic(() => import(\`../components/\${path}\`), {
-    loading: () => <div>Loading...</div>,
-  });
-
-const componentMap: { [key: string]: ComponentMapType } = {};
-
-export default function SectionRenderer({ sections, slug }: Props) {
-  if (!sections) return null;
-
-  if (Array.isArray(sections) && sections.length === 0) {
-    return (
-      // This is the div for the sections that are not found DO W-FULL PX
-      <div>No Sections Found for {slug}</div>
-    );
-  }
+// ─── Section renderer template ───────────────────────────────────────────────
+const templatePath = path.join(__dirname, "templates", "section-renderer.template");
+const sectionRendererContent = fs.readFileSync(templatePath, "utf8");
 
-  const renderSection = (section: SectionType, index: number) => {
-    const sectionType = section.__component?.split(".")[1]?.replace(/-/g, "_");
-    const Component = componentMap[sectionType];
-
-    if (!Component) {
-      return (
-        // This is the div for the section that is not found DO W-FULL
-        <div key={index}>No Section Found {sectionType}</div>
-      );
-    }
-
-    return (
-      <div key={index}>
-        <Suspense fallback={<div>Loading...</div>}>
-          <Component index={index} content={section} />
-        </Suspense>
-      </div>
-    );
-  };
-
-  const sectionsArray = Array.isArray(sections) ? sections : [];
-  return (
-    // This is the root div for the dynamic zone DO FLEX FLEX-COL
-    <div>{sectionsArray.map(renderSection)}</div>
+// ─── Write section-renderer.tsx ──────────────────────────────────────────────
+const sectionRendererPath = path.join(dynamicZonePath, "section-renderer.tsx");
+if (!fs.existsSync(sectionRendererPath)) {
+  fs.writeFileSync(sectionRendererPath, sectionRendererContent);
+  console.log(
+    `  ${c.green}✓${c.reset} app/cms/dynamic-zone/section-renderer.tsx`
   );
-}
-
-`;
-
-// Write file
-const filePath = path.join(dynamicZonePath, "section-renderer.tsx");
-if (!fs.existsSync(filePath)) {
-  fs.writeFileSync(filePath, fileContent);
-  console.log("📄 Created file:", filePath);
 } else {
-  console.log("⚠️ File already exists:", filePath);
+  console.log(
+    `  ${c.dim}○${c.reset} app/cms/dynamic-zone/section-renderer.tsx ${c.dim}(exists)${c.reset}`
+  );
 }
+
+console.log(`
+${c.green}${c.bold}Done.${c.reset} ${c.dim}Add your section components to app/cms/components/ and register them in the componentMap.${c.reset}
+`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-zone",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Dynamic zone scaffolding for Next.js apps",
   "main": "index.js",
   "type": "commonjs",

package/templates/section-renderer.template

@@ -0,0 +1,52 @@
+import dynamic from "next/dynamic";
+import { Suspense } from "react";
+
+type SectionContentType = {
+  sections: { __component: string }[];
+};
+type SectionType = NonNullable<SectionContentType["sections"][number]>;
+
+interface Props {
+  sections?: unknown;
+  slug?: string;
+}
+
+type ComponentMapType = React.ComponentType<{
+  index?: number;
+  content?: unknown;
+}>;
+
+const dynamicImport = (path: string) =>
+  dynamic(() => import(`../components/${path}`), {
+    loading: () => <div>Loading...</div>,
+  });
+
+const componentMap: { [key: string]: ComponentMapType } = {};
+
+export default function SectionRenderer({ sections, slug }: Props) {
+  if (!sections) return null;
+
+  if (Array.isArray(sections) && sections.length === 0) {
+    return <div>No Sections Found for {slug}</div>;
+  }
+
+  const renderSection = (section: SectionType, index: number) => {
+    const sectionType = section.__component?.split(".")[1]?.replace(/-/g, "_");
+    const Component = componentMap[sectionType];
+
+    if (!Component) {
+      return <div key={index}>No Section Found {sectionType}</div>;
+    }
+
+    return (
+      <div key={index}>
+        <Suspense fallback={<div>Loading...</div>}>
+          <Component index={index} content={section} />
+        </Suspense>
+      </div>
+    );
+  };
+
+  const sectionsArray = Array.isArray(sections) ? sections : [];
+  return <div>{sectionsArray.map(renderSection)}</div>;
+}