create-middag-ui 0.3.3 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/scaffold.js +111 -14
- package/package.json +1 -1
package/lib/scaffold.js
CHANGED
|
@@ -93,6 +93,7 @@ export function scaffoldPackageJson(targetDir, host, cwd) {
|
|
|
93
93
|
},
|
|
94
94
|
dependencies: {
|
|
95
95
|
"@middag-io/react": `^${getLibVersion()}`,
|
|
96
|
+
"@fontsource-variable/figtree": "^5.0.0",
|
|
96
97
|
},
|
|
97
98
|
devDependencies: {
|
|
98
99
|
"@types/react": "^19.0.0",
|
|
@@ -104,8 +105,6 @@ export function scaffoldPackageJson(targetDir, host, cwd) {
|
|
|
104
105
|
typescript: "^5.7.0",
|
|
105
106
|
vite: "^6.0.0",
|
|
106
107
|
"@vitejs/plugin-react": "^4.0.0",
|
|
107
|
-
tailwindcss: "^4.0.0",
|
|
108
|
-
"@tailwindcss/vite": "^4.0.0",
|
|
109
108
|
},
|
|
110
109
|
};
|
|
111
110
|
|
|
@@ -147,17 +146,18 @@ export function scaffoldViteConfig(targetDir, host) {
|
|
|
147
146
|
|
|
148
147
|
const content = `import { defineConfig } from "vite";
|
|
149
148
|
import react from "@vitejs/plugin-react";
|
|
150
|
-
import tailwindcss from "@tailwindcss/vite";
|
|
151
149
|
import { resolve } from "path";
|
|
152
150
|
|
|
153
151
|
export default defineConfig({
|
|
154
|
-
plugins: [react()
|
|
152
|
+
plugins: [react()],
|
|
155
153
|
root: "mock",
|
|
156
154
|
server: { port: ${host.port} },
|
|
157
155
|
resolve: {
|
|
158
156
|
alias: {
|
|
159
157
|
"@/": resolve(__dirname, "src") + "/",
|
|
160
158
|
"@mock/": resolve(__dirname, "mock") + "/",
|
|
159
|
+
"@inertiajs/react": resolve(__dirname, "mock/adapters/inertia-react.ts"),
|
|
160
|
+
"@inertiajs/core": resolve(__dirname, "mock/adapters/inertia-core.ts"),
|
|
161
161
|
},
|
|
162
162
|
},
|
|
163
163
|
});
|
|
@@ -295,8 +295,10 @@ export function scaffoldMockFiles(targetDir) {
|
|
|
295
295
|
* Replace this with real data from your server.
|
|
296
296
|
*/
|
|
297
297
|
export const helloContract: PageContract = {
|
|
298
|
-
|
|
299
|
-
|
|
298
|
+
version: "1",
|
|
299
|
+
shell: "product",
|
|
300
|
+
page: {
|
|
301
|
+
key: "hello",
|
|
300
302
|
title: "Hello MIDDAG",
|
|
301
303
|
breadcrumbs: [
|
|
302
304
|
{ label: "Home", href: "/" },
|
|
@@ -314,7 +316,6 @@ export const helloContract: PageContract = {
|
|
|
314
316
|
title: "Setup Complete",
|
|
315
317
|
value: "1",
|
|
316
318
|
subtitle: "@middag-io/react is working",
|
|
317
|
-
trend: { direction: "up", value: "100%", label: "Ready" },
|
|
318
319
|
},
|
|
319
320
|
},
|
|
320
321
|
{
|
|
@@ -332,7 +333,7 @@ export const helloContract: PageContract = {
|
|
|
332
333
|
{ id: 2, name: "Second item", status: "Draft" },
|
|
333
334
|
{ id: 3, name: "Third item", status: "Active" },
|
|
334
335
|
],
|
|
335
|
-
pagination: {
|
|
336
|
+
pagination: { page: 1, totalPages: 1, perPage: 10, totalRows: 3 },
|
|
336
337
|
},
|
|
337
338
|
},
|
|
338
339
|
],
|
|
@@ -353,9 +354,12 @@ export const helloContract: PageContract = {
|
|
|
353
354
|
import { createRoot } from "react-dom/client";
|
|
354
355
|
import { ContractPage, registerDefaults } from "@middag-io/react";
|
|
355
356
|
import "@middag-io/react/style.css";
|
|
356
|
-
import "
|
|
357
|
+
import "@fontsource-variable/figtree";
|
|
357
358
|
import { helloContract } from "./hello-contract";
|
|
358
359
|
|
|
360
|
+
// Make contract available to usePage() mock
|
|
361
|
+
(window as any).__MIDDAG_MOCK_CONTRACT__ = helloContract;
|
|
362
|
+
|
|
359
363
|
// Register all default shells, layouts, and blocks
|
|
360
364
|
registerDefaults();
|
|
361
365
|
|
|
@@ -382,7 +386,8 @@ createRoot(document.getElementById("root")!).render(
|
|
|
382
386
|
<title>MIDDAG React UI \u2014 Mock</title>
|
|
383
387
|
</head>
|
|
384
388
|
<body>
|
|
385
|
-
<div id="root"></div>
|
|
389
|
+
<div id="root" class="middag-root"></div>
|
|
390
|
+
<div id="middag-portals" class="middag-root"></div>
|
|
386
391
|
<script type="module" src="./main.tsx"></script>
|
|
387
392
|
</body>
|
|
388
393
|
</html>
|
|
@@ -391,9 +396,101 @@ createRoot(document.getElementById("root")!).render(
|
|
|
391
396
|
);
|
|
392
397
|
}
|
|
393
398
|
|
|
394
|
-
// mock/
|
|
395
|
-
const
|
|
396
|
-
|
|
397
|
-
|
|
399
|
+
// mock/adapters/inertia-react.ts
|
|
400
|
+
const adaptersDir = join(mockDir, "adapters");
|
|
401
|
+
ensureDir(adaptersDir);
|
|
402
|
+
|
|
403
|
+
const inertiaReactPath = join(adaptersDir, "inertia-react.ts");
|
|
404
|
+
if (!skipIfExists(inertiaReactPath, "mock/adapters/inertia-react.ts")) {
|
|
405
|
+
writeFile(
|
|
406
|
+
inertiaReactPath,
|
|
407
|
+
`/**
|
|
408
|
+
* Mock @inertiajs/react \u2014 standalone adapter for mock dev server.
|
|
409
|
+
* Vite alias redirects @inertiajs/react imports here.
|
|
410
|
+
*/
|
|
411
|
+
import { createElement, forwardRef, useEffect, type ReactNode, type AnchorHTMLAttributes } from "react";
|
|
412
|
+
import { router } from "./inertia-core";
|
|
413
|
+
|
|
414
|
+
const mockSharedProps = {
|
|
415
|
+
navigation: {
|
|
416
|
+
sections: [
|
|
417
|
+
{
|
|
418
|
+
key: "home",
|
|
419
|
+
label: "Home",
|
|
420
|
+
icon: "house",
|
|
421
|
+
group: "main",
|
|
422
|
+
items: [
|
|
423
|
+
{ key: "home.dashboard", label: "Dashboard", href: "/", active: true, children: [] },
|
|
424
|
+
],
|
|
425
|
+
},
|
|
426
|
+
],
|
|
427
|
+
activeKey: "home.dashboard",
|
|
428
|
+
},
|
|
429
|
+
auth: { id: 1, name: "Dev User", email: "dev@localhost", capabilities: [] },
|
|
430
|
+
theme: { appearance: "light" as const },
|
|
431
|
+
flash: {},
|
|
432
|
+
locale: "en",
|
|
433
|
+
version: "0.0.0-mock",
|
|
434
|
+
};
|
|
435
|
+
|
|
436
|
+
export function usePage<T = Record<string, unknown>>(): { props: T; url: string } {
|
|
437
|
+
const contract = typeof window !== "undefined" ? (window as any).__MIDDAG_MOCK_CONTRACT__ : undefined;
|
|
438
|
+
return { props: { ...mockSharedProps, contract } as T, url: window.location.pathname };
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
export function Head({ title, children }: { title?: string; children?: ReactNode }) {
|
|
442
|
+
useEffect(() => { if (title) document.title = title; }, [title]);
|
|
443
|
+
return children ? createElement("span", { style: { display: "none" } }, children) : null;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
interface MockLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
|
|
447
|
+
href?: string;
|
|
448
|
+
method?: string;
|
|
449
|
+
preserveScroll?: boolean;
|
|
450
|
+
preserveState?: boolean;
|
|
451
|
+
as?: string;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
export const Link = forwardRef<HTMLAnchorElement, MockLinkProps>(function MockLink(
|
|
455
|
+
{ href, onClick, children, as: _as, method: _m, preserveScroll: _ps, preserveState: _pst, ...rest },
|
|
456
|
+
ref,
|
|
457
|
+
) {
|
|
458
|
+
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
459
|
+
if (onClick) onClick(e);
|
|
460
|
+
if (e.defaultPrevented) return;
|
|
461
|
+
e.preventDefault();
|
|
462
|
+
if (href) window.location.hash = href;
|
|
463
|
+
};
|
|
464
|
+
return createElement("a", { ...rest, href: href ?? "#", ref, onClick: handleClick }, children);
|
|
465
|
+
});
|
|
466
|
+
|
|
467
|
+
export { router };
|
|
468
|
+
`,
|
|
469
|
+
"mock/adapters/inertia-react.ts",
|
|
470
|
+
);
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
// mock/adapters/inertia-core.ts
|
|
474
|
+
const inertiaCorePathFile = join(adaptersDir, "inertia-core.ts");
|
|
475
|
+
if (!skipIfExists(inertiaCorePathFile, "mock/adapters/inertia-core.ts")) {
|
|
476
|
+
writeFile(
|
|
477
|
+
inertiaCorePathFile,
|
|
478
|
+
`/**
|
|
479
|
+
* Mock @inertiajs/core \u2014 standalone adapter for mock dev server.
|
|
480
|
+
* Vite alias redirects @inertiajs/core imports here.
|
|
481
|
+
*/
|
|
482
|
+
export const router = {
|
|
483
|
+
get: (url: string) => { window.location.hash = url; },
|
|
484
|
+
post: (url: string) => { console.log("[mock] POST", url); },
|
|
485
|
+
put: (url: string) => { console.log("[mock] PUT", url); },
|
|
486
|
+
patch: (url: string) => { console.log("[mock] PATCH", url); },
|
|
487
|
+
delete: (url: string) => { console.log("[mock] DELETE", url); },
|
|
488
|
+
reload: () => { window.location.reload(); },
|
|
489
|
+
visit: (url: string) => { window.location.hash = url; },
|
|
490
|
+
on: () => () => {},
|
|
491
|
+
};
|
|
492
|
+
`,
|
|
493
|
+
"mock/adapters/inertia-core.ts",
|
|
494
|
+
);
|
|
398
495
|
}
|
|
399
496
|
}
|