create-bdpa-react-scaffold 1.8.3 → 1.8.7

package/create-ui-lib.js

@@ -58,6 +58,33 @@ function write(filePath, content) {
   console.log("✔ Created:", filePath);
 }
 
+function installShadcn(cwd) {
+  const isWin = process.platform === "win32";
+  const npxCmd = isWin ? "npx.cmd" : "npx";
+  console.log("\n🎨 Installing shadcn/ui components (all)...");
+  const result = spawnSync(
+    npxCmd,
+    [
+      "shadcn@latest", "add",
+      "accordion", "alert", "alert-dialog", "aspect-ratio", "avatar", "badge",
+      "button", "calendar", "card", "carousel", "checkbox", "collapsible",
+      "command", "dialog", "drawer", "dropdown-menu", "form", "hover-card",
+      "input", "label", "menubar", "navigation-menu", "popover", "progress",
+      "radio-group", "scroll-area", "select", "separator", "sheet", "skeleton",
+      "slider", "sonner", "switch", "table", "tabs", "textarea", "toast",
+      "toggle", "tooltip",
+      "--yes", "--overwrite"
+    ],
+    { stdio: "inherit", cwd }
+  );
+  if (result.status !== 0) {
+    console.warn(`\n⚠️  shadcn install exited with status ${result.status}.`);
+    console.warn("   Run manually: npx shadcn@latest add accordion alert alert-dialog aspect-ratio avatar badge button calendar card carousel checkbox collapsible command dialog drawer dropdown-menu form hover-card input label menubar navigation-menu popover progress radio-group scroll-area select separator sheet skeleton slider sonner switch table tabs textarea toast toggle tooltip");
+  } else {
+    console.log("\n✅ shadcn/ui components installed.");
+  }
+}
+
 function installVSCodeExtensions() {
   const extensions = [
     "dsznajder.es7-react-js-snippets",
@@ -142,7 +169,10 @@ write("package.json", `
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.20.0",
     "lucide-react": "^0.344.0",
-    "bcryptjs": "^2.4.3"
+    "bcryptjs": "^2.4.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -151,6 +181,7 @@ write("package.json", `
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "vite": "^5.0.0"
   }
 }
@@ -163,6 +194,7 @@ write("jsconfig.json", `
     "module": "ESNext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
+    "checkJs": true,
     "strict": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -177,6 +209,29 @@ write("jsconfig.json", `
 }
 `);
 
+write("components.json", `
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.cjs",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
+`);
+
 write(".vscode/extensions.json", `
 {
   "recommendations": [
@@ -241,6 +296,7 @@ module.exports = {
 
 write("tailwind.config.cjs", `
 module.exports = {
+  darkMode: ["class"],
   content: [
     "./index.html",
     "./src/**/*.{js,jsx,ts,tsx}"
@@ -249,11 +305,49 @@ module.exports = {
     extend: {
       colors: {
         milwaukeeBlue: "#2563eb",
-        milwaukeeGold: "#fbbf24"
+        milwaukeeGold: "#fbbf24",
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))"
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        }
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
       }
     }
   },
-  plugins: []
+  plugins: [require("tailwindcss-animate")]
 };
 `);
 
@@ -463,12 +557,62 @@ write("src/index.css", `
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply bg-gray-100 text-gray-900;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
 }
 
-h1, h2, h3, h4 {
-  @apply font-semibold;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  h1, h2, h3, h4 {
+    @apply font-semibold;
+  }
 }
 `);
 
@@ -491,6 +635,20 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 );
 `);
 
+write("src/lib/utils.js", `
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges Tailwind CSS classes with clsx + tailwind-merge.
+ * @param {...import('clsx').ClassValue} inputs
+ * @returns {string}
+ */
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+`);
+
 write("src/index.js", `
 export { default as Button } from "./components/ui/Button.jsx";
 export { default as Card } from "./components/ui/Card.jsx";
@@ -1281,6 +1439,7 @@ if (fs.existsSync(bdpaImagePath)) {
 
 if (doInstall) {
   installDependencies(packageManager, BASE_DIR);
+  installShadcn(BASE_DIR);
 }
 
 installVSCodeExtensions();

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "1.8.3",
+  "version": "1.8.7",
   "description": "Scaffold a React + Tailwind UI library demo via Vite.",
   "bin": {
-    "create-bdpa-react-scaffold": "./create-ui-lib.js"
+    "create-bdpa-react-scaffold": "create-ui-lib.js"
   },
   "files": [
     "create-ui-lib.js",
@@ -32,7 +32,7 @@
   "homepage": "https://github.com/lxdavis9lxd/create-bdpa-react-scaffold-#readme",
   "license": "UNLICENSED",
   "scripts": {
-    "prepublishOnly": "node -e \"require('fs').accessSync('./create-ui-lib.js');\"",
+    "prepublishOnly": "node -e \"require('fs').accessSync('create-ui-lib.js');\"",
     "install:extensions": "code --install-extension dsznajder.es7-react-js-snippets && code --install-extension bradlc.vscode-tailwindcss && code --install-extension dbaeumer.vscode-eslint && code --install-extension esbenp.prettier-vscode",
     "test": "npm run install:extensions",
     "publish:public": "npm run install:extensions && npm publish --access public"