@pauldvlp/vp-pkg-shadcn 0.4.0

package/README.md

@@ -0,0 +1,127 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/pauldvlp/vp-templates/main/assets/cover.webp" alt="@pauldvlp/vp-templates" width="100%" />
+</p>
+
+# @pauldvlp/vp-pkg-shadcn
+
+A [Vite+](https://viteplus.dev) **package generator** that drops a shared, fully customizable
+**shadcn** UI package into an **existing** monorepo:
+
+- `packages/ui` — a shared shadcn design system (Tailwind v4, fonts, `lib/utils`, `components/ui/*`)
+
+It's a [Bingo](https://create.bingo) template, so options can be passed on the `vp create` command
+line (anything after `--`) and the **shadcn theme is materialized at create time** from the preset
+you choose. Unlike [`@pauldvlp/vp-react-ts-shadcn`](../vp-react-ts-shadcn) (which scaffolds a whole
+monorepo), this only emits `packages/ui` and leaves the rest of your repo untouched.
+
+## Usage
+
+Run it from the root of an existing repo (published under the [`@pauldvlp/create`](../create) manifest):
+
+```bash
+# Interactive (prompts for anything you don't pass)
+vp create @pauldvlp:vp-pkg-shadcn
+
+# Non-interactive, fully specified
+vp create @pauldvlp:vp-pkg-shadcn -- \
+  --scope @acme --base base --preset vega --iconLibrary lucide --components button,card,dialog
+```
+
+> Only **string/enum** options parse reliably as `vp create -- --flag value`. **Boolean** options
+> (`--cssVariables`, `--rtl`, `--pointer`, `--install`) are best left to the interactive prompt —
+> Bingo's CLI does not accept `--no-x` / `--x=false` cleanly. Omit them and answer the prompt.
+
+### Requirements
+
+Your repo must be a **pnpm workspace that globs the directory you pick** (e.g. `packages/*`), so the
+new `<scope>/ui` is linked and the post-scaffold `pnpm --filter <scope>/ui ...` steps resolve. The
+generator does **not** edit your `pnpm-workspace.yaml` or any app — wiring a consumer is up to you
+(see below).
+
+### Where it lands (the `--directory`)
+
+The generator emits the package contents at the **root** of its file tree, and Bingo writes them under
+the target directory — which **defaults to `ui`** (so within `vp create`'s monorepo flow it lands at
+`<chosen-parent>/ui`, e.g. `packages/ui`). Pass `--directory <path>` to place it elsewhere. `--scope`
+defaults to the **surrounding monorepo's scope** (read from the nearest `pnpm-workspace.yaml`'s
+`package.json` — e.g. a repo named `acme` → `@acme`), falling back to `@app` outside a workspace.
+
+## Options
+
+| Option          | Type / values                                  | Default        | Notes                                                                                   |
+| --------------- | ---------------------------------------------- | -------------- | --------------------------------------------------------------------------------------- |
+| `--scope`       | string                                         | monorepo scope | npm scope for the package → `@scope/ui`. Defaults to the surrounding monorepo's scope (e.g. `@acme`), `@app` outside a workspace. `@` is added if you omit it. |
+| `--base`        | `radix` \| `base`                              | `radix`        | shadcn component library (radix-ui or @base-ui). Honored by `shadcn init --base`.       |
+| `--preset`      | style name or code                             | `b30557okNu`   | A style (`nova`, `vega`, `maia`, `lyra`, `mira`, `luma`, `sera`, `rhea`) **or** a code from ui.shadcn.com. **Owns** color, fonts, radius, baseColor, menu styling. |
+| `--iconLibrary` | `lucide` \| `hugeicons` \| `radix` \| `tabler` | `hugeicons`    | Icon library (persists; not part of the preset).                                        |
+| `--cssVariables`| boolean                                        | `true`         | CSS variables for theming.                                                              |
+| `--rtl`         | boolean                                        | `false`        | RTL support.                                                                             |
+| `--pointer`     | boolean                                        | `false`        | Pointer cursor on interactive elements.                                                 |
+| `--components`  | comma list                                     | `button,badge` | shadcn components to pre-install. `button` + `badge` are always included.               |
+| `--install`     | boolean                                        | `true`         | Run install + apply the shadcn theme after scaffolding. `false` = files only.           |
+
+## How it scaffolds
+
+`produce()` emits `packages/ui` with a **minimal** `globals.css` (so Tailwind v4 is detectable),
+resolves the package's `catalog:` specifiers to concrete versions (it can't assume your repo's
+pnpm catalog), bakes `components.json` from your options, then runs:
+
+```bash
+pnpm install
+pnpm --filter <scope>/ui exec shadcn init --base <base> --preset <preset> ... --no-reinstall -y -f
+pnpm --filter <scope>/ui exec shadcn add button badge <extra> -y
+```
+
+shadcn `init` fills the theme tokens into `globals.css` and creates `lib/utils.ts`; `add` writes
+components into `src/components/ui/`. The UI package `exports` (`./components/* → ./src/components/*.tsx`)
+resolves them as `@scope/ui/components/ui/<name>`.
+
+## Consume it from an app
+
+This generator only creates the `ui` package — wiring it into a consuming app is three steps:
+
+**1. Depend on it.**
+
+```jsonc
+// apps/<your-app>/package.json
+"dependencies": { "@scope/ui": "workspace:*" }
+```
+
+**2. Give the app Tailwind v4.** The app — not the `ui` package — compiles the styles, so it needs the
+Tailwind plugin. Skip this if the app already uses Tailwind v4.
+
+```bash
+pnpm --filter <your-app> add -D @tailwindcss/vite tailwindcss
+```
+
+```ts
+// apps/<your-app>/vite.config.ts
+import tailwindcss from '@tailwindcss/vite'
+export default defineConfig({ plugins: [/* ...existing */ tailwindcss()] })
+```
+
+> `ui`'s `globals.css` already `@source`s `apps/**/*.{ts,tsx}` (and the `ui` package), so Tailwind
+> scans your app's class names. If your app lives outside `apps/`, add an `@source` for its path.
+
+**3. Import the styles once at the app's entry point**, then use components:
+
+```tsx
+// apps/<your-app>/src/main.tsx
+import '@scope/ui/globals.css'
+import { Button } from '@scope/ui/components/ui/button'
+```
+
+## Re-theme later
+
+```bash
+pnpm --filter @scope/ui exec shadcn init --preset <new-code> --no-reinstall -y -f
+pnpm --filter @scope/ui exec shadcn add <component>
+```
+
+## Develop the generator
+
+```bash
+pnpm install
+node bin/index.ts --help            # list options
+node bin/index.ts --directory /tmp/demo --scope @demo --base base --preset vega
+```

package/dist/index.js

@@ -0,0 +1,290 @@
+#!/usr/bin/env node
+
+// bin/index.ts
+import fs2 from "node:fs";
+import path3 from "node:path";
+import * as prompts from "@clack/prompts";
+
+// ../template-kit/src/index.ts
+import fs from "node:fs";
+import path from "node:path";
+var RENAME = {
+  _gitignore: ".gitignore"
+};
+var DEFAULT_PRESET = "b30557okNu";
+var ICON_LIBS = {
+  hugeicons: { "@hugeicons/react": "^1.1.9", "@hugeicons/core-free-icons": "^4.2.1" },
+  lucide: { "lucide-react": "^0" },
+  radix: { "@radix-ui/react-icons": "^1" },
+  tabler: { "@tabler/icons-react": "^3" }
+};
+var CATALOG = {
+  "@types/node": "^24",
+  typescript: "^5",
+  vite: "npm:@voidzero-dev/vite-plus-core@latest",
+  vitest: "4.1.9",
+  "vite-plus": "^0.2.1",
+  "babel-plugin-react-compiler": "^1.0.0",
+  "@rolldown/plugin-babel": "^0.2.3"
+};
+function toScope(name) {
+  const n = name.trim();
+  return n.startsWith("@") ? n : `@${n}`;
+}
+function detectMonorepoScope() {
+  let dir = process.cwd();
+  for (let i = 0; i < 10; i++) {
+    const hasWorkspace = fs.existsSync(path.join(dir, "pnpm-workspace.yaml")) || fs.existsSync(path.join(dir, "pnpm-workspace.yml"));
+    const pkgPath = path.join(dir, "package.json");
+    if (hasWorkspace && fs.existsSync(pkgPath)) {
+      try {
+        const name = JSON.parse(fs.readFileSync(pkgPath, "utf8")).name;
+        if (typeof name === "string" && name) {
+          const head = name.startsWith("@") ? name.slice(1).split("/")[0] : name;
+          return toScope(head);
+        }
+      } catch {
+      }
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+  return void 0;
+}
+function readTree(dir, transform, base = dir) {
+  const out = {};
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const abs = path.join(dir, entry.name);
+    const name = RENAME[entry.name] ?? entry.name;
+    if (entry.isDirectory()) {
+      out[name] = readTree(abs, transform, base);
+    } else {
+      const rel = path.relative(base, abs);
+      out[name] = transform(rel, fs.readFileSync(abs, "utf8"));
+    }
+  }
+  return out;
+}
+function setPath(tree, relPath, content) {
+  const parts = relPath.split("/");
+  let node = tree;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const key = parts[i];
+    if (typeof node[key] !== "object") node[key] = {};
+    node = node[key];
+  }
+  node[parts[parts.length - 1]] = content;
+}
+function patchJson(tree, relPath, mutate) {
+  const parts = relPath.split("/");
+  let node = tree;
+  for (let i = 0; i < parts.length - 1; i++) node = node[parts[i]];
+  const key = parts[parts.length - 1];
+  const json = JSON.parse(node[key]);
+  mutate(json);
+  node[key] = `${JSON.stringify(json, null, 2)}
+`;
+}
+function resolveCatalogDeps(pkg, catalog = CATALOG) {
+  for (const field of ["dependencies", "devDependencies", "peerDependencies", "optionalDependencies"]) {
+    const deps = pkg[field];
+    if (!deps) continue;
+    for (const [name, range] of Object.entries(deps)) {
+      if ((range === "catalog:" || range === "catalog:default") && catalog[name]) deps[name] = catalog[name];
+    }
+  }
+}
+function addIconDeps(pkg, iconLibrary) {
+  const iconDeps = ICON_LIBS[iconLibrary] ?? ICON_LIBS.hugeicons;
+  pkg.dependencies = { ...pkg.dependencies, ...iconDeps };
+}
+function withRequiredComponents(csv, required = ["button", "badge"]) {
+  const requested = csv.split(",").map((c) => c.trim()).filter(Boolean);
+  return Array.from(/* @__PURE__ */ new Set([...required, ...requested]));
+}
+function uiComponentsJson(theme) {
+  const { scope, base, cssVariables, iconLibrary, rtl } = theme;
+  return {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: `${base}-nova`,
+    rsc: false,
+    tsx: true,
+    tailwind: { config: "", css: "./src/styles/globals.css", baseColor: "neutral", cssVariables },
+    iconLibrary,
+    rtl,
+    base,
+    aliases: {
+      components: `${scope}/ui/components`,
+      ui: `${scope}/ui/components`,
+      lib: `${scope}/ui/lib`,
+      utils: `${scope}/ui/lib/utils`,
+      hooks: `${scope}/ui/hooks`
+    }
+  };
+}
+function shadcnInitFlags(opts) {
+  return [
+    `--base ${opts.base}`,
+    `--preset ${opts.preset}`,
+    opts.cssVariables ? "--css-variables" : "--no-css-variables",
+    opts.rtl ? "--rtl" : "--no-rtl",
+    opts.pointer ? "--pointer" : "--no-pointer",
+    "--no-reinstall",
+    "-y",
+    "-f"
+  ].join(" ");
+}
+
+// bin/index.ts
+import { runTemplateCLI } from "bingo";
+
+// src/template.ts
+import path2 from "node:path";
+import { fileURLToPath } from "node:url";
+import { createTemplate } from "bingo";
+import { z } from "zod";
+
+// package.json
+var package_default = {
+  name: "@pauldvlp/vp-pkg-shadcn",
+  version: "0.4.0",
+  description: "Add a shared, fully customizable shadcn UI package (packages/ui) into an existing Vite+ monorepo, themeable via shadcn presets.",
+  author: "pauldvlp (https://github.com/pauldvlp/vp-templates)",
+  homepage: "https://github.com/pauldvlp/vp-templates",
+  repository: {
+    type: "git",
+    url: "git+https://github.com/pauldvlp/vp-templates.git",
+    directory: "packages/vp-pkg-shadcn"
+  },
+  bugs: "https://github.com/pauldvlp/vp-templates/issues",
+  keywords: [
+    "vite-plus-generator",
+    "vite-plus",
+    "shadcn",
+    "react",
+    "template"
+  ],
+  bin: "./dist/index.js",
+  type: "module",
+  files: [
+    "dist",
+    "template"
+  ],
+  scripts: {
+    build: "esbuild bin/index.ts --bundle --outfile=dist/index.js --format=esm --platform=node --target=node22 --packages=external",
+    dev: "node bin/index.ts",
+    prepack: "pnpm run build"
+  },
+  dependencies: {
+    "@clack/prompts": "^0.11.0",
+    bingo: "^0.9.3",
+    zod: "^3.25.76"
+  },
+  devDependencies: {
+    "@pauldvlp/template-kit": "workspace:*",
+    "@types/node": "^24",
+    esbuild: "^0.25.0",
+    typescript: "^5"
+  },
+  engines: {
+    node: ">=22.18.0"
+  }
+};
+
+// src/template.ts
+var TEMPLATE_DIR = path2.join(path2.dirname(fileURLToPath(import.meta.url)), "..", "template");
+var template_default = createTemplate({
+  about: {
+    name: package_default.name,
+    description: package_default.description
+  },
+  options: {
+    scope: z.string().describe("npm scope for the workspace package, e.g. @acme").default("@app"),
+    // Unions of literals (not z.enum) so the value is settable on Bingo's CLI: bingo's arg parser
+    // handles ZodUnion/ZodLiteral but not ZodEnum (a bare `--base radix` would otherwise mis-parse to
+    // `base: true`). Both still render as an interactive `select`.
+    base: z.union([z.literal("radix"), z.literal("base")]).describe("shadcn component library base (radix-ui or @base-ui)").default("radix"),
+    preset: z.string().describe("shadcn preset: a style name (nova, vega, maia, lyra, mira, luma, sera, rhea) or a code from ui.shadcn.com").default(DEFAULT_PRESET),
+    iconLibrary: z.union([z.literal("lucide"), z.literal("hugeicons"), z.literal("radix"), z.literal("tabler")]).describe("Icon library").default("hugeicons"),
+    cssVariables: z.boolean().describe("Use CSS variables for theming").default(true),
+    rtl: z.boolean().describe("Enable RTL support").default(false),
+    pointer: z.boolean().describe("Use pointer cursor on interactive elements").default(false),
+    components: z.string().describe("Comma-separated shadcn components to pre-install, e.g. button,card,dialog").default("button,badge"),
+    install: z.boolean().describe("Install deps and apply the shadcn theme after scaffolding").default(true)
+  },
+  // Default the scope to the surrounding monorepo's scope (e.g. `@acme`) so it tracks the repo
+  // instead of a fixed `@app`. Falls back to `@app` when run outside a pnpm workspace.
+  prepare() {
+    const monorepoScope = detectMonorepoScope();
+    return {
+      scope: () => monorepoScope ?? "@app"
+    };
+  },
+  async produce({ options }) {
+    const scope = toScope(options.scope || "app");
+    const files = readTree(TEMPLATE_DIR, (_rel, content) => content.split("@app").join(scope));
+    patchJson(files, "package.json", (pkg) => {
+      resolveCatalogDeps(pkg);
+      addIconDeps(pkg, options.iconLibrary);
+    });
+    setPath(files, "components.json", `${JSON.stringify(uiComponentsJson({ ...options, scope }), null, 2)}
+`);
+    const adds = withRequiredComponents(options.components);
+    const ui = `${scope}/ui`;
+    const initFlags = shadcnInitFlags(options);
+    const scripts = options.install ? [
+      { commands: ["pnpm install --silent"], phase: 0 },
+      { commands: [`pnpm --filter ${ui} exec shadcn init ${initFlags}`], phase: 1 },
+      { commands: [`pnpm --filter ${ui} exec shadcn add ${adds.join(" ")} -y`], phase: 2 }
+    ] : [];
+    return {
+      files,
+      scripts
+    };
+  }
+});
+
+// bin/index.ts
+var DOCS_URL = "https://github.com/pauldvlp/vp-templates/blob/main/packages/vp-pkg-shadcn/README.md";
+function getArg(argv2, name) {
+  for (let i = 0; i < argv2.length; i++) {
+    const arg = argv2[i];
+    if (arg === `--${name}`) return argv2[i + 1];
+    if (arg.startsWith(`--${name}=`)) return arg.slice(name.length + 3);
+  }
+  return void 0;
+}
+var argv = process.argv.slice(2);
+var isHelp = argv.some((arg) => arg === "--help" || arg === "-h");
+var isInteractive = process.stdout.isTTY && !argv.includes("--no-interactive");
+if (!getArg(argv, "directory") && !isHelp) {
+  process.argv.push("--directory", "ui");
+}
+var status = await runTemplateCLI(template_default);
+process.exitCode = status;
+var finalArgv = process.argv.slice(2);
+var targetDir = getArg(finalArgv, "directory");
+if (!isHelp && targetDir && targetDir !== "." && path3.resolve(targetDir) !== process.cwd()) {
+  fs2.rmSync(path3.join(targetDir, ".git"), { recursive: true, force: true });
+}
+if (!isHelp && (status === 0 || status === void 0)) {
+  const ui = `${toScope(getArg(finalArgv, "scope") || detectMonorepoScope() || "app")}/ui`;
+  prompts.note(
+    [
+      `1. Workspace         glob the dir you chose (e.g. packages/*) so ${ui} is linked`,
+      `2. Depend on it      ${'"' + ui + '": "workspace:*"'}  in your app's package.json`,
+      `3. Tailwind v4       pnpm --filter <app> add -D @tailwindcss/vite tailwindcss`,
+      `                     then add tailwindcss() to the app's vite.config plugins`,
+      `4. Import the styles import '${ui}/globals.css'  in the app entry (e.g. src/main.tsx)`,
+      ``,
+      `Add components  pnpm --filter ${ui} exec shadcn add <name>`,
+      `Docs            ${DOCS_URL}`
+    ].join("\n"),
+    `Wire ${ui} into your app`
+  );
+  if (isInteractive) {
+    const ack = await prompts.confirm({ message: "Got it \u2014 continue?", initialValue: true });
+    if (prompts.isCancel(ack)) prompts.cancel("Okay \u2014 see the docs link above when you\u2019re ready.");
+  }
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@pauldvlp/vp-pkg-shadcn",
+  "version": "0.4.0",
+  "description": "Add a shared, fully customizable shadcn UI package (packages/ui) into an existing Vite+ monorepo, themeable via shadcn presets.",
+  "author": "pauldvlp (https://github.com/pauldvlp/vp-templates)",
+  "homepage": "https://github.com/pauldvlp/vp-templates",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pauldvlp/vp-templates.git",
+    "directory": "packages/vp-pkg-shadcn"
+  },
+  "bugs": "https://github.com/pauldvlp/vp-templates/issues",
+  "keywords": [
+    "vite-plus-generator",
+    "vite-plus",
+    "shadcn",
+    "react",
+    "template"
+  ],
+  "type": "module",
+  "files": [
+    "dist",
+    "template"
+  ],
+  "dependencies": {
+    "@clack/prompts": "^0.11.0",
+    "bingo": "^0.9.3",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@types/node": "^24",
+    "esbuild": "^0.25.0",
+    "typescript": "^5",
+    "@pauldvlp/template-kit": "0.0.0"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "scripts": {
+    "build": "esbuild bin/index.ts --bundle --outfile=dist/index.js --format=esm --platform=node --target=node22 --packages=external",
+    "dev": "node bin/index.ts"
+  },
+  "bin": {
+    "vp-pkg-shadcn": "./dist/index.js"
+  }
+}

package/template/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@app/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  },
+  "scripts": {
+    "lint": "vp lint",
+    "check": "vp check"
+  },
+  "dependencies": {
+    "@fontsource-variable/outfit": "^5.2.8",
+    "@fontsource-variable/space-grotesk": "^5.2.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "shadcn": "^4.11.0",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.2",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^4",
+    "typescript": "~6.0.2",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}

package/template/src/styles/globals.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";

package/template/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "types": ["vite-plus/client"],
+    "skipLibCheck": true,
+    "strict": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "paths": {
+      "@app/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/template/vite.config.ts

@@ -0,0 +1,31 @@
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig, lazyPlugins } from 'vite-plus'
+
+// https://vite.dev/config/
+export default defineConfig({
+  lint: {
+    plugins: ['react', 'typescript', 'oxc'],
+    rules: {
+      'react/rules-of-hooks': 'error',
+      'react/only-export-components': [
+        'warn',
+        {
+          allowConstantExport: true
+        }
+      ],
+      'vite-plus/prefer-vite-plus-imports': 'error'
+    },
+    options: {
+      typeAware: true,
+      typeCheck: true
+    },
+    jsPlugins: [
+      {
+        name: 'vite-plus',
+        specifier: 'vite-plus/oxlint-plugin'
+      }
+    ]
+  },
+  plugins: lazyPlugins(() => [react(), tailwindcss()])
+})