create-bdpa-react-scaffold 1.8.2 → 1.8.6

package/create-ui-lib.js

@@ -58,6 +58,61 @@ 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", "--all", "--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 --all");
+  } else {
+    console.log("\n✅ shadcn/ui components installed.");
+  }
+}
+
+function installVSCodeExtensions() {
+  const extensions = [
+    "dsznajder.es7-react-js-snippets",
+    "bradlc.vscode-tailwindcss",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+  ];
+
+  const isWin = process.platform === "win32";
+  const codeCmd = isWin ? "code.cmd" : "code";
+
+  // Check if `code` CLI is available
+  const check = spawnSync(codeCmd, ["--version"], { stdio: "pipe" });
+  if (check.status !== 0 || check.error) {
+    console.warn(
+      "\n⚠️  VS Code CLI not found — skipping Intellisense extension installs."
+    );
+    console.warn(
+      "   Install manually: code --install-extension <id>\n"
+    );
+    return;
+  }
+
+  console.log("\n🧩 Installing VS Code Intellisense extensions...");
+  for (const ext of extensions) {
+    console.log(`   Installing ${ext}...`);
+    const result = spawnSync(codeCmd, ["--install-extension", ext], {
+      stdio: "inherit",
+    });
+    if (result.status !== 0) {
+      console.warn(`   ⚠️  Failed to install ${ext} (exit ${result.status})`);
+    } else {
+      console.log(`   ✔ ${ext}`);
+    }
+  }
+  console.log("");
+}
+
 function installDependencies(pm, cwd) {
   const isWin = process.platform === "win32";
   const pmCmd = pm === "yarn" ? "yarn" : pm === "pnpm" ? "pnpm" : "npm";
@@ -104,7 +159,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",
@@ -113,6 +171,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"
   }
 }
@@ -125,6 +184,7 @@ write("jsconfig.json", `
     "module": "ESNext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
+    "checkJs": true,
     "strict": false,
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -139,6 +199,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": [
@@ -203,6 +286,7 @@ module.exports = {
 
 write("tailwind.config.cjs", `
 module.exports = {
+  darkMode: ["class"],
   content: [
     "./index.html",
     "./src/**/*.{js,jsx,ts,tsx}"
@@ -211,11 +295,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")]
 };
 `);
 
@@ -425,12 +547,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;
+  }
 }
 `);
 
@@ -453,6 +625,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";
@@ -1243,8 +1429,13 @@ if (fs.existsSync(bdpaImagePath)) {
 
 if (doInstall) {
   installDependencies(packageManager, BASE_DIR);
-} else {
-  console.log("\nℹ️ Skipping install (flag --no-install). Run manually later.");
+  installShadcn(BASE_DIR);
+}
+
+installVSCodeExtensions();
+
+if (!doInstall) {
+  console.log("\nℹ️ Skipping npm install (flag --no-install). Run manually later.");
 }
 
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "1.8.2",
+  "version": "1.8.6",
   "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,9 @@
   "homepage": "https://github.com/lxdavis9lxd/create-bdpa-react-scaffold-#readme",
   "license": "UNLICENSED",
   "scripts": {
-    "prepublishOnly": "node -e \"require('fs').accessSync('./create-ui-lib.js');\"",
-    "publish:public": "npm publish --access public"
+    "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"
   }
 }