create-middag-ui 0.1.0

package/index.js

@@ -0,0 +1,327 @@
+#!/usr/bin/env node
+
+/**
+ * create-middag-ui — Bootstrap a MIDDAG React UI layer.
+ *
+ * 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)
+ *
+ * After init, the remaining CLI commands (doctor, dev, add-block, upgrade)
+ * 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());
+    }),
+  );
+}
+
+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}`);
+}
+
+function detectHost(cwd) {
+  for (const [key, host] of Object.entries(HOSTS)) {
+    if (host.detect && existsSync(join(cwd, host.detect))) return key;
+  }
+  return null;
+}
+
+// ── Main ───────────────────────────────────────────────────────────────────
+
+const cwd = process.cwd();
+const startTime = Date.now();
+
+log("Initializing MIDDAG React UI in your project...\n");
+
+// Step 1: Detect host
+let host = detectHost(cwd);
+if (host) {
+  success(`Detected host: ${HOSTS[host].name} (found ${HOSTS[host].detect})`);
+} 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 uiDir = join(cwd, "ui");
+
+// 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: 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",
+  );
+} else {
+  success(".npmrc already exists");
+}
+
+// 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 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");
+}
+
+// Step 6: Create hello-world contract
+const mockDir = join(uiDir, "mock");
+mkdirSync(join(uiDir, "src"), { recursive: true });
+mkdirSync(mockDir, { recursive: true });
+
+const helloContractPath = join(mockDir, "hello-contract.ts");
+if (!existsSync(helloContractPath)) {
+  writeFileSync(
+    helloContractPath,
+    `import type { PageContract } from "@middag-io/react";
+
+/**
+ * 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)");
+}
+
+// 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");
+}
+
+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");
+}
+
+// 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");
+}
+
+// Step 9: Create tailwind CSS
+const cssPath = join(mockDir, "tailwind.css");
+if (!existsSync(cssPath)) {
+  writeFileSync(cssPath, '@import "tailwindcss";\n');
+  success("Created mock/tailwind.css");
+}
+
+// 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("");
+console.log("  Docs: https://docs.middag.io");
+console.log("");

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "create-middag-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
+  "bin": {
+    "create-middag-ui": "./index.js"
+  },
+  "files": [
+    "index.js"
+  ],
+  "keywords": [
+    "middag",
+    "react",
+    "moodle",
+    "wordpress",
+    "inertia",
+    "admin-ui",
+    "create"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/middag-io/middag-react.git",
+    "directory": "packages/create-middag-ui"
+  },
+  "license": "MIT"
+}