@unciatech/file-manager 0.0.32 → 0.0.33

package/dist/cli.js

@@ -1,10 +1,10 @@
 #!/usr/bin/env node
 
 // cli.ts
-import * as fs from "fs";
-import * as path from "path";
+import fs from "fs";
+import path from "path";
 import { execSync } from "child_process";
-import * as readline from "readline";
+import readline from "readline";
 var args = process.argv.slice(2);
 var command = args[0];
 var projectName = args[1];
@@ -12,14 +12,16 @@ var rl = readline.createInterface({
   input: process.stdin,
   output: process.stdout
 });
-var askQuestion = (query) => new Promise((resolve) => rl.question(query, resolve));
-var TEMPLATE = `"use client";
+var askQuestion = (query) => {
+  return new Promise((resolve) => rl.question(query, resolve));
+};
+var getTemplate = (basePath = "/media") => `"use client";
 
-import React, { Suspense, useMemo } from "react";
+import React, { Suspense } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
 
 export default function FileManagerDemo() {
-  const provider = useMemo(() => new MockProvider(), []);
+  const mockProvider = new MockProvider();
 
   return (
     <div className="h-screen w-full">
@@ -27,7 +29,8 @@ export default function FileManagerDemo() {
         <FileManager
           allowedFileTypes={["audios", "videos", "images", "files"]}
           viewMode="grid"
-          provider={provider}
+          provider={mockProvider}
+          basePath="${basePath}"
         />
       </Suspense>
     </div>
@@ -40,30 +43,39 @@ async function main() {
     process.exit(0);
   }
   if (!projectName) {
-    console.log("\u{1F680} Generating <FileManagerDemo /> component...");
+    console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");
     let targetDir2 = process.cwd();
-    if (fs.existsSync(path.join(process.cwd(), "src/components"))) {
-      targetDir2 = path.join(process.cwd(), "src/components");
-    } else if (fs.existsSync(path.join(process.cwd(), "components"))) {
+    if (fs.existsSync(path.join(process.cwd(), "components"))) {
       targetDir2 = path.join(process.cwd(), "components");
+    } else if (fs.existsSync(path.join(process.cwd(), "src", "components"))) {
+      targetDir2 = path.join(process.cwd(), "src", "components");
     }
-    const file = path.join(targetDir2, "FileManagerDemo.tsx");
-    fs.writeFileSync(file, TEMPLATE);
-    console.log(`\u2705 Created ${file}`);
+    const targetFile = path.join(targetDir2, "FileManagerDemo.tsx");
+    if (fs.existsSync(targetFile)) {
+      console.error(`\u274C Error: ${targetFile} already exists.`);
+      process.exit(1);
+    }
+    fs.writeFileSync(targetFile, getTemplate("/"), "utf-8");
+    console.log(`\u2705 Success! Created ${targetFile}`);
+    console.log("");
+    console.log("You can now import and render <FileManagerDemo /> anywhere in your application.");
+    console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!");
     process.exit(0);
   }
   console.log(`
-\u{1F680} Initializing project: ${projectName}
+\u{1F680} Initializing a new application: ${projectName}
 `);
-  console.log("Choose framework:");
-  console.log("1) Next.js");
-  console.log("2) Vite (React)");
-  console.log("3) Cancel");
-  const choice = await askQuestion("\nSelect option (1-3): ");
-  rl.close();
+  console.log("Which framework would you like to use?");
+  console.log("  1) Next.js (App Router, Tailwind v4)");
+  console.log("  2) Vite (React, Tailwind v4)");
+  console.log("  3) Cancel");
+  const choice = await askQuestion("\nSelect an option (1-3): ");
   const targetDir = path.join(process.cwd(), projectName);
   if (fs.existsSync(targetDir)) {
-    console.error("\u274C Directory already exists");
+    console.error(`
+\u274C Error: Directory "${projectName}" already exists in ${process.cwd()}.`);
+    console.error(`   Please choose a different project name or delete the existing directory first.`);
+    rl.close();
     process.exit(1);
   }
   try {
@@ -73,34 +85,40 @@ async function main() {
       await scaffoldVite(projectName, targetDir);
     } else {
       console.log("Canceled.");
+      process.exit(0);
     }
-  } catch (e) {
-    console.error("\u274C Error:", e);
+  } catch (error) {
+    console.error("\n\u274C Scaffolding failed:", error);
+    process.exit(1);
   }
+  process.exit(0);
 }
 async function scaffoldNextjs(projectName2, targetDir) {
-  console.log("\n\u{1F4E6} Creating Next.js app...");
-  execSync(
-    `npx create-next-app@latest ${projectName2} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,
-    { stdio: "inherit" }
-  );
-  console.log("\n\u{1F4E6} Installing dependencies...");
-  execSync("npm install @unciatech/file-manager tailwindcss-animate", {
-    cwd: targetDir,
-    stdio: "inherit"
-  });
-  const componentsDir = path.join(targetDir, "src/components");
-  fs.mkdirSync(componentsDir, { recursive: true });
-  fs.writeFileSync(
-    path.join(componentsDir, "FileManagerDemo.tsx"),
-    TEMPLATE
+  console.log("\n\u{1F4E6} Creating Next.js application (this may take a minute)...");
+  execSync(`npx create-next-app@latest ${projectName2} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`, { stdio: "inherit" });
+  console.log("\n\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...");
+  execSync("npm install @unciatech/file-manager tailwindcss-animate", { cwd: targetDir, stdio: "inherit" });
+  const componentsDir = path.join(targetDir, "src", "components");
+  if (!fs.existsSync(componentsDir)) fs.mkdirSync(componentsDir, { recursive: true });
+  fs.writeFileSync(path.join(componentsDir, "FileManagerDemo.tsx"), getTemplate("/media"), "utf-8");
+  const pagePath = path.join(targetDir, "src", "app", "page.tsx");
+  fs.writeFileSync(pagePath, `import FileManagerDemo from "@/components/FileManagerDemo";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <FileManagerDemo />
+    </main>
   );
-  const pagePath = path.join(targetDir, "src/app/page.tsx");
+}
+`);
+  const mediaRouteDir = path.join(targetDir, "src", "app", "media", "[[...path]]");
+  fs.mkdirSync(mediaRouteDir, { recursive: true });
   fs.writeFileSync(
-    pagePath,
+    path.join(mediaRouteDir, "page.tsx"),
     `import FileManagerDemo from "@/components/FileManagerDemo";
 
-export default function Home() {
+export default function MediaPage() {
   return (
     <main className="min-h-screen bg-neutral-50">
       <FileManagerDemo />
@@ -109,49 +127,61 @@ export default function Home() {
 }
 `
   );
+  const layoutPath = path.join(targetDir, "src", "app", "layout.tsx");
+  if (fs.existsSync(layoutPath)) {
+    let layoutContent = fs.readFileSync(layoutPath, "utf8");
+    if (!layoutContent.includes("@unciatech/file-manager/styles")) {
+      layoutContent = layoutContent.replace(
+        /^(import type)/m,
+        `import '@unciatech/file-manager/styles';
+$1`
+      );
+      fs.writeFileSync(layoutPath, layoutContent);
+    }
+  }
+  const cssPath = path.join(targetDir, "src", "app", "globals.css");
+  fs.writeFileSync(cssPath, `@import "tailwindcss";
+@import "@unciatech/file-manager/styles";
+@import "tw-animate-css";
+
+@source "../../node_modules/@unciatech/file-manager";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+`);
   printSuccess(projectName2);
 }
 async function scaffoldVite(projectName2, targetDir) {
-  console.log("\n\u{1F4E6} Creating Vite app...");
-  execSync(
-    `npm create vite@latest ${projectName2} -- --template react-ts`,
-    { stdio: "inherit" }
-  );
-  console.log("\n\u{1F4E6} Installing dependencies...");
+  console.log("\n\u{1F4E6} Creating Vite React application...");
+  execSync(`npm create vite@latest ${projectName2} -- --template react-ts`, { stdio: "inherit" });
+  console.log("\n\u{1F4E6} Installing dependencies (Tailwind + File Manager)...");
   execSync("npm install", { cwd: targetDir, stdio: "inherit" });
-  execSync(
-    "npm install tailwindcss @tailwindcss/vite tw-animate-css @unciatech/file-manager",
-    { cwd: targetDir, stdio: "inherit" }
-  );
+  execSync("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager", { cwd: targetDir, stdio: "inherit" });
+  const viteConfigPath = path.join(targetDir, "vite.config.ts");
   const viteConfig = `import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
 export default defineConfig({
-  plugins: [react(), tailwindcss()],
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
 })
 `;
-  fs.writeFileSync(path.join(targetDir, "vite.config.ts"), viteConfig);
-  const css = `@import "tailwindcss";
-@import "tw-animate-css";
-
-@source "../node_modules/@unciatech/file-manager/dist/**/*.{js,ts,jsx,tsx}";
-`;
-  fs.writeFileSync(path.join(targetDir, "src/index.css"), css);
-  const mainFile = path.join(targetDir, "src/main.tsx");
-  let main2 = fs.readFileSync(mainFile, "utf8");
-  if (!main2.includes("@unciatech/file-manager/styles")) {
-    main2 = `import "@unciatech/file-manager/styles";
-` + main2;
-  }
-  fs.writeFileSync(mainFile, main2);
-  const compDir = path.join(targetDir, "src/components");
-  fs.mkdirSync(compDir, { recursive: true });
-  fs.writeFileSync(
-    path.join(compDir, "FileManagerDemo.tsx"),
-    TEMPLATE
-  );
-  const app = `import FileManagerDemo from "./components/FileManagerDemo";
+  fs.writeFileSync(viteConfigPath, viteConfig);
+  const cssPath = path.join(targetDir, "src", "index.css");
+  fs.writeFileSync(cssPath, `@import "tailwindcss";
+@import "@unciatech/file-manager/styles";
+@source "../node_modules/@unciatech/file-manager";
+`);
+  const componentsDir = path.join(targetDir, "src", "components");
+  if (!fs.existsSync(componentsDir)) fs.mkdirSync(componentsDir, { recursive: true });
+  fs.writeFileSync(path.join(componentsDir, "FileManagerDemo.tsx"), getTemplate("/"), "utf-8");
+  const appPath = path.join(targetDir, "src", "App.tsx");
+  fs.writeFileSync(appPath, `import FileManagerDemo from "./components/FileManagerDemo";
 
 function App() {
   return (
@@ -162,18 +192,16 @@ function App() {
 }
 
 export default App;
-`;
-  fs.writeFileSync(path.join(targetDir, "src/App.tsx"), app);
-  printSuccess(projectName2);
-}
-function printSuccess(projectName2) {
-  console.log("\n=================================");
-  console.log("\u{1F389} Project ready!");
-  console.log("=================================");
-  console.log(`
-Next steps:`);
-  console.log(`cd ${projectName2}`);
-  console.log(`npm run dev
 `);
+  printSuccess(projectName2, "npm run dev");
+}
+function printSuccess(projectName2, devCmd = "npm run dev") {
+  console.log("\n=========================================");
+  console.log("\u{1F389} Your Media Library application is ready!");
+  console.log("=========================================");
+  console.log("\nNext steps:");
+  console.log(`  cd ${projectName2}`);
+  console.log(`  ${devCmd}`);
+  console.log("\nEnjoy building! \u{1F5C2}\uFE0F\n");
 }
 main();