@ghatak/slash-ui 1.0.0

package/scripts/build-registry.ts

@@ -0,0 +1,60 @@
+import { writeFileSync, existsSync, mkdirSync, readFileSync } from 'fs';
+import path from 'path';
+import { Index } from '../registry/index';
+
+const OUTPUT_DIR = path.join(process.cwd(), '__registry__');
+const OUTPUT_PATH = path.join(OUTPUT_DIR, 'index.ts');
+
+async function buildRegistry() {
+  if (!existsSync(OUTPUT_DIR)) {
+    mkdirSync(OUTPUT_DIR);
+  }
+
+  let indexContent = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+import * as React from "react"
+
+export const Index: Record<string, any> = {
+  "default": {
+`;
+
+  Index.forEach((item: any) => {
+    const componentPath = item.files[0].replace(/\.tsx?$/, '');
+    const sourceFilePath = path.join(process.cwd(), 'registry', item.files[0]);
+    const detailsFilePath = path.join(
+      process.cwd(),
+      'registry',
+      `details/${item.name}.tsx`,
+    );
+    const hasDetails = existsSync(detailsFilePath);
+
+    const rawContent = existsSync(sourceFilePath)
+      ? readFileSync(sourceFilePath, 'utf8')
+      : '';
+    const safeContent = rawContent.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+    const safeDescription = (item.description || '')
+      .replace(/`/g, '\\`')
+      .replace(/\$/g, '\\$');
+
+    indexContent += `    "${item.name}": {
+      name: "${item.name}",
+      type: "${item.type}",
+      component: React.lazy(() => import("../registry/${componentPath}")),
+      details: ${hasDetails ? `React.lazy(() => import("../registry/details/${item.name}"))` : 'null'},
+      files: ${JSON.stringify(item.files)},
+      category: "${item.category || 'undefined'}",
+      content: \`${safeContent}\`,
+      description: \`${safeDescription}\`,
+      install: "${item.install || ''}",
+    },
+`;
+  });
+
+  indexContent += `  }
+};`;
+
+  writeFileSync(OUTPUT_PATH, indexContent);
+  console.log('✅ Slash UI Registry updated!');
+}
+
+buildRegistry();

package/src/commands/add.ts

@@ -0,0 +1,40 @@
+import fs from "fs-extra";
+import path from "path";
+import chalk from "chalk";
+// Import the Index that YOUR script just generated
+import { Index } from "../../__registry__/index"; 
+
+export const addCommand = async (componentName: string) => {
+  try {
+    // Access the 'default' key from your generated file
+    const component = (Index as any).default[componentName];
+
+    if (!component) {
+      console.error(chalk.red(`\nError: Component "${componentName}" not found in registry.`));
+      return;
+    }
+
+    // Determine target directory (e.g., components/ui)
+    const targetDir = path.join(process.cwd(), "components", "ui");
+    await fs.ensureDir(targetDir);
+
+    // Use the first filename from your registry item
+    const fileName = component.files[0] ? path.basename(component.files[0]) : `${componentName}.tsx`;
+    const filePath = path.join(targetDir, fileName);
+
+    // Write the 'content' string that your build script saved
+    await fs.writeFile(filePath, component.content);
+
+    // --- Premium Success Message ---
+    console.log(`\n${chalk.bgCyan.black(" DONE ")} ${chalk.green(`Component ${chalk.bold(componentName)} has been added.`)}`);
+    console.log(`${chalk.dim("Location:")} ${chalk.cyan(filePath)}`);
+    // -------------------------------
+    
+    if (component.install) {
+      console.log(chalk.yellow(`\nNote: This component requires dependencies: `) + chalk.cyan(component.install));
+      console.log(chalk.dim(`Run: npm install ${component.install}`));
+    }
+  } catch (error) {
+    console.error(chalk.red("\nFailed to add component:"), error);
+  }
+}

package/src/commands/init.ts

@@ -0,0 +1,75 @@
+import fs from 'fs-extra';
+import path from 'path';
+import chalk from 'chalk';
+import prompts from 'prompts';
+
+export const initCommand = async () => {
+  try {
+    console.log(chalk.bold.blue('\n🚀 Initializing Slash UI...\n'));
+
+    // 1. Ask user for preferred configuration
+    const response = await prompts([
+      {
+        type: 'text',
+        name: 'componentsPath',
+        message: 'Where would you like to install your components?',
+        initial: 'components/ui',
+      },
+      {
+        type: 'confirm',
+        name: 'proceed',
+        message:
+          'This will create necessary directories and configuration files. Proceed?',
+        initial: true,
+      },
+    ]);
+
+    if (!response.proceed) {
+      console.log(chalk.yellow('Aborted initialization.'));
+      return;
+    }
+
+    // 2. Create the components directory
+    const targetDir = path.join(process.cwd(), response.componentsPath);
+    await fs.ensureDir(targetDir);
+    console.log(chalk.green(`✔ Created directory: ${response.componentsPath}`));
+
+    // 3. Create a components.json for your CLI to remember settings
+    const config = {
+      style: 'default',
+      tailwind: {
+        config: 'tailwind.config.js',
+        css: 'app/globals.css',
+        baseColor: 'zinc',
+      },
+      paths: {
+        components: response.componentsPath,
+        utils: 'lib/utils',
+      },
+    };
+
+    await fs.writeJSON(path.join(process.cwd(), 'components.json'), config, {
+      spaces: 2,
+    });
+    console.log(chalk.green('✔ Created components.json configuration'));
+
+    // 4. Check for Tailwind Config
+    const tailwindConfigPath = path.join(process.cwd(), 'tailwind.config.ts');
+
+    if (fs.existsSync(tailwindConfigPath)) {
+      let content = fs.readFileSync(tailwindConfigPath, 'utf-8');
+
+      // Automatically add the components directory to Tailwind's content array
+      if (!content.includes(response.componentsPath)) {
+        content = content.replace(
+          /content: \[([\s\S]*?)\]/,
+          `content: [$1, "./${response.componentsPath}/**/*.{ts,tsx}"]`,
+        );
+        fs.writeFileSync(tailwindConfigPath, content);
+        console.log(chalk.dim('✔ Updated tailwind.config.ts content paths.'));
+      }
+    }
+  } catch (error) {
+    console.error(chalk.red('\nFailed to initialize project:'), error);
+  }
+};

package/src/commands/list.ts

@@ -0,0 +1,44 @@
+import chalk from "chalk";
+import prompts from "prompts";
+import { Index } from "../../__registry__/index";
+import { addCommand } from "./add";
+
+export const listCommand = async () => {
+  try {
+    const registryData = (Index as any).default;
+    const components = Object.keys(registryData);
+
+    if (components.length === 0) {
+      console.log(chalk.red("\n✖ No components found. Run 'npm run build:registry' first."));
+      return;
+    }
+
+    // 1. Create the interactive menu choices
+    const choices = components.map((name) => ({
+      title: name,
+      value: name,
+      description: chalk.dim(registryData[name].category || "ui"),
+    }));
+
+    console.log(chalk.bold.cyan("\n─── Slash UI Explorer ───"));
+
+    // 2. Launch the autocomplete search menu
+    const response = await prompts({
+      type: "autocomplete",
+      name: "selected",
+      message: "Search components",
+      choices: choices,
+      // This allows filtering as you type
+      suggest: (input, choices) => 
+        Promise.resolve(choices.filter(i => i.title.toLowerCase().includes(input.toLowerCase()))),
+    });
+
+    // 3. If they select one, run the add command immediately
+    if (response.selected) {
+      await addCommand(response.selected);
+    }
+
+  } catch (error) {
+    console.error(chalk.red("\nFailed to display component list:"), error);
+  }
+};

package/src/index.ts

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { addCommand } from './commands/add';
+import { initCommand } from './commands/init';
+import { listCommand } from './commands/list';
+
+const program = new Command();
+
+program
+  .name('slash-ui')
+  .description('CLI for Slash UI components')
+  .version('1.0.0');
+
+// 1. Init
+program
+  .command('init')
+  .description('Initialize your project for Slash UI')
+  .action(initCommand);
+
+// 2. List
+program
+  .command('list')
+  .description('List all available components')
+  .action(listCommand);
+
+// 3. Add
+program
+  .command('add')
+  .description('Add a component to your project')
+  .argument('<component>', 'the component name to add')
+  .action(addCommand);
+
+// ONLY ONE PARSE CALL AT THE VERY END
+program.parse();

package/src/utils/get-pkg-manager.ts

@@ -0,0 +1,7 @@
+export function getPkgManager() {
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.includes("yarn")) return "yarn";
+  if (userAgent.includes("pnpm")) return "pnpm";
+  if (userAgent.includes("bun")) return "bun";
+  return "npm";
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}