myoperator-ui 0.0.1 → 0.0.2

package/README.md

@@ -20,6 +20,9 @@ This will:
 - Create a `components.json` configuration file
 - Set up the utils file with the `cn` helper
 - Create the components directory
+- Create/update your global CSS with theme CSS variables
+- Create/update `tailwind.config.js` with theme color mappings
+- Create/update `postcss.config.js` with the correct Tailwind CSS PostCSS plugin
 
 ### Add components
 
@@ -59,12 +62,87 @@ npx myoperator-ui add button -p src/ui
 
 ## Dependencies
 
-Components use these packages (installed automatically):
+Components use these packages:
 - `@radix-ui/react-slot`
 - `class-variance-authority`
 - `clsx`
 - `tailwind-merge`
 - `lucide-react`
+- `tailwindcss-animate`
+
+## CSS Variables & Theming
+
+Components use CSS variables for theming. The `init` command automatically sets up these variables in your global CSS file.
+
+### Theme Colors
+
+The following semantic colors are available:
+
+| Variable | Description |
+|----------|-------------|
+| `--background` | Page background |
+| `--foreground` | Default text color |
+| `--primary` | Primary brand color |
+| `--secondary` | Secondary color |
+| `--destructive` | Error/danger color |
+| `--muted` | Muted backgrounds |
+| `--accent` | Accent color |
+| `--border` | Border color |
+| `--ring` | Focus ring color |
+
+### Dark Mode
+
+Dark mode is supported via the `.dark` class on the root element. The CSS variables automatically switch to dark theme values.
+
+### Customizing Theme
+
+To customize colors, edit the CSS variables in your global CSS file:
+
+```css
+:root {
+  --primary: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  /* ... other variables */
+}
+```
+
+Colors use HSL format without the `hsl()` wrapper (e.g., `222.2 47.4% 11.2%`).
+
+## PostCSS Configuration
+
+This CLI automatically sets up the correct PostCSS configuration for Tailwind CSS. The new Tailwind CSS versions require the `@tailwindcss/postcss` plugin instead of the old `tailwindcss` plugin.
+
+### Correct PostCSS Config
+
+```javascript
+// postcss.config.js
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+```
+
+### Common Error
+
+If you see this error:
+
+```
+[plugin:vite:css] [postcss] It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin.
+The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS
+you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
+```
+
+**Fix it by:**
+
+1. Installing the new plugin:
+   ```bash
+   npm install -D @tailwindcss/postcss
+   ```
+
+2. Updating your `postcss.config.js` to use the new plugin (see above)
+
+Running `npx myoperator-ui init` will automatically create the correct configuration for you.
 
 ## License
 

package/dist/index.js

@@ -220,6 +220,141 @@ import fs2 from "fs-extra";
 import path2 from "path";
 import prompts2 from "prompts";
 import ora2 from "ora";
+var CSS_VARIABLES = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :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%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
+var TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+`;
 var DEFAULT_CONFIG = {
   $schema: "https://myoperator.com/schema.json",
   style: "default",
@@ -308,15 +443,96 @@ export function cn(...inputs: ClassValue[]) {
     }
     const componentsPath = path2.join(cwd, response.componentsPath);
     await fs2.ensureDir(componentsPath);
+    const globalCssPath = path2.join(cwd, response.globalCss);
+    let cssUpdated = false;
+    if (!await fs2.pathExists(globalCssPath)) {
+      await fs2.ensureDir(path2.dirname(globalCssPath));
+      await fs2.writeFile(globalCssPath, CSS_VARIABLES);
+      cssUpdated = true;
+    } else {
+      const existingCss = await fs2.readFile(globalCssPath, "utf-8");
+      if (!existingCss.includes("--background:") && !existingCss.includes("--destructive:")) {
+        spinner.stop();
+        const { updateCss } = await prompts2({
+          type: "confirm",
+          name: "updateCss",
+          message: `${response.globalCss} exists. Add myOperator UI CSS variables?`,
+          initial: true
+        });
+        spinner.start("Initializing project...");
+        if (updateCss) {
+          await fs2.writeFile(globalCssPath, CSS_VARIABLES);
+          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;
+        }
+      }
+    }
+    const postcssConfigPath = path2.join(cwd, "postcss.config.js");
+    const postcssConfigContent = `module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+`;
+    let postcssCreated = false;
+    if (!await fs2.pathExists(postcssConfigPath)) {
+      await fs2.writeFile(postcssConfigPath, postcssConfigContent);
+      postcssCreated = true;
+    } else {
+      spinner.stop();
+      const { updatePostcss } = await prompts2({
+        type: "confirm",
+        name: "updatePostcss",
+        message: "postcss.config.js exists. Update to use @tailwindcss/postcss?",
+        initial: true
+      });
+      spinner.start("Initializing project...");
+      if (updatePostcss) {
+        await fs2.writeFile(postcssConfigPath, postcssConfigContent);
+        postcssCreated = true;
+      }
+    }
     spinner.succeed("Project initialized successfully!");
     console.log(chalk2.green("\n  \u2713 Created components.json"));
     console.log(chalk2.green(`  \u2713 Created ${response.utilsPath}`));
-    console.log(chalk2.green(`  \u2713 Created ${response.componentsPath}
-`));
+    console.log(chalk2.green(`  \u2713 Created ${response.componentsPath}`));
+    if (cssUpdated) {
+      console.log(chalk2.green(`  \u2713 Updated ${response.globalCss} with CSS variables`));
+    }
+    if (tailwindUpdated) {
+      console.log(chalk2.green(`  \u2713 Updated ${response.tailwindConfig} with theme colors`));
+    }
+    if (postcssCreated) {
+      console.log(chalk2.green("  \u2713 Created postcss.config.js"));
+    }
+    console.log("");
     console.log(chalk2.bold("  Next steps:\n"));
-    console.log("  1. Install dependencies:");
-    console.log(chalk2.cyan("     npm install clsx tailwind-merge class-variance-authority\n"));
-    console.log("  2. Add your first component:");
+    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"));
   } catch (error) {
     spinner.fail("Failed to initialize project");

package/package.json

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