myoperator-ui 0.0.2 → 0.0.4

package/dist/index.js

@@ -11,22 +11,70 @@ import prompts from "prompts";
 import ora from "ora";
 
 // src/utils/registry.ts
-async function getRegistry() {
-  return {
-    button: {
-      name: "button",
-      description: "A customizable button component with variants, sizes, and icons",
-      dependencies: [
-        "@radix-ui/react-slot",
-        "class-variance-authority",
-        "clsx",
-        "tailwind-merge",
-        "lucide-react"
-      ],
-      files: [
-        {
-          name: "button.tsx",
-          content: `import * as React from "react"
+function prefixTailwindClasses(content, prefix) {
+  if (!prefix) return content;
+  const patterns = [
+    // Layout & Display
+    /\b(flex|inline-flex|block|inline-block|grid|inline-grid|hidden|table|contents)\b/g,
+    // Flexbox & Grid
+    /\b(items-|justify-|gap-|flex-|grid-|col-|row-|place-|self-|order-)/g,
+    // Spacing
+    /\b([mp][trblxy]?-\d+|[mp][trblxy]?-\[)/g,
+    /\b(space-[xy]-)/g,
+    // Sizing
+    /\b([wh]-(full|screen|auto|min|max|fit|\d+|px|\[))/g,
+    /\b(min-[wh]-|max-[wh]-)/g,
+    // Typography
+    /\b(text-(?:xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl|left|center|right|justify|wrap|nowrap|ellipsis|clip))\b/g,
+    /\b(font-(?:sans|serif|mono|thin|extralight|light|normal|medium|semibold|bold|extrabold|black))\b/g,
+    /\b(leading-|tracking-|whitespace-)/g,
+    // Colors (bg, text, border colors)
+    /\b(bg-|text-|border-|ring-|from-|via-|to-|fill-|stroke-)(?!\[)/g,
+    // Borders & Rings
+    /\b(border|rounded|ring|outline)(?:-|$)/g,
+    // Effects
+    /\b(shadow|opacity-|blur-|brightness-|contrast-|grayscale|invert|saturate|sepia)/g,
+    // Transitions & Animations
+    /\b(transition|duration-|ease-|delay-|animate-)/g,
+    // Transforms
+    /\b(scale-|rotate-|translate-|skew-|origin-|transform)/g,
+    // Interactivity
+    /\b(cursor-|pointer-events-|resize|select-|scroll-)/g,
+    // Pseudo-classes prefixes
+    /\b(hover:|focus:|active:|disabled:|focus-visible:|focus-within:|group-hover:|peer-)/g,
+    // Responsive prefixes
+    /\b(sm:|md:|lg:|xl:|2xl:)/g,
+    // Dark mode
+    /\b(dark:)/g,
+    // Other common utilities
+    /\b(overflow-|z-|relative|absolute|fixed|sticky|inset-|top-|right-|bottom-|left-)/g,
+    /\b(underline|line-through|no-underline|underline-offset-)/g,
+    /\b(sr-only|not-sr-only)\b/g
+  ];
+  let result = content;
+  result = result.replace(
+    /(className=["'`{]|cn\(["'`])([^"'`}]+)(["'`}])/g,
+    (match, start, classes, end) => {
+      let prefixedClasses = classes;
+      prefixedClasses = prefixedClasses.replace(
+        /(?<=^|\s)([a-z])/g,
+        (m, char) => `${prefix}${char}`
+      );
+      prefixedClasses = prefixedClasses.replace(
+        /(?<=^|\s)-([a-z])/g,
+        (m, char) => `-${prefix}${char}`
+      );
+      prefixedClasses = prefixedClasses.replace(
+        new RegExp(`${prefix}(hover|focus|active|disabled|focus-visible|focus-within|group-hover|sm|md|lg|xl|2xl|dark):${prefix}`, "g"),
+        `${prefix}$1:`
+      );
+      return start + prefixedClasses + end;
+    }
+  );
+  return result;
+}
+async function getRegistry(prefix = "") {
+  const buttonContent = prefixTailwindClasses(`import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Loader2 } from "lucide-react"
@@ -114,7 +162,22 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 Button.displayName = "Button"
 
 export { Button, buttonVariants }
-`
+`, prefix);
+  return {
+    button: {
+      name: "button",
+      description: "A customizable button component with variants, sizes, and icons",
+      dependencies: [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      files: [
+        {
+          name: "button.tsx",
+          content: buttonContent
         }
       ]
     }
@@ -130,7 +193,9 @@ async function add(components, options) {
     console.log(chalk.yellow("  Run `npx myoperator-ui init` first.\n"));
     process.exit(1);
   }
-  const registry = await getRegistry();
+  const config = await fs.readJson(configPath);
+  const prefix = config.tailwind?.prefix || "";
+  const registry = await getRegistry(prefix);
   const availableComponents = Object.keys(registry);
   if (!components || components.length === 0) {
     const { selectedComponents } = await prompts({
@@ -158,7 +223,6 @@ async function add(components, options) {
 `));
     process.exit(1);
   }
-  const config = await fs.readJson(configPath);
   const componentsDir = path.join(cwd, options.path);
   if (!options.yes) {
     const { confirm } = await prompts({
@@ -220,7 +284,86 @@ import fs2 from "fs-extra";
 import path2 from "path";
 import prompts2 from "prompts";
 import ora2 from "ora";
-var CSS_VARIABLES = `@tailwind base;
+var CSS_VARIABLES_V4 = `@import "tailwindcss";
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(222.2 84% 4.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(222.2 47.4% 11.2%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(222.2 84% 4.9%);
+  --radius: 0.5rem;
+}
+
+: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%;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+`;
+var CSS_VARIABLES_V3 = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -280,9 +423,10 @@ var CSS_VARIABLES = `@tailwind base;
   }
 }
 `;
-var TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
+var getTailwindConfig = (prefix) => `/** @type {import('tailwindcss').Config} */
 export default {
   darkMode: ["class"],
+  ${prefix ? `prefix: "${prefix}",` : ""}
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -362,7 +506,8 @@ var DEFAULT_CONFIG = {
     config: "tailwind.config.js",
     css: "src/index.css",
     baseColor: "slate",
-    cssVariables: true
+    cssVariables: true,
+    prefix: ""
   },
   aliases: {
     components: "@/components",
@@ -387,6 +532,28 @@ async function init() {
     }
   }
   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
+    },
+    {
+      type: "confirm",
+      name: "usePrefix",
+      message: "Use a prefix for Tailwind classes? (recommended if using Bootstrap/other CSS frameworks)",
+      initial: false
+    },
+    {
+      type: (prev) => prev ? "text" : null,
+      name: "prefix",
+      message: "Enter prefix for Tailwind classes:",
+      initial: "tw-"
+    },
     {
       type: "text",
       name: "componentsPath",
@@ -400,7 +567,7 @@ async function init() {
       initial: "src/lib/utils.ts"
     },
     {
-      type: "text",
+      type: (prev, values) => values.tailwindVersion === "v3" ? "text" : null,
       name: "tailwindConfig",
       message: "Where is your tailwind.config.js?",
       initial: "tailwind.config.js"
@@ -414,12 +581,14 @@ async function init() {
   ]);
   const spinner = ora2("Initializing project...").start();
   try {
+    const prefix = response.usePrefix ? response.prefix : "";
     const config = {
       ...DEFAULT_CONFIG,
       tailwind: {
         ...DEFAULT_CONFIG.tailwind,
-        config: response.tailwindConfig,
-        css: response.globalCss
+        config: response.tailwindConfig || "tailwind.config.js",
+        css: response.globalCss,
+        prefix
       },
       aliases: {
         ...DEFAULT_CONFIG.aliases,
@@ -444,10 +613,11 @@ export function cn(...inputs: ClassValue[]) {
     const componentsPath = path2.join(cwd, response.componentsPath);
     await fs2.ensureDir(componentsPath);
     const globalCssPath = path2.join(cwd, response.globalCss);
+    const cssContent = response.tailwindVersion === "v4" ? CSS_VARIABLES_V4 : CSS_VARIABLES_V3;
     let cssUpdated = false;
     if (!await fs2.pathExists(globalCssPath)) {
       await fs2.ensureDir(path2.dirname(globalCssPath));
-      await fs2.writeFile(globalCssPath, CSS_VARIABLES);
+      await fs2.writeFile(globalCssPath, cssContent);
       cssUpdated = true;
     } else {
       const existingCss = await fs2.readFile(globalCssPath, "utf-8");
@@ -461,30 +631,32 @@ export function cn(...inputs: ClassValue[]) {
         });
         spinner.start("Initializing project...");
         if (updateCss) {
-          await fs2.writeFile(globalCssPath, CSS_VARIABLES);
+          await fs2.writeFile(globalCssPath, cssContent);
           cssUpdated = true;
         }
       }
     }
-    const tailwindConfigPath = path2.join(cwd, response.tailwindConfig);
     let tailwindUpdated = false;
-    if (!await fs2.pathExists(tailwindConfigPath)) {
-      await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-      tailwindUpdated = true;
-    } else {
-      const existingConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
-      if (!existingConfig.includes("hsl(var(--destructive))") && !existingConfig.includes("hsl(var(--ring))")) {
-        spinner.stop();
-        const { updateTailwind } = await prompts2({
-          type: "confirm",
-          name: "updateTailwind",
-          message: `${response.tailwindConfig} exists. Update with myOperator UI theme colors?`,
-          initial: true
-        });
-        spinner.start("Initializing project...");
-        if (updateTailwind) {
-          await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
-          tailwindUpdated = true;
+    if (response.tailwindVersion === "v3" && response.tailwindConfig) {
+      const tailwindConfigPath = path2.join(cwd, response.tailwindConfig);
+      if (!await fs2.pathExists(tailwindConfigPath)) {
+        await fs2.writeFile(tailwindConfigPath, getTailwindConfig(prefix));
+        tailwindUpdated = true;
+      } else {
+        const existingConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
+        if (!existingConfig.includes("hsl(var(--destructive))") && !existingConfig.includes("hsl(var(--ring))")) {
+          spinner.stop();
+          const { updateTailwind } = await prompts2({
+            type: "confirm",
+            name: "updateTailwind",
+            message: `${response.tailwindConfig} exists. Update with myOperator UI theme colors?`,
+            initial: true
+          });
+          spinner.start("Initializing project...");
+          if (updateTailwind) {
+            await fs2.writeFile(tailwindConfigPath, getTailwindConfig(prefix));
+            tailwindUpdated = true;
+          }
         }
       }
     }
@@ -529,11 +701,20 @@ export function cn(...inputs: ClassValue[]) {
     console.log("");
     console.log(chalk2.bold("  Next steps:\n"));
     console.log("  1. Install core dependencies:");
-    console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react tailwindcss-animate\n"));
-    console.log("  2. Install PostCSS plugin (if not already installed):");
-    console.log(chalk2.cyan("     npm install -D @tailwindcss/postcss\n"));
-    console.log("  3. Add your first component:");
-    console.log(chalk2.cyan("     npx myoperator-ui add button\n"));
+    if (response.tailwindVersion === "v4") {
+      console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react\n"));
+    } else {
+      console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority @radix-ui/react-slot lucide-react tailwindcss-animate\n"));
+    }
+    if (response.tailwindVersion === "v4") {
+      console.log("  2. Add your first component:");
+      console.log(chalk2.cyan("     npx myoperator-ui add button\n"));
+    } else {
+      console.log("  2. Install PostCSS plugin (if not already installed):");
+      console.log(chalk2.cyan("     npm install -D @tailwindcss/postcss\n"));
+      console.log("  3. Add your first component:");
+      console.log(chalk2.cyan("     npx myoperator-ui add button\n"));
+    }
   } catch (error) {
     spinner.fail("Failed to initialize project");
     console.error(error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",