@thebase/ui 1.1.1 → 1.1.2

package/bin/create-baseui-app.mjs

@@ -2,6 +2,7 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { spawnSync } from "node:child_process";
 import path from "node:path";
+import { pathToFileURL } from "node:url";
 
 const ownPackageJson = JSON.parse(
   readFileSync(new URL("../package.json", import.meta.url), "utf8"),
@@ -16,13 +17,18 @@ function toPackageName(name) {
     .replace(/^-+|-+$/g, "") || "baseui-app";
 }
 
-/** Builds the fixed set of Vite + BaseUI scaffold files for a project named `appName`. */
-function buildTemplateFiles(appName, baseuiVersion) {
-  const title = appName
+/** Turns a kebab/snake-case app name into a human-readable title, e.g. "qr-page" -> "Qr Page". */
+function toTitle(appName) {
+  return appName
     .split(/[-_]/)
     .filter(Boolean)
     .map((word) => word[0].toUpperCase() + word.slice(1))
     .join(" ");
+}
+
+/** Builds the fixed set of Vite + BaseUI scaffold files for a project named `appName`. */
+function buildTemplateFiles(appName, baseuiVersion) {
+  const title = toTitle(appName);
 
   return {
     "package.json": JSON.stringify(
@@ -140,6 +146,375 @@ npm run dev
   };
 }
 
+/** Builds one page's HTML shell: mounts #app and loads that page's own entry script. */
+function pageHtml(title, entryScript) {
+  return `<!doctype html>
+<html lang="en" b-theme="light">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${title}</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </head>
+  <body class="bg-body text-body">
+    <div id="app"></div>
+    <script type="module" src="${entryScript}"></script>
+  </body>
+</html>
+`;
+}
+
+/** Builds one page's entry script: loads its templates/component and mounts via the shared mountPage helper. */
+function pageMain(componentName, templatesImportPath, componentImportPath) {
+  return `import "@thebase/ui/baseui.css";
+import pageTemplates from "${templatesImportPath}?raw";
+import { ${componentName} } from "${componentImportPath}";
+import { mountPage } from "../mount-page.js";
+import "../style.css";
+
+await mountPage(${componentName}, pageTemplates);
+`;
+}
+
+/** Builds a 4-page Vite + BaseUI starter (landing, login, signup, an authenticated home shell) for a
+ * project named `appName` — each page is its own Owl root mounted by its own HTML entry, composed
+ * from the same blocks as `examples/blocks/login-03.html`, `signup-03.html` and `sidebar-02.html`. */
+function buildStarterFiles(appName, baseuiVersion) {
+  const title = toTitle(appName);
+
+  return {
+    "package.json": JSON.stringify(
+      {
+        name: appName,
+        private: true,
+        version: "0.0.1",
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "vite build",
+          preview: "vite preview",
+        },
+        dependencies: {
+          "@thebase/ui": `^${baseuiVersion}`,
+        },
+        devDependencies: {
+          vite: "^8.2.1",
+        },
+      },
+      null,
+      2,
+    ) + "\n",
+
+    "vite.config.js": `import { defineConfig } from "vite";
+import { fileURLToPath } from "node:url";
+
+/** Resolves a file in this config's own directory, Node-ESM-safe (no __dirname in ESM). */
+const here = (file) => fileURLToPath(new URL(file, import.meta.url));
+
+export default defineConfig({
+  server: { open: true },
+  build: {
+    rollupOptions: {
+      input: {
+        main: here("./index.html"),
+        login: here("./login.html"),
+        signup: here("./signup.html"),
+        home: here("./home.html"),
+      },
+    },
+  },
+});
+`,
+
+    ".gitignore": `node_modules/\ndist/\n`,
+
+    "public/favicon.svg": `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+  fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="24" height="24" rx="5" fill="#0f172a" stroke="none" />
+  <path d="M8 12h8" />
+  <path d="M12 8v8" />
+</svg>
+`,
+
+    "src/style.css": `/* App-specific styles layered on top of @thebase/ui/baseui.css go here. */\n`,
+
+    "src/mount-page.js": `import { mount } from "@thebase/ui";
+import baseuiTemplates from "@thebase/ui/dist/baseui.templates.xml?raw";
+
+/** Both files are full <templates>...</templates> documents; strip each one's outer wrapper before
+ * joining them, otherwise the merged string has two root elements and Owl's XML parser throws. */
+const stripTemplatesWrapper = (xml) =>
+  xml.replace(/^\\s*<templates[^>]*>/, "").replace(/<\\/templates>\\s*$/, "");
+
+/** Merges BaseUI's component templates with one page's own templates and mounts its root component. */
+export async function mountPage(Root, pageTemplatesXml) {
+  const templates = \`<templates>\${stripTemplatesWrapper(baseuiTemplates)}\${stripTemplatesWrapper(pageTemplatesXml)}</templates>\`;
+  await mount(Root, document.getElementById("app"), { templates });
+}
+`,
+
+    "index.html": pageHtml(title, "/src/landing/main.js"),
+    "src/landing/main.js": pageMain("Landing", "./Landing.xml", "./Landing.js"),
+    "src/landing/Landing.js": `import { Component } from "@thebase/ui";
+import { Button, Card, CardBody, CardHeader, CardTitle, Icon } from "@thebase/ui";
+
+/** Marketing landing page: header with a login link, hero pitch, feature grid, footer. */
+export class Landing extends Component {
+  static template = "app.Landing";
+  static components = { Button, Card, CardBody, CardHeader, CardTitle, Icon };
+}
+`,
+    "src/landing/Landing.xml": `<templates xml:space="preserve">
+  <t t-name="app.Landing">
+    <div class="d-flex flex-column min-vh-100">
+      <header class="border-bottom">
+        <div class="container d-flex align-items-center justify-content-between py-3">
+          <a href="/" class="d-inline-flex align-items-center gap-2 fw-medium text-decoration-none">
+            <Icon name="'gallery-vertical-end'"/>
+            ${title}
+          </a>
+          <Button variant="'outline'" onClick="() => window.location.assign('/login.html')">Login</Button>
+        </div>
+      </header>
+
+      <section class="container py-5 text-center">
+        <h1 class="display-5 fw-bold mb-3">Build faster with ${title}</h1>
+        <p class="lead text-muted mx-auto mb-4" style="max-width: 40rem">
+          A starter scaffold wired up with BaseUI — pure Owl components, Bootstrap styling, and the pages you need to ship day one.
+        </p>
+        <div class="d-flex justify-content-center gap-3">
+          <Button icon="'rocket'" onClick="() => window.location.assign('/signup.html')">Get started</Button>
+          <Button variant="'outline'" onClick="() => window.location.assign('/login.html')">Login</Button>
+        </div>
+      </section>
+
+      <section class="container py-5">
+        <div class="row g-4">
+          <div class="col-12 col-md-4">
+            <Card className="'h-100'">
+              <CardHeader className="'d-flex align-items-center gap-2'"><Icon name="'zap'"/><CardTitle>Fast by default</CardTitle></CardHeader>
+              <CardBody>Vite dev server and production build, pre-wired to BaseUI's CDN or local dist.</CardBody>
+            </Card>
+          </div>
+          <div class="col-12 col-md-4">
+            <Card className="'h-100'">
+              <CardHeader className="'d-flex align-items-center gap-2'"><Icon name="'layout-dashboard'"/><CardTitle>Pages included</CardTitle></CardHeader>
+              <CardBody>Landing, login, signup and an authenticated home shell, ready to extend.</CardBody>
+            </Card>
+          </div>
+          <div class="col-12 col-md-4">
+            <Card className="'h-100'">
+              <CardHeader className="'d-flex align-items-center gap-2'"><Icon name="'component'"/><CardTitle>Pure Owl components</CardTitle></CardHeader>
+              <CardBody>Every page composes real BaseUI components — swap or extend without fighting the markup.</CardBody>
+            </Card>
+          </div>
+        </div>
+      </section>
+
+      <footer class="border-top mt-auto">
+        <div class="container py-4 d-flex align-items-center justify-content-between">
+          <small class="text-muted">© ${title}. All rights reserved.</small>
+          <a href="/login.html" class="small text-decoration-underline">Login</a>
+        </div>
+      </footer>
+    </div>
+  </t>
+</templates>
+`,
+
+    "login.html": pageHtml(`Login — ${title}`, "/src/login/main.js"),
+    "src/login/main.js": pageMain("Login", "./Login.xml", "./Login.js"),
+    "src/login/Login.js": `import { Component } from "@thebase/ui";
+import { Button, Card, CardBody, Field, FieldGroup, Icon, Input, Label } from "@thebase/ui";
+
+/** Login page (ported from examples/blocks/login-03.html): email/password card, redirects home on submit. */
+export class Login extends Component {
+  static template = "app.Login";
+  static components = { Button, Card, CardBody, Field, FieldGroup, Icon, Input, Label };
+}
+`,
+    "src/login/Login.xml": `<templates xml:space="preserve">
+  <t t-name="app.Login">
+    <div class="d-flex flex-column align-items-center justify-content-center gap-4 min-vh-100 bg-body-tertiary p-4">
+      <div class="d-flex flex-column align-items-center gap-4 col-12 col-sm-8 col-md-6 col-lg-4">
+        <a href="/" class="d-inline-flex align-items-center gap-2 fw-medium text-decoration-none">
+          <Icon name="'gallery-vertical-end'"/>
+          ${title}
+        </a>
+        <Card className="'w-100'">
+          <CardBody>
+            <form class="d-flex flex-column gap-4">
+              <div class="d-flex flex-column gap-2 text-center">
+                <h2 class="h4 mb-0">Login to your account</h2>
+                <p class="text-muted mb-0">Enter your email below to login to your account</p>
+              </div>
+              <FieldGroup>
+                <Field>
+                  <Label>Email</Label>
+                  <Input type="'email'" placeholder="'m@example.com'"/>
+                </Field>
+                <Field>
+                  <div class="d-flex align-items-center justify-content-between">
+                    <Label>Password</Label>
+                    <a href="#" class="small text-decoration-underline">Forgot your password?</a>
+                  </div>
+                  <Input type="'password'"/>
+                </Field>
+                <Button icon="'log-in'" onClick="() => window.location.assign('/home.html')">Login</Button>
+                <Button variant="'outline'" icon="'mail'">Login with email</Button>
+              </FieldGroup>
+              <p class="text-center small mb-0">Don&apos;t have an account? <a href="/signup.html" class="text-decoration-underline">Sign up</a></p>
+            </form>
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  </t>
+</templates>
+`,
+
+    "signup.html": pageHtml(`Sign up — ${title}`, "/src/signup/main.js"),
+    "src/signup/main.js": pageMain("Signup", "./Signup.xml", "./Signup.js"),
+    "src/signup/Signup.js": `import { Component } from "@thebase/ui";
+import { Button, Card, CardBody, Field, FieldGroup, Icon, Input, Label } from "@thebase/ui";
+
+/** Signup page (ported from examples/blocks/signup-03.html): single email field, sends the user to login after submit. */
+export class Signup extends Component {
+  static template = "app.Signup";
+  static components = { Button, Card, CardBody, Field, FieldGroup, Icon, Input, Label };
+}
+`,
+    "src/signup/Signup.xml": `<templates xml:space="preserve">
+  <t t-name="app.Signup">
+    <div class="d-flex flex-column align-items-center justify-content-center gap-4 min-vh-100 bg-body-tertiary p-4">
+      <div class="d-flex flex-column align-items-center gap-4 col-12 col-sm-8 col-md-6 col-lg-4">
+        <a href="/" class="d-inline-flex align-items-center gap-2 fw-medium text-decoration-none">
+          <Icon name="'gallery-vertical-end'"/>
+          ${title}
+        </a>
+        <Card className="'w-100'">
+          <CardBody>
+            <form class="d-flex flex-column gap-4">
+              <div class="d-flex flex-column gap-2 text-center">
+                <h2 class="h4 mb-0">Create an account</h2>
+                <p class="text-muted mb-0">Enter your email below to create your account</p>
+              </div>
+              <FieldGroup>
+                <Field>
+                  <Label>Email</Label>
+                  <Input type="'email'" placeholder="'m@example.com'"/>
+                </Field>
+                <Button icon="'user-plus'" onClick="() => window.location.assign('/login.html')">Sign up</Button>
+                <Button variant="'outline'" icon="'mail'">Sign up with email</Button>
+              </FieldGroup>
+              <p class="text-center small mb-0">Already have an account? <a href="/login.html" class="text-decoration-underline">Login</a></p>
+            </form>
+          </CardBody>
+        </Card>
+      </div>
+    </div>
+  </t>
+</templates>
+`,
+
+    "home.html": pageHtml(`Home — ${title}`, "/src/home/main.js"),
+    "src/home/main.js": pageMain("Home", "./Home.xml", "./Home.js"),
+    "src/home/Home.js": `import { Component, useState } from "@thebase/ui";
+import {
+  Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+  Button, Icon, InputGroup, InputGroupAddon, InputGroupInput, Separator,
+  Shell, ShellContent, ShellHeader, ShellMain, ShellNav, ShellSidebar, ShellSidebarHeader,
+  SidebarGroupCollapsible, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger,
+} from "@thebase/ui";
+
+/** Authenticated home shell (ported from examples/blocks/sidebar-02.html): collapsible sidebar nav
+ * + sticky header, reached after login/signup; owns the sidebar's collapsed/expanded state. */
+export class Home extends Component {
+  static template = "app.Home";
+  static components = {
+    Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator,
+    Button, Icon, InputGroup, InputGroupAddon, InputGroupInput, Separator,
+    Shell, ShellContent, ShellHeader, ShellMain, ShellNav, ShellSidebar, ShellSidebarHeader,
+    SidebarGroupCollapsible, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger,
+  };
+
+  setup() {
+    this.state = useState({ collapsed: false });
+  }
+}
+`,
+    "src/home/Home.xml": `<templates xml:space="preserve">
+  <t t-name="app.Home">
+    <Shell className="'border'" collapsed="state.collapsed" onCollapsedChange="(value) => { state.collapsed = value; }">
+      <ShellSidebar>
+        <ShellSidebarHeader>
+          <a href="/" class="d-flex align-items-center gap-2 text-decoration-none fw-medium">
+            <Icon name="'gallery-vertical-end'"/>
+            <span class="d-flex flex-column lh-sm">
+              <span>${title}</span>
+              <small class="text-body-secondary fw-normal">Dashboard</small>
+            </span>
+          </a>
+        </ShellSidebarHeader>
+        <InputGroup>
+          <InputGroupAddon><Icon name="'search'"/></InputGroupAddon>
+          <InputGroupInput type="'search'" placeholder="'Search...'"/>
+        </InputGroup>
+        <ShellNav className="'d-flex flex-column gap-2'">
+          <SidebarGroupCollapsible label="'Getting Started'" defaultOpen="true">
+            <SidebarMenu>
+              <SidebarMenuItem><SidebarMenuButton href="'#'" icon="'layout-dashboard'" active="true">Overview</SidebarMenuButton></SidebarMenuItem>
+              <SidebarMenuItem><SidebarMenuButton href="'#'" icon="'users'">Customers</SidebarMenuButton></SidebarMenuItem>
+              <SidebarMenuItem><SidebarMenuButton href="'#'" icon="'settings'">Settings</SidebarMenuButton></SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupCollapsible>
+        </ShellNav>
+      </ShellSidebar>
+      <ShellMain>
+        <ShellHeader className="'border-bottom p-3'">
+          <SidebarTrigger/>
+          <Separator orientation="'vertical'"/>
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem><BreadcrumbPage>Overview</BreadcrumbPage></BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <Button variant="'outline'" size="'sm'" className="'ms-auto'" icon="'log-out'" onClick="() => window.location.assign('/index.html')">Logout</Button>
+        </ShellHeader>
+        <ShellContent className="'d-flex flex-column gap-3'">
+          <div class="row row-cols-3 g-3">
+            <div class="col"><div class="ratio ratio-16x9 bg-body-secondary rounded-4"></div></div>
+            <div class="col"><div class="ratio ratio-16x9 bg-body-secondary rounded-4"></div></div>
+            <div class="col"><div class="ratio ratio-16x9 bg-body-secondary rounded-4"></div></div>
+          </div>
+          <div class="flex-grow-1 bg-body-secondary rounded-4"></div>
+        </ShellContent>
+      </ShellMain>
+    </Shell>
+  </t>
+</templates>
+`,
+
+    "README.md": `# ${title}
+
+Scaffolded with \`@thebase/ui\`'s CLI (\`create-baseui-app init\`): Vite + BaseUI, pure Owl API, 4 pages.
+
+- \`/\` — landing page (header, hero, features, footer)
+- \`/login.html\` — login (redirects to \`/home.html\` on submit)
+- \`/signup.html\` — signup (redirects to \`/login.html\` on submit)
+- \`/home.html\` — authenticated home shell (sidebar + header, logout returns to \`/\`)
+
+None of the pages call a real backend yet — wire up \`Login\`/\`Signup\`'s button \`onClick\` handlers to
+your own auth API once you have one.
+
+\`\`\`sh
+npm install
+npm run dev
+\`\`\`
+`,
+  };
+}
+
 /** Writes each template file under targetDir, skipping any that already exist (convert mode is additive/non-destructive). */
 function writeFiles(targetDir, files, { overwrite }) {
   const written = [];
@@ -173,6 +548,7 @@ function parseFlags(argv) {
     if (arg === "--no-install") flags.install = false;
     else if (arg === "--force") flags.force = true;
     else if (arg === "--version") flags.version = argv[++i];
+    else if (arg === "--config") flags.config = argv[++i];
     else positional.push(arg);
   }
   return { flags, positional };
@@ -205,6 +581,37 @@ function cmdCreate(argv) {
   console.log(`\nNext steps:\n  cd ${rawName}${flags.install ? "" : "\n  npm install"}\n  npm run dev`);
 }
 
+/** Scaffolds the 4-page starter (landing/login/signup/home) in a new ./<app-name> folder. */
+function cmdInit(argv) {
+  const { flags, positional } = parseFlags(argv);
+  const rawName = positional[0];
+  if (!rawName) {
+    console.error("Usage: create-baseui-app init <app-name> [--version <x.y.z>] [--no-install] [--force]");
+    process.exit(1);
+  }
+  const appName = toPackageName(rawName);
+  const targetDir = path.resolve(process.cwd(), rawName);
+
+  if (existsSync(targetDir) && readdirSync(targetDir).length > 0 && !flags.force) {
+    console.error(`Directory "${rawName}" already exists and is not empty. Use --force to write into it anyway.`);
+    process.exit(1);
+  }
+
+  const baseuiVersion = flags.version || ownPackageJson.version;
+  const files = buildStarterFiles(appName, baseuiVersion);
+  const { written } = writeFiles(targetDir, files, { overwrite: flags.force ?? false });
+
+  console.log(`Scaffolded a 4-page Vite + BaseUI starter in ${targetDir}`);
+  written.forEach((f) => console.log(`  create ${f}`));
+
+  if (flags.install) runInstall(targetDir);
+
+  console.log(
+    `\nNext steps:\n  cd ${rawName}${flags.install ? "" : "\n  npm install"}\n  npm run dev` +
+      `\n\nPages: / (landing), /login.html, /signup.html, /home.html`,
+  );
+}
+
 function cmdConvert(argv) {
   const { flags, positional } = parseFlags(argv);
   const targetDir = path.resolve(process.cwd(), positional[0] || ".");
@@ -248,6 +655,34 @@ function cmdConvert(argv) {
   console.log(`\nNext steps:\n  npm run dev`);
 }
 
+/** Generates manifest.webmanifest + sw.js for a PWA from a `baseui.pwa.config.js` the user wrote,
+ * using @thebase/ui's buildManifest/buildServiceWorker (see docs/usage-guide.md "PWA toolkit"). */
+async function cmdPwa(argv) {
+  const { flags, positional } = parseFlags(argv);
+  const targetDir = path.resolve(process.cwd(), positional[0] || ".");
+  const configPath = path.resolve(targetDir, flags.config || "baseui.pwa.config.js");
+
+  if (!existsSync(configPath)) {
+    console.error(
+      `Config file not found: ${configPath}\n` +
+        "Create it first — export default { manifest: {...}, serviceWorker: {...} }, " +
+        "see docs/usage-guide.md \"PWA toolkit\" for the full config shape.",
+    );
+    process.exit(1);
+  }
+
+  const { manifest, serviceWorker } = (await import(pathToFileURL(configPath).href)).default;
+  const { buildManifest, buildServiceWorker } = await import("../dist/baseui.pwa.esm.js");
+
+  writeFileSync(
+    path.join(targetDir, "manifest.webmanifest"),
+    JSON.stringify(buildManifest(manifest), null, 2) + "\n",
+  );
+  writeFileSync(path.join(targetDir, "sw.js"), buildServiceWorker(serviceWorker));
+
+  console.log(`Wrote manifest.webmanifest and sw.js in ${targetDir}`);
+}
+
 function printHelp() {
   console.log(`@thebase/ui project CLI
 
@@ -258,6 +693,16 @@ Usage:
   create-baseui-app convert [path] [--version <x.y.z>] [--no-install]
       Turn an existing (non-npm) folder into a Vite + BaseUI project, in place.
       Never overwrites files that already exist; only fills in what's missing.
+
+  create-baseui-app init <app-name> [--version <x.y.z>] [--no-install] [--force]
+      Scaffold a ready-to-start 4-page project in ./<app-name>: a landing page
+      (header/hero/features/footer), login, signup, and an authenticated home
+      shell (sidebar + header) — ported from the login-03/signup-03/sidebar-02
+      example blocks.
+
+  create-baseui-app pwa [path] [--config <file>]
+      Generate manifest.webmanifest + sw.js in [path] (default ".") from a
+      baseui.pwa.config.js config file (default name, override with --config).
 `);
 }
 
@@ -265,4 +710,6 @@ const [, , command, ...rest] = process.argv;
 
 if (command === "create") cmdCreate(rest);
 else if (command === "convert") cmdConvert(rest);
+else if (command === "init") cmdInit(rest);
+else if (command === "pwa") await cmdPwa(rest);
 else printHelp();