shadcn-extras 0.1.1

package/README.md

@@ -0,0 +1,75 @@
+# Motion Primitives CLI
+
+A command-line interface for easily adding beautiful, animated components to your React project.
+
+## Installation
+
+You can use the CLI directly with npx:
+
+```bash
+npx motion-primitives <command>
+```
+
+Or install it globally:
+
+```bash
+npm install -g motion-primitives
+motion-primitives <command>
+```
+
+## Usage
+
+### List available components
+
+To see all available animated components:
+
+```bash
+npx motion-primitives list
+```
+
+This will display a list of all available components along with descriptions and required dependencies.
+
+### Add a component
+
+To add a specific component to your project:
+
+```bash
+npx motion-primitives add <component-name>
+```
+
+For example:
+
+```bash
+npx motion-primitives add text-morph
+```
+
+This will:
+
+1. Create a `components/motion-primitives` directory in your project (if it doesn't exist)
+2. Download and add the component files
+3. Automatically install any required dependencies using your preferred package manager (npm, yarn, or pnpm)
+
+The CLI automatically detects which package manager you're using based on lock files in your project.
+
+## Available Components
+
+Motion Primitives offers a variety of beautiful and performant animated components, including:
+
+- **Animated UI Elements**: Accordion, Dialog, Text Effects, Carousels
+- **Interactive Animations**: Magnetic elements, Spotlights, Tilt effects
+- **Text Animations**: Text morphing, Text loops, Text scramble effects, Spinning text
+- **And many more!**
+
+For the complete list, run `npx motion-primitives list`.
+
+## Dependencies
+
+Most components require the `motion` library. When you add a component, the CLI will automatically install the required dependencies using your preferred package manager.
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## License
+
+[MIT](LICENSE)

package/dist/index.js

@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const fs_1 = require("fs");
+const path_1 = require("path");
+const ora_1 = __importDefault(require("ora"));
+const node_fetch_1 = __importDefault(require("node-fetch"));
+const child_process_1 = require("child_process");
+// Read package.json for version info
+const packageJson = JSON.parse((0, fs_1.readFileSync)((0, path_1.join)(__dirname, '..', 'package.json'), 'utf8'));
+const MOTION_PRIMITIVES_REGISTRY_URL = 'https://raw.githubusercontent.com/nayanrdeveloper/shadcn-extras/dev/public/c/registry.json';
+const MOTION_PRIMITIVES_BASE_URL = 'https://raw.githubusercontent.com/nayanrdeveloper/shadcn-extras/dev/';
+const TARGET_DIR = 'components/shadcn-extras';
+async function fetchRegistry(url) {
+    const response = await (0, node_fetch_1.default)(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch registry from ${url}: ${response.status}`);
+    }
+    return response.json();
+}
+async function fetchFile(url) {
+    const response = await (0, node_fetch_1.default)(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch file from ${url}: ${response.status}`);
+    }
+    return response.text();
+}
+// Detect package manager (npm, yarn, pnpm)
+function detectPackageManager() {
+    try {
+        // Check for yarn.lock or package-lock.json
+        if ((0, fs_1.existsSync)('yarn.lock')) {
+            return 'yarn';
+        }
+        else if ((0, fs_1.existsSync)('pnpm-lock.yaml')) {
+            return 'pnpm';
+        }
+        else {
+            return 'npm'; // Default to npm
+        }
+    }
+    catch (error) {
+        return 'npm'; // Default to npm on error
+    }
+}
+// Install dependencies using detected package manager
+function installDependencies(dependencies) {
+    const packageManager = detectPackageManager();
+    const spinner = (0, ora_1.default)('Installing dependencies...').start();
+    try {
+        const installCommand = packageManager === 'yarn'
+            ? `yarn add ${dependencies.join(' ')}`
+            : packageManager === 'pnpm'
+                ? `pnpm add ${dependencies.join(' ')}`
+                : `npm install ${dependencies.join(' ')}`;
+        (0, child_process_1.execSync)(installCommand, { stdio: 'ignore' });
+        spinner.succeed(`Dependencies installed successfully with ${packageManager}`);
+        return true;
+    }
+    catch (error) {
+        spinner.fail(`Failed to install dependencies: ${error}`);
+        console.log('\nPlease install them manually:');
+        console.log(`${packageManager === 'yarn' ? 'yarn add' : packageManager === 'pnpm' ? 'pnpm add' : 'npm install'} ${dependencies.join(' ')}`);
+        return false;
+    }
+}
+// Display the welcome banner
+function displayBanner() {
+    console.log(`
+┌────────────────────────────────────────────┐
+│                                            │
+│           Motion Primitives CLI            │
+│                                            │
+│      Beautiful, animated components        │
+│          for your React projects           │
+│                                            │
+│              Version: ${packageJson.version}               │
+│                                            │
+└────────────────────────────────────────────┘
+  `);
+}
+commander_1.program
+    .name('motion-primitives')
+    .description('CLI to add beautiful, animated components to your app')
+    .version(packageJson.version);
+commander_1.program
+    .command('add')
+    .argument('<component>', 'The component to add (e.g., accordion, text-morph)')
+    .description('Add a motion-primitives component to your project')
+    .action(async (component) => {
+    const spinner = (0, ora_1.default)(`Adding ${component}...`).start();
+    try {
+        // Fetch the motion-primitives registry
+        const motionPrimitivesRegistry = await fetchRegistry(MOTION_PRIMITIVES_REGISTRY_URL);
+        const componentEntry = motionPrimitivesRegistry.items.find((item) => item.name === component);
+        if (!componentEntry) {
+            spinner.fail(`Component "${component}" not found in motion-primitives registry`);
+            console.log('\nRun "npx motion-primitives list" to see all available components');
+            process.exit(1);
+        }
+        // Collect all files and dependencies
+        const allFiles = [];
+        const allDependencies = new Set(componentEntry.dependencies || []);
+        // Process all files from registry.json
+        for (const file of componentEntry.files) {
+            const content = file.content ||
+                (await fetchFile(`${MOTION_PRIMITIVES_BASE_URL}${file.path}`));
+            const fileName = file.path.split('/').pop();
+            allFiles.push({ path: fileName, content });
+        }
+        // Create target directory if it doesn't exist
+        if (!(0, fs_1.existsSync)(TARGET_DIR)) {
+            (0, fs_1.mkdirSync)(TARGET_DIR, { recursive: true });
+        }
+        // Write all files to components/motion-primitives/
+        for (const { path, content } of allFiles) {
+            const filePath = (0, path_1.join)(TARGET_DIR, path);
+            (0, fs_1.writeFileSync)(filePath, content);
+            console.log(`✓ Added ${path} to ${filePath}`);
+        }
+        spinner.succeed(`Component "${component}" added successfully!`);
+        // Install dependencies automatically
+        const depsArray = Array.from(allDependencies);
+        if (depsArray.length > 0) {
+            const installSuccess = installDependencies(depsArray);
+            // Add usage example
+            if (componentEntry.title) {
+                const pascalCaseName = component
+                    .split('-')
+                    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+                    .join('');
+                console.log('\nExample usage:');
+                console.log('```jsx');
+                console.log(`import { ${pascalCaseName} } from '@/components/motion-primitives/${component}';`);
+                console.log('\n// Then in your JSX:');
+                console.log(`<${pascalCaseName} />`);
+                console.log('```');
+            }
+        }
+        else {
+            console.log('No additional dependencies needed.');
+        }
+    }
+    catch (error) {
+        spinner.fail(`Error: ${error.message || error}`);
+        process.exit(1);
+    }
+});
+commander_1.program
+    .command('list')
+    .description('List all available motion-primitives components')
+    .action(async () => {
+    const spinner = (0, ora_1.default)('Fetching components...').start();
+    try {
+        // Fetch the motion-primitives registry
+        const motionPrimitivesRegistry = await fetchRegistry(MOTION_PRIMITIVES_REGISTRY_URL);
+        spinner.succeed(`Found ${motionPrimitivesRegistry.items.length} components`);
+        console.log('\nAvailable components:');
+        console.log('====================\n');
+        motionPrimitivesRegistry.items.forEach((item) => {
+            console.log(`${item.name} - ${item.title}`);
+            if (item.description) {
+                console.log(`  ${item.description}`);
+            }
+            if (item.dependencies && item.dependencies.length > 0) {
+                console.log(`  Dependencies: ${item.dependencies.join(', ')}`);
+            }
+            console.log('');
+        });
+        console.log('\nTo add a component run:');
+        console.log('  npx motion-primitives add <component-name>');
+    }
+    catch (error) {
+        spinner.fail(`Error: ${error.message || error}`);
+        process.exit(1);
+    }
+});
+// Add a default command if no command is provided
+commander_1.program.action(() => {
+    displayBanner();
+    console.log('A tool for adding beautiful, animated components to your React app\n');
+    console.log('Available commands:');
+    console.log('  add <component>  - Add a component to your project');
+    console.log('    Example: npx motion-primitives add text-morph');
+    console.log('\n  list             - List all available components');
+    console.log('    Example: npx motion-primitives list');
+    console.log('\n  --help           - Show help information');
+    console.log('\nDocumentation: https://github.com/ibelick/motion-primitives');
+});
+commander_1.program.parse(process.argv);

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "shadcn-extras",
+  "version": "0.1.1",
+  "description": "CLI to add shadcn-extras components to your app",
+  "bin": {
+    "shadcn-extras": "./dist/index.js"
+  },
+  "type": "commonjs",
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsc -w",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "commander": "^9.5.0",
+    "node-fetch": "^2.7.0",
+    "ora": "^5.4.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.19.123",
+    "@types/node-fetch": "^2.6.13",
+    "@types/ora": "^3.1.0",
+    "typescript": "^4.9.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nayanrdeveloper/shadcn-extras.git",
+    "directory": "cli"
+  },
+  "keywords": [
+    "animation",
+    "components",
+    "motion",
+    "ui",
+    "react",
+    "cli"
+  ],
+  "author": "ibelick",
+  "license": "MIT"
+}

package/src/index.ts

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import { existsSync, mkdirSync, writeFileSync, readFileSync } from 'fs';
+import { join } from 'path';
+import ora from 'ora';
+import fetch from 'node-fetch';
+import { execSync } from 'child_process';
+
+// Read package.json for version info
+const packageJson = JSON.parse(
+  readFileSync(join(__dirname, '..', 'package.json'), 'utf8')
+);
+
+const MOTION_PRIMITIVES_REGISTRY_URL =
+  'https://raw.githubusercontent.com/nayanrdeveloper/shadcn-extras/dev/public/c/registry.json';
+const MOTION_PRIMITIVES_BASE_URL =
+  'https://raw.githubusercontent.com/nayanrdeveloper/shadcn-extras/dev/';
+const TARGET_DIR = 'components/shadcn-extras';
+
+interface FileEntry {
+  path: string;
+  type: string;
+  content?: string;
+}
+
+interface RegistryItem {
+  name: string;
+  title?: string;
+  description?: string;
+  dependencies?: string[];
+  registryDependencies?: string[]; // Kept for reference, not used here
+  files: FileEntry[];
+}
+
+interface Registry {
+  items: RegistryItem[];
+}
+
+async function fetchRegistry(url: string): Promise<Registry> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch registry from ${url}: ${response.status}`);
+  }
+  return response.json();
+}
+
+async function fetchFile(url: string): Promise<string> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch file from ${url}: ${response.status}`);
+  }
+  return response.text();
+}
+
+// Detect package manager (npm, yarn, pnpm)
+function detectPackageManager(): string {
+  try {
+    // Check for yarn.lock or package-lock.json
+    if (existsSync('yarn.lock')) {
+      return 'yarn';
+    } else if (existsSync('pnpm-lock.yaml')) {
+      return 'pnpm';
+    } else {
+      return 'npm'; // Default to npm
+    }
+  } catch (error) {
+    return 'npm'; // Default to npm on error
+  }
+}
+
+// Install dependencies using detected package manager
+function installDependencies(dependencies: string[]): boolean {
+  const packageManager = detectPackageManager();
+  const spinner = ora('Installing dependencies...').start();
+
+  try {
+    const installCommand =
+      packageManager === 'yarn'
+        ? `yarn add ${dependencies.join(' ')}`
+        : packageManager === 'pnpm'
+          ? `pnpm add ${dependencies.join(' ')}`
+          : `npm install ${dependencies.join(' ')}`;
+
+    execSync(installCommand, { stdio: 'ignore' });
+    spinner.succeed(
+      `Dependencies installed successfully with ${packageManager}`
+    );
+    return true;
+  } catch (error) {
+    spinner.fail(`Failed to install dependencies: ${error}`);
+    console.log('\nPlease install them manually:');
+    console.log(
+      `${packageManager === 'yarn' ? 'yarn add' : packageManager === 'pnpm' ? 'pnpm add' : 'npm install'} ${dependencies.join(' ')}`
+    );
+    return false;
+  }
+}
+
+// Display the welcome banner
+function displayBanner() {
+  console.log(`
+┌────────────────────────────────────────────┐
+│                                            │
+│           Motion Primitives CLI            │
+│                                            │
+│      Beautiful, animated components        │
+│          for your React projects           │
+│                                            │
+│              Version: ${packageJson.version}               │
+│                                            │
+└────────────────────────────────────────────┘
+  `);
+}
+
+program
+  .name('motion-primitives')
+  .description('CLI to add beautiful, animated components to your app')
+  .version(packageJson.version);
+
+program
+  .command('add')
+  .argument('<component>', 'The component to add (e.g., accordion, text-morph)')
+  .description('Add a motion-primitives component to your project')
+  .action(async (component: string) => {
+    const spinner = ora(`Adding ${component}...`).start();
+
+    try {
+      // Fetch the motion-primitives registry
+      const motionPrimitivesRegistry = await fetchRegistry(
+        MOTION_PRIMITIVES_REGISTRY_URL
+      );
+      const componentEntry = motionPrimitivesRegistry.items.find(
+        (item) => item.name === component
+      );
+      if (!componentEntry) {
+        spinner.fail(
+          `Component "${component}" not found in motion-primitives registry`
+        );
+        console.log(
+          '\nRun "npx motion-primitives list" to see all available components'
+        );
+        process.exit(1);
+      }
+
+      // Collect all files and dependencies
+      const allFiles: { path: string; content: string }[] = [];
+      const allDependencies: Set<string> = new Set(
+        componentEntry.dependencies || []
+      );
+
+      // Process all files from registry.json
+      for (const file of componentEntry.files) {
+        const content =
+          file.content ||
+          (await fetchFile(`${MOTION_PRIMITIVES_BASE_URL}${file.path}`));
+        const fileName = file.path.split('/').pop()!;
+        allFiles.push({ path: fileName, content });
+      }
+
+      // Create target directory if it doesn't exist
+      if (!existsSync(TARGET_DIR)) {
+        mkdirSync(TARGET_DIR, { recursive: true });
+      }
+
+      // Write all files to components/motion-primitives/
+      for (const { path, content } of allFiles) {
+        const filePath = join(TARGET_DIR, path);
+        writeFileSync(filePath, content);
+        console.log(`✓ Added ${path} to ${filePath}`);
+      }
+
+      spinner.succeed(`Component "${component}" added successfully!`);
+
+      // Install dependencies automatically
+      const depsArray = Array.from(allDependencies);
+      if (depsArray.length > 0) {
+        const installSuccess = installDependencies(depsArray);
+
+        // Add usage example
+        if (componentEntry.title) {
+          const pascalCaseName = component
+            .split('-')
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+            .join('');
+
+          console.log('\nExample usage:');
+          console.log('```jsx');
+          console.log(
+            `import { ${pascalCaseName} } from '@/components/motion-primitives/${component}';`
+          );
+          console.log('\n// Then in your JSX:');
+          console.log(`<${pascalCaseName} />`);
+          console.log('```');
+        }
+      } else {
+        console.log('No additional dependencies needed.');
+      }
+    } catch (error: any) {
+      spinner.fail(`Error: ${error.message || error}`);
+      process.exit(1);
+    }
+  });
+
+program
+  .command('list')
+  .description('List all available motion-primitives components')
+  .action(async () => {
+    const spinner = ora('Fetching components...').start();
+
+    try {
+      // Fetch the motion-primitives registry
+      const motionPrimitivesRegistry = await fetchRegistry(
+        MOTION_PRIMITIVES_REGISTRY_URL
+      );
+
+      spinner.succeed(
+        `Found ${motionPrimitivesRegistry.items.length} components`
+      );
+
+      console.log('\nAvailable components:');
+      console.log('====================\n');
+
+      motionPrimitivesRegistry.items.forEach((item) => {
+        console.log(`${item.name} - ${item.title}`);
+        if (item.description) {
+          console.log(`  ${item.description}`);
+        }
+        if (item.dependencies && item.dependencies.length > 0) {
+          console.log(`  Dependencies: ${item.dependencies.join(', ')}`);
+        }
+        console.log('');
+      });
+
+      console.log('\nTo add a component run:');
+      console.log('  npx motion-primitives add <component-name>');
+    } catch (error: any) {
+      spinner.fail(`Error: ${error.message || error}`);
+      process.exit(1);
+    }
+  });
+
+// Add a default command if no command is provided
+program.action(() => {
+  displayBanner();
+  console.log(
+    'A tool for adding beautiful, animated components to your React app\n'
+  );
+  console.log('Available commands:');
+  console.log('  add <component>  - Add a component to your project');
+  console.log('    Example: npx motion-primitives add text-morph');
+  console.log('\n  list             - List all available components');
+  console.log('    Example: npx motion-primitives list');
+  console.log('\n  --help           - Show help information');
+  console.log('\nDocumentation: https://github.com/ibelick/motion-primitives');
+});
+
+program.parse(process.argv);

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "CommonJS",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}