dimaac 1.0.0 → 1.0.2

package/README.md

@@ -1,74 +1,49 @@
-# DiMaac UI CLI
+# DiMaac
 
-Professional CLI tool for installing DiMaac UI components and examples.
+Add DiMaac UI components to your projects.
 
-## Installation Options
+## Usage
 
-### Option 1: Global Installation (Recommended)
 ```bash
-npm install -g dimaac-ui-cli
+npx dimaac init
 ```
 
-### Option 2: Local Installation
-```bash
-npm install dimaac-ui-cli
-```
+`init` command initializes a components directory for your project.
+
+### add
 
-### Option 3: Use with npx (No Installation Required)
 ```bash
-npx dimaac-ui-cli add component MouseTiltCard
+npx dimaac add [component]
 ```
 
-## Usage
-
-### Install Components
+Adds a new component to your project.
 
+Example:
 ```bash
-# Global installation
-dimaac add component MouseTiltCard
-dimaac add component TextScrambleReveal
-dimaac add component SwipeableCards
-
-# Local installation
-npx dimaac add component MouseTiltCard
-npm run dimaac add component MouseTiltCard
-
-# With npx (no installation)
-npx dimaac-ui-cli add component MouseTiltCard
-
-# Components will be installed to ./components/{category}/
+npx dimaac add MouseTiltCard
 ```
 
-### Install Examples
+You can also use the optional `--all` flag to install all components:
 
 ```bash
-# Global installation
-dimaac add example MouseTiltCardDemo
-dimaac add example TextScrambleRevealDemo
-dimaac add example SwipeableCardsDemo
-
-# Local installation
-npx dimaac add example MouseTiltCardDemo
-npm run dimaac add example MouseTiltCardDemo
+npx dimaac add --all
+```
 
-# With npx (no installation)
-npx dimaac-ui-cli add example MouseTiltCardDemo
+You can install the related demos / examples for the related components by using the `-e` flag with the add command:
 
-# Examples will be installed to ./examples/{category}/
+```bash
+npx dimaac add [component] -e
 ```
 
-### List Available Components
-
+Example:
 ```bash
-# Global installation
-dimaac list
+npx dimaac add MouseTiltCard -e
+```
 
-# Local installation
-npx dimaac list
-npm run dimaac list
+To check all the available components, you can use the add without supplying anything extra:
 
-# With npx (no installation)
-npx dimaac-ui-cli list
+```bash
+npx dimaac add
 ```
 
 ## Available Components

package/index.js

@@ -5,30 +5,13 @@ const fs = require('fs');
 const path = require('path');
 const https = require('https');
 
-const GITHUB_RAW_BASE = 'https://raw.githubusercontent.com/Hank-D-Tank/dimaac-ui/main';
+const API_BASE = 'https://ui.dimaac.com/api';
+const REGISTRY_URL = `${API_BASE}/components`;
 
 program
   .name('dimaac')
   .description('Add DiMaac UI components to your projects')
-  .version('1.0.0');
-
-const componentCategories = {
-  'reveals': ['TextScrambleReveal', 'LiquidImageReveal'],
-  'cards': ['MouseTiltCard', 'SwipeableCards'],
-  'interactive': ['MouseTrail', 'ContextMenu'],
-  'gallery': ['ScrollingGallery', 'ImageGallery'],
-  'loaders': ['TextLoader'],
-  'layout': ['ExpandablePanel']
-};
-
-const exampleCategories = {
-  'reveals': ['TextScrambleRevealDemo', 'LiquidImageRevealDemo'],
-  'cards': ['MouseTiltCardDemo', 'SwipeableCardsDemo'],
-  'interactive': ['MouseTrailDemo', 'ContextMenuDemo'],
-  'gallery': ['ScrollingGalleryDemo', 'ImageGalleryDemo'],
-  'loaders': ['TextLoaderDemo'],
-  'layout': ['ExpandablePanelDemo']
-};
+  .version('1.0.2');
 
 function ensureDirectoryExists(dirPath) {
   if (!fs.existsSync(dirPath)) {
@@ -53,55 +36,121 @@ function downloadFile(url, destination) {
   });
 }
 
-async function installComponent(componentName, includeExample = false) {
-  let category = null;
-  let actualComponentName = null;
-
-  for (const [cat, components] of Object.entries(componentCategories)) {
-    if (components.includes(componentName)) {
-      category = cat;
-      actualComponentName = componentName;
-      break;
-    }
+function fetchRegistry() {
+  return new Promise((resolve, reject) => {
+    https.get(REGISTRY_URL, (response) => {
+      let data = '';
+
+      response.on('data', (chunk) => {
+        data += chunk;
+      });
+
+      response.on('end', () => {
+        try {
+          const registry = JSON.parse(data);
+          if (registry.success) {
+            resolve(registry.components);
+          } else {
+            reject(new Error('Failed to fetch component registry'));
+          }
+        } catch (error) {
+          reject(new Error('Invalid registry response'));
+        }
+      });
+    }).on('error', reject);
+  });
+}
+
+// Convert slug (post-swiper) to PascalCase (PostSwiper) for matching
+function slugToPascal(slug) {
+  if (!slug || typeof slug !== 'string') return slug;
+  return slug
+    .split(/[-_\s]+/)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join('');
+}
+
+async function findComponent(componentName, registry) {
+  if (!componentName) return null;
+
+  // Try exact match first
+  for (const [category, components] of Object.entries(registry)) {
+    const component = components.find(comp => comp.name === componentName);
+    if (component) return { category, component };
   }
 
-  if (!category) {
-    console.error(`Component "${componentName}" not found.`);
-    console.log('Available components:');
-    Object.entries(componentCategories).forEach(([cat, components]) => {
-      console.log(`  ${cat}:`);
-      components.forEach(comp => console.log(`    - ${comp}`));
-    });
-    return;
+  // Try case-insensitive match
+  const nameLower = componentName.toLowerCase();
+  for (const [category, components] of Object.entries(registry)) {
+    const component = components.find(
+      comp => comp.name.toLowerCase() === nameLower
+    );
+    if (component) return { category, component };
   }
 
-  const componentDir = path.join(process.cwd(), 'components', category);
-  ensureDirectoryExists(componentDir);
+  // Try slug-to-PascalCase (e.g. post-swiper -> PostSwiper)
+  const pascalName = slugToPascal(componentName);
+  if (pascalName !== componentName) {
+    for (const [category, components] of Object.entries(registry)) {
+      const component = components.find(comp => comp.name === pascalName);
+      if (component) return { category, component };
+    }
+  }
 
-  const sourceUrl = `${GITHUB_RAW_BASE}/src/ui/components/${category}/${actualComponentName}.tsx`;
-  const destination = path.join(componentDir, `${actualComponentName}.tsx`);
+  return null;
+}
 
+async function installComponent(componentName, includeExample = false) {
   try {
-    await downloadFile(sourceUrl, destination);
-    console.log(`✅ Successfully installed ${actualComponentName} to components/${category}/`);
+    console.log('📦 Fetching latest component registry...');
+    const registry = await fetchRegistry();
+
+    const result = await findComponent(componentName, registry);
+
+    if (!result) {
+      console.error(`Component "${componentName}" not found.`);
+      console.log('\n📦 Available components:');
+      Object.entries(registry).forEach(([category, components]) => {
+        console.log(`\n  ${category.toUpperCase()}:`);
+        components.forEach(comp => console.log(`    - ${comp.name} (${comp.description})`));
+      });
+      return;
+    }
 
-    if (includeExample) {
-      const exampleName = `${actualComponentName}Demo`;
-      const exampleDir = path.join(process.cwd(), 'examples', category);
+    const { category, component } = result;
+    const componentDir = path.join(process.cwd(), 'ui', 'components');
+    ensureDirectoryExists(componentDir);
+
+    const destination = path.join(componentDir, `${component.name}.tsx`);
+
+    console.log(`⬇️  Downloading ${component.name}...`);
+    await downloadFile(component.sourceUrl, destination);
+    console.log(`✅ Successfully installed ${component.name} to ui/components/`);
+
+    if (includeExample && component.exampleUrl) {
+      const exampleDir = path.join(process.cwd(), 'examples');
       ensureDirectoryExists(exampleDir);
 
-      const exampleUrl = `${GITHUB_RAW_BASE}/src/examples/components/${category}/${exampleName}.tsx`;
-      const exampleDestination = path.join(exampleDir, `${exampleName}.tsx`);
+      const exampleDestination = path.join(exampleDir, `${component.name}Demo.tsx`);
 
       try {
-        await downloadFile(exampleUrl, exampleDestination);
-        console.log(`✅ Successfully installed ${exampleName} to examples/${category}/`);
+        console.log(`⬇️  Downloading example...`);
+        await downloadFile(component.exampleUrl, exampleDestination);
+        console.log(`✅ Successfully installed ${component.name}Demo to examples/`);
       } catch (error) {
-        console.log(`⚠️  Example not found for ${actualComponentName}`);
+        console.log(`⚠️  Example not found for ${component.name}`);
       }
     }
+
+    if (component.dependencies && component.dependencies.length > 0) {
+      console.log(`\n📋 Required dependencies:`);
+      component.dependencies.forEach(dep => console.log(`  - ${dep}`));
+      console.log(`\nInstall with: npm install ${component.dependencies.join(' ')}`);
+    }
+
   } catch (error) {
-    console.error(`❌ Failed to install ${actualComponentName}:`, error.message);
+    console.error(`❌ Failed to install ${componentName}:`, error.message);
+    console.log('\n💡 Make sure you have an internet connection and try again.');
   }
 }
 
@@ -110,11 +159,12 @@ program
   .description('Initialize DiMaac UI in your project')
   .action(async () => {
     console.log('🚀 Initializing DiMaac UI...');
-    
-    const componentsDir = path.join(process.cwd(), 'components');
+
+    const uiDir = path.join(process.cwd(), 'ui');
+    const componentsDir = path.join(process.cwd(), 'ui', 'components');
     ensureDirectoryExists(componentsDir);
-    
-    console.log('✅ Created components directory');
+
+    console.log('✅ Created ui/components directory');
     console.log('📦 DiMaac UI initialized successfully!');
     console.log('\nNext steps:');
     console.log('  npx dimaac add [component]');
@@ -130,24 +180,38 @@ program
   .option('--all', 'Install all components')
   .action(async (component, options) => {
     if (options.all) {
-      console.log('Installing all components...');
-      for (const [category, components] of Object.entries(componentCategories)) {
-        for (const comp of components) {
-          await installComponent(comp, options.example);
+      try {
+        console.log('📦 Fetching latest component registry...');
+        const registry = await fetchRegistry();
+
+        console.log('Installing all components...');
+        for (const [category, components] of Object.entries(registry)) {
+          for (const comp of components) {
+            await installComponent(comp.name, options.example);
+          }
         }
+      } catch (error) {
+        console.error('❌ Failed to fetch component registry:', error.message);
       }
       return;
     }
 
     if (!component) {
-      console.log('\n📦 Available Components:');
-      Object.entries(componentCategories).forEach(([category, components]) => {
-        console.log(`\n  ${category.toUpperCase()}:`);
-        components.forEach(comp => console.log(`    - ${comp}`));
-      });
-      console.log('\nUsage: npx dimaac add [component]');
-      console.log('Example: npx dimaac add MouseTiltCard');
-      console.log('Add -e flag to include example: npx dimaac add MouseTiltCard -e');
+      try {
+        console.log('📦 Fetching latest component registry...');
+        const registry = await fetchRegistry();
+
+        console.log('\n📦 Available Components:');
+        Object.entries(registry).forEach(([category, components]) => {
+          console.log(`\n  ${category.toUpperCase()}:`);
+          components.forEach(comp => console.log(`    - ${comp.name} (${comp.description})`));
+        });
+        console.log('\nUsage: npx dimaac add [component]');
+        console.log('Example: npx dimaac add MouseTiltCard');
+        console.log('Add -e flag to include example: npx dimaac add MouseTiltCard -e');
+      } catch (error) {
+        console.error('❌ Failed to fetch component registry:', error.message);
+      }
       return;
     }
 
@@ -157,14 +221,21 @@ program
 program
   .command('list')
   .description('List all available components')
-  .action(() => {
-    console.log('\n📦 Available Components:');
-    Object.entries(componentCategories).forEach(([category, components]) => {
-      console.log(`\n  ${category.toUpperCase()}:`);
-      components.forEach(comp => console.log(`    - ${comp}`));
-    });
-    console.log('\nUsage: npx dimaac add [component] [-e]');
-    console.log('Add -e flag to include example/demo files');
+  .action(async () => {
+    try {
+      console.log('📦 Fetching latest component registry...');
+      const registry = await fetchRegistry();
+
+      console.log('\n📦 Available Components:');
+      Object.entries(registry).forEach(([category, components]) => {
+        console.log(`\n  ${category.toUpperCase()}:`);
+        components.forEach(comp => console.log(`    - ${comp.name} (${comp.description})`));
+      });
+      console.log('\nUsage: npx dimaac add [component] [-e]');
+      console.log('Add -e flag to include example/demo files');
+    } catch (error) {
+      console.error('❌ Failed to fetch component registry:', error.message);
+    }
   });
 
 program.parse();

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "dimaac",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Add DiMaac UI components to your projects",
   "main": "index.js",
   "bin": {
-    "dimaac": "./index.js"
+    "dimaac": "index.js"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -27,10 +27,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/your-username/dimaac-ui.git"
+    "url": "git+https://github.com/DimaacUI/DiMaac-UI.git"
   },
   "bugs": {
-    "url": "https://github.com/your-username/dimaac-ui/issues"
+    "url": "https://github.com/DimaacUI/DiMaac-UI/issues"
   },
-  "homepage": "https://github.com/your-username/dimaac-ui#readme"
-}
+  "homepage": "https://github.com/DimaacUI/DiMaac-UI#readme"
+}