getlotui 0.1.3 → 0.1.4

package/package.json

@@ -17,5 +17,5 @@
     "fs-extra": "^11.2.0",
     "ms": "^2.1.3"
   },
-  "version": "0.1.3"
+  "version": "0.1.4"
 }

package/packages/cli/dist/commands/add.js

@@ -19,7 +19,7 @@ async function addCommand(component) {
             config = JSON.parse(configContent);
         }
         catch {
-            console.error(chalk_1.default.red("getlotui.config.json not found. Run `getlotui init` first."));
+            console.error(chalk_1.default.red("❌ getlotui.config.json not found. Run `getlotui init` first."));
             return;
         }
         const adapter = config.adapter || "expo";
@@ -28,10 +28,21 @@ async function addCommand(component) {
             (adapter === "flutter" ? "lib/components/ui" : "components/ui"));
         const componentName = component.charAt(0).toUpperCase() + component.slice(1);
         const templatePath = path_1.default.resolve(__dirname, "..", "templates", adapter, `${componentName}.${extension}`);
+        // Check if template exists
+        try {
+            await fs_1.promises.access(templatePath);
+        }
+        catch {
+            console.error(chalk_1.default.red(`❌ Component "${componentName}" not found for ${adapter}.`));
+            console.log(chalk_1.default.blue(`\n📚 Available components: Button, Input, Card, Badge, Avatar, Alert, AlertDialog, Accordion, Dropdown, Tabs, Toast`));
+            return;
+        }
         await (0, fs_2.copyComponent)(templatePath, path_1.default.join(componentsDir, `${componentName}.${extension}`));
-        console.log(chalk_1.default.green(`Component ${componentName} added to ${componentsDir}`));
+        console.log(chalk_1.default.green(`✓ Component ${componentName} added to ${componentsDir}`));
+        // Provide usage hint
+        console.log(chalk_1.default.blue(`\n💡 Import it with: import { ${componentName} } from '@/components/ui/${componentName}'`));
     }
     catch (err) {
-        console.error(chalk_1.default.red("Failed to add component:"), err);
+        console.error(chalk_1.default.red("❌ Failed to add component:"), err);
     }
 }

package/packages/cli/dist/commands/init.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -80,12 +113,124 @@ class GetLotUITheme {
   }
 };`;
             await fs_1.promises.writeFile(themeFilePath, themeContent, "utf8");
-            console.log(chalk_1.default.green(`Created ${defaultConfig.themeDir}/${themeFileName}`));
+            console.log(chalk_1.default.green(`✓ Created ${defaultConfig.themeDir}/${themeFileName}`));
         }
         catch (err) {
             console.warn(chalk_1.default.yellow("Could not create theme directory:"), err);
         }
-        console.log(chalk_1.default.green(`Created getlotui.config.json with ${adapter} (${packageManager}) defaults.`));
+        // For web projects, create lib/utils.ts
+        if (adapter === "web") {
+            try {
+                const libDir = path_1.default.join(cwd, "lib");
+                await fs_1.promises.mkdir(libDir, { recursive: true });
+                const utilsPath = path_1.default.join(libDir, "utils.ts");
+                const utilsContent = `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+                await fs_1.promises.writeFile(utilsPath, utilsContent, "utf8");
+                console.log(chalk_1.default.green(`✓ Created lib/utils.ts`));
+            }
+            catch (err) {
+                console.warn(chalk_1.default.yellow("Could not create lib/utils.ts:"), err);
+            }
+            // Install required dependencies
+            console.log(chalk_1.default.blue("\n📦 Installing required dependencies..."));
+            const { spawn } = await Promise.resolve().then(() => __importStar(require("child_process")));
+            const dependencies = [
+                "clsx",
+                "tailwind-merge",
+                "class-variance-authority",
+            ];
+            const installCmd = packageManager === "yarn"
+                ? "yarn"
+                : packageManager === "pnpm"
+                    ? "pnpm"
+                    : "npm";
+            const installArgs = packageManager === "yarn"
+                ? ["add", ...dependencies]
+                : packageManager === "pnpm"
+                    ? ["add", ...dependencies]
+                    : ["install", ...dependencies];
+            await new Promise((resolve, reject) => {
+                const proc = spawn(installCmd, installArgs, {
+                    cwd,
+                    stdio: "inherit",
+                    shell: true,
+                });
+                proc.on("close", (code) => {
+                    if (code === 0) {
+                        console.log(chalk_1.default.green(`✓ Dependencies installed successfully`));
+                        resolve();
+                    }
+                    else {
+                        console.warn(chalk_1.default.yellow(`⚠ Failed to install dependencies. Please run: ${installCmd} ${installArgs.join(" ")}`));
+                        resolve(); // Don't reject, just warn
+                    }
+                });
+                proc.on("error", (err) => {
+                    console.warn(chalk_1.default.yellow(`⚠ Could not install dependencies automatically: ${err.message}`));
+                    console.log(chalk_1.default.blue(`Please run manually: ${installCmd} ${installArgs.join(" ")}`));
+                    resolve(); // Don't reject, just warn
+                });
+            });
+        }
+        // For Expo projects, create utils/cn.ts
+        if (adapter === "expo") {
+            try {
+                const utilsDir = path_1.default.join(cwd, "utils");
+                await fs_1.promises.mkdir(utilsDir, { recursive: true });
+                const utilsPath = path_1.default.join(utilsDir, "cn.ts");
+                const utilsContent = `import { StyleSheet } from "react-native";
+
+/**
+ * A utility to merge React Native styles.
+ */
+export function cn(...inputs: any[]) {
+  return StyleSheet.flatten(inputs.filter(Boolean));
+}
+`;
+                await fs_1.promises.writeFile(utilsPath, utilsContent, "utf8");
+                console.log(chalk_1.default.green(`✓ Created utils/cn.ts`));
+            }
+            catch (err) {
+                console.warn(chalk_1.default.yellow("Could not create utils/cn.ts:"), err);
+            }
+        }
+        // For Flutter projects, create lib/utils.dart
+        if (adapter === "flutter") {
+            try {
+                const libDir = path_1.default.join(cwd, "lib");
+                await fs_1.promises.mkdir(libDir, { recursive: true });
+                const utilsPath = path_1.default.join(libDir, "utils.dart");
+                const utilsContent = `import 'package:flutter/material.dart';
+
+class GetLotUIUtils {
+  static TextStyle cnText(List<TextStyle?> styles) {
+    TextStyle result = const TextStyle();
+    for (var style in styles) {
+      if (style != null) {
+        result = result.merge(style);
+      }
+    }
+    return result;
+  }
+}
+`;
+                await fs_1.promises.writeFile(utilsPath, utilsContent, "utf8");
+                console.log(chalk_1.default.green(`✓ Created lib/utils.dart`));
+            }
+            catch (err) {
+                console.warn(chalk_1.default.yellow("Could not create lib/utils.dart:"), err);
+            }
+        }
+        console.log(chalk_1.default.green(`\n✨ GetLotUI initialized with ${adapter} (${packageManager}) defaults.`));
+        console.log(chalk_1.default.blue(`\n📚 Next steps:`));
+        console.log(chalk_1.default.white(`  1. Run: getlotui add <component>`));
+        console.log(chalk_1.default.white(`  2. Import and use components in your app`));
     }
     catch (err) {
         console.error(chalk_1.default.red("Failed to initialize GetLotUI config:"), err);

package/packages/cli/src/commands/add.ts

@@ -14,7 +14,9 @@ export async function addCommand(component: string) {
       config = JSON.parse(configContent);
     } catch {
       console.error(
-        chalk.red("getlotui.config.json not found. Run `getlotui init` first.")
+        chalk.red(
+          "❌ getlotui.config.json not found. Run `getlotui init` first."
+        )
       );
       return;
     }
@@ -37,14 +39,36 @@ export async function addCommand(component: string) {
       `${componentName}.${extension}`
     );
 
+    // Check if template exists
+    try {
+      await fs.access(templatePath);
+    } catch {
+      console.error(
+        chalk.red(`❌ Component "${componentName}" not found for ${adapter}.`)
+      );
+      console.log(
+        chalk.blue(
+          `\n📚 Available components: Button, Input, Card, Badge, Avatar, Alert, AlertDialog, Accordion, Dropdown, Tabs, Toast`
+        )
+      );
+      return;
+    }
+
     await copyComponent(
       templatePath,
       path.join(componentsDir, `${componentName}.${extension}`)
     );
     console.log(
-      chalk.green(`Component ${componentName} added to ${componentsDir}`)
+      chalk.green(`✓ Component ${componentName} added to ${componentsDir}`)
+    );
+
+    // Provide usage hint
+    console.log(
+      chalk.blue(
+        `\n💡 Import it with: import { ${componentName} } from '@/components/ui/${componentName}'`
+      )
     );
   } catch (err) {
-    console.error(chalk.red("Failed to add component:"), err);
+    console.error(chalk.red("❌ Failed to add component:"), err);
   }
 }

package/packages/cli/src/commands/init.ts

@@ -91,17 +91,154 @@ class GetLotUITheme {
 
       await fs.writeFile(themeFilePath, themeContent, "utf8");
       console.log(
-        chalk.green(`Created ${defaultConfig.themeDir}/${themeFileName}`)
+        chalk.green(`✓ Created ${defaultConfig.themeDir}/${themeFileName}`)
       );
     } catch (err) {
       console.warn(chalk.yellow("Could not create theme directory:"), err);
     }
 
+    // For web projects, create lib/utils.ts
+    if (adapter === "web") {
+      try {
+        const libDir = path.join(cwd, "lib");
+        await fs.mkdir(libDir, { recursive: true });
+
+        const utilsPath = path.join(libDir, "utils.ts");
+        const utilsContent = `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+        await fs.writeFile(utilsPath, utilsContent, "utf8");
+        console.log(chalk.green(`✓ Created lib/utils.ts`));
+      } catch (err) {
+        console.warn(chalk.yellow("Could not create lib/utils.ts:"), err);
+      }
+
+      // Install required dependencies
+      console.log(chalk.blue("\n📦 Installing required dependencies..."));
+      const { spawn } = await import("child_process");
+
+      const dependencies = [
+        "clsx",
+        "tailwind-merge",
+        "class-variance-authority",
+      ];
+
+      const installCmd =
+        packageManager === "yarn"
+          ? "yarn"
+          : packageManager === "pnpm"
+          ? "pnpm"
+          : "npm";
+
+      const installArgs =
+        packageManager === "yarn"
+          ? ["add", ...dependencies]
+          : packageManager === "pnpm"
+          ? ["add", ...dependencies]
+          : ["install", ...dependencies];
+
+      await new Promise<void>((resolve, reject) => {
+        const proc = spawn(installCmd, installArgs, {
+          cwd,
+          stdio: "inherit",
+          shell: true,
+        });
+
+        proc.on("close", (code) => {
+          if (code === 0) {
+            console.log(chalk.green(`✓ Dependencies installed successfully`));
+            resolve();
+          } else {
+            console.warn(
+              chalk.yellow(
+                `⚠ Failed to install dependencies. Please run: ${installCmd} ${installArgs.join(
+                  " "
+                )}`
+              )
+            );
+            resolve(); // Don't reject, just warn
+          }
+        });
+
+        proc.on("error", (err) => {
+          console.warn(
+            chalk.yellow(
+              `⚠ Could not install dependencies automatically: ${err.message}`
+            )
+          );
+          console.log(
+            chalk.blue(
+              `Please run manually: ${installCmd} ${installArgs.join(" ")}`
+            )
+          );
+          resolve(); // Don't reject, just warn
+        });
+      });
+    }
+
+    // For Expo projects, create utils/cn.ts
+    if (adapter === "expo") {
+      try {
+        const utilsDir = path.join(cwd, "utils");
+        await fs.mkdir(utilsDir, { recursive: true });
+
+        const utilsPath = path.join(utilsDir, "cn.ts");
+        const utilsContent = `import { StyleSheet } from "react-native";
+
+/**
+ * A utility to merge React Native styles.
+ */
+export function cn(...inputs: any[]) {
+  return StyleSheet.flatten(inputs.filter(Boolean));
+}
+`;
+        await fs.writeFile(utilsPath, utilsContent, "utf8");
+        console.log(chalk.green(`✓ Created utils/cn.ts`));
+      } catch (err) {
+        console.warn(chalk.yellow("Could not create utils/cn.ts:"), err);
+      }
+    }
+
+    // For Flutter projects, create lib/utils.dart
+    if (adapter === "flutter") {
+      try {
+        const libDir = path.join(cwd, "lib");
+        await fs.mkdir(libDir, { recursive: true });
+
+        const utilsPath = path.join(libDir, "utils.dart");
+        const utilsContent = `import 'package:flutter/material.dart';
+
+class GetLotUIUtils {
+  static TextStyle cnText(List<TextStyle?> styles) {
+    TextStyle result = const TextStyle();
+    for (var style in styles) {
+      if (style != null) {
+        result = result.merge(style);
+      }
+    }
+    return result;
+  }
+}
+`;
+        await fs.writeFile(utilsPath, utilsContent, "utf8");
+        console.log(chalk.green(`✓ Created lib/utils.dart`));
+      } catch (err) {
+        console.warn(chalk.yellow("Could not create lib/utils.dart:"), err);
+      }
+    }
+
     console.log(
       chalk.green(
-        `Created getlotui.config.json with ${adapter} (${packageManager}) defaults.`
+        `\n✨ GetLotUI initialized with ${adapter} (${packageManager}) defaults.`
       )
     );
+    console.log(chalk.blue(`\n📚 Next steps:`));
+    console.log(chalk.white(`  1. Run: getlotui add <component>`));
+    console.log(chalk.white(`  2. Import and use components in your app`));
   } catch (err) {
     console.error(chalk.red("Failed to initialize GetLotUI config:"), err);
   }