myoperator-ui 0.0.3 → 0.0.5

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({
@@ -289,14 +353,75 @@ var CSS_VARIABLES_V4 = `@import "tailwindcss";
   --input: 217.2 32.6% 17.5%;
   --ring: 212.7 26.8% 83.9%;
 }
+`;
+var CSS_VARIABLES_V4_PREFIXED = `@import "tailwindcss/utilities" layer(utilities);
+
+@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;
+}
 
-* {
-  border-color: hsl(var(--border));
+: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;
 }
 
-body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
+.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%;
 }
 `;
 var CSS_VARIABLES_V3 = `@tailwind base;
@@ -359,9 +484,10 @@ var CSS_VARIABLES_V3 = `@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}",
@@ -441,7 +567,8 @@ var DEFAULT_CONFIG = {
     config: "tailwind.config.js",
     css: "src/index.css",
     baseColor: "slate",
-    cssVariables: true
+    cssVariables: true,
+    prefix: ""
   },
   aliases: {
     components: "@/components",
@@ -476,6 +603,18 @@ async function init() {
       ],
       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",
@@ -503,12 +642,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,
@@ -533,7 +674,12 @@ 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 cssContent;
+    if (response.tailwindVersion === "v4") {
+      cssContent = prefix ? CSS_VARIABLES_V4_PREFIXED : CSS_VARIABLES_V4;
+    } else {
+      cssContent = CSS_VARIABLES_V3;
+    }
     let cssUpdated = false;
     if (!await fs2.pathExists(globalCssPath)) {
       await fs2.ensureDir(path2.dirname(globalCssPath));
@@ -560,7 +706,7 @@ export function cn(...inputs: ClassValue[]) {
     if (response.tailwindVersion === "v3" && response.tailwindConfig) {
       const tailwindConfigPath = path2.join(cwd, response.tailwindConfig);
       if (!await fs2.pathExists(tailwindConfigPath)) {
-        await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+        await fs2.writeFile(tailwindConfigPath, getTailwindConfig(prefix));
         tailwindUpdated = true;
       } else {
         const existingConfig = await fs2.readFile(tailwindConfigPath, "utf-8");
@@ -574,14 +720,14 @@ export function cn(...inputs: ClassValue[]) {
           });
           spinner.start("Initializing project...");
           if (updateTailwind) {
-            await fs2.writeFile(tailwindConfigPath, TAILWIND_CONFIG);
+            await fs2.writeFile(tailwindConfigPath, getTailwindConfig(prefix));
             tailwindUpdated = true;
           }
         }
       }
     }
     const postcssConfigPath = path2.join(cwd, "postcss.config.js");
-    const postcssConfigContent = `module.exports = {
+    const postcssConfigContent = `export default {
   plugins: {
     '@tailwindcss/postcss': {},
   },

package/package.json

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