create-middag-ui 0.1.4 → 0.2.0

package/README.md

@@ -8,17 +8,24 @@ Bootstrap a [MIDDAG React UI](https://github.com/middag-io/middag-react) layer i
 npx create-middag-ui
 ```
 
+Or specify a custom directory:
+
+```bash
+npx create-middag-ui mydir
+```
+
 Run from your plugin project root. The wizard:
 
 1. **Auto-detects your host** — finds `version.php` (Moodle) or `wp-config.php` (WordPress)
-2. **Scaffolds `ui/`** — creates `package.json`, `tsconfig.json`, Vite config, and `.npmrc`
-3. **Generates a hello-world mock** — a working PageContract with a metric card and data table
+2. **Asks for target directory** — default `ui/`, or pass as CLI argument
+3. **Configures registry** — GitHub Packages (with source maps) or npm public (no auth needed)
+4. **Scaffolds everything** — config files, demo components, mock environment
+5. **Installs dependencies** — runs `npm install` automatically with progress feedback
 
-Then install and run:
+Then start developing:
 
 ```bash
 cd ui
-npm install
 npm run dev:mock
 ```
 
@@ -28,21 +35,43 @@ Your mock opens at `http://localhost:5174` (Moodle), `5175` (WordPress), or `517
 
 ```
 ui/
-  .npmrc                  # GitHub Packages registry for @middag-io scope
-  package.json            # Dependencies and scripts
-  tsconfig.json           # TypeScript config with path aliases
-  vite.mock.config.ts     # Vite dev server config for mock build
-  src/                    # Your components (empty, ready for custom blocks)
+  package.json              # Dependencies and scripts
+  tsconfig.json             # TypeScript config with path aliases
+  vite.mock.config.ts       # Vite dev server config for mock build
+  src/
+    blocks/
+      hello-block.tsx       # Custom block example (rename me!)
+    components/
+      greeting.tsx          # Standalone component example (rename me!)
+    contracts.ts            # PageContract type re-export
   mock/
-    index.html            # HTML entry point
-    main.tsx              # React entry with registerDefaults() + ContractPage
-    hello-contract.ts     # Example PageContract (metric card + data table)
-    tailwind.css          # Tailwind CSS import
+    index.html              # HTML entry point
+    main.tsx                # React entry with registerDefaults() + ContractPage
+    hello-contract.ts       # Example PageContract (metric card + data table)
+    tailwind.css            # Tailwind CSS import
 ```
 
+## Dual Registry
+
+`@middag-io/react` is available from two registries:
+
+### npm public (default, no auth)
+
+Choose "No" when asked about GitHub access. Dependencies install from the public npm registry with zero configuration.
+
+### GitHub Packages (with source maps)
+
+Choose "Yes" when asked about GitHub access. The wizard will:
+
+1. Ask for your GitHub Personal Access Token
+2. Validate the token against GitHub Packages
+3. Save the registry + token to `~/.npmrc` (global, not project-local)
+
+Create a token at [github.com/settings/tokens](https://github.com/settings/tokens) with the `read:packages` scope.
+
 ## After setup
 
-Once `@middag-io/react` is installed, more commands become available from inside `ui/`:
+Once `@middag-io/react` is installed, more commands become available from inside your UI directory:
 
 ```bash
 npx @middag-io/react doctor        # Validate project setup
@@ -51,16 +80,6 @@ npx @middag-io/react add-block <t>  # Scaffold a new block type
 npx @middag-io/react upgrade        # Check for updates
 ```
 
-## Authentication
-
-`@middag-io/react` is hosted on GitHub Packages. The wizard creates `.npmrc` with the registry, but you need to add your GitHub token:
-
-```bash
-echo '//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN' >> ui/.npmrc
-```
-
-Create a token at [github.com/settings/tokens](https://github.com/settings/tokens) with the `read:packages` scope.
-
 ## Documentation
 
 - **[Live Demo](https://middag-react-mock.pages.dev)** — 24 screens showing all block types

package/cli.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+/* global console, process */
 
 /**
  * create-middag-ui — Bootstrap a MIDDAG React UI layer.
@@ -6,322 +7,183 @@
  * Published on public npm so `npx create-middag-ui` works without
  * GitHub Packages authentication. This package handles:
  *   1. Host detection (Moodle / WordPress / Custom)
- *   2. ui/ directory scaffolding
- *   3. .npmrc configuration for @middag-io scope
- *   4. Hello-world PageContract generation
- *   5. npm install (triggers @middag-io/react download from GitHub Packages)
+ *   2. Directory selection (default: ui/, or CLI arg)
+ *   3. GitHub access check (dual registry: GitHub Packages or npm public)
+ *   4. Directory + config scaffolding
+ *   5. Demo files (custom block, standalone component, type re-export)
+ *   6. Mock files (hello-contract, entry point, HTML, CSS)
+ *   7. npm install with spinner
+ *   8. Summary with next steps
  *
- * After init, the remaining CLI commands (doctor, dev, add-block, upgrade)
- * are available via: npx @middag-io/react <command>
+ * After init, more CLI commands are available via:
+ *   npx @middag-io/react <command>
  */
 
-import { existsSync, mkdirSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
-import { createInterface } from "node:readline";
-
-const HOSTS = {
-  moodle: { name: "Moodle", detect: "version.php", port: 5174 },
-  wordpress: { name: "WordPress", detect: "wp-config.php", port: 5175 },
-  custom: { name: "Custom", detect: null, port: 5176 },
-};
-
-// ── Helpers ────────────────────────────────────────────────────────────────
-
-function ask(question) {
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((r) =>
-    rl.question(question, (a) => {
-      rl.close();
-      r(a.trim());
-    }),
-  );
-}
+import { detectHost, HOSTS } from "./lib/detect.js";
+import { ask, select, confirm } from "./lib/prompts.js";
+import { runTokenFlow } from "./lib/auth.js";
+import {
+  createTargetDir,
+  scaffoldPackageJson,
+  scaffoldTsconfig,
+  scaffoldViteConfig,
+  scaffoldDemoFiles,
+  scaffoldMockFiles,
+} from "./lib/scaffold.js";
+import { runNpmInstall } from "./lib/install.js";
+import { log, success, heading, blank, info } from "./lib/ui.js";
+
+const TOTAL_STEPS = 10;
+const cwd = process.cwd();
+const startTime = Date.now();
 
-function log(msg) {
-  console.log(`\x1b[36mcreate-middag-ui\x1b[0m ${msg}`);
-}
-function success(msg) {
-  console.log(`  \x1b[32m✓\x1b[0m ${msg}`);
-}
-function warn(msg) {
-  console.log(`  \x1b[33m⚠\x1b[0m ${msg}`);
-}
+blank();
+log("Initializing MIDDAG React UI...\n");
 
-function detectHost(cwd) {
-  for (const [key, host] of Object.entries(HOSTS)) {
-    if (host.detect && existsSync(join(cwd, host.detect))) return key;
-  }
-  return null;
+// ── Step 1: Detect host ──────────────────────────────────────────────────
+
+heading(1, TOTAL_STEPS, "Detecting host platform");
+
+let hostKey = detectHost(cwd);
+if (hostKey) {
+  success(`Detected: ${HOSTS[hostKey].name} (found ${HOSTS[hostKey].detect})`);
+} else {
+  info("Could not auto-detect host platform.");
+  hostKey = await select("Select platform", [
+    { label: "Moodle", value: "moodle" },
+    { label: "WordPress", value: "wordpress" },
+    { label: "Custom / Other", value: "custom" },
+  ]);
+  success(`Selected: ${HOSTS[hostKey].name}`);
 }
 
-// ── Main ───────────────────────────────────────────────────────────────────
+const host = HOSTS[hostKey];
 
-const cwd = process.cwd();
-const startTime = Date.now();
+// ── Step 2: Ask directory ────────────────────────────────────────────────
 
-log("Initializing MIDDAG React UI in your project...\n");
+heading(2, TOTAL_STEPS, "Target directory");
 
-// Step 1: Detect host
-let host = detectHost(cwd);
-if (host) {
-  success(`Detected host: ${HOSTS[host].name} (found ${HOSTS[host].detect})`);
+const cliArg = process.argv[2];
+let dirName;
+
+if (cliArg && !cliArg.startsWith("-")) {
+  dirName = cliArg;
+  success(`Using directory from argument: ${dirName}/`);
 } else {
-  log("Could not auto-detect host platform.");
-  console.log("  1) Moodle");
-  console.log("  2) WordPress");
-  console.log("  3) Custom / Other");
-  const choice = await ask("\n  Select platform [1-3]: ");
-  host =
-    ["moodle", "wordpress", "custom"][parseInt(choice, 10) - 1] || "custom";
-  success(`Selected: ${HOSTS[host].name}`);
+  const answer = await ask(`  Directory name (default: ui): `);
+  dirName = answer || "ui";
+  success(`Target: ${dirName}/`);
 }
 
-const uiDir = join(cwd, "ui");
+const targetDir = join(cwd, dirName);
 
-// Step 2: Create ui/ directory
-if (existsSync(uiDir)) {
-  warn("ui/ directory already exists — skipping scaffold");
-} else {
-  mkdirSync(uiDir, { recursive: true });
-  success("Created ui/");
-}
+// ── Step 3: Ask GitHub access ────────────────────────────────────────────
+
+heading(3, TOTAL_STEPS, "Registry configuration");
+
+info("@middag-io/react can be installed from:");
+info("  a) GitHub Packages (with source maps, requires token)");
+info("  b) npm public registry (compiled only, no auth needed)");
+blank();
 
-// Step 3: Configure .npmrc with GitHub Packages registry
-const npmrcPath = join(uiDir, ".npmrc");
-if (!existsSync(npmrcPath)) {
-  writeFileSync(
-    npmrcPath,
-    "@middag-io:registry=https://npm.pkg.github.com\n",
-  );
-  success("Created .npmrc with GitHub Packages registry");
-  warn(
-    "Add your GitHub token: echo '//npm.pkg.github.com/:_authToken=YOUR_TOKEN' >> ui/.npmrc",
-  );
+const hasGitHubAccess = await confirm("Do you have GitHub access to middag-io?", false);
+
+let registryPath = "public";
+if (hasGitHubAccess) {
+  registryPath = await runTokenFlow();
 } else {
-  success(".npmrc already exists");
+  success("Using npm public registry (no authentication needed)");
 }
 
-// Step 4: Create package.json
-const pkgPath = join(uiDir, "package.json");
-if (!existsSync(pkgPath)) {
-  const projectName = cwd.split("/").pop() || "project";
-  const pkg = {
-    name: `${projectName}-ui`,
-    private: true,
-    type: "module",
-    scripts: {
-      dev: "vite --config vite.mock.config.ts",
-      "dev:mock": "vite --config vite.mock.config.ts",
-      build: "vite build",
-      "build:mock": "vite build --config vite.mock.config.ts",
-      typecheck: "tsc --noEmit",
-      lint: "eslint .",
-      "lint:fix": "eslint . --fix",
-    },
-    dependencies: {
-      "@middag-io/react": "^0.1.0",
-    },
-    devDependencies: {
-      "@types/react": "^19.0.0",
-      "@types/react-dom": "^19.0.0",
-      react: "^19.0.0",
-      "react-dom": "^19.0.0",
-      "@inertiajs/react": "^2.0.0",
-      "@inertiajs/core": "^2.0.0",
-      typescript: "^5.7.0",
-      vite: "^6.0.0",
-      "@vitejs/plugin-react": "^4.0.0",
-      tailwindcss: "^4.0.0",
-      "@tailwindcss/vite": "^4.0.0",
-    },
-  };
-  writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
-  success("Created package.json");
-}
+// ── Step 4: Create directory ─────────────────────────────────────────────
+
+heading(4, TOTAL_STEPS, "Creating directory");
 
-// Step 5: Create tsconfig.json
-const tsconfigPath = join(uiDir, "tsconfig.json");
-if (!existsSync(tsconfigPath)) {
-  const tsconfig = {
-    compilerOptions: {
-      target: "ES2022",
-      module: "ESNext",
-      moduleResolution: "bundler",
-      jsx: "react-jsx",
-      strict: true,
-      noUnusedLocals: true,
-      noUnusedParameters: true,
-      skipLibCheck: true,
-      paths: { "@/*": ["./src/*"], "@mock/*": ["./mock/*"] },
-      baseUrl: ".",
-    },
-    include: ["src", "mock"],
-  };
-  writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2) + "\n");
-  success("Created tsconfig.json");
+const dirCreated = createTargetDir(targetDir);
+if (!dirCreated) {
+  process.exit(1);
 }
 
-// Step 6: Create hello-world contract
-const mockDir = join(uiDir, "mock");
-mkdirSync(join(uiDir, "src"), { recursive: true });
-mkdirSync(mockDir, { recursive: true });
+// ── Step 5: Scaffold config files ────────────────────────────────────────
 
-const helloContractPath = join(mockDir, "hello-contract.ts");
-if (!existsSync(helloContractPath)) {
-  writeFileSync(
-    helloContractPath,
-    `import type { PageContract } from "@middag-io/react";
+heading(5, TOTAL_STEPS, "Scaffolding config files");
 
-/**
- * Hello World contract — a minimal PageContract to verify your setup.
- *
- * This is what your ${HOSTS[host].name} backend will send via Inertia.
- * Replace this with real data from your server.
- */
-export const helloContract: PageContract = {
-  shell: "admin",
-  meta: {
-    title: "Hello MIDDAG",
-    breadcrumbs: [
-      { label: "Home", href: "/" },
-      { label: "Hello", href: "/hello" },
-    ],
-  },
-  layout: {
-    template: "stack",
-    regions: {
-      content: [
-        {
-          key: "welcome_metrics",
-          type: "metric_card",
-          data: {
-            title: "Setup Complete",
-            value: "1",
-            subtitle: "@middag-io/react is working",
-            trend: { direction: "up", value: "100%", label: "Ready" },
-          },
-        },
-        {
-          key: "hello_table",
-          type: "dense_table",
-          data: {
-            title: "Example Data",
-            columns: [
-              { key: "id", label: "ID", sortable: true },
-              { key: "name", label: "Name", sortable: true },
-              { key: "status", label: "Status" },
-            ],
-            rows: [
-              { id: 1, name: "First item", status: "Active" },
-              { id: 2, name: "Second item", status: "Draft" },
-              { id: 3, name: "Third item", status: "Active" },
-            ],
-            pagination: { current: 1, total: 1, perPage: 10, totalRows: 3 },
-          },
-        },
-      ],
-    },
-  },
-};
-`,
-  );
-  success("Created mock/hello-contract.ts (hello-world PageContract)");
-}
+scaffoldPackageJson(targetDir, host, cwd);
+scaffoldTsconfig(targetDir);
+scaffoldViteConfig(targetDir, host);
 
-// Step 7: Create mock entry point
-const mockMainPath = join(mockDir, "main.tsx");
-if (!existsSync(mockMainPath)) {
-  writeFileSync(
-    mockMainPath,
-    `import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { ContractPage, registerDefaults } from "@middag-io/react";
-import "@middag-io/react/style.css";
-import "./tailwind.css";
-import { helloContract } from "./hello-contract";
-
-// Register all default shells, layouts, and blocks
-registerDefaults();
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <ContractPage contract={helloContract} />
-  </StrictMode>,
-);
-`,
-  );
-  success("Created mock/main.tsx");
-}
+// ── Step 6: Scaffold ~/.npmrc (GitHub path only) ─────────────────────────
 
-const mockIndexPath = join(mockDir, "index.html");
-if (!existsSync(mockIndexPath)) {
-  writeFileSync(
-    mockIndexPath,
-    `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MIDDAG React UI — Mock</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main.tsx"></script>
-  </body>
-</html>
-`,
-  );
-  success("Created mock/index.html");
-}
+heading(6, TOTAL_STEPS, "Registry setup");
 
-// Step 8: Create vite mock config
-const viteConfigPath = join(uiDir, "vite.mock.config.ts");
-if (!existsSync(viteConfigPath)) {
-  writeFileSync(
-    viteConfigPath,
-    `import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-import { resolve } from "path";
-
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  root: "mock",
-  server: { port: ${HOSTS[host].port} },
-  resolve: {
-    alias: {
-      "@/": resolve(__dirname, "src") + "/",
-      "@mock/": resolve(__dirname, "mock") + "/",
-    },
-  },
-});
-`,
-  );
-  success("Created vite.mock.config.ts");
+if (registryPath === "github") {
+  success("GitHub Packages registry configured in ~/.npmrc (global)");
+  info("Token was saved during authentication step");
+} else {
+  success("No registry config needed (using npm public)");
 }
 
-// Step 9: Create tailwind CSS
-const cssPath = join(mockDir, "tailwind.css");
-if (!existsSync(cssPath)) {
-  writeFileSync(cssPath, '@import "tailwindcss";\n');
-  success("Created mock/tailwind.css");
-}
+// ── Step 7: Scaffold demo files in src/ ──────────────────────────────────
+
+heading(7, TOTAL_STEPS, "Creating demo files");
+
+scaffoldDemoFiles(targetDir);
+
+// ── Step 8: Scaffold mock files ──────────────────────────────────────────
+
+heading(8, TOTAL_STEPS, "Creating mock environment");
+
+scaffoldMockFiles(targetDir);
+
+// ── Step 9: npm install ──────────────────────────────────────────────────
+
+heading(9, TOTAL_STEPS, "Installing dependencies");
+
+info("This may take a minute...");
+blank();
+
+const installOk = await runNpmInstall(targetDir, registryPath);
+
+// ── Step 10: Summary ─────────────────────────────────────────────────────
+
+heading(10, TOTAL_STEPS, "Done!");
 
-// Summary
 const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
-console.log("");
-log(`Done in ${elapsed}s!\n`);
-console.log("  Next steps:");
-console.log("    cd ui");
-console.log("    npm install");
-console.log("    npm run dev:mock\n");
-console.log(`  Your mock will run at http://localhost:${HOSTS[host].port}`);
-console.log("");
-console.log("  After install, more commands become available:");
-console.log("    npx @middag-io/react doctor        # validate setup");
-console.log("    npx @middag-io/react dev            # start mock server");
-console.log("    npx @middag-io/react add-block <t>  # scaffold a block");
-console.log("    npx @middag-io/react upgrade         # check for updates");
-console.log("");
+blank();
+
+if (installOk) {
+  log(`MIDDAG React UI ready in ${dirName}/ (${elapsed}s)\n`);
+  console.log("  Start developing:");
+  console.log(`    cd ${dirName}`);
+  console.log(`    npm run dev:mock        \u2192 mock server at http://localhost:${host.port}`);
+} else {
+  log(`Scaffold complete in ${dirName}/ (${elapsed}s) \u2014 install failed\n`);
+  console.log("  To retry install:");
+  console.log(`    cd ${dirName}`);
+  console.log("    npm install");
+  console.log(`    npm run dev:mock        \u2192 mock server at http://localhost:${host.port}`);
+}
+
+blank();
+console.log("  Your scaffold includes:");
+console.log("    src/blocks/hello-block.tsx    \u2190 custom block example (rename me!)");
+console.log("    src/components/greeting.tsx   \u2190 standalone component (rename me!)");
+console.log("    src/contracts.ts              \u2190 PageContract type re-export");
+console.log("    mock/hello-contract.ts        \u2190 example PageContract with data");
+
+blank();
+console.log(`  Integrate with your ${host.name} plugin:`);
+console.log("    1. Import { ContractPage } from '@middag-io/react'");
+console.log("    2. Pass your Inertia page props as the contract");
+console.log("    3. See: https://docs.middag.io/getting-started");
+
+blank();
+console.log("  More commands (after install):");
+console.log("    npx @middag-io/react doctor     \u2192 validate setup");
+console.log("    npx @middag-io/react add-block  \u2192 scaffold new block type");
+console.log("    npx @middag-io/react upgrade     \u2192 check for updates");
+
+blank();
 console.log("  Docs: https://docs.middag.io");
-console.log("");
+blank();