@craftzbay/create-app 1.0.0

package/README.md

@@ -0,0 +1,49 @@
+# @craftzbay/create-app
+
+Scaffold a new project preconfigured with [`@craftzbay/ui`](https://www.npmjs.com/package/@craftzbay/ui).
+
+```bash
+npm create @craftzbay/app my-app
+# or
+pnpm create @craftzbay/app my-app
+# or
+yarn create @craftzbay/app my-app
+# or
+bun create @craftzbay/app my-app
+```
+
+Then:
+
+```bash
+cd my-app
+pnpm dev
+```
+
+## Templates
+
+| ID                | What you get                                                          |
+| ----------------- | --------------------------------------------------------------------- |
+| `vite-blank`      | Minimal Vite + React + `@craftzbay/ui` starter (Card + Input + Switch) |
+| `vite-dashboard`  | `AppShell` + `Dashboard` template, ready to wire data                 |
+
+Pass `--template <id>` to skip the picker:
+
+```bash
+npm create @craftzbay/app my-app -- --template vite-dashboard
+```
+
+## Options
+
+```
+-t, --template <name>   Skip the prompt and use a known template
+-y, --yes               Skip "install deps?" prompt and install
+    --no-install        Skip dependency install entirely
+-h, --help              Show this help
+```
+
+## Docs
+
+- Showcase: <https://design.runestonetechnologies.com>
+- Components: <https://design.runestonetechnologies.com/#components>
+- Templates: <https://design.runestonetechnologies.com/#templates>
+- Guides: <https://design.runestonetechnologies.com/#guides>

package/dist/index.js

@@ -0,0 +1,207 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { existsSync, mkdirSync, readFileSync, readdirSync, statSync, writeFileSync } from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { spawnSync } from "child_process";
+import {
+  cancel,
+  confirm,
+  intro,
+  isCancel,
+  log,
+  outro,
+  select,
+  text
+} from "@clack/prompts";
+import kleur from "kleur";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var TEMPLATES_DIR = path.resolve(__dirname, "../templates");
+var TEMPLATES = [
+  { id: "vite-blank", label: "Vite + Blank", hint: "Minimal Vite + React + @craftzbay/ui starter" },
+  { id: "vite-dashboard", label: "Vite + Dashboard", hint: "AppShell + Dashboard template, ready to wire data" }
+];
+function detectPackageManager() {
+  const ua = process.env.npm_config_user_agent ?? "";
+  if (ua.startsWith("pnpm")) return "pnpm";
+  if (ua.startsWith("yarn")) return "yarn";
+  if (ua.startsWith("bun")) return "bun";
+  return "npm";
+}
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  let projectName;
+  let template;
+  let noInstall = false;
+  let yes = false;
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === "--template" || a === "-t") {
+      template = args[++i];
+    } else if (a === "--no-install") {
+      noInstall = true;
+    } else if (a === "--yes" || a === "-y") {
+      yes = true;
+    } else if (a === "--help" || a === "-h") {
+      printHelp();
+      process.exit(0);
+    } else if (!a.startsWith("-")) {
+      projectName = a;
+    }
+  }
+  return { projectName, template, noInstall, yes };
+}
+function printHelp() {
+  const lines = [
+    "",
+    kleur.bold("  @craftzbay/create-app") + kleur.gray(" \u2014 scaffold a new @craftzbay/ui project"),
+    "",
+    "  Usage:",
+    "    npm create @craftzbay/app [project-name] [options]",
+    "",
+    "  Options:",
+    "    -t, --template <name>   Skip the prompt and use a known template",
+    '    -y, --yes               Skip "install deps?" prompt and install',
+    "        --no-install        Skip dependency install entirely",
+    "    -h, --help              Show this help",
+    "",
+    "  Templates:",
+    ...TEMPLATES.map((t) => `    ${t.id.padEnd(20)} ${kleur.gray(t.hint)}`),
+    ""
+  ];
+  console.log(lines.join("\n"));
+}
+function isValidProjectName(name) {
+  if (!name) return "Project name is required";
+  if (name === "." || name === "./") return 'Use a directory name, not "."';
+  if (!/^[a-z0-9._-]+$/i.test(name)) {
+    return "Use letters, numbers, dashes, dots, or underscores";
+  }
+  return true;
+}
+function copyTemplate(templateId, dest, projectName) {
+  const src = path.join(TEMPLATES_DIR, templateId);
+  if (!existsSync(src)) {
+    throw new Error(`Template "${templateId}" not found at ${src}`);
+  }
+  mkdirSync(dest, { recursive: true });
+  walk(src, dest, projectName);
+}
+function walk(srcDir, destDir, projectName) {
+  for (const entry of readdirSync(srcDir)) {
+    const srcPath = path.join(srcDir, entry);
+    const destName = entry === "_package.json" ? "package.json" : entry === "_gitignore" ? ".gitignore" : entry;
+    const destPath = path.join(destDir, destName);
+    const stat = statSync(srcPath);
+    if (stat.isDirectory()) {
+      mkdirSync(destPath, { recursive: true });
+      walk(srcPath, destPath, projectName);
+    } else {
+      const raw = readFileSync(srcPath, "utf8");
+      const rendered = raw.replace(/__PROJECT_NAME__/g, projectName);
+      writeFileSync(destPath, rendered);
+    }
+  }
+}
+async function run() {
+  intro(kleur.bold(kleur.cyan("  \u2726  @craftzbay/create-app  ")));
+  const { projectName: cliName, template: cliTemplate, noInstall, yes } = parseArgs(process.argv);
+  let projectName = cliName;
+  if (!projectName) {
+    const answer = await text({
+      message: "Project name",
+      placeholder: "my-app",
+      defaultValue: "my-app",
+      validate: (v) => {
+        const r = isValidProjectName(v || "my-app");
+        return r === true ? void 0 : r;
+      }
+    });
+    if (isCancel(answer)) {
+      cancel("Cancelled.");
+      process.exit(0);
+    }
+    projectName = answer || "my-app";
+  } else {
+    const valid = isValidProjectName(projectName);
+    if (valid !== true) {
+      log.error(valid);
+      process.exit(1);
+    }
+  }
+  const targetDir = path.resolve(process.cwd(), projectName);
+  if (existsSync(targetDir) && readdirSync(targetDir).length > 0) {
+    const proceed = await confirm({
+      message: `Directory "${projectName}" is not empty. Overwrite?`,
+      initialValue: false
+    });
+    if (isCancel(proceed) || !proceed) {
+      cancel("Cancelled.");
+      process.exit(0);
+    }
+  }
+  let templateId = cliTemplate;
+  if (!templateId) {
+    const answer = await select({
+      message: "Pick a template",
+      options: TEMPLATES.map((t) => ({ value: t.id, label: t.label, hint: t.hint }))
+    });
+    if (isCancel(answer)) {
+      cancel("Cancelled.");
+      process.exit(0);
+    }
+    templateId = answer;
+  }
+  if (!TEMPLATES.some((t) => t.id === templateId)) {
+    log.error(`Unknown template "${templateId}". Run with --help to list.`);
+    process.exit(1);
+  }
+  let installNow;
+  if (noInstall) {
+    installNow = false;
+  } else if (yes) {
+    installNow = true;
+  } else {
+    const ans = await confirm({
+      message: "Install dependencies now?",
+      initialValue: true
+    });
+    if (isCancel(ans)) {
+      cancel("Cancelled.");
+      process.exit(0);
+    }
+    installNow = ans;
+  }
+  log.step(`Scaffolding into ${kleur.cyan(path.relative(process.cwd(), targetDir) || ".")}`);
+  try {
+    copyTemplate(templateId, targetDir, projectName);
+  } catch (err) {
+    log.error(err.message);
+    process.exit(1);
+  }
+  const pm = detectPackageManager();
+  if (installNow) {
+    log.step(`Installing dependencies with ${kleur.cyan(pm)} (this can take a minute)\u2026`);
+    const result = spawnSync(pm, ["install"], { cwd: targetDir, stdio: "inherit" });
+    if (result.status !== 0) {
+      log.warn("Install failed. You can re-run it manually after fixing the issue.");
+    }
+  }
+  outro(
+    [
+      kleur.green("  All set."),
+      "",
+      kleur.gray("  Next steps:"),
+      `    ${kleur.cyan(`cd ${projectName}`)}`,
+      ...installNow ? [] : [`    ${kleur.cyan(`${pm} install`)}`],
+      `    ${kleur.cyan(`${pm} run dev`)}`,
+      "",
+      kleur.gray("  Docs: https://design.runestonetechnologies.com")
+    ].join("\n")
+  );
+}
+run().catch((err) => {
+  log.error(err instanceof Error ? err.message : String(err));
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@craftzbay/create-app",
+  "version": "1.0.0",
+  "description": "Scaffold a new project preconfigured with @craftzbay/ui. Invoke via `npm create @craftzbay/app my-app`.",
+  "license": "MIT",
+  "author": "craftzbay",
+  "homepage": "https://design.runestonetechnologies.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/craftzbay/design-system.git",
+    "directory": "packages/create-app"
+  },
+  "bugs": {
+    "url": "https://github.com/craftzbay/design-system/issues"
+  },
+  "keywords": [
+    "create-app",
+    "scaffold",
+    "craftzbay",
+    "design-system",
+    "react",
+    "tailwind"
+  ],
+  "type": "module",
+  "bin": {
+    "create-craftzbay-app": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --target node18 --out-dir dist --clean",
+    "dev": "tsup src/index.ts --format esm --target node18 --out-dir dist --watch",
+    "test": "pnpm build && node scripts/smoke.mjs",
+    "prepublishOnly": "pnpm build"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.8.2",
+    "kleur": "^4.1.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/templates/vite-blank/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+*.log
+.env
+.env.local
+.vite

package/templates/vite-blank/_package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@craftzbay/ui": "^0.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
+  }
+}

package/templates/vite-blank/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/vite-blank/src/App.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Switch,
+} from '@craftzbay/ui';
+
+export function App() {
+  const [name, setName] = useState('');
+  const [notify, setNotify] = useState(true);
+
+  return (
+    <div className="min-h-screen bg-background p-8">
+      <div className="mx-auto max-w-md">
+        <Card>
+          <CardHeader>
+            <CardTitle>Hello, __PROJECT_NAME__</CardTitle>
+            <CardDescription>
+              Your new app is wired up with @craftzbay/ui. Edit{' '}
+              <code className="rounded bg-background-muted px-1">src/App.tsx</code> to start
+              building.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4">
+            <Input
+              label="Your name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Bay"
+            />
+            <Switch
+              label="Email notifications"
+              checked={notify}
+              onCheckedChange={setNotify}
+            />
+            <Button disabled={!name}>{name ? `Hi, ${name}` : 'Enter your name'}</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/templates/vite-blank/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@craftzbay/ui/styles.css';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/vite-blank/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/templates/vite-blank/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});

package/templates/vite-dashboard/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.DS_Store
+*.log
+.env
+.env.local
+.vite

package/templates/vite-dashboard/_package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@craftzbay/ui": "^0.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
+  }
+}

package/templates/vite-dashboard/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/vite-dashboard/src/App.tsx

@@ -0,0 +1,26 @@
+import { AppShell, Dashboard, ToastProvider, ToastViewport, TooltipProvider } from '@craftzbay/ui';
+
+const Brand = () => (
+  <span className="flex items-center gap-2 text-sm font-semibold">
+    <span className="inline-flex size-6 items-center justify-center rounded-md bg-accent text-on-accent text-xs">
+      ✦
+    </span>
+    __PROJECT_NAME__
+  </span>
+);
+
+export function App() {
+  return (
+    <TooltipProvider>
+      <ToastProvider>
+        <AppShell brand={<Brand />} active="home">
+          <Dashboard
+            title="Overview"
+            subtitle="Replace this with your own data — every section is a prop."
+          />
+        </AppShell>
+        <ToastViewport />
+      </ToastProvider>
+    </TooltipProvider>
+  );
+}

package/templates/vite-dashboard/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@craftzbay/ui/styles.css';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/vite-dashboard/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"]
+}

package/templates/vite-dashboard/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+});