dimaac 1.0.0

package/README.md

@@ -0,0 +1,141 @@
+# DiMaac UI CLI
+
+Professional CLI tool for installing DiMaac UI components and examples.
+
+## Installation Options
+
+### Option 1: Global Installation (Recommended)
+```bash
+npm install -g dimaac-ui-cli
+```
+
+### Option 2: Local Installation
+```bash
+npm install dimaac-ui-cli
+```
+
+### Option 3: Use with npx (No Installation Required)
+```bash
+npx dimaac-ui-cli add component MouseTiltCard
+```
+
+## Usage
+
+### Install Components
+
+```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}/
+```
+
+### Install Examples
+
+```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
+
+# With npx (no installation)
+npx dimaac-ui-cli add example MouseTiltCardDemo
+
+# Examples will be installed to ./examples/{category}/
+```
+
+### List Available Components
+
+```bash
+# Global installation
+dimaac list
+
+# Local installation
+npx dimaac list
+npm run dimaac list
+
+# With npx (no installation)
+npx dimaac-ui-cli list
+```
+
+## Available Components
+
+### Cards
+- MouseTiltCard
+- SwipeableCards
+
+### Reveals
+- TextScrambleReveal
+- LiquidImageReveal
+
+### Interactive
+- MouseTrail
+- ContextMenu
+
+### Gallery
+- ScrollingGallery
+- ImageGallery
+
+### Loaders
+- TextLoader
+
+### Layout
+- ExpandablePanel
+
+## Available Examples
+
+Each component has a corresponding demo example:
+- MouseTiltCardDemo
+- SwipeableCardsDemo
+- TextScrambleRevealDemo
+- LiquidImageRevealDemo
+- MouseTrailDemo
+- ContextMenuDemo
+- ScrollingGalleryDemo
+- ImageGalleryDemo
+- TextLoaderDemo
+- ExpandablePanelDemo
+
+## File Structure
+
+After installation, your project will have:
+
+```
+your-project/
+├── components/
+│   ├── cards/
+│   │   ├── MouseTiltCard.tsx
+│   │   └── SwipeableCards.tsx
+│   ├── reveals/
+│   │   ├── TextScrambleReveal.tsx
+│   │   └── LiquidImageReveal.tsx
+│   └── ...
+└── examples/
+    ├── cards/
+    │   ├── MouseTiltCardDemo.tsx
+    │   └── SwipeableCardsDemo.tsx
+    ├── reveals/
+    │   ├── TextScrambleRevealDemo.tsx
+    │   └── LiquidImageRevealDemo.tsx
+    └── ...
+```
+
+## Requirements
+
+- Node.js >= 14.0.0
+- React project with TypeScript support
+- Tailwind CSS
+- Required dependencies based on components used

package/index.js

@@ -0,0 +1,170 @@
+#!/usr/bin/env node
+
+const { program } = require('commander');
+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';
+
+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']
+};
+
+function ensureDirectoryExists(dirPath) {
+  if (!fs.existsSync(dirPath)) {
+    fs.mkdirSync(dirPath, { recursive: true });
+  }
+}
+
+function downloadFile(url, destination) {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(destination);
+    https.get(url, (response) => {
+      if (response.statusCode === 200) {
+        response.pipe(file);
+        file.on('finish', () => {
+          file.close();
+          resolve();
+        });
+      } else {
+        reject(new Error(`Failed to download: ${response.statusCode}`));
+      }
+    }).on('error', reject);
+  });
+}
+
+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;
+    }
+  }
+
+  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;
+  }
+
+  const componentDir = path.join(process.cwd(), 'components', category);
+  ensureDirectoryExists(componentDir);
+
+  const sourceUrl = `${GITHUB_RAW_BASE}/src/ui/components/${category}/${actualComponentName}.tsx`;
+  const destination = path.join(componentDir, `${actualComponentName}.tsx`);
+
+  try {
+    await downloadFile(sourceUrl, destination);
+    console.log(`✅ Successfully installed ${actualComponentName} to components/${category}/`);
+
+    if (includeExample) {
+      const exampleName = `${actualComponentName}Demo`;
+      const exampleDir = path.join(process.cwd(), 'examples', category);
+      ensureDirectoryExists(exampleDir);
+
+      const exampleUrl = `${GITHUB_RAW_BASE}/src/examples/components/${category}/${exampleName}.tsx`;
+      const exampleDestination = path.join(exampleDir, `${exampleName}.tsx`);
+
+      try {
+        await downloadFile(exampleUrl, exampleDestination);
+        console.log(`✅ Successfully installed ${exampleName} to examples/${category}/`);
+      } catch (error) {
+        console.log(`⚠️  Example not found for ${actualComponentName}`);
+      }
+    }
+  } catch (error) {
+    console.error(`❌ Failed to install ${actualComponentName}:`, error.message);
+  }
+}
+
+program
+  .command('init')
+  .description('Initialize DiMaac UI in your project')
+  .action(async () => {
+    console.log('🚀 Initializing DiMaac UI...');
+    
+    const componentsDir = path.join(process.cwd(), 'components');
+    ensureDirectoryExists(componentsDir);
+    
+    console.log('✅ Created components directory');
+    console.log('📦 DiMaac UI initialized successfully!');
+    console.log('\nNext steps:');
+    console.log('  npx dimaac add [component]');
+    console.log('  npx dimaac add MouseTiltCard');
+    console.log('  npx dimaac add MouseTiltCard -e');
+  });
+
+program
+  .command('add')
+  .description('Add a component to your project')
+  .argument('[component]', 'Component name')
+  .option('-e, --example', 'Include example/demo file')
+  .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);
+        }
+      }
+      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');
+      return;
+    }
+
+    await installComponent(component, options.example);
+  });
+
+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');
+  });
+
+program.parse();

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "dimaac",
+  "version": "1.0.0",
+  "description": "Add DiMaac UI components to your projects",
+  "main": "index.js",
+  "bin": {
+    "dimaac": "./index.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dimaac": "node index.js"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "cli",
+    "dimaac"
+  ],
+  "author": "DiMaac",
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^11.0.0"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/dimaac-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/dimaac-ui/issues"
+  },
+  "homepage": "https://github.com/your-username/dimaac-ui#readme"
+}