myoperator-ui 0.0.42 → 0.0.44

package/dist/index.js

@@ -6,8 +6,8 @@ import { createRequire } from "module";
 
 // src/commands/add.ts
 import chalk from "chalk";
-import fs from "fs-extra";
-import path from "path";
+import fs2 from "fs-extra";
+import path2 from "path";
 import prompts from "prompts";
 import ora from "ora";
 
@@ -875,17 +875,73 @@ export { Tag, tagVariants }
   };
 }
 
+// src/utils/config.ts
+import fs from "fs-extra";
+import path from "path";
+var DEFAULT_CONFIG = {
+  $schema: "https://myoperator.com/schema.json",
+  style: "default",
+  tailwind: {
+    config: "tailwind.config.js",
+    css: "src/index.css",
+    baseColor: "slate",
+    cssVariables: true,
+    prefix: ""
+  },
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils",
+    ui: "@/components/ui"
+  }
+};
+function getConfigPath(cwd = process.cwd()) {
+  return path.join(cwd, "components.json");
+}
+async function configExists(cwd = process.cwd()) {
+  return await fs.pathExists(getConfigPath(cwd));
+}
+async function readConfig(cwd = process.cwd()) {
+  const configPath = getConfigPath(cwd);
+  if (!await fs.pathExists(configPath)) {
+    return null;
+  }
+  try {
+    return await fs.readJson(configPath);
+  } catch (error) {
+    console.error("Error reading components.json:", error);
+    return null;
+  }
+}
+async function getTailwindPrefix(cwd = process.cwd()) {
+  const config = await readConfig(cwd);
+  return config?.tailwind?.prefix || "";
+}
+async function detectTailwindPrefix(configFile, cwd = process.cwd()) {
+  const configPath = path.join(cwd, configFile);
+  if (await fs.pathExists(configPath)) {
+    const content = await fs.readFile(configPath, "utf-8");
+    const prefixMatch = content.match(/prefix:\s*['"]([^'"]+)['"]/);
+    if (prefixMatch) {
+      return prefixMatch[1];
+    }
+  }
+  return "";
+}
+
 // src/commands/add.ts
 async function add(components, options) {
   const cwd = process.cwd();
-  const configPath = path.join(cwd, "components.json");
-  if (!await fs.pathExists(configPath)) {
+  if (!await configExists(cwd)) {
     console.log(chalk.red("\n  Error: Project not initialized."));
     console.log(chalk.yellow("  Run `npx myoperator-ui init` first.\n"));
     process.exit(1);
   }
-  const config = await fs.readJson(configPath);
-  const prefix = config.tailwind?.prefix || "";
+  const prefix = await getTailwindPrefix(cwd);
+  if (prefix) {
+    console.log(chalk.blue(`
+  \u2139 Applying Tailwind prefix: "${prefix}"
+`));
+  }
   const registry = await getRegistry(prefix);
   const availableComponents = Object.keys(registry);
   if (!components || components.length === 0) {
@@ -914,7 +970,7 @@ async function add(components, options) {
 `));
     process.exit(1);
   }
-  const componentsDir = path.join(cwd, options.path);
+  const componentsDir = path2.join(cwd, options.path);
   if (!options.yes) {
     const { confirm } = await prompts({
       type: "confirm",
@@ -935,15 +991,15 @@ async function add(components, options) {
     for (const componentName of components) {
       const component = registry[componentName];
       for (const file of component.files) {
-        const filePath = path.join(componentsDir, file.name);
-        if (await fs.pathExists(filePath)) {
+        const filePath = path2.join(componentsDir, file.name);
+        if (await fs2.pathExists(filePath)) {
           if (!options.overwrite) {
             spinner.warn(`${file.name} already exists. Use --overwrite to replace.`);
             continue;
           }
         }
-        await fs.ensureDir(path.dirname(filePath));
-        await fs.writeFile(filePath, file.content);
+        await fs2.ensureDir(path2.dirname(filePath));
+        await fs2.writeFile(filePath, file.content);
         installed.push(file.name);
       }
       if (component.dependencies) {
@@ -971,8 +1027,8 @@ async function add(components, options) {
 
 // src/commands/init.ts
 import chalk2 from "chalk";
-import fs2 from "fs-extra";
-import path2 from "path";
+import fs3 from "fs-extra";
+import path3 from "path";
 import prompts2 from "prompts";
 import ora2 from "ora";
 import { execSync } from "child_process";
@@ -1200,26 +1256,11 @@ export default {
   plugins: [require("tailwindcss-animate")],
 }
 `;
-var DEFAULT_CONFIG = {
-  $schema: "https://myoperator.com/schema.json",
-  style: "default",
-  tailwind: {
-    config: "tailwind.config.js",
-    css: "src/index.css",
-    baseColor: "slate",
-    cssVariables: true
-  },
-  aliases: {
-    components: "@/components",
-    utils: "@/lib/utils",
-    ui: "@/components/ui"
-  }
-};
 async function init() {
   console.log(chalk2.bold("\n  Welcome to myOperator UI!\n"));
   const cwd = process.cwd();
-  const configPath = path2.join(cwd, "components.json");
-  if (await fs2.pathExists(configPath)) {
+  const configPath = path3.join(cwd, "components.json");
+  if (await fs3.pathExists(configPath)) {
     const { overwrite } = await prompts2({
       type: "confirm",
       name: "overwrite",
@@ -1231,12 +1272,12 @@ async function init() {
       process.exit(0);
     }
   }
-  const packageJsonPath = path2.join(cwd, "package.json");
+  const packageJsonPath = path3.join(cwd, "package.json");
   let hasBootstrap = false;
   let isESM = false;
   let detectedTailwindVersion = null;
-  if (await fs2.pathExists(packageJsonPath)) {
-    const packageJson2 = await fs2.readJson(packageJsonPath);
+  if (await fs3.pathExists(packageJsonPath)) {
+    const packageJson2 = await fs3.readJson(packageJsonPath);
     hasBootstrap = !!(packageJson2.dependencies?.bootstrap || packageJson2.devDependencies?.bootstrap);
     isESM = packageJson2.type === "module";
     const tailwindDep = packageJson2.dependencies?.tailwindcss || packageJson2.devDependencies?.tailwindcss;
@@ -1268,7 +1309,7 @@ async function init() {
       "styles/globals.css"
     ];
     for (const css of cssOptions) {
-      if (await fs2.pathExists(path2.join(cwd, css))) {
+      if (await fs3.pathExists(path3.join(cwd, css))) {
         return css;
       }
     }
@@ -1282,7 +1323,7 @@ async function init() {
       "tailwind.config.cjs"
     ];
     for (const config of configOptions) {
-      if (await fs2.pathExists(path2.join(cwd, config))) {
+      if (await fs3.pathExists(path3.join(cwd, config))) {
         return config;
       }
     }
@@ -1290,21 +1331,44 @@ async function init() {
   };
   const detectedCss = await detectGlobalCss();
   const detectedTailwindConfig = await detectTailwindConfig();
+  const detectedPrefix = await detectTailwindPrefix(detectedTailwindConfig, cwd);
+  if (detectedPrefix) {
+    console.log(chalk2.blue(`  \u2139 Tailwind prefix "${detectedPrefix}" detected - components will use prefixed classes
+`));
+  }
   let tailwindVersion = detectedTailwindVersion;
+  let userPrefix = detectedPrefix;
+  const questions = [];
   if (!tailwindVersion) {
-    const response = await prompts2([
-      {
-        type: "select",
-        name: "tailwindVersion",
-        message: "Which Tailwind CSS version are you using?",
-        choices: [
-          { title: "Tailwind CSS v4 (latest)", value: "v4" },
-          { title: "Tailwind CSS v3", value: "v3" }
-        ],
-        initial: 0
+    questions.push({
+      type: "select",
+      name: "tailwindVersion",
+      message: "Which Tailwind CSS version are you using?",
+      choices: [
+        { title: "Tailwind CSS v4 (latest)", value: "v4" },
+        { title: "Tailwind CSS v3", value: "v3" }
+      ],
+      initial: 0
+    });
+  }
+  questions.push({
+    type: "text",
+    name: "prefix",
+    message: detectedPrefix ? `Confirm Tailwind prefix (detected: "${detectedPrefix}"):` : "Enter Tailwind CSS prefix (leave empty for none):",
+    initial: detectedPrefix,
+    validate: (value) => {
+      if (value === "" || /^[a-zA-Z_-][a-zA-Z0-9_-]*$/.test(value)) {
+        return true;
       }
-    ]);
-    tailwindVersion = response.tailwindVersion;
+      return "Prefix must be a valid CSS identifier (letters, numbers, hyphens, underscores)";
+    }
+  });
+  if (questions.length > 0) {
+    const response = await prompts2(questions);
+    if (!tailwindVersion) {
+      tailwindVersion = response.tailwindVersion;
+    }
+    userPrefix = response.prefix || "";
   }
   const componentsPath = "src/components/ui";
   const utilsPath = "src/lib/utils.ts";
@@ -1318,15 +1382,16 @@ async function init() {
       tailwind: {
         ...DEFAULT_CONFIG.tailwind,
         config: tailwindConfig,
-        css: globalCss
+        css: globalCss,
+        prefix: userPrefix
       },
       aliases: {
         ...DEFAULT_CONFIG.aliases,
         ui: `@/${componentsPath.replace("src/", "")}`
       }
     };
-    await fs2.writeJson(configPath, config, { spaces: 2 });
-    const utilsFullPath = path2.join(cwd, utilsPath);
+    await fs3.writeJson(configPath, config, { spaces: 2 });
+    const utilsFullPath = path3.join(cwd, utilsPath);
     const cnUtilsContent = `import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -1336,12 +1401,12 @@ export function cn(...inputs: ClassValue[]) {
 `;
     let utilsCreated = false;
     let utilsUpdated = false;
-    if (!await fs2.pathExists(utilsFullPath)) {
-      await fs2.ensureDir(path2.dirname(utilsFullPath));
-      await fs2.writeFile(utilsFullPath, cnUtilsContent);
+    if (!await fs3.pathExists(utilsFullPath)) {
+      await fs3.ensureDir(path3.dirname(utilsFullPath));
+      await fs3.writeFile(utilsFullPath, cnUtilsContent);
       utilsCreated = true;
     } else {
-      const existingUtils = await fs2.readFile(utilsFullPath, "utf-8");
+      const existingUtils = await fs3.readFile(utilsFullPath, "utf-8");
       if (!existingUtils.includes("export function cn") && !existingUtils.includes("export const cn")) {
         let updatedContent = existingUtils;
         const hasClsxImport = existingUtils.includes('from "clsx"') || existingUtils.includes("from 'clsx'");
@@ -1364,13 +1429,13 @@ export function cn(...inputs: ClassValue[]) {
 }
 `;
         updatedContent = updatedContent.trimEnd() + "\n" + cnFunction;
-        await fs2.writeFile(utilsFullPath, updatedContent);
+        await fs3.writeFile(utilsFullPath, updatedContent);
         utilsUpdated = true;
       }
     }
-    const componentsFullPath = path2.join(cwd, componentsPath);
-    await fs2.ensureDir(componentsFullPath);
-    const globalCssPath = path2.join(cwd, globalCss);
+    const componentsFullPath = path3.join(cwd, componentsPath);
+    await fs3.ensureDir(componentsFullPath);
+    const globalCssPath = path3.join(cwd, globalCss);
     let cssContent;
     if (tailwindVersion === "v4") {
       cssContent = hasBootstrap ? CSS_VARIABLES_V4_BOOTSTRAP : CSS_VARIABLES_V4;
@@ -1378,12 +1443,12 @@ export function cn(...inputs: ClassValue[]) {
       cssContent = CSS_VARIABLES_V3;
     }
     let cssUpdated = false;
-    if (!await fs2.pathExists(globalCssPath)) {
-      await fs2.ensureDir(path2.dirname(globalCssPath));
-      await fs2.writeFile(globalCssPath, cssContent);
+    if (!await fs3.pathExists(globalCssPath)) {
+      await fs3.ensureDir(path3.dirname(globalCssPath));
+      await fs3.writeFile(globalCssPath, cssContent);
       cssUpdated = true;
     } else {
-      const existingCss = await fs2.readFile(globalCssPath, "utf-8");
+      const existingCss = await fs3.readFile(globalCssPath, "utf-8");
       if (!existingCss.includes("myOperator UI") && !existingCss.includes("--mo-background:")) {
         let updateCss = tailwindVersion === "v3";
         if (!updateCss) {
@@ -1399,9 +1464,9 @@ export function cn(...inputs: ClassValue[]) {
         }
         if (updateCss) {
           if (hasBootstrap) {
-            await fs2.writeFile(globalCssPath, cssContent + existingCss);
+            await fs3.writeFile(globalCssPath, cssContent + existingCss);
           } else {
-            await fs2.writeFile(globalCssPath, cssContent);
+            await fs3.writeFile(globalCssPath, cssContent);
           }
           cssUpdated = true;
         }
@@ -1409,19 +1474,19 @@ export function cn(...inputs: ClassValue[]) {
     }
     let tailwindUpdated = false;
     if (tailwindVersion === "v3" && tailwindConfig) {
-      const tailwindConfigPath = path2.join(cwd, tailwindConfig);
-      if (!await fs2.pathExists(tailwindConfigPath)) {
-        await fs2.writeFile(tailwindConfigPath, getTailwindConfig(disablePreflight));
+      const tailwindConfigPath = path3.join(cwd, tailwindConfig);
+      if (!await fs3.pathExists(tailwindConfigPath)) {
+        await fs3.writeFile(tailwindConfigPath, getTailwindConfig(disablePreflight));
         tailwindUpdated = true;
       } else {
-        const existingConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
+        const existingConfig = await fs3.readFile(tailwindConfigPath, "utf-8");
         if (!existingConfig.includes("hsl(var(--destructive))") && !existingConfig.includes("hsl(var(--ring))")) {
-          await fs2.writeFile(tailwindConfigPath, getTailwindConfig(disablePreflight));
+          await fs3.writeFile(tailwindConfigPath, getTailwindConfig(disablePreflight));
           tailwindUpdated = true;
         }
       }
     }
-    const postcssConfigPath = path2.join(cwd, "postcss.config.js");
+    const postcssConfigPath = path3.join(cwd, "postcss.config.js");
     let postcssConfigContent;
     if (tailwindVersion === "v4") {
       postcssConfigContent = isESM ? `export default {
@@ -1451,8 +1516,8 @@ export function cn(...inputs: ClassValue[]) {
 `;
     }
     let postcssCreated = false;
-    if (!await fs2.pathExists(postcssConfigPath)) {
-      await fs2.writeFile(postcssConfigPath, postcssConfigContent);
+    if (!await fs3.pathExists(postcssConfigPath)) {
+      await fs3.writeFile(postcssConfigPath, postcssConfigContent);
       postcssCreated = true;
     } else {
       spinner.stop();
@@ -1464,7 +1529,7 @@ export function cn(...inputs: ClassValue[]) {
       });
       spinner.start("Initializing project...");
       if (updatePostcss) {
-        await fs2.writeFile(postcssConfigPath, postcssConfigContent);
+        await fs3.writeFile(postcssConfigPath, postcssConfigContent);
         postcssCreated = true;
       }
     }
@@ -1482,6 +1547,11 @@ export function cn(...inputs: ClassValue[]) {
     }
     spinner.succeed("Project initialized successfully!");
     console.log(chalk2.green("\n  \u2713 Created components.json"));
+    if (userPrefix) {
+      console.log(chalk2.blue(`    \u2139 Components will use prefix: "${userPrefix}"`));
+    } else {
+      console.log(chalk2.blue(`    \u2139 Components will use no prefix`));
+    }
     if (utilsCreated) {
       console.log(chalk2.green(`  \u2713 Created ${utilsPath}`));
     } else if (utilsUpdated) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",
@@ -12,9 +12,14 @@
   ],
   "scripts": {
     "generate-registry": "node scripts/generate-registry.js",
-    "build": "npm run generate-registry && tsup src/index.ts --format esm --dts",
+    "validate-registry": "node scripts/validate-registry.js",
+    "verify-build": "node scripts/verify-build.js",
+    "build": "npm run generate-registry && tsup src/index.ts --format esm --dts && npm run verify-build",
     "dev": "tsup src/index.ts --format esm --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build && npm run validate-registry"
   },
   "dependencies": {
     "chalk": "^5.3.0",
@@ -28,7 +33,8 @@
     "@types/node": "^20.11.0",
     "@types/prompts": "^2.4.9",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.0"
   },
   "keywords": [
     "myoperator",