@sublay/cli 7.0.0

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,506 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import prompts from "prompts";
+import fs2 from "fs-extra";
+import path2 from "path";
+import chalk from "chalk";
+
+// src/utils/detect.ts
+import fs from "fs-extra";
+import path from "path";
+async function detectProjectType() {
+  try {
+    const packageJsonPath = path.join(process.cwd(), "package.json");
+    if (!await fs.pathExists(packageJsonPath)) {
+      return "unknown";
+    }
+    const packageJson = await fs.readJson(packageJsonPath);
+    const deps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    if (deps["react-native"] || deps["expo"]) {
+      return "react-native";
+    }
+    if (deps["react"]) {
+      return "react";
+    }
+    return "unknown";
+  } catch (error) {
+    return "unknown";
+  }
+}
+async function detectTypeScript() {
+  try {
+    const tsconfigPath = path.join(process.cwd(), "tsconfig.json");
+    if (await fs.pathExists(tsconfigPath)) {
+      return true;
+    }
+    const packageJsonPath = path.join(process.cwd(), "package.json");
+    if (await fs.pathExists(packageJsonPath)) {
+      const packageJson = await fs.readJson(packageJsonPath);
+      const deps = {
+        ...packageJson.dependencies,
+        ...packageJson.devDependencies
+      };
+      if (deps["typescript"] || deps["@types/react"]) {
+        return true;
+      }
+    }
+    return false;
+  } catch (error) {
+    return false;
+  }
+}
+
+// src/commands/init.ts
+async function init() {
+  console.log(chalk.bold("\n\u{1F680} Welcome to Sublay CLI\n"));
+  const projectType = await detectProjectType();
+  const hasTypeScript = await detectTypeScript();
+  const answers = await prompts([
+    {
+      type: "select",
+      name: "platform",
+      message: "Which platform are you using?",
+      choices: [
+        { title: "React (Web)", value: "react" },
+        { title: "React Native", value: "react-native" },
+        { title: "Expo", value: "expo" }
+      ],
+      initial: projectType === "react-native" ? 1 : 0
+    },
+    {
+      type: "select",
+      name: "style",
+      message: "Which styling approach?",
+      choices: [
+        { title: "Tailwind CSS", value: "tailwind" },
+        { title: "Inline Styles", value: "styled" }
+      ]
+    },
+    {
+      type: "text",
+      name: "componentsPath",
+      message: "Where should components be installed?",
+      initial: "src/components"
+    }
+  ]);
+  if (!answers.platform) {
+    console.log(chalk.yellow("\n\u26A0\uFE0F  Setup cancelled"));
+    process.exit(0);
+  }
+  const config = {
+    platform: answers.platform,
+    style: answers.style || "styled",
+    typescript: hasTypeScript,
+    paths: {
+      components: answers.componentsPath || "src/components"
+    },
+    aliases: {
+      "@/components": `./src/components`
+    }
+  };
+  const configPath = path2.join(process.cwd(), "sublay.json");
+  await fs2.writeJson(configPath, config, { spaces: 2 });
+  console.log(chalk.green("\n\u2705 Configuration saved to sublay.json"));
+  console.log(chalk.bold("\n\u{1F389} Sublay CLI initialized successfully!\n"));
+  console.log(chalk.dim("Next steps:"));
+  console.log(chalk.dim("  1. Run: npx @sublay/cli add <component-name>"));
+  console.log(chalk.dim("     Available: comments-threaded, comments-social, notifications-control"));
+  console.log(chalk.dim("  2. Import components in your app"));
+  console.log(chalk.dim("  3. Customize styles directly in the component files\n"));
+}
+
+// src/commands/add.ts
+import fs5 from "fs-extra";
+import path5 from "path";
+import chalk3 from "chalk";
+import ora from "ora";
+
+// src/utils/registry.ts
+import fs3 from "fs-extra";
+import path3 from "path";
+import { fileURLToPath } from "url";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path3.dirname(__filename);
+var LOCAL_REGISTRY_PATH = path3.resolve(__dirname, "..", "..", "..", "registry");
+async function fetchRegistry(componentName, config) {
+  try {
+    const registryPlatform = config.platform === "expo" ? "react-native" : config.platform;
+    const registryPath = path3.join(
+      LOCAL_REGISTRY_PATH,
+      registryPlatform,
+      componentName,
+      config.style,
+      "registry.json"
+    );
+    const localExists = await fs3.pathExists(registryPath);
+    if (localExists) {
+      return await fs3.readJson(registryPath);
+    }
+    const url = `https://raw.githubusercontent.com/sublay-io/cli/main/registry/${registryPlatform}/${componentName}/${config.style}/registry.json`;
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        if (response.status === 404) {
+          console.error(`Component "${componentName}" with style "${config.style}" not found in registry.`);
+        } else {
+          console.error(`Failed to fetch registry from ${url}: ${response.status} ${response.statusText}`);
+        }
+        return null;
+      }
+      return await response.json();
+    } catch (fetchError) {
+      console.error(`Error fetching from GitHub (${url}):`, fetchError);
+      return null;
+    }
+  } catch (error) {
+    console.error("Error fetching registry:", error);
+    return null;
+  }
+}
+async function fetchFile(registryUrl, filePath) {
+  try {
+    const urlParts = registryUrl.split("/");
+    const style = urlParts[urlParts.length - 1];
+    const componentName = urlParts[urlParts.length - 2];
+    const platform = urlParts[urlParts.length - 3];
+    const localPath = path3.join(
+      LOCAL_REGISTRY_PATH,
+      platform,
+      componentName,
+      style,
+      filePath
+    );
+    const localExists = await fs3.pathExists(localPath);
+    if (localExists) {
+      return await fs3.readFile(localPath, "utf-8");
+    }
+    const fileUrl = `${registryUrl}/${filePath}`;
+    try {
+      const response = await fetch(fileUrl);
+      if (!response.ok) {
+        console.error(`Failed to fetch file from ${fileUrl}: ${response.status} ${response.statusText}`);
+        return null;
+      }
+      return await response.text();
+    } catch (fetchError) {
+      console.error(`Error fetching file from GitHub (${fileUrl}):`, fetchError);
+      return null;
+    }
+  } catch (error) {
+    console.error(`Error fetching file ${filePath}:`, error);
+    return null;
+  }
+}
+
+// src/utils/transform.ts
+function transformImports(content, config) {
+  let transformed = content;
+  transformed = transformed.replace(/from\s+['"]\.\.\/files\//g, 'from "../components/');
+  transformed = transformed.replace(/import\s+['"]\.\.\/files\//g, 'import "../components/');
+  transformed = transformed.replace(/import\(['"]\.\.\/files\//g, 'import("../components/');
+  if (config.platform === "expo") {
+    transformed = transformed.replace(
+      /from\s+["']@sublay\/react-native["']/g,
+      'from "@sublay/expo"'
+    );
+  }
+  if (config.aliases["@/components"]) {
+  }
+  return transformed;
+}
+
+// src/utils/dependencies.ts
+import fs4 from "fs-extra";
+import path4 from "path";
+import chalk2 from "chalk";
+import prompts2 from "prompts";
+import { execa } from "execa";
+async function installDependencies(deps) {
+  try {
+    console.log(chalk2.blue(`
+\u{1F4E6} Installing ${deps.join(", ")}...
+`));
+    const packageManager = await detectPackageManager();
+    await execa(packageManager, ["install", ...deps], {
+      stdio: "inherit",
+      cwd: process.cwd()
+    });
+    console.log(chalk2.green("\n\u2705 Dependencies installed successfully"));
+  } catch (error) {
+    console.error(chalk2.red("\n\u274C Failed to install dependencies"));
+    console.error(error);
+  }
+}
+async function detectPackageManager() {
+  const lockFiles = {
+    "pnpm-lock.yaml": "pnpm",
+    "yarn.lock": "yarn",
+    "package-lock.json": "npm"
+  };
+  for (const [lockFile, pm] of Object.entries(lockFiles)) {
+    if (await fs4.pathExists(path4.join(process.cwd(), lockFile))) {
+      return pm;
+    }
+  }
+  return "npm";
+}
+async function checkComponentDependencies(dependencies) {
+  try {
+    const packageJsonPath = path4.join(process.cwd(), "package.json");
+    if (!await fs4.pathExists(packageJsonPath)) {
+      console.log(chalk2.yellow("\n\u26A0\uFE0F  No package.json found"));
+      return;
+    }
+    const packageJson = await fs4.readJson(packageJsonPath);
+    const allDeps = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies
+    };
+    const requiredDeps = dependencies.map((dep) => {
+      const parts = dep.split("@").filter(Boolean);
+      if (dep.startsWith("@")) {
+        return `@${parts[0]}`;
+      } else {
+        return parts[0];
+      }
+    });
+    const missingDeps = requiredDeps.filter((dep) => !allDeps[dep]);
+    if (missingDeps.length === 0) {
+      console.log(chalk2.green("\n\u2705 All required dependencies are installed"));
+      return;
+    }
+    console.log(chalk2.yellow("\n\u26A0\uFE0F  Missing required dependencies:"));
+    const missingDepsWithVersions = dependencies.filter((dep) => {
+      const parts = dep.split("@").filter(Boolean);
+      const pkgName = dep.startsWith("@") ? `@${parts[0]}` : parts[0];
+      return missingDeps.includes(pkgName);
+    });
+    missingDepsWithVersions.forEach((dep) => console.log(chalk2.dim(`  - ${dep}`)));
+    const { install } = await prompts2({
+      type: "confirm",
+      name: "install",
+      message: "Would you like to install them now?",
+      initial: true
+    });
+    if (install) {
+      await installDependencies(missingDepsWithVersions);
+    } else {
+      console.log(chalk2.dim("\nYou can install them later with:"));
+      const packageManager = await detectPackageManager();
+      const installCmd = packageManager === "npm" ? "npm install" : packageManager === "yarn" ? "yarn add" : "pnpm add";
+      console.log(chalk2.dim(`  ${installCmd} ${missingDepsWithVersions.join(" ")}
+`));
+    }
+  } catch (error) {
+    console.error(chalk2.red("\n\u274C Error checking dependencies:"), error);
+  }
+}
+
+// src/utils/strip-types.ts
+async function stripTypes(code, filePath) {
+  try {
+    const { transform } = await import("@babel/core");
+    const presetTypescript = (await import("@babel/preset-typescript")).default;
+    const pluginSyntaxJsx = (await import("@babel/plugin-syntax-jsx")).default;
+    const result = transform(code, {
+      filename: filePath,
+      presets: [
+        [presetTypescript, {
+          isTSX: true,
+          // Enable TSX parsing
+          allExtensions: true
+          // Parse all files as TS/TSX
+        }]
+      ],
+      plugins: [pluginSyntaxJsx],
+      // Pass the actual plugin function
+      configFile: false,
+      // Don't look for babel.config.js
+      babelrc: false,
+      // Don't look for .babelrc
+      sourceMaps: false,
+      // No source maps needed
+      compact: false,
+      // Don't minimize output
+      retainLines: true
+      // Try to keep line numbers similar
+    });
+    if (!result || !result.code) {
+      throw new Error("Babel transformation returned no code");
+    }
+    return result.code;
+  } catch (error) {
+    throw new Error(
+      `Failed to strip types from ${filePath}: ${error instanceof Error ? error.message : String(error)}`
+    );
+  }
+}
+function convertFileExtension(filePath) {
+  return filePath.replace(/\.tsx?$/, (match) => {
+    return match === ".tsx" ? ".jsx" : ".js";
+  });
+}
+
+// src/commands/add.ts
+async function add(componentName) {
+  const spinner = ora("Initializing...").start();
+  try {
+    const configPath = path5.join(process.cwd(), "sublay.json");
+    if (!await fs5.pathExists(configPath)) {
+      spinner.fail("No sublay.json found");
+      console.log(chalk3.yellow("\n\u26A0\uFE0F  Please run: npx @sublay/cli init"));
+      process.exit(1);
+    }
+    const config = await fs5.readJson(configPath);
+    spinner.text = `Fetching ${componentName}...`;
+    const registry = await fetchRegistry(componentName, config);
+    if (!registry) {
+      spinner.fail(`Component "${componentName}" not found`);
+      process.exit(1);
+    }
+    if (config.platform === "expo") {
+      registry.dependencies = registry.dependencies.map(
+        (dep) => dep.startsWith("@sublay/react-native") ? dep.replace("@sublay/react-native", "@sublay/expo") : dep
+      );
+    }
+    spinner.text = "Downloading files...";
+    let filesInstalled = 0;
+    for (const file of registry.files) {
+      if (shouldExcludeFile(file.path)) {
+        continue;
+      }
+      const fileContent = await fetchFile(registry.registryUrl, file.path);
+      if (!fileContent) {
+        console.log(chalk3.yellow(`
+\u26A0\uFE0F  Could not fetch ${file.path}`));
+        continue;
+      }
+      let transformed = transformImports(fileContent, config);
+      let finalFilePath = file.path;
+      if (!config.typescript && (file.path.endsWith(".ts") || file.path.endsWith(".tsx"))) {
+        transformed = await stripTypes(transformed, file.path);
+        finalFilePath = convertFileExtension(file.path);
+      }
+      const targetPath = getTargetPath(finalFilePath, config, componentName);
+      const fullPath = path5.join(process.cwd(), targetPath);
+      await fs5.ensureDir(path5.dirname(fullPath));
+      await fs5.writeFile(fullPath, transformed, "utf-8");
+      filesInstalled++;
+    }
+    spinner.text = "Creating index file...";
+    await createIndexFile(componentName, config, registry);
+    filesInstalled++;
+    spinner.succeed(`Added ${componentName}`);
+    console.log(
+      chalk3.green(`
+\u2705 Successfully installed ${filesInstalled} files!`)
+    );
+    console.log(
+      chalk3.dim(
+        `
+\u{1F4C1} Files added to ${path5.join(
+          config.paths.components,
+          componentName
+        )}`
+      )
+    );
+    await checkComponentDependencies(registry.dependencies);
+    const componentInfo = getComponentInfo(registry);
+    const relativeImportPath = path5.relative(
+      process.cwd(),
+      path5.join(config.paths.components, componentName)
+    );
+    console.log(chalk3.bold("\n\u{1F4D6} Usage:"));
+    console.log(
+      chalk3.dim(
+        `  import { ${componentInfo.mainComponent} } from './${relativeImportPath}';`
+      )
+    );
+    console.log(chalk3.dim(`  // With types:`));
+    console.log(
+      chalk3.dim(
+        `  import { ${componentInfo.mainComponent}, type ${componentInfo.typeExport} } from './${relativeImportPath}';`
+      )
+    );
+    console.log();
+  } catch (error) {
+    spinner.fail("Failed to add component");
+    console.error(chalk3.red("\n\u274C Error:"), error);
+    process.exit(1);
+  }
+}
+function getTargetPath(filePath, config, componentName) {
+  const componentDir = path5.join(config.paths.components, componentName);
+  if (filePath.startsWith("hooks/")) {
+    return path5.join(componentDir, "hooks", path5.basename(filePath));
+  }
+  if (filePath.startsWith("utils/")) {
+    return path5.join(componentDir, "utils", path5.basename(filePath));
+  }
+  if (filePath.startsWith("context/")) {
+    return path5.join(componentDir, "context", path5.basename(filePath));
+  }
+  if (filePath.startsWith("files/")) {
+    const normalizedPath = filePath.substring(6);
+    return path5.join(componentDir, "components", normalizedPath);
+  }
+  return path5.join(componentDir, filePath);
+}
+async function createIndexFile(componentName, config, registry) {
+  const componentDir = path5.join(
+    process.cwd(),
+    config.paths.components,
+    componentName
+  );
+  const indexExtension = config.typescript ? "ts" : "js";
+  const indexPath = path5.join(componentDir, `index.${indexExtension}`);
+  const componentInfo = getComponentInfo(registry);
+  const indexContent = `export { default as ${componentInfo.mainComponent} } from './components/${componentInfo.mainFile}';
+export * from './components/${componentInfo.mainFile}';
+`;
+  await fs5.writeFile(indexPath, indexContent, "utf-8");
+}
+function getComponentInfo(registry) {
+  return {
+    mainComponent: registry.exports.mainComponent,
+    mainFile: registry.exports.mainFile,
+    typeExport: registry.exports.typeExports?.[0] || ""
+  };
+}
+function shouldExcludeFile(filePath) {
+  const fileName = path5.basename(filePath);
+  const excludedFiles = [
+    "package.json",
+    "tsconfig.json",
+    ".gitignore",
+    "pnpm-lock.yaml",
+    "package-lock.json",
+    "yarn.lock",
+    ".eslintrc",
+    ".prettierrc"
+  ];
+  if (excludedFiles.includes(fileName)) {
+    return true;
+  }
+  if (filePath.includes("node_modules")) {
+    return true;
+  }
+  if (fileName.startsWith(".")) {
+    return true;
+  }
+  return false;
+}
+
+// src/index.ts
+var program = new Command();
+program.name("sublay").description("CLI for installing Sublay UI components").version("0.1.0");
+program.command("init").description("Initialize Sublay configuration in your project").action(init);
+program.command("add <component>").description("Add a component to your project").action(add);
+program.parse();

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@sublay/cli",
+  "version": "7.0.0",
+  "description": "CLI for installing Sublay UI components",
+  "type": "module",
+  "bin": {
+    "sublay": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "commander": "^14.0.3",
+    "prompts": "^2.4.2",
+    "chalk": "^5.6.2",
+    "ora": "^9.3.0",
+    "fs-extra": "^11.3.4",
+    "node-fetch": "^3.3.2",
+    "execa": "^9.6.1",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/plugin-syntax-jsx": "^7.28.6"
+  },
+  "devDependencies": {
+    "@types/node": "^25.6.0",
+    "@types/prompts": "^2.4.9",
+    "@types/fs-extra": "^11.0.4",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}