tweenlabs 0.1.0 → 0.1.2

package/README.md

@@ -5,7 +5,7 @@ description: A free, open-source GSAP animation component library and UI templat
 keywords: TweenLabs, GSAP component library, GSAP Next.js, GSAP animations React, open source animation library, web animation components, Lenis smooth scroll, GSAP ScrollTrigger components, Next.js animation library
 -->
 
-# <img src="public/logo.svg" alt="TweenLabs Logo" width="40" height="40" align="center" /> TweenLabs
+# <img src="https://raw.githubusercontent.com/TweenLabs/TweenLabs/master/public/logo.svg" alt="TweenLabs Logo" width="40" height="40" align="center" /> TweenLabs
 
 
 > The open-source **GSAP animation component library** for Next.js developers — learn, copy, and contribute modern web animation patterns built with **GSAP 3.15**, **Next.js 16**, and **Lenis**.

package/bin/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
-const fs = require("fs");
-const path = require("path");
-const { execSync } = require("child_process");
-const https = require("https");
-const readline = require("readline");
+const fs = require("node:fs");
+const path = require("node:path");
+const { execSync } = require("node:child_process");
+const https = require("node:https");
+const readline = require("node:readline");
 
 // Simple Terminal Colors
 const colors = {
@@ -24,40 +24,44 @@ ${colors.bold}${colors.cyan}TweenLabs CLI${colors.reset} - Install premium GSAP
 ${colors.bold}Usage:${colors.reset}
   npx tweenlabs list                  List all available components
   npx tweenlabs add <component-slug>  Install a specific component
-  npx tweenlabs add all               Install all components
-
-${colors.bold}Examples:${colors.reset}
-  npx tweenlabs list
-  npx tweenlabs add 11-magnetic-dock
-  npx tweenlabs add magnetic-dock
-  npx tweenlabs add all
 
 ${colors.bold}Options:${colors.reset}
-  --help, -h     Show this help message
-  --version, -v  Show version
+  -y, --yes          Skip all prompts (auto-accept defaults & install dependencies)
+  -p, --path <path>  Specify a custom directory to install the component
+  -o, --overwrite    Overwrite existing component files without prompting
+  -h, --help         Show this help message
+  -v, --version      Show version
 `;
 
 // Helper to make GET requests without external dependencies
 function fetchJson(url) {
   return new Promise((resolve, reject) => {
-    const client = url.startsWith("https") ? https : require("http");
-    client.get(url, {
-      headers: { "User-Agent": "tweenlabs-cli" }
-    }, (res) => {
-      if (res.statusCode !== 200) {
-        reject(new Error(`Server returned status code ${res.statusCode}`));
-        return;
-      }
-      let data = "";
-      res.on("data", (chunk) => { data += chunk; });
-      res.on("end", () => {
-        try {
-          resolve(JSON.parse(data));
-        } catch (err) {
-          reject(err);
-        }
-      });
-    }).on("error", reject);
+    const client = url.startsWith("https") ? https : require("node:http");
+    client
+      .get(
+        url,
+        {
+          headers: { "User-Agent": "tweenlabs-cli" },
+        },
+        (res) => {
+          if (res.statusCode !== 200) {
+            reject(new Error(`Server returned status code ${res.statusCode}`));
+            return;
+          }
+          let data = "";
+          res.on("data", (chunk) => {
+            data += chunk;
+          });
+          res.on("end", () => {
+            try {
+              resolve(JSON.parse(data));
+            } catch (err) {
+              reject(err);
+            }
+          });
+        },
+      )
+      .on("error", reject);
   });
 }
 
@@ -71,7 +75,7 @@ function askQuestion(query) {
     rl.question(query, (ans) => {
       rl.close();
       resolve(ans.trim());
-    })
+    }),
   );
 }
 
@@ -86,7 +90,7 @@ function detectPackageManager() {
 async function main() {
   const args = process.argv.slice(2);
 
-  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
+  if (args.includes("--help") || args.includes("-h")) {
     console.log(helpText);
     process.exit(0);
   }
@@ -96,40 +100,93 @@ async function main() {
     process.exit(0);
   }
 
-  if (args[0] === "list") {
-    console.log(`\n${colors.cyan}🔍 Fetching available components list...${colors.reset}`);
-    const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
+  // Parse flags
+  const isYes = args.includes("-y") || args.includes("--yes");
+  const isOverwrite = args.includes("-o") || args.includes("--overwrite");
+
+  // Parse path option
+  let customPath = null;
+  const pathIdx = args.findIndex((arg) => arg === "-p" || arg === "--path");
+  if (pathIdx !== -1 && pathIdx + 1 < args.length) {
+    customPath = args[pathIdx + 1];
+  }
+
+  // Filter out options and their arguments from cleanArgs
+  const cleanArgs = [];
+  for (let i = 0; i < args.length; i++) {
+    if (
+      args[i] === "-y" ||
+      args[i] === "--yes" ||
+      args[i] === "-o" ||
+      args[i] === "--overwrite"
+    ) {
+      continue;
+    }
+    if (args[i] === "-p" || args[i] === "--path") {
+      i++; // skip next arg (the path value)
+      continue;
+    }
+    cleanArgs.push(args[i]);
+  }
+
+  if (cleanArgs.length === 0) {
+    console.log(helpText);
+    process.exit(0);
+  }
+
+  if (cleanArgs[0] === "list") {
+    console.log(
+      `\n${colors.cyan}🔍 Fetching available components list...${colors.reset}`,
+    );
+    const domain =
+      process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
     const url = `${domain}/api/registry/list`;
     try {
       const data = await fetchJson(url);
-      console.log(`\n${colors.bold}${colors.green}Available TweenLabs Components:${colors.reset}\n`);
+      console.log(
+        `\n${colors.bold}${colors.green}Available TweenLabs Components:${colors.reset}\n`,
+      );
       for (const comp of data.components) {
-        console.log(`  ${colors.bold}${colors.cyan}* ${comp.name}${colors.reset}`);
+        console.log(
+          `  ${colors.bold}${colors.cyan}* ${comp.name}${colors.reset}`,
+        );
         console.log(`    Slug:       ${comp.slug} (or ${comp.cleanSlug})`);
         console.log(`    Desc:       ${comp.description}\n`);
       }
       process.exit(0);
     } catch (err) {
-      console.error(`\n${colors.red}❌ Failed to fetch components list.${colors.reset}`);
-      console.error(colors.gray + `Details: ${err.message}` + colors.reset);
+      console.error(
+        `\n${colors.red}❌ Failed to fetch components list.${colors.reset}`,
+      );
+      console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
       process.exit(1);
     }
   }
 
-  if (args[0] !== "add") {
-    console.log(`${colors.red}Error: Unknown command "${args[0]}". Did you mean "add" or "list"?${colors.reset}`);
+  if (cleanArgs[0] !== "add") {
+    console.log(
+      `${colors.red}Error: Unknown command "${cleanArgs[0]}". Did you mean "add" or "list"?${colors.reset}`,
+    );
     console.log(helpText);
     process.exit(1);
   }
 
-  const componentSlug = args[1];
+  const componentSlug = cleanArgs[1];
   if (!componentSlug) {
-    console.log(`${colors.red}Error: Please specify a component slug to add.${colors.reset}`);
-    console.log(colors.gray + "Example: npx tweenlabs add 11-magnetic-dock" + colors.reset);
+    console.log(
+      `${colors.red}Error: Please specify a component slug to add.${colors.reset}`,
+    );
+    console.log(
+      colors.gray +
+        "Example: npx tweenlabs add 11-magnetic-dock" +
+        colors.reset,
+    );
     process.exit(1);
   }
 
-  console.log(`\n${colors.cyan}🔍 Fetching ${colors.bold}${componentSlug}${colors.reset}${colors.cyan} registry data...${colors.reset}`);
+  console.log(
+    `\n${colors.cyan}🔍 Fetching ${colors.bold}${componentSlug}${colors.reset}${colors.cyan} registry data...${colors.reset}`,
+  );
 
   // Determine registry domain (allow local testing via env variable)
   const domain = process.env.TWEENLABS_REGISTRY_URL || "https://tweenlabs.xyz";
@@ -139,24 +196,85 @@ async function main() {
   try {
     componentData = await fetchJson(url);
   } catch (err) {
-    console.error(`\n${colors.red}❌ Failed to fetch component. Make sure the slug is correct and the server is running.${colors.reset}`);
-    console.error(colors.gray + `Details: ${err.message}` + colors.reset);
+    console.error(
+      `\n${colors.red}❌ Failed to fetch component. Make sure the slug is correct and the server is running.${colors.reset}`,
+    );
+    console.error(`${colors.gray}Details: ${err.message}${colors.reset}`);
     process.exit(1);
   }
 
-  console.log(`${colors.green}✓ Component found: ${colors.bold}${componentData.className}${colors.reset}`);
+  console.log(
+    `${colors.green}✓ Component found: ${colors.bold}${componentData.className}${colors.reset}`,
+  );
 
   // Resolve target directory
-  let targetDir = path.join(process.cwd(), "src", "components");
-  if (!fs.existsSync(path.join(process.cwd(), "src"))) {
-    targetDir = path.join(process.cwd(), "components");
+  let targetDir = "";
+  if (customPath) {
+    targetDir = path.resolve(process.cwd(), customPath);
+  } else {
+    // 1. Try to read components.json (shadcn configuration)
+    const componentsJsonPath = path.join(process.cwd(), "components.json");
+    if (fs.existsSync(componentsJsonPath)) {
+      try {
+        const config = JSON.parse(fs.readFileSync(componentsJsonPath, "utf-8"));
+        const compAlias = config.aliases?.components;
+        if (compAlias) {
+          const cleanAlias = compAlias.replace(/^[@~]\//, "");
+          if (
+            fs.existsSync(path.join(process.cwd(), "src")) &&
+            !cleanAlias.startsWith("src/")
+          ) {
+            targetDir = path.join(
+              process.cwd(),
+              "src",
+              cleanAlias,
+              "tweenlabs",
+            );
+          } else {
+            targetDir = path.join(process.cwd(), cleanAlias, "tweenlabs");
+          }
+        }
+      } catch (_err) {
+        // Ignore JSON parse errors
+      }
+    }
+
+    // 2. Fallback if targetDir is still not resolved
+    if (!targetDir) {
+      if (fs.existsSync(path.join(process.cwd(), "src"))) {
+        targetDir = path.join(process.cwd(), "src", "components", "tweenlabs");
+      } else {
+        targetDir = path.join(process.cwd(), "components", "tweenlabs");
+      }
+    }
   }
 
-  const userPathAnswer = await askQuestion(
-    `📁 Where should the component be installed? ${colors.gray}(default: ${targetDir})${colors.reset}: `
+  console.log(
+    `📁 Target directory: ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}`,
   );
-  if (userPathAnswer) {
-    targetDir = path.resolve(process.cwd(), userPathAnswer);
+
+  // Check if any files already exist
+  let hasExistingFiles = false;
+  for (const file of componentData.files) {
+    const filePath = path.join(targetDir, file.name);
+    if (fs.existsSync(filePath)) {
+      hasExistingFiles = true;
+      break;
+    }
+  }
+
+  if (hasExistingFiles && !isOverwrite && !isYes) {
+    const overwriteConfirm = await askQuestion(
+      `⚠️ Component files already exist in ${colors.bold}${path.relative(process.cwd(), targetDir)}${colors.reset}. Overwrite? (y/n) ${colors.gray}[y]${colors.reset}: `,
+    );
+    if (
+      overwriteConfirm &&
+      overwriteConfirm.toLowerCase() !== "y" &&
+      overwriteConfirm.toLowerCase() !== "yes"
+    ) {
+      console.log(`${colors.yellow}Installation cancelled.${colors.reset}`);
+      process.exit(0);
+    }
   }
 
   // Create target directory if it doesn't exist
@@ -169,7 +287,9 @@ async function main() {
   for (const file of componentData.files) {
     const filePath = path.join(targetDir, file.name);
     fs.writeFileSync(filePath, file.content, "utf-8");
-    console.log(`${colors.green}  → Created: ${colors.bold}${path.relative(process.cwd(), filePath)}${colors.reset}`);
+    console.log(
+      `${colors.green}  → Created: ${colors.bold}${path.relative(process.cwd(), filePath)}${colors.reset}`,
+    );
   }
 
   // Check and install dependencies
@@ -178,8 +298,10 @@ async function main() {
     // Read package.json to see if dependencies are already installed
     let pkgJson = {};
     try {
-      pkgJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), "package.json"), "utf-8"));
-    } catch (err) {
+      pkgJson = JSON.parse(
+        fs.readFileSync(path.join(process.cwd(), "package.json"), "utf-8"),
+      );
+    } catch (_err) {
       // Ignore
     }
 
@@ -188,36 +310,39 @@ async function main() {
 
     if (missingDeps.length > 0) {
       const pm = detectPackageManager();
-      console.log(`\n${colors.yellow}📦 Missing dependencies: ${colors.bold}${missingDeps.join(", ")}${colors.reset}`);
-      
-      const installConfirm = await askQuestion(
-        `Do you want to install them using ${colors.bold}${pm}${colors.reset}? (y/n) ${colors.gray}[y]${colors.reset}: `
+      console.log(
+        `\n${colors.cyan}📦 Installing missing dependencies: ${colors.bold}${missingDeps.join(", ")}${colors.reset} using ${pm}...`,
       );
 
-      if (!installConfirm || installConfirm.toLowerCase() === "y" || installConfirm.toLowerCase() === "yes") {
-        console.log(`${colors.cyan}Installing dependencies using ${pm}...${colors.reset}`);
-        let installCmd = "";
-        if (pm === "pnpm") installCmd = `pnpm add ${missingDeps.join(" ")}`;
-        else if (pm === "yarn") installCmd = `yarn add ${missingDeps.join(" ")}`;
-        else if (pm === "bun") installCmd = `bun add ${missingDeps.join(" ")}`;
-        else installCmd = `npm install ${missingDeps.join(" ")}`;
-
-        try {
-          execSync(installCmd, { stdio: "inherit" });
-          console.log(`${colors.green}✓ Dependencies installed successfully!${colors.reset}`);
-        } catch (err) {
-          console.error(`${colors.red}❌ Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`);
-        }
-      } else {
-        console.log(`${colors.yellow}⚠️ Skipping installation. Please make sure to install ${missingDeps.join(", ")} manually.${colors.reset}`);
+      let installCmd = "";
+      if (pm === "pnpm") installCmd = `pnpm add ${missingDeps.join(" ")}`;
+      else if (pm === "yarn") installCmd = `yarn add ${missingDeps.join(" ")}`;
+      else if (pm === "bun") installCmd = `bun add ${missingDeps.join(" ")}`;
+      else installCmd = `npm install ${missingDeps.join(" ")}`;
+
+      try {
+        execSync(installCmd, { stdio: "inherit" });
+        console.log(
+          `${colors.green}✓ Dependencies installed successfully!${colors.reset}`,
+        );
+      } catch (_err) {
+        console.error(
+          `${colors.red}❌ Failed to install dependencies. Please run "${installCmd}" manually.${colors.reset}`,
+        );
       }
     } else {
-      console.log(`\n${colors.green}✓ All dependencies (${dependencies.join(", ")}) already installed.${colors.reset}`);
+      console.log(
+        `\n${colors.green}✓ All dependencies (${dependencies.join(", ")}) already installed.${colors.reset}`,
+      );
     }
   }
 
-  console.log(`\n${colors.green}${colors.bold}🎉 Installation complete!${colors.reset}`);
-  console.log(`You can now import and use the ${colors.bold}${componentData.className}${colors.reset} component in your project.\n`);
+  console.log(
+    `\n${colors.green}${colors.bold}🎉 Installation complete!${colors.reset}`,
+  );
+  console.log(
+    `You can now import and use the ${colors.bold}${componentData.className}${colors.reset} component in your project.\n`,
+  );
 }
 
 main().catch((err) => {

package/package.json

@@ -1,6 +1,15 @@
 {
   "name": "tweenlabs",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TweenLabs/TweenLabs.git"
+  },
+  "homepage": "https://tweenlabs.xyz",
+  "bugs": {
+    "url": "https://github.com/TweenLabs/TweenLabs/issues"
+  },
   "bin": {
     "tweenlabs": "bin/cli.js"
   },