@unciatech/file-manager 0.0.33 → 0.0.34

package/dist/cli.js

@@ -1,21 +1,5 @@
 #!/usr/bin/env node
-
-// cli.ts
-import fs from "fs";
-import path from "path";
-import { execSync } from "child_process";
-import readline from "readline";
-var args = process.argv.slice(2);
-var command = args[0];
-var projectName = args[1];
-var rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout
-});
-var askQuestion = (query) => {
-  return new Promise((resolve) => rl.question(query, resolve));
-};
-var getTemplate = (basePath = "/media") => `"use client";
+import t from'fs';import i from'path';import {execSync}from'child_process';import g from'readline';var p=process.argv.slice(2),v=p[0],l=p[1],u=g.createInterface({input:process.stdin,output:process.stdout}),x=o=>new Promise(e=>u.question(o,e)),h=(o="/media")=>`"use client";
 
 import React, { Suspense } from "react";
 import { FileManager, MockProvider } from "@unciatech/file-manager";
@@ -30,117 +14,150 @@ export default function FileManagerDemo() {
           allowedFileTypes={["audios", "videos", "images", "files"]}
           viewMode="grid"
           provider={mockProvider}
-          basePath="${basePath}"
+          basePath="${o}"
         />
       </Suspense>
     </div>
   );
 }
-`;
-async function main() {
-  if (command !== "init") {
-    console.log("Usage: npx @unciatech/file-manager init [project-name]");
-    process.exit(0);
-  }
-  if (!projectName) {
-    console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");
-    let targetDir2 = process.cwd();
-    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 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 a new application: ${projectName}
-`);
-  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 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 {
-    if (choice === "1") {
-      await scaffoldNextjs(projectName, targetDir);
-    } else if (choice === "2") {
-      await scaffoldVite(projectName, targetDir);
-    } else {
-      console.log("Canceled.");
-      process.exit(0);
-    }
-  } 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 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";
+`;async function w(){if(v!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!l){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();t.existsSync(i.join(process.cwd(),"components"))?s=i.join(process.cwd(),"components"):t.existsSync(i.join(process.cwd(),"src","components"))&&(s=i.join(process.cwd(),"src","components"));let a=i.join(s,"FileManagerDemo.tsx");t.existsSync(a)&&(console.error(`\u274C Error: ${a} already exists.`),process.exit(1)),t.writeFileSync(a,h("/"),"utf-8"),console.log(`\u2705 Success! Created ${a}`),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 a new application: ${l}
+`),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");let o=await x(`
+Select an option (1-3): `),e=i.join(process.cwd(),l);t.existsSync(e)&&(console.error(`
+\u274C Error: Directory "${l}" already exists in ${process.cwd()}.`),console.error("   Please choose a different project name or delete the existing directory first."),u.close(),process.exit(1));try{o==="1"?await b(l,e):o==="2"?await y(l,e):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
+\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function b(o,e){console.log(`
+\u{1F4E6} Creating Next.js application (this may take a minute)...`),execSync(`npx create-next-app@latest ${o} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
+\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:e,stdio:"inherit"});let s=i.join(e,"src","app","page.tsx");t.writeFileSync(s,`"use client";
+
+import { redirect } from "next/navigation";
 
 export default function Home() {
+  redirect("/media");
+}
+`);let a=i.join(e,"src","app","media","[[...path]]");t.mkdirSync(a,{recursive:true}),t.writeFileSync(i.join(a,"page.tsx"),`"use client";
+
+import { Suspense, useState } from "react";
+import { FileManager, MockProvider } from "@unciatech/file-manager";
+import Link from "next/link";
+
+function MediaPageContent() {
+  const [provider] = useState(() => new MockProvider());
+
   return (
-    <main className="min-h-screen bg-neutral-50">
-      <FileManagerDemo />
-    </main>
+    <div className="h-screen w-full flex flex-col">
+      <div className="flex gap-4 p-4 border-b border-border items-center justify-between">
+        <h1 className="text-xl font-bold">Full Page View</h1>
+        <Link
+          href="/modal-demo"
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium"
+        >
+          Go to Modal Demo
+        </Link>
+      </div>
+      <div className="flex-1 relative overflow-hidden">
+        <FileManager
+          allowedFileTypes={["audios", "videos", "images", "files"]}
+          viewMode="grid"
+          provider={provider}
+          basePath="/media"
+        />
+      </div>
+    </div>
   );
 }
-`);
-  const mediaRouteDir = path.join(targetDir, "src", "app", "media", "[[...path]]");
-  fs.mkdirSync(mediaRouteDir, { recursive: true });
-  fs.writeFileSync(
-    path.join(mediaRouteDir, "page.tsx"),
-    `import FileManagerDemo from "@/components/FileManagerDemo";
 
 export default function MediaPage() {
   return (
-    <main className="min-h-screen bg-neutral-50">
-      <FileManagerDemo />
-    </main>
+    <Suspense fallback={<div className="p-4">Loading Media Library...</div>}>
+      <MediaPageContent />
+    </Suspense>
+  );
+}
+`);let d=i.join(e,"src","app","modal-demo");t.mkdirSync(d,{recursive:true}),t.writeFileSync(i.join(d,"page.tsx"),`"use client";
+
+import { Suspense, useState } from "react";
+import { FileManagerModal, MockProvider } from "@unciatech/file-manager";
+import type { FileMetaData } from "@unciatech/file-manager";
+import Link from "next/link";
+
+function ModalDemoContent() {
+  const [provider] = useState(() => new MockProvider());
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<FileMetaData[]>([]);
+
+  return (
+    <div className="p-10 flex flex-col items-start gap-6 min-h-screen w-full">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">File Manager Demo</h1>
+        <p className="text-gray-500">Select files using the modal or browse the full page view.</p>
+      </div>
+
+      <div className="flex gap-4">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="px-6 py-2.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium shadow-sm transition-colors"
+        >
+          Open File Picker Modal
+        </button>
+        <Link
+          href="/media"
+          className="px-6 py-2.5 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-700 cursor-pointer text-sm font-medium transition-colors"
+        >
+          Go to Full Page View
+        </Link>
+      </div>
+
+      {selectedFiles.length > 0 && (
+        <div className="w-full mt-8">
+          <h2 className="text-xl font-semibold mb-4 border-b pb-2">
+            Selected Files ({selectedFiles.length})
+          </h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            {selectedFiles.map((file, idx) => (
+              <div key={idx} className="border rounded-lg p-3 flex flex-col items-center gap-3 shadow-sm">
+                <div className="w-full aspect-square bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden flex items-center justify-center relative">
+                  {file.url && file.mime?.startsWith("image/") ? (
+                    <img src={file.url} alt={file.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <span className="text-gray-400 font-mono text-xs p-2 overflow-hidden text-ellipsis">
+                      {file.ext?.toUpperCase() || "FILE"}
+                    </span>
+                  )}
+                </div>
+                <div className="w-full text-center">
+                  <p className="text-sm font-medium truncate w-full" title={file.name}>{file.name}</p>
+                  <p className="text-xs text-gray-500 mt-0.5">{(file.size / 1024).toFixed(1)} KB</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <FileManagerModal
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        provider={provider}
+        allowedFileTypes={["images", "videos", "audios", "files"]}
+        onFilesSelected={(files: FileMetaData[]) => {
+          setSelectedFiles(files);
+          setIsOpen(false);
+        }}
+        basePath="/media"
+      />
+    </div>
   );
 }
-`
+
+export default function ModalDemoPage() {
+  return (
+    <Suspense fallback={<div className="p-10">Loading...</div>}>
+      <ModalDemoContent />
+    </Suspense>
   );
-  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";
+}
+`);let r=i.join(e,"src","app","layout.tsx");if(t.existsSync(r)){let n=t.readFileSync(r,"utf8");n.includes("@unciatech/file-manager/styles")||(n=n.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
+$1`),t.writeFileSync(r,n));}let m=i.join(e,"src","app","globals.css");t.writeFileSync(m,`@import "tailwindcss";
 @import "@unciatech/file-manager/styles";
 @import "tw-animate-css";
 
@@ -150,17 +167,9 @@ $1`
   --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 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 @unciatech/file-manager", { cwd: targetDir, stdio: "inherit" });
-  const viteConfigPath = path.join(targetDir, "vite.config.ts");
-  const viteConfig = `import { defineConfig } from 'vite'
+`),f(o);}async function y(o,e){console.log(`
+\u{1F4E6} Creating Vite React application...`),execSync(`npm create vite@latest ${o} -- --template react-ts`,{stdio:"inherit"}),console.log(`
+\u{1F4E6} Installing dependencies (Tailwind + File Manager + React Router)...`),execSync("npm install",{cwd:e,stdio:"inherit"}),execSync("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager react-router-dom",{cwd:e,stdio:"inherit"});let s=i.join(e,"vite.config.ts");t.writeFileSync(s,`import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 
@@ -170,38 +179,134 @@ export default defineConfig({
     tailwindcss(),
   ],
 })
-`;
-  fs.writeFileSync(viteConfigPath, viteConfig);
-  const cssPath = path.join(targetDir, "src", "index.css");
-  fs.writeFileSync(cssPath, `@import "tailwindcss";
+`);let d=i.join(e,"src","index.css");t.writeFileSync(d,`@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";
+`);let r=i.join(e,"src","main.tsx");t.writeFileSync(r,`import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)
+`);let m=i.join(e,"src","App.tsx");t.writeFileSync(m,`import { useState } from 'react'
+import { useNavigate, Routes, Route, Link } from 'react-router-dom'
+import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
+import type { FileMetaData } from '@unciatech/file-manager'
+
+const provider = new MockProvider()
+
+function FullPage() {
+  const navigate = useNavigate()
 
-function App() {
   return (
-    <div className="min-h-screen bg-neutral-50">
-      <FileManagerDemo />
+    <div className="h-screen w-full flex flex-col">
+      <div className="flex gap-4 p-4 border-b border-border items-center justify-between">
+        <h1 className="text-xl font-bold">Full Page View</h1>
+        <Link
+          to="/"
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium"
+        >
+          Back to Modal Demo
+        </Link>
+      </div>
+
+      <div className="flex-1 relative overflow-hidden">
+        <FileManager
+          provider={provider}
+          basePath="full"
+          allowedFileTypes={["images", "videos", "audios", "files"]}
+          viewMode="grid"
+          onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
+        />
+      </div>
     </div>
-  );
+  )
 }
 
-export default App;
-`);
-  printSuccess(projectName2, "npm run dev");
+function ModalDemo() {
+  const navigate = useNavigate()
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [selectedFiles, setSelectedFiles] = useState<FileMetaData[]>([])
+
+  return (
+    <div className="p-10 flex flex-col items-start gap-6 min-h-screen w-full bg-background text-foreground">
+      <div>
+        <h1 className="text-3xl font-bold mb-2">File Manager Demo</h1>
+        <p className="text-muted-foreground">Select files using the modal or browse the full page view.</p>
+      </div>
+
+      <div className="flex gap-4">
+        <button
+          onClick={() => setIsModalOpen(true)}
+          className="px-6 py-2.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 cursor-pointer text-sm font-medium shadow-sm transition-colors"
+        >
+          Open File Picker Modal
+        </button>
+        <Link
+          to="/full"
+          className="px-6 py-2.5 bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 rounded-md hover:bg-zinc-200 dark:hover:bg-zinc-700 cursor-pointer text-sm font-medium transition-colors"
+        >
+          Go to Full Page View
+        </Link>
+      </div>
+
+      {selectedFiles.length > 0 && (
+        <div className="w-full mt-8">
+          <h2 className="text-xl font-semibold mb-4 border-b pb-2">Selected Files ({selectedFiles.length})</h2>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+            {selectedFiles.map((file, idx) => (
+              <div key={idx} className="border border-border rounded-lg p-3 flex flex-col items-center gap-3 bg-card shadow-sm">
+                <div className="w-full aspect-square bg-muted rounded-md overflow-hidden flex items-center justify-center relative">
+                  {file.url && file.mime?.startsWith('image/') ? (
+                    <img src={file.url} alt={file.name} className="w-full h-full object-cover" />
+                  ) : (
+                    <span className="text-muted-foreground font-mono text-xs p-2 overflow-hidden text-ellipsis">{file.ext?.toUpperCase() || 'FILE'}</span>
+                  )}
+                </div>
+                <div className="w-full text-center">
+                  <p className="text-sm font-medium truncate w-full" title={file.name}>{file.name}</p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{(file.size / 1024).toFixed(1)} KB</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <FileManagerModal
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        provider={provider}
+        basePath="/"
+        allowedFileTypes={["images", "videos", "audios", "files"]}
+        onFilesSelected={(files: FileMetaData[]) => {
+          setSelectedFiles(files)
+        }}
+        onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
+      />
+    </div>
+  )
 }
-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");
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<ModalDemo />} />
+      <Route path="/full/*" element={<FullPage />} />
+    </Routes>
+  )
 }
-main();
+
+export default App
+`);let n=i.join(e,"src","App.css");t.existsSync(n)&&t.unlinkSync(n),f(o,"npm run dev");}function f(o,e="npm run dev"){console.log(`
+=========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
+Next steps:`),console.log(`  cd ${o}`),console.log(`  ${e}`),console.log(`
+Enjoy building! \u{1F5C2}\uFE0F
+`);}w();