create-davepi-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 David Baxter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# create-davepi-ui
+
+Scaffolder for new [davepi-ui](https://github.com/projik/davepi-ui) admin projects against a running [davepi](https://github.com/projik/davepi) backend.
+
+## Usage
+
+```bash
+npx create-davepi-ui my-admin --api-url http://localhost:4001
+cd my-admin
+pnpm dev
+```
+
+## Flags
+
+| Flag | Default | Purpose |
+|---|---|---|
+| `--api-url <url>` | `http://localhost:4001` | davepi backend base URL written to `.env` |
+| `--no-install` | off | Skip post-scaffold `pnpm install` |
+
+## What it does
+
+1. Copies the bundled template (Vite + React Router + shadcn + `@davepi/ui-react`).
+2. Rewrites `package.json` — pins `@davepi/ui-*` deps to the published versions matching this scaffolder, sets `private: true`, drops upstream repo metadata.
+3. Writes `.env` with `VITE_API_URL`.
+4. Runs `pnpm install` (unless `--no-install`).
+
+## License
+
+MIT

package/bin/index.js

@@ -0,0 +1,229 @@
+#!/usr/bin/env node
+/**
+ * `npx create-davepi-ui <name> [--api-url <url>] [--no-install]`
+ *
+ * Scaffolds a new davepi-ui admin project against a running davepi
+ * backend:
+ *   - copies the `default` template (a stripped Vite + React Router
+ *     shell built on @davepi/ui-react + shadcn primitives)
+ *   - rewrites `package.json` with the new project name + pinned
+ *     published versions of @davepi/ui-* (no workspace: protocol)
+ *   - writes `.env` carrying VITE_API_URL
+ *   - runs `pnpm install` (skip with --no-install)
+ *   - prints the next three commands
+ *
+ * No `inquirer`, no progress bars — keeps the failure surface small.
+ * Match davepi's own `create-davepi-app` posture.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const { spawnSync } = require('child_process');
+
+const DEFAULT_API_URL = 'http://localhost:4001';
+
+function out(line) {
+  process.stdout.write(line + '\n');
+}
+function err(line) {
+  process.stderr.write(line + '\n');
+}
+
+/**
+ * Read a `--name <value>` flag from argv. Returns:
+ *   - null   when flag absent
+ *   - true   when flag present but no value follows (boolean flag)
+ *   - string when flag has a non-flag value following
+ *
+ * Throws when the next token starts with `--` so a missing value
+ * doesn't silently consume the next flag's name.
+ */
+function flag(args, name) {
+  const i = args.indexOf(name);
+  if (i === -1) return null;
+  const next = args[i + 1];
+  if (next === undefined) return true;
+  if (typeof next === 'string' && next.startsWith('--')) {
+    const e = new Error(`Flag ${name} requires a value (got "${next}" which looks like another flag)`);
+    e.usage = true;
+    throw e;
+  }
+  return next;
+}
+
+function usage() {
+  out('Usage: npx create-davepi-ui <name> [--api-url <url>] [--no-install]');
+  out('');
+  out('Flags:');
+  out('  --api-url <url>   davepi backend base URL (default: http://localhost:4001)');
+  out('  --no-install      skip the post-scaffold `pnpm install`');
+}
+
+function copyTree(src, dst, skip) {
+  fs.mkdirSync(dst, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    if (skip && skip.has(entry.name)) continue;
+    const a = path.join(src, entry.name);
+    const b = path.join(dst, entry.name);
+    if (entry.isDirectory()) copyTree(a, b, skip);
+    else fs.copyFileSync(a, b);
+  }
+}
+
+/**
+ * Resolve the template root. Two layouts:
+ *   - published package: `<pkg>/templates/default` (shipped via
+ *     `prepublishOnly`).
+ *   - inside the monorepo during dev: fall back to
+ *     `<pkg>/../ui-app-react` directly.
+ */
+function resolveTemplate() {
+  const shipped = path.resolve(__dirname, '..', 'templates', 'default');
+  if (fs.existsSync(shipped)) return shipped;
+  const monorepoFallback = path.resolve(__dirname, '..', '..', 'ui-app-react');
+  if (fs.existsSync(monorepoFallback)) return monorepoFallback;
+  err('Could not find scaffolder template. Reinstall create-davepi-ui.');
+  process.exit(1);
+}
+
+/**
+ * Pin versions used in the template's `package.json`. Reads the
+ * shipped `pinned-versions.json` if present (written at publish time
+ * by `sync-templates.js`); otherwise falls back to the monorepo
+ * workspace versions discovered by walking siblings.
+ */
+function resolvePinnedVersions() {
+  const pinnedFile = path.resolve(__dirname, '..', 'templates', 'pinned-versions.json');
+  if (fs.existsSync(pinnedFile)) {
+    return JSON.parse(fs.readFileSync(pinnedFile, 'utf8'));
+  }
+  const out = {};
+  const packagesDir = path.resolve(__dirname, '..', '..');
+  for (const name of fs.readdirSync(packagesDir)) {
+    const pj = path.join(packagesDir, name, 'package.json');
+    if (!fs.existsSync(pj)) continue;
+    try {
+      const p = JSON.parse(fs.readFileSync(pj, 'utf8'));
+      if (p.name && p.name.startsWith('@davepi/ui-') && p.version) {
+        out[p.name] = `^${p.version}`;
+      }
+    } catch {}
+  }
+  return out;
+}
+
+/**
+ * Rewrite a scaffolded `package.json`:
+ *   - set `name` to the project name
+ *   - reset to `private: true`, `version: "0.0.0"`
+ *   - replace `workspace:^` / `workspace:*` references in deps and
+ *     devDeps with the pinned semver from the published packages
+ *   - drop the original repo / publish metadata so the user's new
+ *     project doesn't impersonate davepi-ui
+ */
+function rewritePackageJson(file, projectName, pins) {
+  const raw = JSON.parse(fs.readFileSync(file, 'utf8'));
+  raw.name = projectName;
+  raw.version = '0.0.0';
+  raw.private = true;
+  delete raw.description;
+  delete raw.publishConfig;
+  delete raw.repository;
+  delete raw.bugs;
+  delete raw.homepage;
+  delete raw.keywords;
+  for (const section of ['dependencies', 'devDependencies', 'peerDependencies']) {
+    const block = raw[section];
+    if (!block) continue;
+    for (const [dep, spec] of Object.entries(block)) {
+      if (typeof spec === 'string' && spec.startsWith('workspace:')) {
+        if (pins[dep]) {
+          block[dep] = pins[dep];
+        } else {
+          // Conservative fallback — leave a known-bad spec rather than
+          // an unresolvable workspace: marker so the install surface
+          // surfaces the gap loudly.
+          block[dep] = 'latest';
+        }
+      }
+    }
+  }
+  fs.writeFileSync(file, JSON.stringify(raw, null, 2) + '\n');
+}
+
+function main() {
+  const args = process.argv.slice(2);
+  if (args.includes('--help') || args.includes('-h')) {
+    usage();
+    return;
+  }
+
+  const positional = args.filter((a) => !a.startsWith('--'));
+  const name = positional[0];
+  if (!name) {
+    err('Project name is required.');
+    usage();
+    process.exit(1);
+  }
+  if (!/^[a-z0-9][a-z0-9._-]*$/.test(name)) {
+    err(`Invalid project name: "${name}". Use kebab-case, no leading dot/dash.`);
+    process.exit(1);
+  }
+
+  let apiUrl, skipInstall;
+  try {
+    const a = flag(args, '--api-url');
+    apiUrl = typeof a === 'string' ? a : DEFAULT_API_URL;
+    skipInstall = flag(args, '--no-install') === true;
+  } catch (e) {
+    err(e.message);
+    if (e.usage) usage();
+    process.exit(1);
+  }
+
+  const target = path.resolve(process.cwd(), name);
+  if (fs.existsSync(target) && fs.readdirSync(target).length > 0) {
+    err(`Target directory "${name}" already exists and is not empty.`);
+    process.exit(1);
+  }
+
+  const template = resolveTemplate();
+  out(`Scaffolding ${name} from ${template} → ${target}`);
+  copyTree(template, target, new Set(['node_modules', 'dist', '.turbo', 'storybook-static', '.astro']));
+
+  const pkgPath = path.join(target, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    rewritePackageJson(pkgPath, name, resolvePinnedVersions());
+  }
+
+  // Write a starter `.env` so the user can run `pnpm dev` immediately.
+  fs.writeFileSync(path.join(target, '.env'), `VITE_API_URL=${apiUrl}\n`);
+
+  if (!skipInstall) {
+    out('Installing dependencies…');
+    // spawnSync with an argument array — no shell, no interpolation,
+    // so the only program ever invoked is the literal `pnpm`.
+    const r = spawnSync('pnpm', ['install'], { cwd: target, stdio: 'inherit' });
+    if (r.status !== 0) {
+      err('pnpm install failed. You can re-run it from the project directory.');
+    }
+  }
+
+  out('');
+  out('Done.');
+  out('');
+  out(`  cd ${name}`);
+  if (skipInstall) out('  pnpm install');
+  out('  pnpm dev');
+  out('');
+  out(`Backend expected at ${apiUrl}. Edit .env to point elsewhere.`);
+}
+
+try {
+  main();
+} catch (e) {
+  err(e.stack || e.message);
+  process.exit(1);
+}

package/bin/sync-templates.js

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+/**
+ * Pre-publish hook: copy `packages/ui-app-react/` (sans build
+ * artifacts) into this package's `templates/default/` so the
+ * published tarball carries the template and consumers don't need
+ * the davepi-ui monorepo layout to scaffold.
+ *
+ * Also writes `templates/pinned-versions.json` capturing each
+ * `@davepi/ui-*` workspace package's current version, so the
+ * scaffolder can rewrite `workspace:^` references in the template's
+ * package.json to the matching `^<version>` semver at the moment the
+ * tarball was built.
+ *
+ * The runtime CLI (`bin/index.js`) prefers `templates/default`
+ * inside the package; in dev (running from the monorepo) it falls
+ * back to `../ui-app-react` directly and reads versions from the
+ * sibling package.json files.
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const repoRoot = path.resolve(__dirname, '..', '..', '..');
+const srcApp = path.join(repoRoot, 'packages', 'ui-app-react');
+const dstTemplate = path.resolve(__dirname, '..', 'templates', 'default');
+const dstPins = path.resolve(__dirname, '..', 'templates', 'pinned-versions.json');
+
+if (!fs.existsSync(srcApp)) {
+  process.stderr.write(
+    `sync-templates: ${srcApp} not found. Run from inside the davepi-ui monorepo.\n`
+  );
+  process.exit(1);
+}
+
+fs.rmSync(path.resolve(__dirname, '..', 'templates'), { recursive: true, force: true });
+fs.mkdirSync(dstTemplate, { recursive: true });
+
+const SKIP = new Set([
+  'node_modules',
+  'dist',
+  '.turbo',
+  'storybook-static',
+  '.astro',
+  '.env',
+  '.env.local',
+]);
+
+function copyTree(src, dst) {
+  fs.mkdirSync(dst, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    if (SKIP.has(entry.name)) continue;
+    const a = path.join(src, entry.name);
+    const b = path.join(dst, entry.name);
+    if (entry.isDirectory()) copyTree(a, b);
+    else fs.copyFileSync(a, b);
+  }
+}
+
+copyTree(srcApp, dstTemplate);
+
+// tsconfig.json in the template extends `../../tsconfig.base.json`,
+// which doesn't exist in a scaffolded project. Inline the base so
+// the scaffolded tsconfig is standalone.
+const baseTs = JSON.parse(fs.readFileSync(path.join(repoRoot, 'tsconfig.base.json'), 'utf8'));
+const tplTsPath = path.join(dstTemplate, 'tsconfig.json');
+if (fs.existsSync(tplTsPath)) {
+  const tplTs = JSON.parse(fs.readFileSync(tplTsPath, 'utf8'));
+  delete tplTs.extends;
+  tplTs.compilerOptions = { ...baseTs.compilerOptions, ...(tplTs.compilerOptions || {}) };
+  fs.writeFileSync(tplTsPath, JSON.stringify(tplTs, null, 2) + '\n');
+}
+
+// Capture the live version of every PUBLISHED `@davepi/ui-*` package
+// so the scaffolder can pin them at consume time without a workspace
+// protocol leaking into the user's package.json. `private: true`
+// packages are skipped — they're not on the registry, so a pin
+// against them would 404 at install time. The example app
+// (`@davepi/ui-app-react`) is private for this reason; the template
+// IS that package, so its scaffolded `package.json` doesn't reference
+// it by name anyway.
+const pins = {};
+const packagesDir = path.join(repoRoot, 'packages');
+for (const name of fs.readdirSync(packagesDir)) {
+  const pj = path.join(packagesDir, name, 'package.json');
+  if (!fs.existsSync(pj)) continue;
+  try {
+    const p = JSON.parse(fs.readFileSync(pj, 'utf8'));
+    if (p.private === true) continue;
+    if (p.name && p.name.startsWith('@davepi/ui-') && p.version) {
+      pins[p.name] = `^${p.version}`;
+    }
+  } catch {}
+}
+fs.writeFileSync(dstPins, JSON.stringify(pins, null, 2) + '\n');
+
+process.stdout.write(
+  `sync-templates: copied ${srcApp} → ${dstTemplate} (pins: ${JSON.stringify(pins)})\n`
+);

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "create-davepi-ui",
+  "version": "0.1.0",
+  "description": "Scaffolder for new davepi-ui projects. Run: npx create-davepi-ui <name> [--api-url <url>]",
+  "license": "MIT",
+  "author": "David Baxter <dave@unlockedequity.com>",
+  "bin": {
+    "create-davepi-ui": "bin/index.js"
+  },
+  "files": [
+    "bin/",
+    "templates/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "homepage": "https://github.com/projik/davepi-ui#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/projik/davepi-ui.git",
+    "directory": "packages/create-davepi-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/projik/davepi-ui/issues"
+  },
+  "keywords": [
+    "davepi",
+    "davepi-ui",
+    "scaffolder",
+    "create-app",
+    "admin",
+    "template"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {}
+}

package/templates/default/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:4001

package/templates/default/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>davepi-ui</title>
+  </head>
+  <body class="bg-background text-foreground">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/default/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@davepi/ui-app-react",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Deployable Vite + React admin shell for davepi-ui (template — clone, don't install)",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  },
+  "dependencies": {
+    "@davepi/ui-core": "workspace:*",
+    "@davepi/ui-react": "workspace:*",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "cmdk": "^1.0.4",
+    "@tanstack/react-query": "^5.62.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
+    "react-router-dom": "^7.1.1",
+    "tailwind-merge": "^2.5.5",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.7"
+  }
+}

package/templates/default/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/default/src/App.tsx

@@ -0,0 +1,42 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { AuthGuard, useAuth } from '@davepi/ui-react';
+import { AppShell } from './components/AppShell';
+import { LoginScreen } from './pages/LoginScreen';
+import { DashboardPage } from './pages/DashboardPage';
+import { ResourceListPage } from './pages/ResourceListPage';
+import { ResourceCreatePage } from './pages/ResourceCreatePage';
+import { ResourceEditPage } from './pages/ResourceEditPage';
+import { ResourceDetailPage } from './pages/ResourceDetailPage';
+
+export function App() {
+  const { status } = useAuth();
+
+  if (status === 'unknown') {
+    return (
+      <div className="flex h-screen items-center justify-center text-muted-foreground">
+        Loading…
+      </div>
+    );
+  }
+
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginScreen />} />
+      <Route
+        path="/"
+        element={
+          <AuthGuard fallback={<Navigate to="/login" replace />}>
+            <AppShell />
+          </AuthGuard>
+        }
+      >
+        <Route index element={<DashboardPage />} />
+        <Route path="r/:path" element={<ResourceListPage />} />
+        <Route path="r/:path/new" element={<ResourceCreatePage />} />
+        <Route path="r/:path/:id" element={<ResourceDetailPage />} />
+        <Route path="r/:path/:id/edit" element={<ResourceEditPage />} />
+      </Route>
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+}

package/templates/default/src/components/AppShell.tsx

@@ -0,0 +1,23 @@
+import { Outlet } from 'react-router-dom';
+import { UserMenu } from '@davepi/ui-react';
+import { Sidebar } from './Sidebar';
+
+/**
+ * Two-column shell: sidebar nav (resource list from describe) + main outlet.
+ * Tablet/mobile responsive collapsing is M1+ scope.
+ */
+export function AppShell() {
+  return (
+    <div className="flex h-screen bg-background text-foreground">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <header className="flex h-14 items-center justify-end gap-3 border-b border-border px-6">
+          <UserMenu className="flex items-center gap-3 text-sm" />
+        </header>
+        <main className="flex-1 overflow-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/components/BulkActionBar.tsx

@@ -0,0 +1,47 @@
+import type { descriptor } from '@davepi/ui-core';
+import { Button } from '@/components/ui/button';
+
+/**
+ * Sticky bar shown when one or more table rows are selected. Renders the
+ * configured `bulk` actions plus a count and a "clear selection" button.
+ */
+export interface BulkActionBarProps {
+  selectedIds: readonly string[];
+  actions: descriptor.ActionSpec[];
+  onClear: () => void;
+  onRun: (action: descriptor.ActionSpec, ids: readonly string[]) => void;
+  resourceLabel: string;
+}
+
+export function BulkActionBar({
+  selectedIds,
+  actions,
+  onClear,
+  onRun,
+  resourceLabel,
+}: BulkActionBarProps) {
+  if (!selectedIds.length) return null;
+  return (
+    <div className="sticky bottom-4 z-10 mx-auto flex w-fit items-center gap-3 rounded-full border border-border bg-card px-4 py-2 shadow-lg">
+      <span className="text-sm text-muted-foreground">
+        {selectedIds.length} {resourceLabel.toLowerCase()} selected
+      </span>
+      <div className="flex items-center gap-2">
+        {actions.map((action) => (
+          <Button
+            key={action.id}
+            type="button"
+            variant={action.kind === 'bulkDelete' ? 'destructive' : 'outline'}
+            size="sm"
+            onClick={() => onRun(action, selectedIds)}
+          >
+            {action.label}
+          </Button>
+        ))}
+        <Button type="button" variant="ghost" size="sm" onClick={onClear}>
+          Clear
+        </Button>
+      </div>
+    </div>
+  );
+}