cooterlabs 1.0.1 → 1.0.2

package/README.md

@@ -17,15 +17,26 @@ It brings components directly to you. We do not provide a generic NPM library pa
 
 1. Open your terminal at the root of your project directory.
 2. Ensure you have `tailwind-merge` and `clsx` properly configured in a central utility path or installed manually (some components will auto-detect and install these).
-3. Run the CLI tool:
+
+### Initialization (Themes & CSS Base)
+
+To swiftly set up a cohesive Tailwind theme and properly configure your base CSS file (e.g. `index.css` or `globals.css`), run:
 
 ```bash
-npx cooterlabs add
+npx cooterlabs init
 ```
 
-### Direct Component Install
+This will give you a list of carefully curated designer themes (like `zinc`, `slate`) to apply global default variables (background, foreground, primary borders, etc.) out-of-the-box.
+
+### Adding Components
+
+Run the CLI tool without arguments to get an interactive autocomplete prompt:
+
+```bash
+npx cooterlabs add
+```
 
-If you know exactly what component you want, just bypass the interactive wizard and supply the name:
+If you know exactly what component you want, bypass the interactive wizard and supply the name:
 
 ```bash
 # Example: Adding a Button
@@ -35,6 +46,14 @@ npx cooterlabs add button
 npx cooterlabs add avatar
 ```
 
+### Install All Components At Once
+
+Need a complete starting block? Add the `--all` flag to scaffold the entire library in one go:
+
+```bash
+npx cooterlabs add --all
+```
+
 ## Available Components
 
 Currently, the CooterLabs Library ships with the following carefully designed boilerplate components:

package/bin/index.js

@@ -56,16 +56,58 @@ const REGISTRY = {
   },
   checkbox: {
     name: "Checkbox",
-    dependencies: [
-      "lucide-react",
-      "clsx",
-      "tailwind-merge",
-      "@radix-ui/react-checkbox",
-    ],
+    dependencies: ["lucide-react", "clsx", "tailwind-merge"],
     dev_dependencies: [],
   },
 };
 
+const THEMES = {
+  zinc: `:root {
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 10% 3.9%;
+  --radius: 0.5rem;
+}`,
+  slate: `: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;
+}`,
+};
+
 const templatesDir = path.join(__dirname, "../templates");
 
 const detectEnvironment = () => {
@@ -164,13 +206,20 @@ const main = async () => {
   }
 
   const args = process.argv.slice(2);
-  let command = args[0];
-  let componentName = args[1];
-
-  if (!command || command !== "add") {
-    // If command isn't provided or is entirely missing, treat the first arg as the component name
-    command = "add";
-    componentName = args[0] || "";
+  const isAll = args.includes("--all");
+  let command = "add";
+  let componentName = "";
+
+  // Parse command & componentName from args (ignoring flags)
+  const positionalArgs = args.filter((a) => !a.startsWith("--"));
+  if (positionalArgs.length > 0) {
+    if (positionalArgs[0] === "init" || positionalArgs[0] === "add") {
+      command = positionalArgs[0];
+      componentName = positionalArgs[1] || "";
+    } else {
+      command = "add";
+      componentName = positionalArgs[0];
+    }
   }
 
   let availableComponents = Object.keys(REGISTRY);
@@ -181,102 +230,183 @@ const main = async () => {
     if (dirs.length > 0) availableComponents = dirs;
   }
 
-  if (command === "add") {
-    if (!componentName) {
+  if (command === "init") {
+    const response = await prompts({
+      type: "select",
+      name: "theme",
+      message: "Which theme would you like to use?",
+      choices: Object.keys(THEMES).map((t) => ({ title: t, value: t })),
+    });
+
+    if (!response.theme) {
+      console.log(chalk.red("❌ Theme selection cancelled."));
+      process.exit(1);
+    }
+
+    const themeCSS = THEMES[response.theme];
+    let cssPath = path.join(cwd, "src", "index.css");
+
+    if (env.framework === "next") {
+      if (env.isAppDir) {
+        cssPath = fs.existsSync(path.join(cwd, "src", "app"))
+          ? path.join(cwd, "src", "app", "globals.css")
+          : path.join(cwd, "app", "globals.css");
+      } else {
+        cssPath = fs.existsSync(path.join(cwd, "src", "styles", "globals.css"))
+          ? path.join(cwd, "src", "styles", "globals.css")
+          : path.join(cwd, "styles", "globals.css");
+      }
+    } else {
+      cssPath = fs.existsSync(path.join(cwd, "src", "index.css"))
+        ? path.join(cwd, "src", "index.css")
+        : path.join(cwd, "src", "globals.css");
+    }
+
+    // Ensure dir exists
+    const cssDir = path.dirname(cssPath);
+    if (!fs.existsSync(cssDir)) {
+      fs.mkdirSync(cssDir, { recursive: true });
+    }
+
+    let cssContent = "";
+    if (fs.existsSync(cssPath)) {
+      cssContent = fs.readFileSync(cssPath, "utf-8");
+    }
+
+    const hasTailwindDirectives =
+      cssContent.includes("@tailwind base") ||
+      cssContent.includes('@import "tailwindcss');
+    if (!hasTailwindDirectives) {
+      cssContent = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n${cssContent}`;
+    }
+
+    if (
+      cssContent.includes(":root {") ||
+      cssContent.includes("--background:")
+    ) {
+      console.log(
+        chalk.yellow(
+          `⚠️  CSS variables may already exist in ${cssPath}. Please append them manually if needed:\n\n@layer base {\n${themeCSS}\n}\n`,
+        ),
+      );
+    } else {
+      cssContent = `${cssContent}\n@layer base {\n${themeCSS}\n}\n`;
+      fs.writeFileSync(cssPath, cssContent);
+      console.log(
+        chalk.green(`✅ Theme '${response.theme}' initialized in ${cssPath}`),
+      );
+    }
+  } else if (command === "add") {
+    let componentsToAdd = [];
+
+    if (isAll) {
+      componentsToAdd = availableComponents;
+    } else if (componentName) {
+      componentsToAdd = [componentName];
+    } else {
       const response = await prompts({
-        type: "select",
-        name: "component",
-        message: "Which component would you like to add?",
+        type: "autocompleteMultiselect",
+        name: "components",
+        message:
+          "Which components would you like to add? (Space to select, Enter to submit, or use --all flag)",
         choices: availableComponents.map((c) => ({ title: c, value: c })),
       });
-      componentName = response.component;
+      componentsToAdd = response.components || [];
     }
 
-    if (!componentName) {
-      console.log(chalk.red("❌ Operation cancelled."));
+    if (componentsToAdd.length === 0) {
+      console.log(chalk.red("❌ No components selected. Operation cancelled."));
       process.exit(1);
     }
 
-    if (!availableComponents.includes(componentName)) {
-      console.log(chalk.red(`❌ Component '${componentName}' not found.`));
+    // Check availability
+    const notFound = componentsToAdd.filter(
+      (c) => !availableComponents.includes(c),
+    );
+    if (notFound.length > 0) {
+      console.log(chalk.red(`❌ Components not found: ${notFound.join(", ")}`));
       process.exit(1);
     }
 
-    const templatePath = path.join(templatesDir, componentName);
-
     // Create target dir
     const targetDir = path.join(cwd, env.componentsDir);
     if (!fs.existsSync(targetDir)) {
       fs.mkdirSync(targetDir, { recursive: true });
     }
 
-    // Determine target path
-    const extension = env.typescript ? ".tsx" : ".jsx";
-    const componentFile = `${componentName}${extension}`;
-    const targetPath = path.join(targetDir, componentFile);
-
-    const spinner = ora(`Installing ${componentName}...`).start();
-
-    try {
-      let sourceContent = "";
-      if (fs.existsSync(templatePath)) {
-        const files = fs.readdirSync(templatePath);
-        const srcFile = files.find(
-          (f) => f.endsWith(".tsx") || f.endsWith(".jsx"),
-        );
-        if (srcFile) {
-          sourceContent = fs.readFileSync(
-            path.join(templatePath, srcFile),
-            "utf-8",
+    let allDependencies = new Set();
+
+    for (const comp of componentsToAdd) {
+      const templatePath = path.join(templatesDir, comp);
+      const extension = env.typescript ? ".tsx" : ".jsx";
+      const componentFile = `${comp}${extension}`;
+      const targetPath = path.join(targetDir, componentFile);
+
+      const spinner = ora(`Installing ${comp}...`).start();
+
+      try {
+        let sourceContent = "";
+        if (fs.existsSync(templatePath)) {
+          const files = fs.readdirSync(templatePath);
+          const srcFile = files.find(
+            (f) => f.endsWith(".tsx") || f.endsWith(".jsx"),
           );
+          if (srcFile) {
+            sourceContent = fs.readFileSync(
+              path.join(templatePath, srcFile),
+              "utf-8",
+            );
+          } else if (files.length > 0) {
+            sourceContent = fs.readFileSync(
+              path.join(templatePath, files[0]),
+              "utf-8",
+            );
+          }
         } else {
-          sourceContent = fs.readFileSync(
-            path.join(templatePath, files[0]),
-            "utf-8",
+          sourceContent = `import React from 'react';\n\nexport const ${REGISTRY[comp]?.name || "Component"} = () => { return <div>${comp}</div>; };\n`;
+        }
+
+        // Format code
+        let formattedContent = sourceContent;
+        try {
+          formattedContent = await formatFile(sourceContent, targetPath);
+        } catch (err) {
+          console.log(
+            chalk.yellow(
+              `\n⚠️  Formatting failed for ${comp}. Using original formatting.`,
+            ),
           );
         }
-      } else {
-        // Fallback or generic content simply to show it works
-        sourceContent = `import React from 'react';\n\nexport const ${REGISTRY[componentName]?.name || "Component"} = () => { return <div>${componentName}</div>; };\n`;
-      }
 
-      // Hacky TS -> JS stripping if they don't use TypeScript
-      if (!env.typescript) {
-        // Simple type stripping if needed, but omitted for stability.
-        // It's recommended to publish compiled JS if targeting non-TS,
-        // or let the user fix up the .jsx file.
-      }
+        fs.writeFileSync(targetPath, formattedContent, "utf-8");
+        spinner.succeed(`Created ${componentFile} in ${env.componentsDir}`);
 
-      // Format code
-      let formattedContent = sourceContent;
-      try {
-        formattedContent = await formatFile(sourceContent, targetPath);
+        // Track dependencies
+        const registryEntry = REGISTRY[comp];
+        if (registryEntry && registryEntry.dependencies) {
+          registryEntry.dependencies.forEach((d) => allDependencies.add(d));
+        }
       } catch (err) {
-        console.log(
-          chalk.yellow("⚠️  Formatting failed. Using original formatting."),
-        );
+        spinner.fail(`Failed to add ${comp}`);
+        console.error(chalk.red(err.message));
       }
+    }
 
-      // Write file
-      fs.writeFileSync(targetPath, formattedContent, "utf-8");
-
-      spinner.succeed(`Created ${componentFile} in ${env.componentsDir}`);
-
-      // Install dependencies
-      const registryEntry = REGISTRY[componentName];
-      if (registryEntry && registryEntry.dependencies?.length > 0) {
-        const depSpinner = ora(
-          `Installing dependencies: ${registryEntry.dependencies.join(", ")}...`,
-        ).start();
-        installDependencies(registryEntry.dependencies, env.pkgCommand);
-        depSpinner.succeed(`Installed dependencies.`);
+    if (allDependencies.size > 0) {
+      const depsArray = Array.from(allDependencies);
+      const depSpinner = ora(
+        `Installing collective dependencies: ${depsArray.join(", ")}...`,
+      ).start();
+      try {
+        installDependencies(depsArray, env.pkgCommand);
+        depSpinner.succeed(`Dependencies installed successfully.`);
+      } catch (err) {
+        depSpinner.fail(`Failed to install dependencies.`);
+        console.error(chalk.red(err.message));
       }
-
-      console.log(chalk.green(`\n✅ ${componentName} added successfully!`));
-    } catch (err) {
-      spinner.fail(`Failed to add ${componentName}`);
-      console.error(chalk.red(err.message));
     }
+
+    console.log(chalk.green(`\n✅ Finished adding components!`));
   } else {
     console.log(chalk.red(`❌ Unknown command: ${command}`));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cooterlabs",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Component library CLI for CooterLabs apps",
   "files": [
     "bin",