myoperator-ui 0.0.3 → 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({
@@ -359,9 +423,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 +506,8 @@ var DEFAULT_CONFIG = {
     config: "tailwind.config.js",
     css: "src/index.css",
     baseColor: "slate",
-    cssVariables: true
+    cssVariables: true,
+    prefix: ""
   },
   aliases: {
     components: "@/components",
@@ -476,6 +542,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 +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,
@@ -560,7 +640,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,7 +654,7 @@ 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;
           }
         }

package/package.json

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