shadcn-scaffold 1.0.0

package/README.md

@@ -0,0 +1,15 @@
+# cli-tool
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.10. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/dist/create.js

@@ -0,0 +1,95 @@
+import ora from "ora";
+import { execa } from "execa";
+import chalk from "chalk";
+import fs from "fs";
+import path from "path";
+import { appTsxCode, indexCss, mainTsxCode, modeToggleCode, themeProviderCode, viteConfig, } from "./templates";
+export async function create(projectName, packages) {
+    const spinner = ora("Scaffolding Vite React app...").start();
+    try {
+        await execa("bun", [
+            "create",
+            "vite@latest",
+            projectName,
+            "--template",
+            "react-ts",
+        ]);
+        spinner.succeed("Vite React app created");
+        spinner.start("Installing Tailwind CSS...");
+        await execa("bun", ["add", "tailwindcss", "@tailwindcss/vite"], {
+            cwd: projectName,
+        });
+        spinner.succeed("Tailwind CSS installed");
+        spinner.start("Configuring Tailwind CSS...");
+        fs.writeFileSync(path.join(projectName, "vite.config.ts"), viteConfig);
+        fs.writeFileSync(path.join(projectName, "src", "index.css"), indexCss);
+        fs.unlinkSync(path.join(projectName, "src", "App.css"));
+        spinner.succeed("Tailwind CSS configured");
+        const tsconfigAppPath = path.join(projectName, "tsconfig.app.json");
+        let tsconfigAppContent = fs.readFileSync(tsconfigAppPath, "utf-8");
+        tsconfigAppContent = tsconfigAppContent.replace('"compilerOptions": {', `"compilerOptions": {\n    "ignoreDeprecations": "6.0",\n    "baseUrl": ".",\n    "paths": {\n      "@/*": [\n        "./src/*"\n      ]\n    },`);
+        fs.writeFileSync(tsconfigAppPath, tsconfigAppContent);
+        const tsconfigPath = path.join(projectName, "tsconfig.json");
+        const tsconfig = JSON.parse(fs.readFileSync(tsconfigPath, "utf-8"));
+        tsconfig.compilerOptions = {
+            baseUrl: ".",
+            ignoreDeprecations: "6.0",
+            paths: {
+                "@/*": ["./src/*"],
+            },
+        };
+        fs.writeFileSync(tsconfigPath, JSON.stringify(tsconfig, null, 2));
+        spinner.start("Initializing shadcn/ui...");
+        await execa("bunx", [
+            "--bun",
+            "shadcn@latest",
+            "init",
+            "-t",
+            "vite",
+            "-d",
+            "-y",
+            "--cwd",
+            projectName,
+        ]);
+        spinner.succeed("shadcn/ui initialized");
+        spinner.start("Adding shadcn button component...");
+        await execa("bunx", [
+            "--bun",
+            "shadcn@latest",
+            "add",
+            "button",
+            "-y",
+            "--cwd",
+            projectName,
+        ]);
+        spinner.succeed("shadcn button added");
+        spinner.start("Setting up custom project structure and theme toggle...");
+        fs.mkdirSync(path.join(projectName, "src", "providers"), {
+            recursive: true,
+        });
+        fs.mkdirSync(path.join(projectName, "src", "features", "theme"), {
+            recursive: true,
+        });
+        fs.writeFileSync(path.join(projectName, "src", "providers", "theme-provider.tsx"), themeProviderCode);
+        fs.writeFileSync(path.join(projectName, "src", "features", "theme", "mode-toggle.tsx"), modeToggleCode);
+        fs.writeFileSync(path.join(projectName, "src", "main.tsx"), mainTsxCode);
+        fs.writeFileSync(path.join(projectName, "src", "App.tsx"), appTsxCode);
+        spinner.succeed("Project structure and theme configured");
+        if (packages.length > 0) {
+            spinner.start(`Installing extra packages: ${packages.join(", ")}...`);
+            await execa("bun", ["add", ...packages], {
+                cwd: projectName,
+            });
+            spinner.succeed("Extra packages installed");
+        }
+        console.log(`\n${chalk.green("✔")} Successfully created ${chalk.cyan(projectName)}!`);
+        console.log(`\nNext steps:`);
+        console.log(`  ${chalk.cyan(`cd ${projectName}`)}`);
+        console.log(`  ${chalk.cyan("bun run dev")}\n`);
+    }
+    catch (error) {
+        spinner.fail("An error occurred during setup");
+        console.error(error);
+        throw error;
+    }
+}

package/dist/index.js

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Command } from "commander";
+import { App } from "./ui.js";
+import { render } from "ink";
+const program = new Command();
+program
+    .name("scaffold")
+    .description("Sets up your personal React stack instantly")
+    .version("1.0.0")
+    .argument("<project-name>", "Name of your project")
+    .action((projectName) => {
+    render(_jsx(App, { projectName: projectName }));
+});
+program.parse();

package/dist/templates.js

@@ -0,0 +1,161 @@
+export const viteConfig = `import path from "path";
+import { fileURLToPath } from "url";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});
+`;
+export const indexCss = `@import "tailwindcss";
+`;
+export const themeProviderCode = `import { createContext, useContext, useEffect, useState } from "react"
+
+type Theme = "dark" | "light" | "system"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState | undefined>(
+  undefined
+)
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  )
+
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme)
+      setTheme(theme)
+    },
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (!context)
+    throw new Error("useTheme must be used within a ThemeProvider")
+
+  return context
+}
+`;
+export const mainTsxCode = `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { ThemeProvider } from "@/providers/theme-provider"
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+)
+`;
+export const modeToggleCode = `import { Moon, Sun } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { useTheme } from "@/providers/theme-provider"
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
+`;
+export const appTsxCode = `import { ModeToggle } from "@/features/theme/mode-toggle"
+import { Button } from "@/components/ui/button"
+
+function App() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-24 gap-4">
+      <div className="absolute top-4 right-4">
+        <ModeToggle />
+      </div>
+      <h1 className="text-4xl font-bold">Hello World</h1>
+      <Button>Click me</Button>
+    </div>
+  )
+}
+
+export default App
+`;
+export const tsconfigCode = `{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
+`;

package/dist/ui.js

@@ -0,0 +1,32 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Text, Box, useApp } from "ink";
+import { MultiSelect } from "@inkjs/ui";
+import { create } from "./create.js";
+export function App({ projectName }) {
+    const { exit } = useApp();
+    const [isDone, setIsDone] = useState(false);
+    const options = [
+        { label: "Zustand (State Management)", value: "zustand" },
+        { label: "React Router DOM (Routing)", value: "react-router-dom" },
+        { label: "TanStack Query (Data Fetching/Caching)", value: "@tanstack/react-query" },
+        { label: "Axios (HTTP Client)", value: "axios" },
+        { label: "Framer Motion (Animations)", value: "framer-motion" },
+        { label: "React Hook Form (Forms)", value: "react-hook-form" },
+        { label: "Zod (Schema Validation)", value: "zod" },
+    ];
+    const handleSubmit = async (selectedValues) => {
+        setIsDone(true);
+        exit();
+        try {
+            await create(projectName, selectedValues);
+        }
+        catch {
+            process.exitCode = 1;
+        }
+    };
+    if (isDone) {
+        return null;
+    }
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, padding: 1, children: [_jsxs(Text, { color: "orange", children: ["Select extra packages for ", projectName, " (Space to select, Enter to submit);"] }), _jsx(MultiSelect, { options: options, onSubmit: handleSubmit })] }));
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "shadcn-scaffold",
+  "version": "1.0.0",
+  "bin": {
+    "scaffold": "./dist/index.js"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/node": "^25.7.0",
+    "@types/react": "^19.2.14",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3"
+  },
+  "dependencies": {
+    "@inkjs/ui": "^2.0.0",
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "execa": "^9.6.1",
+    "ink": "^7.0.3",
+    "ora": "^9.4.0",
+    "react": "^19.2.6"
+  },
+  "scripts": {
+    "dev": "tsx src/index.tsx",
+    "build": "tsc -p tsconfig.build.json",
+    "start": "node dist/index.js",
+    "prepublishOnly": "npm run build"
+  }
+}