@typix-editor/cli 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Diyorbek 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -0,0 +1,238 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import inquirer from "inquirer";
+
+// src/utils/config.ts
+import fs from "fs-extra";
+import path from "path";
+var CONFIG_FILE = "typix.json";
+function getConfigPath() {
+  return path.resolve(process.cwd(), CONFIG_FILE);
+}
+async function readConfig() {
+  const configPath = getConfigPath();
+  if (await fs.pathExists(configPath)) {
+    return fs.readJson(configPath);
+  }
+  return null;
+}
+async function writeConfig(config) {
+  const configPath = getConfigPath();
+  await fs.writeJson(configPath, config, { spaces: 2 });
+}
+function getDefaultConfig() {
+  return {
+    componentDir: "src/components/typix",
+    typescript: true,
+    tailwind: true
+  };
+}
+
+// src/utils/logger.ts
+import chalk from "chalk";
+import ora from "ora";
+var logger = {
+  info: (msg) => console.log(chalk.cyan("\u2139"), msg),
+  success: (msg) => console.log(chalk.green("\u2714"), msg),
+  warn: (msg) => console.log(chalk.yellow("\u26A0"), msg),
+  error: (msg) => console.log(chalk.red("\u2716"), msg),
+  break: () => console.log("")
+};
+function spinner(text) {
+  return ora({ text, color: "cyan" });
+}
+
+// src/commands/init.ts
+async function initCommand() {
+  const existing = await readConfig();
+  if (existing) {
+    const { overwrite } = await inquirer.prompt([
+      {
+        type: "confirm",
+        name: "overwrite",
+        message: "typix.json already exists. Overwrite?",
+        default: false
+      }
+    ]);
+    if (!overwrite) {
+      logger.info("Init cancelled.");
+      return;
+    }
+  }
+  const defaults = getDefaultConfig();
+  const answers = await inquirer.prompt([
+    {
+      type: "input",
+      name: "componentDir",
+      message: "Component output directory:",
+      default: defaults.componentDir
+    },
+    {
+      type: "confirm",
+      name: "typescript",
+      message: "Use TypeScript?",
+      default: defaults.typescript
+    },
+    {
+      type: "confirm",
+      name: "tailwind",
+      message: "Use Tailwind CSS?",
+      default: defaults.tailwind
+    }
+  ]);
+  await writeConfig({
+    componentDir: answers.componentDir,
+    typescript: answers.typescript,
+    tailwind: answers.tailwind
+  });
+  logger.break();
+  logger.success("Created typix.json");
+  logger.info(`Components will be added to ${answers.componentDir}`);
+}
+
+// src/commands/add.ts
+import chalk2 from "chalk";
+
+// src/utils/registry.ts
+var registry = {
+  "toolbar-button": {
+    name: "toolbar-button",
+    description: "Reusable toolbar button with active state styling",
+    files: ["toolbar-button/toolbar-button.tsx"],
+    dependencies: ["@typix-editor/react"],
+    registryDependencies: []
+  }
+};
+function getRegistryEntry(name) {
+  return registry[name];
+}
+function getAllComponents() {
+  return Object.values(registry);
+}
+function getComponentNames() {
+  return Object.keys(registry);
+}
+
+// src/utils/writer.ts
+import fs2 from "fs-extra";
+import path2 from "path";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path2.dirname(__filename);
+function getTemplatesDir() {
+  return path2.resolve(__dirname, "..", "templates");
+}
+async function writeComponent(entry, config) {
+  const templatesDir = getTemplatesDir();
+  const outputDir = path2.resolve(process.cwd(), config.componentDir);
+  const written = [];
+  for (const file of entry.files) {
+    const srcPath = path2.join(templatesDir, file);
+    const destPath = path2.join(outputDir, file);
+    await fs2.ensureDir(path2.dirname(destPath));
+    await fs2.copyFile(srcPath, destPath);
+    const relativePath = path2.relative(process.cwd(), destPath);
+    written.push(relativePath);
+  }
+  return written;
+}
+function collectDependencies(entries) {
+  const deps = /* @__PURE__ */ new Set();
+  for (const entry of entries) {
+    for (const dep of entry.dependencies) {
+      deps.add(dep);
+    }
+  }
+  return Array.from(deps).sort();
+}
+
+// src/commands/add.ts
+async function addCommand(components, options) {
+  const config = await readConfig();
+  if (!config) {
+    logger.error(
+      "No typix.json found. Run " + chalk2.cyan("typix init") + " first."
+    );
+    process.exit(1);
+  }
+  let entries;
+  if (options.all) {
+    entries = getAllComponents();
+  } else {
+    if (components.length === 0) {
+      logger.error("Please specify a component name or use --all.");
+      logger.info(
+        "Available: " + getComponentNames().join(", ")
+      );
+      process.exit(1);
+    }
+    entries = [];
+    for (const name of components) {
+      const entry = getRegistryEntry(name);
+      if (!entry) {
+        logger.error(
+          `Component "${name}" not found. Available: ${getComponentNames().join(", ")}`
+        );
+        process.exit(1);
+      }
+      entries.push(entry);
+    }
+  }
+  const s = spinner("Adding components...").start();
+  const allWritten = [];
+  for (const entry of entries) {
+    const written = await writeComponent(entry, config);
+    allWritten.push(...written);
+  }
+  s.succeed("Components added!");
+  logger.break();
+  for (const file of allWritten) {
+    logger.success(`Created ${chalk2.bold(file)}`);
+  }
+  const deps = collectDependencies(entries);
+  if (deps.length > 0) {
+    logger.break();
+    logger.info("Install required dependencies:");
+    console.log(
+      chalk2.cyan(`  pnpm add ${deps.join(" ")}`)
+    );
+  }
+}
+
+// src/commands/list.ts
+import chalk3 from "chalk";
+async function listCommand() {
+  const components = getAllComponents();
+  logger.break();
+  console.log(chalk3.bold("Available components:"));
+  logger.break();
+  const nameWidth = 20;
+  const header = chalk3.gray(
+    "  " + "Name".padEnd(nameWidth) + "Description"
+  );
+  console.log(header);
+  console.log(chalk3.gray("  " + "\u2500".repeat(55)));
+  for (const component of components) {
+    const name = chalk3.cyan(component.name.padEnd(nameWidth));
+    console.log(`  ${name}${component.description}`);
+  }
+  logger.break();
+  logger.info(
+    `Add a component: ${chalk3.cyan("typix add <component>")}`
+  );
+  logger.info(
+    `Add all components: ${chalk3.cyan("typix add --all")}`
+  );
+}
+
+// src/index.ts
+var program = new Command();
+program.name("typix").description("CLI for adding pre-built UI components to your Typix editor").version("1.0.0");
+program.command("init").description("Initialize Typix config (typix.json)").action(initCommand);
+program.command("add").description("Add a component to your project").argument("[components...]", "Components to add").option("-a, --all", "Add all available components").action(addCommand);
+program.command("list").description("List available components").action(listCommand);
+program.parse();

package/dist/templates/toolbar-button/toolbar-button.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+type ToolbarButtonProps = {
+  onClick: () => void;
+  active?: boolean;
+  title: string;
+  children: React.ReactNode;
+  size?: "sm" | "md";
+};
+
+export function ToolbarButton({
+  onClick,
+  active,
+  title,
+  children,
+  size = "sm",
+}: ToolbarButtonProps) {
+  return (
+    <button
+      className={[
+        "inline-flex items-center justify-center rounded-md transition-all",
+        "hover:bg-accent",
+        size === "sm" ? "h-7 w-7" : "h-8 w-8",
+        active ? "bg-primary/10 text-primary hover:bg-primary/20" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      onClick={onClick}
+      title={title}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+}
+
+export function ToolbarDivider() {
+  return <div className="mx-1.5 h-5 w-px bg-border/60" />;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@typix-editor/cli",
+  "version": "3.0.0",
+  "description": "CLI for adding pre-built UI components to your Typix editor project",
+  "author": "Diyorbek Juraev <mrdiyorbekjuraev@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "typix": "./dist/index.js"
+  },
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "commander": "^13.1.0",
+    "fs-extra": "^11.3.0",
+    "inquirer": "^12.6.0",
+    "ora": "^8.2.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^24.10.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "keywords": [
+    "typix",
+    "cli",
+    "editor",
+    "ui",
+    "components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mrdiyorbek-juraev/typix.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "git clean -xdf .cache .turbo dist node_modules rm -rf dist"
+  }
+}