myoperator-ui 0.0.1

package/README.md

@@ -0,0 +1,71 @@
+# myOperator UI
+
+CLI for adding myOperator UI components to your React project.
+
+## Installation
+
+```bash
+npx myoperator-ui init
+```
+
+## Usage
+
+### Initialize your project
+
+```bash
+npx myoperator-ui init
+```
+
+This will:
+- Create a `components.json` configuration file
+- Set up the utils file with the `cn` helper
+- Create the components directory
+
+### Add components
+
+```bash
+# Add a specific component
+npx myoperator-ui add button
+
+# Add multiple components
+npx myoperator-ui add button input card
+
+# Interactive selection
+npx myoperator-ui add
+```
+
+### Options
+
+```bash
+# Skip confirmation
+npx myoperator-ui add button -y
+
+# Overwrite existing files
+npx myoperator-ui add button --overwrite
+
+# Custom path
+npx myoperator-ui add button -p src/ui
+```
+
+## Available Components
+
+- `button` - A customizable button with variants, sizes, icons, and loading state
+
+## Requirements
+
+- React 18+
+- Tailwind CSS
+- TypeScript (recommended)
+
+## Dependencies
+
+Components use these packages (installed automatically):
+- `@radix-ui/react-slot`
+- `class-variance-authority`
+- `clsx`
+- `tailwind-merge`
+- `lucide-react`
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,333 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/add.ts
+import chalk from "chalk";
+import fs from "fs-extra";
+import path from "path";
+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"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-[#343E55] text-white hover:bg-[#343E55]/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-[#343E55] bg-transparent text-[#343E55] hover:bg-[#343E55] hover:text-white",
+        secondary:
+          "bg-[#343E55]/20 text-[#343E55] hover:bg-[#343E55]/30",
+        ghost: "hover:bg-[#343E55]/10 hover:text-[#343E55]",
+        link: "text-[#343E55] underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "py-2.5 px-4",
+        sm: "py-2 px-3 text-xs",
+        lg: "py-3 px-6",
+        icon: "p-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  loading?: boolean
+  loadingText?: string
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    leftIcon,
+    rightIcon,
+    loading = false,
+    loadingText,
+    children,
+    disabled,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button"
+
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <Loader2 className="animate-spin" />
+            {loadingText || children}
+          </>
+        ) : (
+          <>
+            {leftIcon}
+            {children}
+            {rightIcon}
+          </>
+        )}
+      </Comp>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+`
+        }
+      ]
+    }
+  };
+}
+
+// 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)) {
+    console.log(chalk.red("\n  Error: Project not initialized."));
+    console.log(chalk.yellow("  Run `npx myoperator-ui init` first.\n"));
+    process.exit(1);
+  }
+  const registry = await getRegistry();
+  const availableComponents = Object.keys(registry);
+  if (!components || components.length === 0) {
+    const { selectedComponents } = await prompts({
+      type: "multiselect",
+      name: "selectedComponents",
+      message: "Which components would you like to add?",
+      choices: availableComponents.map((name) => ({
+        title: name,
+        value: name,
+        description: registry[name].description
+      })),
+      min: 1
+    });
+    if (!selectedComponents || selectedComponents.length === 0) {
+      console.log(chalk.yellow("\n  No components selected.\n"));
+      process.exit(0);
+    }
+    components = selectedComponents;
+  }
+  const invalidComponents = components.filter((c) => !availableComponents.includes(c));
+  if (invalidComponents.length > 0) {
+    console.log(chalk.red(`
+  Error: Unknown components: ${invalidComponents.join(", ")}`));
+    console.log(chalk.yellow(`  Available: ${availableComponents.join(", ")}
+`));
+    process.exit(1);
+  }
+  const config = await fs.readJson(configPath);
+  const componentsDir = path.join(cwd, options.path);
+  if (!options.yes) {
+    const { confirm } = await prompts({
+      type: "confirm",
+      name: "confirm",
+      message: `Add ${components.length} component(s) to ${options.path}?`,
+      initial: true
+    });
+    if (!confirm) {
+      console.log(chalk.yellow("\n  Installation cancelled.\n"));
+      process.exit(0);
+    }
+  }
+  console.log("");
+  const spinner = ora("Installing components...").start();
+  try {
+    const installed = [];
+    const dependencies = /* @__PURE__ */ new Set();
+    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)) {
+          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);
+        installed.push(file.name);
+      }
+      if (component.dependencies) {
+        component.dependencies.forEach((dep) => dependencies.add(dep));
+      }
+    }
+    spinner.succeed("Components installed successfully!");
+    if (installed.length > 0) {
+      console.log(chalk.green("\n  Installed files:"));
+      installed.forEach((file) => {
+        console.log(chalk.green(`    \u2713 ${options.path}/${file}`));
+      });
+    }
+    if (dependencies.size > 0) {
+      console.log(chalk.yellow("\n  Required dependencies:"));
+      console.log(chalk.cyan(`    npm install ${Array.from(dependencies).join(" ")}`));
+    }
+    console.log("");
+  } catch (error) {
+    spinner.fail("Failed to install components");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// src/commands/init.ts
+import chalk2 from "chalk";
+import fs2 from "fs-extra";
+import path2 from "path";
+import prompts2 from "prompts";
+import ora2 from "ora";
+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 { overwrite } = await prompts2({
+      type: "confirm",
+      name: "overwrite",
+      message: "components.json already exists. Overwrite?",
+      initial: false
+    });
+    if (!overwrite) {
+      console.log(chalk2.yellow("  Initialization cancelled.\n"));
+      process.exit(0);
+    }
+  }
+  const response = await prompts2([
+    {
+      type: "text",
+      name: "componentsPath",
+      message: "Where would you like to install components?",
+      initial: "src/components/ui"
+    },
+    {
+      type: "text",
+      name: "utilsPath",
+      message: "Where is your utils file?",
+      initial: "src/lib/utils.ts"
+    },
+    {
+      type: "text",
+      name: "tailwindConfig",
+      message: "Where is your tailwind.config.js?",
+      initial: "tailwind.config.js"
+    },
+    {
+      type: "text",
+      name: "globalCss",
+      message: "Where is your global CSS file?",
+      initial: "src/index.css"
+    }
+  ]);
+  const spinner = ora2("Initializing project...").start();
+  try {
+    const config = {
+      ...DEFAULT_CONFIG,
+      tailwind: {
+        ...DEFAULT_CONFIG.tailwind,
+        config: response.tailwindConfig,
+        css: response.globalCss
+      },
+      aliases: {
+        ...DEFAULT_CONFIG.aliases,
+        ui: `@/${response.componentsPath.replace("src/", "")}`
+      }
+    };
+    await fs2.writeJson(configPath, config, { spaces: 2 });
+    const utilsPath = path2.join(cwd, response.utilsPath);
+    if (!await fs2.pathExists(utilsPath)) {
+      await fs2.ensureDir(path2.dirname(utilsPath));
+      await fs2.writeFile(
+        utilsPath,
+        `import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`
+      );
+    }
+    const componentsPath = path2.join(cwd, response.componentsPath);
+    await fs2.ensureDir(componentsPath);
+    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.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(chalk2.cyan("     npx myoperator-ui add button\n"));
+  } catch (error) {
+    spinner.fail("Failed to initialize project");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// src/index.ts
+var program = new Command();
+program.name("myoperator-ui").description("CLI for adding myOperator UI components to your project").version("0.0.1");
+program.command("init").description("Initialize your project with myOperator UI").action(init);
+program.command("add").description("Add a component to your project").argument("[components...]", "Components to add").option("-y, --yes", "Skip confirmation prompt", false).option("-o, --overwrite", "Overwrite existing files", false).option("-p, --path <path>", "Path to add components to", "src/components/ui").action(add);
+program.parse();

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "myoperator-ui",
+  "version": "0.0.1",
+  "description": "CLI for adding myOperator UI components to your project",
+  "type": "module",
+  "exports": "./dist/index.js",
+  "bin": {
+    "myoperator-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.11.0",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "keywords": [
+    "myoperator",
+    "ui",
+    "components",
+    "cli",
+    "react"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Ankish8/storybook-npm.git"
+  }
+}