create-middag-ui 0.3.3 → 0.4.0

package/lib/scaffold.js

@@ -158,6 +158,8 @@ export default defineConfig({
     alias: {
       "@/": resolve(__dirname, "src") + "/",
       "@mock/": resolve(__dirname, "mock") + "/",
+      "@inertiajs/react": resolve(__dirname, "mock/adapters/inertia-react.ts"),
+      "@inertiajs/core": resolve(__dirname, "mock/adapters/inertia-core.ts"),
     },
   },
 });
@@ -295,7 +297,7 @@ export function scaffoldMockFiles(targetDir) {
  * Replace this with real data from your server.
  */
 export const helloContract: PageContract = {
-  shell: "admin",
+  shell: "product",
   meta: {
     title: "Hello MIDDAG",
     breadcrumbs: [
@@ -314,7 +316,6 @@ export const helloContract: PageContract = {
             title: "Setup Complete",
             value: "1",
             subtitle: "@middag-io/react is working",
-            trend: { direction: "up", value: "100%", label: "Ready" },
           },
         },
         {
@@ -332,7 +333,7 @@ export const helloContract: PageContract = {
               { id: 2, name: "Second item", status: "Draft" },
               { id: 3, name: "Third item", status: "Active" },
             ],
-            pagination: { current: 1, total: 1, perPage: 10, totalRows: 3 },
+            pagination: { page: 1, totalPages: 1, perPage: 10, totalRows: 3 },
           },
         },
       ],
@@ -353,7 +354,6 @@ export const helloContract: PageContract = {
 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
@@ -391,9 +391,87 @@ createRoot(document.getElementById("root")!).render(
     );
   }
 
-  // mock/tailwind.css
-  const cssPath = join(mockDir, "tailwind.css");
-  if (!skipIfExists(cssPath, "mock/tailwind.css")) {
-    writeFile(cssPath, '@import "tailwindcss";\n', "mock/tailwind.css");
+  // mock/adapters/inertia-react.ts
+  const adaptersDir = join(mockDir, "adapters");
+  ensureDir(adaptersDir);
+
+  const inertiaReactPath = join(adaptersDir, "inertia-react.ts");
+  if (!skipIfExists(inertiaReactPath, "mock/adapters/inertia-react.ts")) {
+    writeFile(
+      inertiaReactPath,
+      `/**
+ * Mock @inertiajs/react \u2014 standalone adapter for mock dev server.
+ * Vite alias redirects @inertiajs/react imports here.
+ */
+import { createElement, forwardRef, useEffect, type ReactNode, type AnchorHTMLAttributes } from "react";
+import { router } from "./inertia-core";
+
+const mockSharedProps = {
+  navigation: { sections: [], activeKey: "" },
+  auth: { id: 1, name: "Dev User", email: "dev@localhost", capabilities: [] },
+  theme: { appearance: "light" as const },
+  flash: {},
+  locale: "en",
+  version: "0.0.0-mock",
+};
+
+export function usePage<T = Record<string, unknown>>(): { props: T; url: string } {
+  return { props: mockSharedProps as T, url: window.location.pathname };
+}
+
+export function Head({ title, children }: { title?: string; children?: ReactNode }) {
+  useEffect(() => { if (title) document.title = title; }, [title]);
+  return children ? createElement("span", { style: { display: "none" } }, children) : null;
+}
+
+interface MockLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  href?: string;
+  method?: string;
+  preserveScroll?: boolean;
+  preserveState?: boolean;
+  as?: string;
+}
+
+export const Link = forwardRef<HTMLAnchorElement, MockLinkProps>(function MockLink(
+  { href, onClick, children, as: _as, method: _m, preserveScroll: _ps, preserveState: _pst, ...rest },
+  ref,
+) {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (onClick) onClick(e);
+    if (e.defaultPrevented) return;
+    e.preventDefault();
+    if (href) window.location.hash = href;
+  };
+  return createElement("a", { ...rest, href: href ?? "#", ref, onClick: handleClick }, children);
+});
+
+export { router };
+`,
+      "mock/adapters/inertia-react.ts",
+    );
+  }
+
+  // mock/adapters/inertia-core.ts
+  const inertiaCorePathFile = join(adaptersDir, "inertia-core.ts");
+  if (!skipIfExists(inertiaCorePathFile, "mock/adapters/inertia-core.ts")) {
+    writeFile(
+      inertiaCorePathFile,
+      `/**
+ * Mock @inertiajs/core \u2014 standalone adapter for mock dev server.
+ * Vite alias redirects @inertiajs/core imports here.
+ */
+export const router = {
+  get: (url: string) => { window.location.hash = 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) => { window.location.hash = url; },
+  on: () => () => {},
+};
+`,
+      "mock/adapters/inertia-core.ts",
+    );
   }
 }

package/package.json

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