@reeverdev/ui-cli 0.1.0

package/dist/index.js

@@ -0,0 +1,588 @@
+#!/usr/bin/env node
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// ../package.json
+var require_package = __commonJS({
+  "../package.json"(exports, module) {
+    module.exports = {
+      name: "reever",
+      version: "0.0.0",
+      private: true,
+      description: "Reever Design System - Multi-platform UI component library",
+      author: "Reever",
+      license: "MIT",
+      repository: {
+        type: "git",
+        url: "https://github.com/ReeverApp/Reever.UI.git"
+      },
+      homepage: "https://reever.dev",
+      workspaces: [
+        "packages/*",
+        "apps/*",
+        "tooling/*"
+      ],
+      scripts: {
+        build: "turbo build",
+        dev: "turbo dev",
+        lint: "turbo lint",
+        typecheck: "turbo typecheck",
+        test: "turbo test",
+        clean: "turbo clean && rm -rf node_modules",
+        format: 'prettier --write "**/*.{ts,tsx,md,json}"',
+        changeset: "changeset",
+        "version-packages": "changeset version",
+        release: "turbo build --filter=./packages/* && changeset publish"
+      },
+      devDependencies: {
+        "@changesets/cli": "^2.29.8",
+        prettier: "^3.7.4",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        turbo: "^2.5.4",
+        typescript: "^5.9.3"
+      },
+      packageManager: "pnpm@9.15.0",
+      engines: {
+        node: ">=18.0.0"
+      }
+    };
+  }
+});
+
+// index.ts
+import { Command } from "commander";
+
+// commands/init.ts
+import * as fs from "fs";
+import * as path from "path";
+import chalk from "chalk";
+import ora from "ora";
+import prompts from "prompts";
+var DEFAULT_CONFIG = {
+  $schema: "https://reever-ui.com/schema.json",
+  style: "default",
+  tailwind: {
+    config: "tailwind.config.js",
+    css: "src/styles/globals.css",
+    baseColor: "slate",
+    cssVariables: true
+  },
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils"
+  }
+};
+async function init(options) {
+  const configPath = path.resolve(process.cwd(), "reever-ui.json");
+  if (fs.existsSync(configPath) && !options.overwrite) {
+    console.log(
+      chalk.yellow("Configuration file already exists. Use --overwrite to replace.")
+    );
+    return;
+  }
+  if (!options.yes) {
+    const response = await prompts([
+      {
+        type: "text",
+        name: "componentsDir",
+        message: "Where would you like to install components?",
+        initial: "src/components/ui"
+      },
+      {
+        type: "text",
+        name: "utilsDir",
+        message: "Where is your utils directory?",
+        initial: "src/lib"
+      },
+      {
+        type: "text",
+        name: "tailwindConfig",
+        message: "Where is your tailwind.config file?",
+        initial: "tailwind.config.js"
+      },
+      {
+        type: "text",
+        name: "globalsCss",
+        message: "Where is your global CSS file?",
+        initial: "src/styles/globals.css"
+      },
+      {
+        type: "select",
+        name: "baseColor",
+        message: "Which base color would you like to use?",
+        choices: [
+          { title: "Slate", value: "slate" },
+          { title: "Gray", value: "gray" },
+          { title: "Zinc", value: "zinc" },
+          { title: "Neutral", value: "neutral" },
+          { title: "Stone", value: "stone" }
+        ],
+        initial: 0
+      }
+    ]);
+    DEFAULT_CONFIG.aliases.components = `@/${response.componentsDir.replace(/^src\//, "")}`;
+    DEFAULT_CONFIG.aliases.utils = `@/${response.utilsDir.replace(/^src\//, "")}`;
+    DEFAULT_CONFIG.tailwind.config = response.tailwindConfig;
+    DEFAULT_CONFIG.tailwind.css = response.globalsCss;
+    DEFAULT_CONFIG.tailwind.baseColor = response.baseColor;
+  }
+  const spinner = ora("Initializing reever-ui...").start();
+  try {
+    fs.writeFileSync(configPath, JSON.stringify(DEFAULT_CONFIG, null, 2));
+    spinner.succeed("Configuration file created");
+    const utilsPath = path.resolve(process.cwd(), "src/lib/utils.ts");
+    const utilsDir = path.dirname(utilsPath);
+    if (!fs.existsSync(utilsDir)) {
+      fs.mkdirSync(utilsDir, { recursive: true });
+    }
+    if (!fs.existsSync(utilsPath)) {
+      fs.writeFileSync(
+        utilsPath,
+        `import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`
+      );
+      spinner.succeed("Utils file created");
+    }
+    console.log();
+    console.log(chalk.green("\u2713 reever-ui initialized successfully!"));
+    console.log();
+    console.log("Next steps:");
+    console.log(`  ${chalk.cyan("npx reever-ui add button")} - Add your first component`);
+    console.log(`  ${chalk.cyan("npx reever-ui list")} - See all available components`);
+  } catch (error) {
+    spinner.fail("Failed to initialize");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// commands/add.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+import chalk2 from "chalk";
+import ora2 from "ora";
+import prompts2 from "prompts";
+
+// registry.ts
+var CATEGORIES = [
+  "Core",
+  "Form",
+  "Navigation",
+  "Data Display",
+  "Overlay",
+  "Feedback",
+  "Layout",
+  "Animation",
+  "Mobile"
+];
+var COMPONENTS = {
+  button: {
+    name: "Button",
+    description: "Primary action button with variants",
+    category: "Core",
+    code: `// Button component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Button, buttonVariants } from "reever-ui";
+`,
+    dependencies: ["class-variance-authority"]
+  },
+  input: {
+    name: "Input",
+    description: "Text input field",
+    category: "Core",
+    code: `// Input component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Input } from "reever-ui";
+`
+  },
+  card: {
+    name: "Card",
+    description: "Container card component",
+    category: "Core",
+    code: `// Card component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "reever-ui";
+`
+  },
+  dialog: {
+    name: "Dialog",
+    description: "Modal dialog",
+    category: "Overlay",
+    code: `// Dialog component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-dialog"]
+  },
+  select: {
+    name: "Select",
+    description: "Dropdown select",
+    category: "Form",
+    code: `// Select component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-select"]
+  },
+  tabs: {
+    name: "Tabs",
+    description: "Tabbed content",
+    category: "Navigation",
+    code: `// Tabs component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-tabs"]
+  },
+  toast: {
+    name: "Toast",
+    description: "Toast notifications",
+    category: "Feedback",
+    code: `// Toast component - run 'npm install reever-ui' and import from 'reever-ui'
+export { toast, Toaster } from "reever-ui";
+`,
+    dependencies: ["sonner"]
+  },
+  table: {
+    name: "Table",
+    description: "Data table",
+    category: "Data Display",
+    code: `// Table component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "reever-ui";
+`
+  },
+  form: {
+    name: "Form",
+    description: "Form wrapper with validation",
+    category: "Form",
+    code: `// Form component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from "reever-ui";
+`
+  },
+  avatar: {
+    name: "Avatar",
+    description: "User avatar",
+    category: "Data Display",
+    code: `// Avatar component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Avatar, AvatarImage, AvatarFallback } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-avatar"]
+  },
+  badge: {
+    name: "Badge",
+    description: "Status badge",
+    category: "Core",
+    code: `// Badge component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Badge, badgeVariants } from "reever-ui";
+`,
+    dependencies: ["class-variance-authority"]
+  },
+  checkbox: {
+    name: "Checkbox",
+    description: "Checkbox input",
+    category: "Form",
+    code: `// Checkbox component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Checkbox } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-checkbox"]
+  },
+  dropdown: {
+    name: "DropdownMenu",
+    description: "Dropdown menu",
+    category: "Overlay",
+    code: `// DropdownMenu component - run 'npm install reever-ui' and import from 'reever-ui'
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-dropdown-menu"]
+  },
+  popover: {
+    name: "Popover",
+    description: "Popover overlay",
+    category: "Overlay",
+    code: `// Popover component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Popover, PopoverTrigger, PopoverContent } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-popover"]
+  },
+  tooltip: {
+    name: "Tooltip",
+    description: "Tooltip overlay",
+    category: "Overlay",
+    code: `// Tooltip component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-tooltip"]
+  },
+  slider: {
+    name: "Slider",
+    description: "Range slider",
+    category: "Form",
+    code: `// Slider component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Slider } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-slider"]
+  },
+  switch: {
+    name: "Switch",
+    description: "Toggle switch",
+    category: "Form",
+    code: `// Switch component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Switch } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-switch"]
+  },
+  progress: {
+    name: "Progress",
+    description: "Progress bar",
+    category: "Feedback",
+    code: `// Progress component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Progress } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-progress"]
+  },
+  skeleton: {
+    name: "Skeleton",
+    description: "Loading skeleton",
+    category: "Feedback",
+    code: `// Skeleton component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Skeleton } from "reever-ui";
+`
+  },
+  separator: {
+    name: "Separator",
+    description: "Visual separator",
+    category: "Core",
+    code: `// Separator component - run 'npm install reever-ui' and import from 'reever-ui'
+export { Separator } from "reever-ui";
+`,
+    dependencies: ["@radix-ui/react-separator"]
+  }
+};
+function getComponent(name) {
+  return COMPONENTS[name];
+}
+function getComponentDependencies(name) {
+  const component = COMPONENTS[name];
+  if (!component) return [];
+  return component.componentDependencies || [];
+}
+
+// commands/add.ts
+async function add(components, options) {
+  var _a, _b;
+  const configPath = path2.resolve(process.cwd(), "reever-ui.json");
+  if (!fs2.existsSync(configPath)) {
+    console.log(chalk2.red("Configuration not found. Run `npx reever-ui init` first."));
+    process.exit(1);
+  }
+  const _config = JSON.parse(fs2.readFileSync(configPath, "utf-8"));
+  void _config;
+  const componentsDir = options.path || path2.resolve(process.cwd(), "src/components/ui");
+  let selectedComponents = components;
+  if (options.all) {
+    selectedComponents = Object.keys(COMPONENTS);
+  }
+  if (!selectedComponents.length && !options.all) {
+    const response = await prompts2({
+      type: "multiselect",
+      name: "components",
+      message: "Which components would you like to add?",
+      choices: Object.entries(COMPONENTS).map(([key, value]) => ({
+        title: value.name,
+        value: key,
+        description: value.description
+      })),
+      instructions: false,
+      hint: "- Space to select. Return to submit"
+    });
+    if (!((_a = response.components) == null ? void 0 : _a.length)) {
+      console.log(chalk2.yellow("No components selected."));
+      return;
+    }
+    selectedComponents = response.components;
+  }
+  const invalidComponents = selectedComponents.filter((c) => !COMPONENTS[c]);
+  if (invalidComponents.length) {
+    console.log(
+      chalk2.red(`Unknown components: ${invalidComponents.join(", ")}`)
+    );
+    console.log(`Run ${chalk2.cyan("npx reever-ui list")} to see available components.`);
+    process.exit(1);
+  }
+  const allDependencies = /* @__PURE__ */ new Set();
+  for (const comp of selectedComponents) {
+    const deps = getComponentDependencies(comp);
+    deps.forEach((d) => allDependencies.add(d));
+    allDependencies.add(comp);
+  }
+  const toInstall = Array.from(allDependencies);
+  const existing = toInstall.filter((c) => {
+    const componentPath = path2.join(componentsDir, `${c}.tsx`);
+    return fs2.existsSync(componentPath);
+  });
+  if (existing.length && !options.overwrite && !options.yes) {
+    const response = await prompts2({
+      type: "confirm",
+      name: "overwrite",
+      message: `The following components already exist: ${existing.join(", ")}. Overwrite?`,
+      initial: false
+    });
+    if (!response.overwrite) {
+      const filtered = toInstall.filter((c) => !existing.includes(c));
+      if (!filtered.length) {
+        console.log(chalk2.yellow("No new components to add."));
+        return;
+      }
+    }
+  }
+  if (!fs2.existsSync(componentsDir)) {
+    fs2.mkdirSync(componentsDir, { recursive: true });
+  }
+  const spinner = ora2("Adding components...").start();
+  try {
+    const added = [];
+    const npmDependencies = /* @__PURE__ */ new Set();
+    for (const componentName of toInstall) {
+      const component = getComponent(componentName);
+      if (!component) continue;
+      const componentPath = path2.join(componentsDir, `${componentName}.tsx`);
+      fs2.writeFileSync(componentPath, component.code);
+      added.push(componentName);
+      (_b = component.dependencies) == null ? void 0 : _b.forEach((dep) => npmDependencies.add(dep));
+      spinner.text = `Added ${componentName}`;
+    }
+    spinner.succeed(`Added ${added.length} component(s)`);
+    if (npmDependencies.size > 0) {
+      console.log();
+      console.log(chalk2.cyan("Install required dependencies:"));
+      console.log(`  npm install ${Array.from(npmDependencies).join(" ")}`);
+    }
+    console.log();
+    console.log(chalk2.green("\u2713 Components added successfully!"));
+  } catch (error) {
+    spinner.fail("Failed to add components");
+    console.error(error);
+    process.exit(1);
+  }
+}
+
+// commands/list.ts
+import chalk3 from "chalk";
+async function list(options) {
+  let componentsList = Object.entries(COMPONENTS);
+  if (options.category) {
+    componentsList = componentsList.filter(
+      ([_, value]) => value.category === options.category
+    );
+    if (!componentsList.length) {
+      console.log(chalk3.yellow(`No components found in category: ${options.category}`));
+      console.log(`Available categories: ${CATEGORIES.join(", ")}`);
+      return;
+    }
+  }
+  if (options.json) {
+    const output = componentsList.reduce((acc, [key, value]) => {
+      acc[key] = {
+        name: value.name,
+        description: value.description,
+        category: value.category,
+        dependencies: value.dependencies
+      };
+      return acc;
+    }, {});
+    console.log(JSON.stringify(output, null, 2));
+    return;
+  }
+  console.log();
+  console.log(chalk3.bold("Available Components"));
+  console.log();
+  const grouped = componentsList.reduce((acc, [key, value]) => {
+    const cat = value.category || "Other";
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push({ key, ...value });
+    return acc;
+  }, {});
+  for (const [category, components] of Object.entries(grouped)) {
+    console.log(chalk3.cyan.bold(`  ${category}`));
+    for (const comp of components) {
+      console.log(`    ${chalk3.green(comp.key.padEnd(20))} ${chalk3.dim(comp.description)}`);
+    }
+    console.log();
+  }
+  console.log(chalk3.dim(`Total: ${componentsList.length} components`));
+  console.log();
+  console.log(`Run ${chalk3.cyan("npx reever-ui add <component>")} to add a component.`);
+}
+
+// commands/diff.ts
+import * as fs3 from "fs";
+import * as path3 from "path";
+import chalk4 from "chalk";
+import { diffLines } from "diff";
+async function diff(components) {
+  const configPath = path3.resolve(process.cwd(), "reever-ui.json");
+  if (!fs3.existsSync(configPath)) {
+    console.log(chalk4.red("Configuration not found. Run `npx reever-ui init` first."));
+    process.exit(1);
+  }
+  const componentsDir = path3.resolve(process.cwd(), "src/components/ui");
+  let toCheck = components;
+  if (!toCheck.length) {
+    toCheck = Object.keys(COMPONENTS).filter((c) => {
+      const componentPath = path3.join(componentsDir, `${c}.tsx`);
+      return fs3.existsSync(componentPath);
+    });
+  }
+  if (!toCheck.length) {
+    console.log(chalk4.yellow("No components to compare."));
+    return;
+  }
+  console.log();
+  console.log(chalk4.bold("Component Differences"));
+  console.log();
+  let hasChanges = false;
+  for (const componentName of toCheck) {
+    const component = getComponent(componentName);
+    if (!component) {
+      console.log(chalk4.yellow(`Unknown component: ${componentName}`));
+      continue;
+    }
+    const componentPath = path3.join(componentsDir, `${componentName}.tsx`);
+    if (!fs3.existsSync(componentPath)) {
+      console.log(chalk4.yellow(`${componentName}: Not installed`));
+      continue;
+    }
+    const localCode = fs3.readFileSync(componentPath, "utf-8");
+    const upstreamCode = component.code;
+    if (localCode === upstreamCode) {
+      console.log(chalk4.green(`${componentName}: Up to date`));
+      continue;
+    }
+    hasChanges = true;
+    console.log(chalk4.yellow(`${componentName}: Modified`));
+    const changes = diffLines(upstreamCode, localCode);
+    for (const change of changes) {
+      if (change.added) {
+        process.stdout.write(chalk4.green(`+ ${change.value}`));
+      } else if (change.removed) {
+        process.stdout.write(chalk4.red(`- ${change.value}`));
+      }
+    }
+    console.log();
+  }
+  if (!hasChanges) {
+    console.log();
+    console.log(chalk4.green("\u2713 All components are up to date!"));
+  }
+}
+
+// index.ts
+var packageJson = require_package();
+var program = new Command();
+program.name("reever-ui").description("CLI tool for reever-ui component library").version(packageJson.version);
+program.command("init").description("Initialize reever-ui in your project").option("-y, --yes", "Skip confirmation prompt").option("--overwrite", "Overwrite existing configuration").action(init);
+program.command("add").description("Add components to your project").argument("[components...]", "Components to add").option("-a, --all", "Add all available components").option("-y, --yes", "Skip confirmation prompt").option("-o, --overwrite", "Overwrite existing components").option("-p, --path <path>", "Custom component path").action(add);
+program.command("list").description("List all available components").option("-c, --category <category>", "Filter by category").option("--json", "Output as JSON").action(list);
+program.command("diff").description("Show differences with upstream components").argument("[components...]", "Components to diff").action(diff);
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@reeverdev/ui-cli",
+  "version": "0.1.0",
+  "description": "CLI tool for Reever UI component library",
+  "type": "module",
+  "bin": {
+    "reever-ui": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup index.ts --format esm",
+    "dev": "tsx index.ts"
+  },
+  "dependencies": {
+    "@types/diff": "^7.0.2",
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "diff": "^8.0.2",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.0.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.0.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.0"
+  },
+  "keywords": [
+    "reever-ui",
+    "cli",
+    "components",
+    "react",
+    "tailwindcss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reeverdev/ui.git",
+    "directory": "cli"
+  },
+  "homepage": "https://github.com/reeverdev/ui#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}