shadcn-extras 0.1.1 → 0.1.3

package/README.md

@@ -1,4 +1,4 @@
-# Motion Primitives CLI
+# Shadcn Extras CLI
 
 A command-line interface for easily adding beautiful, animated components to your React project.
 
@@ -7,14 +7,14 @@ A command-line interface for easily adding beautiful, animated components to you
 You can use the CLI directly with npx:
 
 ```bash
-npx motion-primitives <command>
+npx shadcn-extras <command>
 ```
 
 Or install it globally:
 
 ```bash
-npm install -g motion-primitives
-motion-primitives <command>
+npm install -g shadcn-extras
+shadcn-extras <command>
 ```
 
 ## Usage
@@ -24,7 +24,7 @@ motion-primitives <command>
 To see all available animated components:
 
 ```bash
-npx motion-primitives list
+npx shadcn-extras list
 ```
 
 This will display a list of all available components along with descriptions and required dependencies.
@@ -34,18 +34,18 @@ This will display a list of all available components along with descriptions and
 To add a specific component to your project:
 
 ```bash
-npx motion-primitives add <component-name>
+npx shadcn-extras add <component-name>
 ```
 
 For example:
 
 ```bash
-npx motion-primitives add text-morph
+npx shadcn-extras add text-morph
 ```
 
 This will:
 
-1. Create a `components/motion-primitives` directory in your project (if it doesn't exist)
+1. Create a `components/shadcn-extras` 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)
 
@@ -60,7 +60,7 @@ Motion Primitives offers a variety of beautiful and performant animated componen
 - **Text Animations**: Text morphing, Text loops, Text scramble effects, Spinning text
 - **And many more!**
 
-For the complete list, run `npx motion-primitives list`.
+For the complete list, run `npx shadcn-extras list`.
 
 ## Dependencies
 

package/dist/index.js

@@ -73,7 +73,7 @@ function displayBanner() {
     console.log(`
 ┌────────────────────────────────────────────┐
 │                                            │
-│           Motion Primitives CLI            │
+│           Shadcn Extras CLI                │
 │                                            │
 │      Beautiful, animated components        │
 │          for your React projects           │
@@ -84,22 +84,22 @@ function displayBanner() {
   `);
 }
 commander_1.program
-    .name('motion-primitives')
+    .name('shadcn-extras')
     .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')
+    .description('Add a shadcn-extras component to your project')
     .action(async (component) => {
     const spinner = (0, ora_1.default)(`Adding ${component}...`).start();
     try {
-        // Fetch the motion-primitives registry
+        // Fetch the shadcn-extras 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');
+            spinner.fail(`Component "${component}" not found in shadcn-extras registry`);
+            console.log('\nRun "npx shadcn-extras list" to see all available components');
             process.exit(1);
         }
         // Collect all files and dependencies
@@ -116,7 +116,7 @@ commander_1.program
         if (!(0, fs_1.existsSync)(TARGET_DIR)) {
             (0, fs_1.mkdirSync)(TARGET_DIR, { recursive: true });
         }
-        // Write all files to components/motion-primitives/
+        // Write all files to components/shadcn-extras/
         for (const { path, content } of allFiles) {
             const filePath = (0, path_1.join)(TARGET_DIR, path);
             (0, fs_1.writeFileSync)(filePath, content);
@@ -135,7 +135,7 @@ commander_1.program
                     .join('');
                 console.log('\nExample usage:');
                 console.log('```jsx');
-                console.log(`import { ${pascalCaseName} } from '@/components/motion-primitives/${component}';`);
+                console.log(`import { ${pascalCaseName} } from '@/components/shadcn-extras/${component}';`);
                 console.log('\n// Then in your JSX:');
                 console.log(`<${pascalCaseName} />`);
                 console.log('```');
@@ -152,11 +152,11 @@ commander_1.program
 });
 commander_1.program
     .command('list')
-    .description('List all available motion-primitives components')
+    .description('List all available shadcn-extras components')
     .action(async () => {
     const spinner = (0, ora_1.default)('Fetching components...').start();
     try {
-        // Fetch the motion-primitives registry
+        // Fetch the shadcn-extras registry
         const motionPrimitivesRegistry = await fetchRegistry(MOTION_PRIMITIVES_REGISTRY_URL);
         spinner.succeed(`Found ${motionPrimitivesRegistry.items.length} components`);
         console.log('\nAvailable components:');
@@ -172,7 +172,7 @@ commander_1.program
             console.log('');
         });
         console.log('\nTo add a component run:');
-        console.log('  npx motion-primitives add <component-name>');
+        console.log('  npx shadcn-extras add <component-name>');
     }
     catch (error) {
         spinner.fail(`Error: ${error.message || error}`);
@@ -185,10 +185,10 @@ commander_1.program.action(() => {
     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('    Example: npx shadcn-extras add text-morph');
     console.log('\n  list             - List all available components');
-    console.log('    Example: npx motion-primitives list');
+    console.log('    Example: npx shadcn-extras list');
     console.log('\n  --help           - Show help information');
-    console.log('\nDocumentation: https://github.com/ibelick/motion-primitives');
+    console.log('\nDocumentation: https://github.com/nayanrdeveloper/shadcn-extras');
 });
 commander_1.program.parse(process.argv);

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "shadcn-extras",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "CLI to add shadcn-extras components to your app",
   "bin": {
     "shadcn-extras": "./dist/index.js"
   },
+  "files": [
+    "dist"
+  ],
   "type": "commonjs",
   "scripts": {
     "build": "tsc",

package/src/index.ts

@@ -1,258 +0,0 @@
-#!/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

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