create-middag-ui 0.8.0 → 0.10.0

package/cli.js

@@ -31,7 +31,10 @@ import {
   scaffoldIndexHtml,
   scaffoldDemoFiles,
   scaffoldPageExamples,
-  scaffoldAppFiles,
+  scaffoldProApp,
+  scaffoldFreeApp,
+  scaffoldFreeAdapters,
+  scaffoldDevShell,
 } from "./lib/scaffold.js";
 import { runNpmInstall } from "./lib/install.js";
 import { log, success, heading, blank, info } from "./lib/ui.js";
@@ -111,9 +114,9 @@ if (!dirCreated) {
 
 heading(5, TOTAL_STEPS, "Scaffolding config files");
 
-scaffoldPackageJson(targetDir, host, cwd);
+scaffoldPackageJson(targetDir, host, cwd, registryPath);
 scaffoldTsconfig(targetDir);
-scaffoldViteConfig(targetDir, host);
+scaffoldViteConfig(targetDir, host, registryPath);
 scaffoldIndexHtml(targetDir);
 
 // ── Step 6: Scaffold ~/.npmrc (GitHub path only) ─────────────────────────
@@ -133,13 +136,23 @@ heading(7, TOTAL_STEPS, "Creating demo files");
 
 scaffoldDemoFiles(targetDir);
 
-// ── Step 8: Scaffold app files + page examples ─────────────────────────
+// ── Step 8: Scaffold app + page examples (PRO vs FREE) ─────────────────
 
-heading(8, TOTAL_STEPS, "Creating app and page examples");
+const isPro = registryPath === "github";
+heading(8, TOTAL_STEPS, `Creating ${isPro ? "PRO" : "FREE"} UI module`);
 
-scaffoldAppFiles(targetDir);
 scaffoldPageExamples(targetDir);
 
+if (isPro) {
+  scaffoldProApp(targetDir);
+  success("PRO: using MockProductShell + HostAdapter from @middag-io/react/mock");
+} else {
+  scaffoldFreeAdapters(targetDir);
+  scaffoldDevShell(targetDir);
+  scaffoldFreeApp(targetDir);
+  success("FREE: generated DevShell + local Inertia adapters");
+}
+
 // ── Step 9: npm install ──────────────────────────────────────────────────
 
 heading(9, TOTAL_STEPS, "Installing dependencies");

package/lib/detect.js

@@ -8,9 +8,9 @@ import { existsSync } from "node:fs";
 import { join } from "node:path";
 
 export 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 },
+  moodle: { name: "Moodle", detect: "version.php", port: 5174, headerHeight: 50 },
+  wordpress: { name: "WordPress", detect: "wp-config.php", port: 5175, headerHeight: 32 },
+  custom: { name: "Custom", detect: null, port: 5176, headerHeight: 0 },
 };
 
 /**

package/lib/scaffold.js

@@ -75,11 +75,24 @@ export function createTargetDir(targetDir) {
 /**
  * Scaffold package.json.
  */
-export function scaffoldPackageJson(targetDir, host, cwd) {
+/**
+ * @param {string} registryPath - "github" (PRO) or "public" (FREE)
+ */
+export function scaffoldPackageJson(targetDir, host, cwd, registryPath) {
   const filePath = join(targetDir, "package.json");
   if (skipIfExists(filePath, "package.json")) return;
 
+  const isPro = registryPath === "github";
   const projectName = basename(cwd) || "project";
+  const deps = {
+    "@middag-io/react": `^${getLibVersion()}`,
+    "@fontsource-variable/figtree": "^5.0.0",
+    "react-router": "^7.0.0",
+  };
+  if (isPro) {
+    deps["sonner"] = "^2.0.0";
+  }
+
   const pkg = {
     name: `${projectName}-ui`,
     private: true,
@@ -91,10 +104,7 @@ export function scaffoldPackageJson(targetDir, host, cwd) {
       lint: "eslint .",
       "lint:fix": "eslint . --fix",
     },
-    dependencies: {
-      "@middag-io/react": `^${getLibVersion()}`,
-      "@fontsource-variable/figtree": "^5.0.0",
-    },
+    dependencies: deps,
     devDependencies: {
       "@types/react": "^19.0.0",
       "@types/react-dom": "^19.0.0",
@@ -140,17 +150,30 @@ export function scaffoldTsconfig(targetDir) {
 /**
  * Scaffold vite.config.ts.
  */
-export function scaffoldViteConfig(targetDir, host) {
+/**
+ * @param {string} registryPath - "github" (PRO) or "public" (FREE)
+ */
+export function scaffoldViteConfig(targetDir, host, registryPath) {
   const filePath = join(targetDir, "vite.config.ts");
   if (skipIfExists(filePath, "vite.config.ts")) return;
 
+  const isPro = registryPath === "github";
+  const adapterComment = isPro
+    ? "// PRO: Inertia mocks from @middag-io/react/mock"
+    : "// FREE: Inertia mocks from local adapters";
+  const adapterReact = isPro
+    ? 'resolve(__dirname, "node_modules/@middag-io/react/mock/adapters/inertia-react.ts")'
+    : 'resolve(__dirname, "src/adapters/inertia-react.ts")';
+  const adapterCore = isPro
+    ? 'resolve(__dirname, "node_modules/@middag-io/react/mock/adapters/inertia-core.ts")'
+    : 'resolve(__dirname, "src/adapters/inertia-core.ts")';
+
   const content = `/**
  * Vite config \u2014 used by \`npm run dev\` and \`npm run build\`.
  *
- * The Inertia aliases below redirect @inertiajs/* imports to local
- * mock adapters so the dev server works standalone (no Moodle/WP).
- * In production, the real @inertiajs packages handle routing and
- * page resolution \u2014 these aliases have no effect.
+ * Inertia aliases redirect @inertiajs/* to mock adapters so the
+ * dev server works standalone. In production, the real @inertiajs
+ * packages handle routing and page resolution.
  */
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
@@ -161,11 +184,10 @@ export default defineConfig({
   server: { port: ${host.port} },
   resolve: {
     alias: {
-      // Path alias \u2014 import from "@/components/..." resolves to src/
       "@/": resolve(__dirname, "src") + "/",
-      // Mock Inertia for standalone dev \u2014 see src/adapters/ for implementation
-      "@inertiajs/react": resolve(__dirname, "src/adapters/inertia-react.ts"),
-      "@inertiajs/core": resolve(__dirname, "src/adapters/inertia-core.ts"),
+      ${adapterComment}
+      "@inertiajs/react": ${adapterReact},
+      "@inertiajs/core": ${adapterCore},
     },
   },
 });
@@ -244,15 +266,15 @@ export interface HelloBlockData {
   name: string;
 }
 
-/** Custom block component. Receives data from the PageContract. */
-export function HelloBlock({ data }: BlockProps<HelloBlockData>) {
+/** Custom block component. Receives block descriptor from the PageContract. */
+export function HelloBlock({ block }: BlockProps<HelloBlockData>) {
   return (
     <div className="rounded-lg border bg-card p-6 text-card-foreground">
       <h2 className="text-lg font-semibold text-foreground">
-        {data.greeting}
+        {block.data.greeting}
       </h2>
       <p className="mt-2 text-muted-foreground">
-        Welcome, {data.name}! This is a custom block.
+        Welcome, {block.data.name}! This is a custom block.
       </p>
       <p className="mt-4 text-sm text-muted-foreground">
         Edit this file at <code className="text-xs bg-muted px-1 py-0.5 rounded">src/blocks/hello-block.tsx</code>
@@ -773,11 +795,356 @@ export const settingsContract: PageContract = {
   }
 }
 
-// ── App files (entry point + router + adapters) ─────────────────────────
+// ── App files — PRO path (GitHub Packages) ─────────────────────────────
+
+/**
+ * Scaffold PRO app: src/main.tsx + src/app.tsx.
+ * Uses mock barrel from @middag-io/react/mock. No local adapters/shell.
+ */
+export function scaffoldProApp(targetDir) {
+  ensureDir(join(targetDir, "src"));
+
+  const mainPath = join(targetDir, "src", "main.tsx");
+  if (!skipIfExists(mainPath, "src/main.tsx")) {
+    writeFile(mainPath, `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { registerDefaults, registerShell } from "@middag-io/react";
+import { MockProductShell } from "@middag-io/react/mock";
+import "@middag-io/react/style.css";
+import "./theme.css";
+import "@fontsource-variable/figtree";
+import { App } from "./app";
+
+registerDefaults();
+registerShell("product", MockProductShell);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode><App /></StrictMode>,
+);
+`, "src/main.tsx");
+  }
+
+  const appPath = join(targetDir, "src", "app.tsx");
+  if (!skipIfExists(appPath, "src/app.tsx")) {
+    writeFile(appPath, `import { useEffect } from "react";
+import { BrowserRouter, Routes, Route, useNavigate } from "react-router";
+import { ContractPage, I18nProvider } from "@middag-io/react";
+import { HostAdapter, MockPageProvider, MockI18nProvider } from "@middag-io/react/mock";
+import type { PageContract } from "@middag-io/react";
+import { dashboardContract } from "./pages/dashboard";
+import { connectorsContract } from "./pages/connectors";
+import { settingsContract } from "./pages/settings";
+
+let _navigate: ((to: string) => void) | null = null;
+function NavigateBridge() {
+  const navigate = useNavigate();
+  useEffect(() => { _navigate = (to: string) => navigate(to); }, [navigate]);
+  return null;
+}
+if (typeof window !== "undefined") {
+  (window as any).__MIDDAG_MOCK_NAVIGATE__ = (to: string) => { if (_navigate) _navigate(to); };
+}
+
+const sharedProps = {
+  auth: { id: 1, name: "Dev User", email: "dev@localhost", capabilities: [] },
+  theme: { appearance: "light" as const, strings: {} as Record<string, string> },
+  flash: {},
+  locale: "en",
+  version: "0.0.0-dev",
+  scope: { extension: null, context: "global" },
+};
+
+function buildNavigation(activeKey: string) {
+  return {
+    sections: [
+      { key: "overview", label: "Overview", icon: "home", group: "main" as const, items: [{ key: "overview.dashboard", label: "Dashboard", href: "/", active: activeKey === "overview.dashboard", children: [] }] },
+      { key: "integration", label: "Integration", icon: "plug", group: "main" as const, items: [{ key: "integration.connectors", label: "Connectors", href: "/connectors", active: activeKey === "integration.connectors", children: [] }] },
+      { key: "system", label: "System", icon: "settings", group: "system" as const, items: [{ key: "system.settings", label: "Settings", href: "/settings", active: activeKey === "system.settings", children: [] }] },
+    ],
+    activeKey,
+  };
+}
+
+function MockRoute({ contract, activeKey }: { contract: PageContract; activeKey: string }) {
+  return (
+    <MockPageProvider value={{ props: { ...sharedProps, contract, navigation: buildNavigation(activeKey) }, url: window.location.pathname }}>
+      <ContractPage contract={contract} />
+    </MockPageProvider>
+  );
+}
+
+export function App() {
+  return (
+    <MockI18nProvider>
+      <MockPageProvider value={{ props: { ...sharedProps, contract: null, navigation: buildNavigation("") }, url: "/" }}>
+        <I18nProvider>
+          <BrowserRouter>
+            <NavigateBridge />
+            <HostAdapter>
+              <Routes>
+                <Route path="/" element={<MockRoute contract={dashboardContract} activeKey="overview.dashboard" />} />
+                <Route path="/connectors" element={<MockRoute contract={connectorsContract} activeKey="integration.connectors" />} />
+                <Route path="/settings" element={<MockRoute contract={settingsContract} activeKey="system.settings" />} />
+              </Routes>
+            </HostAdapter>
+          </BrowserRouter>
+        </I18nProvider>
+      </MockPageProvider>
+    </MockI18nProvider>
+  );
+}
+`, "src/app.tsx");
+  }
+}
+
+/**
+ * Scaffold FREE adapters: src/adapters/ with react-router.
+ */
+export function scaffoldFreeAdapters(targetDir) {
+  ensureDir(join(targetDir, "src", "adapters"));
+
+  const corePath = join(targetDir, "src", "adapters", "inertia-core.ts");
+  if (!skipIfExists(corePath, "src/adapters/inertia-core.ts")) {
+    writeFile(corePath, `/**
+ * Mock @inertiajs/core for standalone dev server.
+ * Vite alias redirects @inertiajs/core here.
+ */
+let _navigate: ((to: string) => void) | null = null;
+
+export function setMockNavigate(fn: (to: string) => void) { _navigate = fn; }
+
+export const router = {
+  get: (url: string) => { _navigate ? _navigate(url) : console.log("[mock] GET", url); },
+  post: (url: string) => { console.log("[mock] POST", url); },
+  put: (url: string) => { console.log("[mock] PUT", url); },
+  patch: (url: string) => { console.log("[mock] PATCH", url); },
+  delete: (url: string) => { console.log("[mock] DELETE", url); },
+  reload: () => { window.location.reload(); },
+  visit: (url: string) => { _navigate ? _navigate(url) : console.log("[mock] VISIT", url); },
+  on: () => () => {},
+};
+`, "src/adapters/inertia-core.ts");
+  }
+
+  const reactPath = join(targetDir, "src", "adapters", "inertia-react.ts");
+  if (!skipIfExists(reactPath, "src/adapters/inertia-react.ts")) {
+    writeFile(reactPath, `/**
+ * Mock @inertiajs/react for standalone dev server (FREE).
+ * Context-based usePage + react-router Link.
+ */
+import React from "react";
+import { useNavigate } from "react-router";
+import { router } from "./inertia-core";
+
+const PageContext = React.createContext<{ props: Record<string, unknown>; url: string }>({ props: {}, url: "/" });
+
+export function PageProvider({ value, children }: {
+  value: { props: Record<string, unknown>; url: string };
+  children: React.ReactNode;
+}) {
+  return React.createElement(PageContext.Provider, { value }, children);
+}
+
+export function usePage<T = Record<string, unknown>>(): { props: T; url: string } {
+  return React.useContext(PageContext) as { props: T; url: string };
+}
+
+export function Head({ title, children }: { title?: string; children?: React.ReactNode }) {
+  React.useEffect(() => { if (title) document.title = title; }, [title]);
+  return children ? React.createElement("span", { style: { display: "none" } }, children) : null;
+}
+
+interface MockLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  href?: string; method?: string; preserveScroll?: boolean; preserveState?: boolean; as?: string;
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, MockLinkProps>(function MockLink(
+  { href, onClick, children, as: _as, method: _m, preserveScroll: _ps, preserveState: _pst, ...rest }, ref,
+) {
+  const navigate = useNavigate();
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) onClick(e);
+    if (e.defaultPrevented) return;
+    e.preventDefault();
+    if (href) navigate(href);
+  };
+  return React.createElement("a", { ...rest, href: href ?? "#", ref, onClick: handleClick }, children);
+});
+
+export { router };
+`, "src/adapters/inertia-react.ts");
+  }
+}
+
+/**
+ * Scaffold FREE DevShell: src/shells/DevShell.tsx.
+ */
+export function scaffoldDevShell(targetDir) {
+  ensureDir(join(targetDir, "src", "shells"));
+
+  const shellPath = join(targetDir, "src", "shells", "DevShell.tsx");
+  if (skipIfExists(shellPath, "src/shells/DevShell.tsx")) return;
+
+  writeFile(shellPath, `/**
+ * DevShell \u2014 custom shell for the standalone dev server (FREE).
+ * Offcanvas sidebar (fully hidden when collapsed) + footer controls.
+ * Registered as "product" shell override in main.tsx.
+ */
+import { useCallback, type ReactElement } from "react";
+import { usePage } from "@inertiajs/react";
+import {
+  Sidebar, SidebarFooter, SidebarHeader, SidebarProvider,
+  SidebarNav, PageHeader, NavErrorBoundary, AppearanceToggle, useSidebar,
+} from "@middag-io/react";
+import type { ShellProps, SharedProps, PageMeta } from "@middag-io/react";
+
+function DevShellInner({ children }: ShellProps): ReactElement {
+  const { toggleSidebar, open } = useSidebar();
+  const { props } = usePage<SharedProps>();
+  const page: PageMeta = (props as SharedProps & { contract?: { page?: PageMeta } }).contract?.page ?? { key: "unknown", title: "", breadcrumbs: [], actions: [] };
+  const handleMenuToggle = useCallback(() => { toggleSidebar(); }, [toggleSidebar]);
+
+  return (
+    <>
+      <Sidebar aria-label="Navigation" collapsible="offcanvas" className="border-sidebar-border bg-sidebar border-r">
+        <SidebarHeader className="border-sidebar-border border-b px-4 py-3">
+          <p className="text-sidebar-foreground text-sm font-semibold">MIDDAG</p>
+        </SidebarHeader>
+        <NavErrorBoundary><SidebarNav /></NavErrorBoundary>
+        <SidebarFooter className="border-sidebar-border mt-auto border-t px-3 py-2">
+          <div className="flex items-center justify-between">
+            <button onClick={handleMenuToggle} className="text-muted-foreground hover:bg-sidebar-hover hover:text-sidebar-foreground flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1.5 text-xs transition-colors" type="button">
+              <span className="text-base leading-none">&laquo;</span><span>Collapse</span>
+            </button>
+            <AppearanceToggle />
+          </div>
+        </SidebarFooter>
+      </Sidebar>
+
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <NavErrorBoundary><PageHeader page={page} onMobileMenuClick={handleMenuToggle} /></NavErrorBoundary>
+        <div className="flex min-h-0 flex-1">
+          <main className="min-w-0 flex-1 overflow-auto" aria-live="polite" aria-busy="false">{children}</main>
+        </div>
+      </div>
+
+      {!open && (
+        <div className="fixed bottom-3 left-3 z-30 flex items-center gap-1.5">
+          <button onClick={handleMenuToggle} className="bg-sidebar border-sidebar-border text-muted-foreground hover:text-sidebar-foreground hover:bg-sidebar-hover flex h-9 w-9 items-center justify-center rounded-lg border shadow-md transition-colors" aria-label="Open navigation" type="button">
+            <span className="text-base leading-none">&raquo;</span>
+          </button>
+          <div className="bg-sidebar border-sidebar-border rounded-lg border shadow-md"><AppearanceToggle /></div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export function DevShell({ children }: ShellProps): ReactElement {
+  return (
+    <SidebarProvider defaultOpen={true} style={{ "--sidebar-width": "260px" } as React.CSSProperties} className="bg-background text-foreground flex min-h-0 flex-1">
+      <DevShellInner>{children}</DevShellInner>
+    </SidebarProvider>
+  );
+}
+`, "src/shells/DevShell.tsx");
+}
 
 /**
- * Scaffold src/main.tsx, src/app.tsx, and src/adapters/.
+ * Scaffold FREE app: src/main.tsx + src/app.tsx.
  */
+export function scaffoldFreeApp(targetDir) {
+  ensureDir(join(targetDir, "src"));
+
+  const mainPath = join(targetDir, "src", "main.tsx");
+  if (!skipIfExists(mainPath, "src/main.tsx")) {
+    writeFile(mainPath, `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { registerDefaults, registerShell } from "@middag-io/react";
+import "@middag-io/react/style.css";
+import "./theme.css";
+import "@fontsource-variable/figtree";
+import { DevShell } from "./shells/DevShell";
+import { App } from "./app";
+
+registerDefaults();
+registerShell("product", DevShell);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode><App /></StrictMode>,
+);
+`, "src/main.tsx");
+  }
+
+  const appPath = join(targetDir, "src", "app.tsx");
+  if (!skipIfExists(appPath, "src/app.tsx")) {
+    writeFile(appPath, `import { useEffect } from "react";
+import { BrowserRouter, Routes, Route, useNavigate } from "react-router";
+import { ContractPage, I18nProvider } from "@middag-io/react";
+import type { PageContract } from "@middag-io/react";
+import { PageProvider } from "./adapters/inertia-react";
+import { setMockNavigate } from "./adapters/inertia-core";
+import { dashboardContract } from "./pages/dashboard";
+import { connectorsContract } from "./pages/connectors";
+import { settingsContract } from "./pages/settings";
+
+function NavigateBridge() {
+  const navigate = useNavigate();
+  useEffect(() => { setMockNavigate((to: string) => navigate(to)); }, [navigate]);
+  return null;
+}
+
+const sharedProps = {
+  auth: { id: 1, name: "Dev User", email: "dev@localhost", capabilities: [] },
+  theme: { appearance: "light" as const, strings: {} as Record<string, string> },
+  flash: {},
+  locale: "en",
+  version: "0.0.0-dev",
+  scope: { extension: null, context: "global" },
+};
+
+function buildNavigation(activeKey: string) {
+  return {
+    sections: [
+      { key: "overview", label: "Overview", icon: "home", group: "main" as const, items: [{ key: "overview.dashboard", label: "Dashboard", href: "/", active: activeKey === "overview.dashboard", children: [] }] },
+      { key: "integration", label: "Integration", icon: "plug", group: "main" as const, items: [{ key: "integration.connectors", label: "Connectors", href: "/connectors", active: activeKey === "integration.connectors", children: [] }] },
+      { key: "system", label: "System", icon: "settings", group: "system" as const, items: [{ key: "system.settings", label: "Settings", href: "/settings", active: activeKey === "system.settings", children: [] }] },
+    ],
+    activeKey,
+  };
+}
+
+function MockRoute({ contract, activeKey }: { contract: PageContract; activeKey: string }) {
+  return (
+    <PageProvider value={{ props: { ...sharedProps, contract, navigation: buildNavigation(activeKey) }, url: window.location.pathname }}>
+      <ContractPage contract={contract} />
+    </PageProvider>
+  );
+}
+
+export function App() {
+  return (
+    <PageProvider value={{ props: { ...sharedProps, contract: null, navigation: buildNavigation("") }, url: "/" }}>
+      <I18nProvider>
+        <BrowserRouter>
+          <NavigateBridge />
+          <Routes>
+            <Route path="/" element={<MockRoute contract={dashboardContract} activeKey="overview.dashboard" />} />
+            <Route path="/connectors" element={<MockRoute contract={connectorsContract} activeKey="integration.connectors" />} />
+            <Route path="/settings" element={<MockRoute contract={settingsContract} activeKey="system.settings" />} />
+          </Routes>
+        </BrowserRouter>
+      </I18nProvider>
+    </PageProvider>
+  );
+}
+`, "src/app.tsx");
+  }
+}
+
+// ── LEGACY (kept for backward compat, delegates to FREE) ────────────────
+
+/** @deprecated Use scaffoldFreeApp + scaffoldFreeAdapters instead */
 export function scaffoldAppFiles(targetDir) {
   ensureDir(join(targetDir, "src"));
   ensureDir(join(targetDir, "src", "adapters"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-middag-ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "description": "Bootstrap a MIDDAG React UI layer in your Moodle or WordPress plugin",
   "bin": {