create-puck-app 0.3.0

package/README.md

@@ -0,0 +1,21 @@
+# create-puck-app
+
+`create-puck-app` generates recipes. For a full list of recipes, please see the monorepo README.
+
+## Usage
+
+npx
+
+```sh
+npx create-puck-app my-app
+```
+
+yarn
+
+```sh
+yarn create puck-app my-app
+```
+
+## License
+
+MIT © [Measured Co.](https://github.com/measuredco)

package/index.js

@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import { program } from "commander";
+import inquirer from "inquirer";
+import Handlebars from "handlebars";
+import glob from "glob";
+import { execSync } from "child_process";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const packageJson = JSON.parse(
+  fs.readFileSync(path.join(__dirname, "./package.json"))
+);
+
+// Lifted from https://github.com/vercel/next.js/blob/c2d7bbd1b82c71808b99e9a7944fb16717a581db/packages/create-next-app/helpers/get-pkg-manager.ts
+function getPkgManager() {
+  // eslint-disable-next-line turbo/no-undeclared-env-vars
+  const userAgent = process.env.npm_config_user_agent || "";
+
+  if (userAgent.startsWith("yarn")) {
+    return "yarn";
+  }
+
+  if (userAgent.startsWith("pnpm")) {
+    return "pnpm";
+  }
+
+  return "npm";
+}
+
+program
+  .command("create [app-name]")
+  .option(
+    "--use-npm",
+    `
+
+    Explicitly tell the CLI to bootstrap the application using npm
+  `
+  )
+  .option(
+    "--use-pnpm",
+    `
+
+    Explicitly tell the CLI to bootstrap the application using pnpm
+  `
+  )
+  .option(
+    "--use-yarn",
+    `
+
+    Explicitly tell the CLI to bootstrap the application using Yarn
+  `
+  )
+  .action(async (_appName, options) => {
+    const beforeQuestions = [];
+
+    if (!_appName) {
+      beforeQuestions.push({
+        type: "input",
+        name: "appName",
+        message: "What is the name of your app?",
+        required: true,
+      });
+    }
+
+    const questions = [
+      ...beforeQuestions,
+      {
+        type: "input",
+        name: "recipe",
+        message: "Which recipe would you like to use?",
+        required: true,
+        default: "next",
+      },
+    ];
+    const answers = await inquirer.prompt(questions);
+    const appName = answers.appName || _appName;
+    const recipe = answers.recipe;
+
+    // Copy template files to the new directory
+    const templatePath = path.join(__dirname, "./templates", recipe);
+    const appPath = path.join(process.cwd(), appName);
+
+    if (!recipe) {
+      console.error(`Please specify a recipe.`);
+      return;
+    }
+
+    if (!fs.existsSync(templatePath)) {
+      console.error(`No recipe named ${recipe} exists.`);
+      return;
+    }
+
+    if (fs.existsSync(appPath)) {
+      console.error(
+        `A directory called ${appName} already exists. Please use a different name or delete this directory.`
+      );
+      return;
+    }
+
+    await fs.mkdirSync(appName);
+
+    const packageManager = !!options.useNpm
+      ? "npm"
+      : !!options.usePnpm
+      ? "pnpm"
+      : !!options.useYarn
+      ? "yarn"
+      : getPkgManager();
+
+    // Compile handlebars templates
+    const templateFiles = glob.sync(`**/*`, {
+      cwd: templatePath,
+      nodir: true,
+      dot: true,
+    });
+
+    for (const templateFile of templateFiles) {
+      const filePath = path.join(templatePath, templateFile);
+      const targetPath = filePath
+        .replace(templatePath, appPath)
+        .replace(".hbs", "");
+
+      let data;
+
+      if (path.extname(filePath) === ".hbs") {
+        const templateString = await fs.readFileSync(filePath, "utf-8");
+
+        const template = Handlebars.compile(templateString);
+        data = template({
+          ...answers,
+          appName,
+          puckVersion: `^${packageJson.version}`,
+        });
+      } else {
+        data = await fs.readFileSync(filePath, "utf-8");
+      }
+
+      const dir = path.dirname(targetPath);
+
+      await fs.mkdirSync(dir, { recursive: true });
+
+      await fs.writeFileSync(targetPath, data);
+    }
+
+    if (packageManager === "yarn") {
+      execSync("yarn install", { cwd: appPath, stdio: "inherit" });
+    } else {
+      execSync(`${packageManager} i`, { cwd: appPath, stdio: "inherit" });
+    }
+
+    let inGitRepo = false;
+
+    try {
+      inGitRepo =
+        execSync("git status", {
+          cwd: appPath,
+        })
+          .toString()
+          .indexOf("fatal:") !== 0;
+    } catch {}
+
+    // Only commit if this is a new repo
+    if (!inGitRepo) {
+      execSync("git init", { cwd: appPath, stdio: "inherit" });
+
+      execSync("git add .", { cwd: appPath, stdio: "inherit" });
+      execSync("git commit -m 'build(puck): generate app'", {
+        cwd: appPath,
+        stdio: "inherit",
+      });
+    }
+  })
+  .parse(process.argv);

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "create-puck-app",
+  "version": "0.3.0",
+  "private": false,
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-puck-app": "./index.js"
+  },
+  "files": [
+    "templates"
+  ],
+  "dependencies": {
+    "commander": "^10.0.1",
+    "handlebars": "^4.7.7",
+    "inquirer": "^9.2.7",
+    "prettier": "^2.8.8"
+  }
+}

package/templates/next/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["custom"],
+};

package/templates/next/README.md

@@ -0,0 +1,39 @@
+# `next` recipe
+
+The `next` recipe showcases one of the most powerful ways to implement Puck using to provide an authoring tool for any route in your Next app.
+
+## Demonstrates
+
+- Next.js 13 App Router implementation
+- JSON database implementation with HTTP API
+- Catch-all routes to use puck for any route on the platform
+
+## Usage
+
+Run the generator and enter `next` when prompted
+
+```
+npx create-puck-app my-app
+```
+
+Start the server
+
+```
+yarn dev
+```
+
+Navigate to the homepage at https://localhost:3000. To edit the homepage, access the Puck editor at https://localhost:3000/edit.
+
+You can do this for any route on the application, **even if the page doesn't exist**. For example, visit https://localhost:3000/hello/world and you'll receive a 404. You can author and publish a page by visiting https://localhost:3000/hello/world/edit. After publishing, go back to the original URL to see your page.
+
+## Using this recipe
+
+To adopt this recipe you will need to:
+
+- **IMPORTANT** Add authentication to `/edit` routes. This can be done by modifying the example API routes in `/app/api/puck/route.ts` and server component in `/app/[...puckPath]/page.tsx`. **If you don't do this, Puck will be completely public.**
+- Integrate your database into the API calls in `/app/api/puck/route.ts`
+- Implement a custom puck configuration in `puck.config.tsx`
+
+## License
+
+MIT © [Measured Co.](https://github.com/measuredco)

package/templates/next/app/[...puckPath]/client.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import type { Data } from "@measured/puck";
+import { Puck, Render } from "@measured/puck";
+import config from "../../puck.config";
+
+export function Client({
+  path,
+  data,
+  isEdit,
+}: {
+  path: string;
+  data: Data;
+  isEdit: boolean;
+}) {
+  if (isEdit) {
+    return (
+      <Puck
+        config={config}
+        data={data}
+        onPublish={async (data: Data) => {
+          await fetch("/api/puck", {
+            method: "post",
+            body: JSON.stringify({ [path]: data }),
+          });
+        }}
+      />
+    );
+  }
+
+  return <Render config={config} data={data} />;
+}

package/templates/next/app/[...puckPath]/page.tsx

@@ -0,0 +1,49 @@
+import { Client } from "./client";
+import { notFound } from "next/navigation";
+import resolvePuckPath from "./resolve-puck-path";
+import { Metadata } from "next";
+import { Data } from "@measured/puck/types/Config";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { puckPath: string[] };
+}): Promise<Metadata> {
+  const { isEdit, path } = resolvePuckPath(params.puckPath);
+
+  if (isEdit) {
+    return {
+      title: "Puck: " + path,
+    };
+  }
+
+  const data: Data = (
+    await fetch("http://localhost:3000/api/puck", {
+      next: { revalidate: 0 },
+    }).then((d) => d.json())
+  )[path];
+
+  return {
+    title: data?.page?.title,
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: { puckPath: string[] };
+}) {
+  const { isEdit, path } = resolvePuckPath(params.puckPath);
+
+  const data = (
+    await fetch("http://localhost:3000/api/puck", {
+      next: { revalidate: 0 },
+    }).then((d) => d.json())
+  )[path];
+
+  if (!data && !isEdit) {
+    return notFound();
+  }
+
+  return <Client isEdit={isEdit} path={path} data={data} />;
+}

package/templates/next/app/[...puckPath]/resolve-puck-path.ts

@@ -0,0 +1,15 @@
+const resolvePuckPath = (puckPath: string[] = []) => {
+  const hasPath = puckPath.length > 0;
+
+  const isEdit = hasPath ? puckPath[puckPath.length - 1] === "edit" : false;
+
+  return {
+    isEdit,
+    path: `/${(isEdit
+      ? [...puckPath].slice(0, puckPath.length - 1)
+      : [...puckPath]
+    ).join("/")}`,
+  };
+};
+
+export default resolvePuckPath;

package/templates/next/app/api/puck/route.ts

@@ -0,0 +1,31 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+
+export async function GET() {
+  const data = fs.existsSync("database.json")
+    ? fs.readFileSync("database.json", "utf-8")
+    : null;
+
+  return NextResponse.json(JSON.parse(data || "{}"));
+}
+
+export async function POST(request: Request) {
+  const data = await request.json();
+
+  const existingData = JSON.parse(
+    fs.existsSync("database.json")
+      ? fs.readFileSync("database.json", "utf-8")
+      : "{}"
+  );
+
+  const updatedData = {
+    ...existingData,
+    ...data,
+  };
+
+  fs.writeFileSync("database.json", JSON.stringify(updatedData));
+
+  return NextResponse.json({ status: "ok" });
+}
+
+export const revalidate = 0;

package/templates/next/app/layout.tsx

@@ -0,0 +1,14 @@
+import "@measured/puck/dist/index.css";
+import "./styles.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/next/app/page.tsx

@@ -0,0 +1 @@
+export { default, generateMetadata } from "./[...puckPath]/page";

package/templates/next/app/styles.css

@@ -0,0 +1,5 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}

package/templates/next/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/basic-features/typescript for more information.

package/templates/next/next.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  reactStrictMode: true,
+  transpilePackages: ["ui"],
+};

package/templates/next/package.json.hbs

@@ -0,0 +1,25 @@
+{
+  "name": "{{appName}}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@measured/puck": "{{puckVersion}}",
+    "classnames": "^2.3.2",
+    "next": "^13.4.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.12",
+    "@types/react": "^18.0.22",
+    "@types/react-dom": "^18.0.7",
+    "eslint-config-custom": "*",
+    "typescript": "^4.5.3"
+  }
+}

package/templates/next/puck.config.tsx

@@ -0,0 +1,25 @@
+import type { Config } from "@measured/puck";
+
+type Props = {
+  HeadingBlock: { title: string };
+};
+
+export const config: Config<Props> = {
+  components: {
+    HeadingBlock: {
+      fields: {
+        title: { type: "text" },
+      },
+      defaultProps: {
+        title: "Heading",
+      },
+      render: ({ title }) => (
+        <div style={{ padding: 64 }}>
+          <h1>{title}</h1>
+        </div>
+      ),
+    },
+  },
+};
+
+export default config;

package/templates/next/tsconfig/base.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Default",
+  "compilerOptions": {
+    "composite": false,
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "inlineSources": false,
+    "isolatedModules": true,
+    "moduleResolution": "node",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "preserveWatchOutput": true,
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["node_modules"]
+}

package/templates/next/tsconfig/nextjs.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Next.js",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }],
+    "allowJs": true,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "esnext",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "target": "es5"
+  },
+  "include": ["src", "next-env.d.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/next/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig/nextjs.json",
+  "compilerOptions": {
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}