weloop-kosign 1.1.1 → 1.1.2

package/README.md

@@ -2,6 +2,17 @@
 
 A modular component library built with Next.js, similar to shadcn/ui. Install only the components you need directly into your project.
 
+**Current Version:** `1.1.2`
+
+## What's New in v1.1.2
+
+- Added new component pages (kbd, label, menubar, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, skeleton, slider, spinner, switch, tabs, textarea, toast, toggle, toggle-group, tooltip)
+- Added comprehensive sidebar demo pages and examples (13 demo variations)
+- Added installation documentation for Next.js and Vite
+- Updated existing component pages and documentation
+- Reorganized sidebar examples and components structure
+- Improved component organization and file structure
+
 ## Installation
 
 Install components directly - the CLI handles everything automatically:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weloop-kosign",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "CLI tool for installing Weloop UI components",
   "keywords": [
     "weloop",

package/scripts/cli-remote.js

@@ -8,16 +8,19 @@
  * - If running in external projects: uses remote GitLab/GitHub URL
  * 
  * Usage (via npx - recommended):
+ *   npx weloop-kosign@latest init
  *   npx weloop-kosign@latest add <component-name>
  *   npx weloop-kosign@latest list
  *   npx weloop-kosign@latest css [--overwrite]
  * 
  * Usage (local development):
+ *   node scripts/cli-remote.js init [--registry <url|path>]
  *   node scripts/cli-remote.js add <component-name> [--registry <url|path>]
  *   node scripts/cli-remote.js list [--registry <url|path>]
  *   node scripts/cli-remote.js css [--registry <url|path>] [--overwrite]
  * 
  * Examples:
+ *   npx weloop-kosign@latest init
  *   npx weloop-kosign@latest add button
  *   npx weloop-kosign@latest add button --registry ./registry
  *   npx weloop-kosign@latest css
@@ -1249,6 +1252,168 @@ async function installComponent(componentName, options = {}) {
   success(`\nSuccessfully installed "${componentName}"`);
 }
 
+// ============================================================================
+// INIT COMMAND - Project Initialization
+// ============================================================================
+
+/**
+ * Detects the project type (Next.js or Vite)
+ * @returns {string} 'nextjs' or 'vite' or null
+ */
+function detectProjectType() {
+  // Check for Next.js
+  if (fs.existsSync(path.join(process.cwd(), 'next.config.js')) ||
+      fs.existsSync(path.join(process.cwd(), 'next.config.mjs')) ||
+      fs.existsSync(path.join(process.cwd(), 'next.config.ts')) ||
+      fs.existsSync(path.join(process.cwd(), 'app')) ||
+      fs.existsSync(path.join(process.cwd(), 'pages'))) {
+    return 'nextjs';
+  }
+  
+  // Check for Vite
+  if (fs.existsSync(path.join(process.cwd(), 'vite.config.js')) ||
+      fs.existsSync(path.join(process.cwd(), 'vite.config.ts')) ||
+      fs.existsSync(path.join(process.cwd(), 'vite.config.mjs'))) {
+    return 'vite';
+  }
+  
+  return null;
+}
+
+/**
+ * Prompts user for configuration using readline
+ * @param {string} question - Question to ask
+ * @param {string} defaultValue - Default value
+ * @returns {Promise<string>} User input
+ */
+function prompt(question, defaultValue = '') {
+  return new Promise((resolve) => {
+    const readline = require('readline');
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout
+    });
+    
+    const promptText = defaultValue 
+      ? `${question} › ${defaultValue} `
+      : `${question} › `;
+    
+    rl.question(promptText, (answer) => {
+      rl.close();
+      resolve(answer.trim() || defaultValue);
+    });
+  });
+}
+
+/**
+ * Initializes the project with components.json configuration
+ * Similar to shadcn/ui init command
+ */
+async function initProject() {
+  info('Initializing project...\n');
+  
+  // Check if components.json already exists
+  const configPath = path.join(process.cwd(), 'components.json');
+  if (fs.existsSync(configPath)) {
+    warn('components.json already exists.');
+    const overwrite = await prompt('Do you want to overwrite it? (y/N)', 'N');
+    if (overwrite.toLowerCase() !== 'y' && overwrite.toLowerCase() !== 'yes') {
+      info('Skipping initialization.');
+      return;
+    }
+  }
+  
+  // Detect project type
+  const projectType = detectProjectType();
+  let detectedType = projectType || 'nextjs';
+  
+  if (!projectType) {
+    info('Could not detect project type. Defaulting to Next.js.');
+  } else {
+    info(`Detected ${projectType === 'nextjs' ? 'Next.js' : 'Vite'} project.`);
+  }
+  
+  // Ask for project type if not detected or user wants to override
+  const useDetected = projectType 
+    ? await prompt(`Which project type? (Next.js/Vite)`, detectedType === 'nextjs' ? 'Next.js' : 'Vite')
+    : await prompt(`Which project type? (Next.js/Vite)`, 'Next.js');
+  
+  const isNextjs = useDetected.toLowerCase().includes('next');
+  const isVite = useDetected.toLowerCase().includes('vite');
+  
+  // Detect CSS path
+  let cssPath = 'app/globals.css';
+  if (isVite) {
+    cssPath = 'src/index.css';
+  } else if (fs.existsSync(path.join(process.cwd(), 'app', 'globals.css'))) {
+    cssPath = 'app/globals.css';
+  } else if (fs.existsSync(path.join(process.cwd(), 'styles', 'globals.css'))) {
+    cssPath = 'styles/globals.css';
+  } else {
+    cssPath = await prompt('Where is your global CSS file?', cssPath);
+  }
+  
+  // Ask for base color
+  const baseColor = await prompt('Which color would you like to use as base color?', 'neutral');
+  
+  // Ask for style
+  const style = await prompt('Which style would you like to use?', 'blue');
+  
+  // Create components.json
+  const config = {
+    $schema: 'https://weloop.kosign.dev/schema.json',
+    style: style,
+    rsc: isNextjs,
+    tsx: true,
+    tailwind: {
+      config: 'tailwind.config.ts',
+      css: cssPath,
+      baseColor: baseColor,
+      cssVariables: true,
+      prefix: ''
+    },
+    iconLibrary: 'lucide',
+    aliases: {
+      components: '@/components',
+      utils: '@/lib/utils',
+      ui: '@/components/ui',
+      lib: '@/lib',
+      hooks: '@/hooks'
+    },
+    registry: 'https://gitlab.com/Sophanithchrek/weloop-shadcn-next-app/-/raw/main/registry/index.json'
+  };
+  
+  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+  success('Created components.json\n');
+  
+  // Install base dependencies
+  info('Installing base dependencies...');
+  const baseDeps = ['clsx', 'tailwind-merge'];
+  const missingBaseDeps = baseDeps.filter(dep => !checkPackageInstalled(dep));
+  
+  if (missingBaseDeps.length > 0) {
+    await installPackages(missingBaseDeps);
+  } else {
+    info('Base dependencies already installed.');
+  }
+  
+  // Install tw-animate-css
+  if (!checkPackageInstalled('tw-animate-css')) {
+    info('Installing tw-animate-css for animations...');
+    await installPackages(['tw-animate-css']);
+  }
+  
+  // Install CSS styles
+  info('\nInstalling CSS styles...');
+  await installCSSStyles(config, DEFAULT_REGISTRY_URL, false, false);
+  
+  success('\n✅ Project initialized successfully!');
+  info('\nYou can now add components using:');
+  info('  npx weloop-kosign@latest add <component-name>');
+  info('  pnpm dlx weloop-kosign@latest add <component-name>');
+  info('  yarn weloop-kosign@latest add <component-name>\n');
+}
+
 // ============================================================================
 // COMMANDS - CLI Command Handlers
 // ============================================================================
@@ -1315,6 +1480,7 @@ async function main() {
   if (!command) {
     console.log(`
 Usage:
+  node scripts/cli-remote.js init [--registry <url>]                  Initialize project
   node scripts/cli-remote.js add <component-name> [--registry <url>]  Install a component
   node scripts/cli-remote.js list [--registry <url>]                  List all available components
   node scripts/cli-remote.js css [--registry <url>] [--overwrite]       Install/update CSS styles
@@ -1324,6 +1490,7 @@ Options:
   --overwrite, -f     Overwrite existing files
 
 Examples:
+  node scripts/cli-remote.js init
   node scripts/cli-remote.js add button
   node scripts/cli-remote.js add button --registry https://raw.githubusercontent.com/user/repo/main/registry
   node scripts/cli-remote.js list
@@ -1335,6 +1502,10 @@ Examples:
 
   // Route to appropriate command handler
   switch (command) {
+    case 'init':
+      await initProject();
+      break;
+    
     case 'add':
       if (!componentName) {
         error('Please provide a component name');
@@ -1357,7 +1528,7 @@ Examples:
     
     default:
       error(`Unknown command: ${command}`);
-      console.log('Available commands: add, list, css');
+      console.log('Available commands: init, add, list, css');
       process.exit(1);
   }
 }