@unciatech/file-manager 0.0.2 → 0.0.4

package/README.md

@@ -19,6 +19,9 @@ It supports deep folder nesting, drag-and-drop file uploads, metadata management
 - **Icons**: Lucide React
 - **Notifications**: Sonner
 
+> [!WARNING]
+> This library is currently in **BETA**. Please report any bugs or feature requests on the GitHub issues page.
+
 ## 🚀 How to Install and Use in Your Project
 
 If you want to integrate this File Manager into your own Next.js or React application, follow this step-by-step guide.
@@ -30,12 +33,20 @@ Install the library via NPM:
 npm install @unciatech/file-manager
 ```
 
-**(Optional) Quick Start Scaffolding**
-Instead of setting everything up manually, you can run our initialization script to immediately generate a working `FileManagerDemo.tsx` file inside your project!
+**(Optional) ⚡ Magic Quick Start Scaffolding**
+Instead of setting everything up manually, our incredibly powerful init script can generate files for you!
+
+**A) If you just want the component inside your CURRENT project:**
 ```bash
 npx @unciatech/file-manager init
 ```
 
+**B) If you want to spawn a brand new full-stack application instantly:**
+```bash
+npx @unciatech/file-manager init my-media-app
+```
+*It will ask if you want Next.js or Vite (React), install Tailwind, install the package, and set everything up for you!*
+
 **(CRITICAL) Configure Tailwind CSS:**
 Because this library uses Tailwind CSS, you MUST tell your Tailwind compiler to scan the library components for utility classes, otherwise it will render with zero styles!
 

package/dist/cli.js

@@ -1,26 +1,66 @@
 #!/usr/bin/env node
-"use strict";var l=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var f=(e,o,r,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of p(o))!g.call(e,n)&&n!==r&&c(e,n,{get:()=>o[n],enumerable:!(s=m(o,n))||s.enumerable});return e};var a=(e,o,r)=>(r=e!=null?l(d(e)):{},f(o||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e));var t=a(require("fs")),i=a(require("path")),u=process.argv.slice(2);if(u[0]==="init"){console.log("\u{1F680} Initializing @unciatech/file-manager...");let e=`"use client";
+"use strict";var y=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var F=(n,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!S.call(n,t)&&t!==o&&d(n,t,{get:()=>e[t],enumerable:!(c=x(e,t))||c.enumerable});return n};var p=(n,e,o)=>(o=n!=null?y(h(n)):{},F(e||!n||!n.__esModule?d(o,"default",{value:n,enumerable:!0}):o,n));var i=p(require("fs")),s=p(require("path")),a=require("child_process"),g=p(require("readline")),u=process.argv.slice(2),j=u[0],l=u[1],M=g.default.createInterface({input:process.stdin,output:process.stdout}),C=n=>new Promise(e=>M.question(n,e)),m=`"use client";
 
-import React from "react";
-import { FileManagerProvider } from "@unciatech/file-manager";
-import { FileManager } from "@unciatech/file-manager";
-import { MockProvider } from "@unciatech/file-manager";
+import React, { Suspense } from "react";
+import { FileManager, MockProvider } from "@unciatech/file-manager";
 
 export default function FileManagerDemo() {
-  // Instantiate the mock provider for demonstration purposes
   const mockProvider = new MockProvider();
 
   return (
     <div className="h-screen w-full">
-      <FileManagerProvider
-        mode="page"
-        selectionMode="multiple"
-        allowedFileTypes={["images", "videos", "audios", "files"]}
-        provider={mockProvider}
-      >
-        <FileManager />
-      </FileManagerProvider>
+      <Suspense fallback={<div className="p-4">Loading Media Library...</div>}>
+        <FileManager
+          allowedFileTypes={["audios", "videos", "images", "files"]}
+          viewMode="grid"
+          provider={mockProvider}
+        />
+      </Suspense>
     </div>
   );
 }
-`,o=process.cwd();t.default.existsSync(i.default.join(process.cwd(),"components"))?o=i.default.join(process.cwd(),"components"):t.default.existsSync(i.default.join(process.cwd(),"src","components"))&&(o=i.default.join(process.cwd(),"src","components"));let r=i.default.join(o,"FileManagerDemo.tsx");t.default.existsSync(r)&&(console.error(`\u274C Error: ${r} already exists.`),process.exit(1));try{t.default.writeFileSync(r,e,"utf-8"),console.log(`\u2705 Success! Created ${r}`),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!")}catch(s){console.error("\u274C Failed to create initialization file:",s),process.exit(1)}}else console.log("Usage: npx @unciatech/file-manager init");
+`;async function P(){if(j!=="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 o=process.cwd();i.default.existsSync(s.default.join(process.cwd(),"components"))?o=s.default.join(process.cwd(),"components"):i.default.existsSync(s.default.join(process.cwd(),"src","components"))&&(o=s.default.join(process.cwd(),"src","components"));let c=s.default.join(o,"FileManagerDemo.tsx");i.default.existsSync(c)&&(console.error(`\u274C Error: ${c} already exists.`),process.exit(1)),i.default.writeFileSync(c,m,"utf-8"),console.log(`\u2705 Success! Created ${c}`),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 n=await C(`
+Select an option (1-3): `),e=s.default.join(process.cwd(),l);try{n==="1"?await k(l,e):n==="2"?await b(l,e):(console.log("Canceled."),process.exit(0))}catch(o){console.error(`
+\u274C Scaffolding failed:`,o),process.exit(1)}process.exit(0)}async function k(n,e){console.log(`
+\u{1F4E6} Creating Next.js application (this may take a minute)...`),(0,a.execSync)(`npx create-next-app@latest ${n} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
+\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),(0,a.execSync)("npm install @unciatech/file-manager tailwindcss-animate",{cwd:e,stdio:"inherit"});let o=s.default.join(e,"src","components");i.default.existsSync(o)||i.default.mkdirSync(o,{recursive:!0}),i.default.writeFileSync(s.default.join(o,"FileManagerDemo.tsx"),m,"utf-8");let c=s.default.join(e,"src","app","page.tsx");i.default.writeFileSync(c,`import FileManagerDemo from "@/components/FileManagerDemo";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <FileManagerDemo />
+    </main>
+  );
+}
+`);let t=s.default.join(e,"src","app","globals.css");if(i.default.existsSync(t)){let r=i.default.readFileSync(t,"utf8");r.includes("@source")||(r=`@import "tailwindcss";
+@plugin "tailwindcss-animate";
+@source "../../node_modules/@unciatech/file-manager/dist";
+
+`+r.replace('@import "tailwindcss";',""),i.default.writeFileSync(t,r))}f(n)}async function b(n,e){console.log(`
+\u{1F4E6} Creating Vite React application...`),(0,a.execSync)(`npm create vite@latest ${n} -- --template react-ts`,{stdio:"inherit"}),console.log(`
+\u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),(0,a.execSync)("npm install",{cwd:e,stdio:"inherit"}),(0,a.execSync)("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:e,stdio:"inherit"});let o=s.default.join(e,"vite.config.ts");i.default.writeFileSync(o,`import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})
+`);let t=s.default.join(e,"src","index.css");i.default.writeFileSync(t,`@import "tailwindcss";
+@source "../../node_modules/@unciatech/file-manager/dist";
+`);let r=s.default.join(e,"src","components");i.default.existsSync(r)||i.default.mkdirSync(r,{recursive:!0}),i.default.writeFileSync(s.default.join(r,"FileManagerDemo.tsx"),m,"utf-8");let w=s.default.join(e,"src","App.tsx");i.default.writeFileSync(w,`import FileManagerDemo from "./components/FileManagerDemo";
+
+function App() {
+  return (
+    <div className="min-h-screen bg-neutral-50">
+      <FileManagerDemo />
+    </div>
+  );
+}
+
+export default App;
+`),f(n,"npm run dev")}function f(n,e="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 ${n}`),console.log(`  ${e}`),console.log("\\nEnjoy building! \u{1F5C2}\uFE0F\\n")}P();

package/dist/cli.mjs

@@ -1,26 +1,66 @@
 #!/usr/bin/env node
-import r from"fs";import e from"path";var s=process.argv.slice(2);if(s[0]==="init"){console.log("\u{1F680} Initializing @unciatech/file-manager...");let n=`"use client";
+import n from"fs";import i from"path";import{execSync as l}from"child_process";import u from"readline";var m=process.argv.slice(2),f=m[0],a=m[1],w=u.createInterface({input:process.stdin,output:process.stdout}),y=o=>new Promise(e=>w.question(o,e)),p=`"use client";
 
-import React from "react";
-import { FileManagerProvider } from "@unciatech/file-manager";
-import { FileManager } from "@unciatech/file-manager";
-import { MockProvider } from "@unciatech/file-manager";
+import React, { Suspense } from "react";
+import { FileManager, MockProvider } from "@unciatech/file-manager";
 
 export default function FileManagerDemo() {
-  // Instantiate the mock provider for demonstration purposes
   const mockProvider = new MockProvider();
 
   return (
     <div className="h-screen w-full">
-      <FileManagerProvider
-        mode="page"
-        selectionMode="multiple"
-        allowedFileTypes={["images", "videos", "audios", "files"]}
-        provider={mockProvider}
-      >
-        <FileManager />
-      </FileManagerProvider>
+      <Suspense fallback={<div className="p-4">Loading Media Library...</div>}>
+        <FileManager
+          allowedFileTypes={["audios", "videos", "images", "files"]}
+          viewMode="grid"
+          provider={mockProvider}
+        />
+      </Suspense>
     </div>
   );
 }
-`,i=process.cwd();r.existsSync(e.join(process.cwd(),"components"))?i=e.join(process.cwd(),"components"):r.existsSync(e.join(process.cwd(),"src","components"))&&(i=e.join(process.cwd(),"src","components"));let o=e.join(i,"FileManagerDemo.tsx");r.existsSync(o)&&(console.error(`\u274C Error: ${o} already exists.`),process.exit(1));try{r.writeFileSync(o,n,"utf-8"),console.log(`\u2705 Success! Created ${o}`),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!")}catch(t){console.error("\u274C Failed to create initialization file:",t),process.exit(1)}}else console.log("Usage: npx @unciatech/file-manager init");
+`;async function x(){if(f!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!a){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();n.existsSync(i.join(process.cwd(),"components"))?s=i.join(process.cwd(),"components"):n.existsSync(i.join(process.cwd(),"src","components"))&&(s=i.join(process.cwd(),"src","components"));let c=i.join(s,"FileManagerDemo.tsx");n.existsSync(c)&&(console.error(`\u274C Error: ${c} already exists.`),process.exit(1)),n.writeFileSync(c,p,"utf-8"),console.log(`\u2705 Success! Created ${c}`),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: ${a}
+`),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 y(`
+Select an option (1-3): `),e=i.join(process.cwd(),a);try{o==="1"?await v(a,e):o==="2"?await h(a,e):(console.log("Canceled."),process.exit(0))}catch(s){console.error(`
+\u274C Scaffolding failed:`,s),process.exit(1)}process.exit(0)}async function v(o,e){console.log(`
+\u{1F4E6} Creating Next.js application (this may take a minute)...`),l(`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)...`),l("npm install @unciatech/file-manager tailwindcss-animate",{cwd:e,stdio:"inherit"});let s=i.join(e,"src","components");n.existsSync(s)||n.mkdirSync(s,{recursive:!0}),n.writeFileSync(i.join(s,"FileManagerDemo.tsx"),p,"utf-8");let c=i.join(e,"src","app","page.tsx");n.writeFileSync(c,`import FileManagerDemo from "@/components/FileManagerDemo";
+
+export default function Home() {
+  return (
+    <main className="min-h-screen bg-neutral-50">
+      <FileManagerDemo />
+    </main>
+  );
+}
+`);let r=i.join(e,"src","app","globals.css");if(n.existsSync(r)){let t=n.readFileSync(r,"utf8");t.includes("@source")||(t=`@import "tailwindcss";
+@plugin "tailwindcss-animate";
+@source "../../node_modules/@unciatech/file-manager/dist";
+
+`+t.replace('@import "tailwindcss";',""),n.writeFileSync(r,t))}d(o)}async function h(o,e){console.log(`
+\u{1F4E6} Creating Vite React application...`),l(`npm create vite@latest ${o} -- --template react-ts`,{stdio:"inherit"}),console.log(`
+\u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),l("npm install",{cwd:e,stdio:"inherit"}),l("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:e,stdio:"inherit"});let s=i.join(e,"vite.config.ts");n.writeFileSync(s,`import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})
+`);let r=i.join(e,"src","index.css");n.writeFileSync(r,`@import "tailwindcss";
+@source "../../node_modules/@unciatech/file-manager/dist";
+`);let t=i.join(e,"src","components");n.existsSync(t)||n.mkdirSync(t,{recursive:!0}),n.writeFileSync(i.join(t,"FileManagerDemo.tsx"),p,"utf-8");let g=i.join(e,"src","App.tsx");n.writeFileSync(g,`import FileManagerDemo from "./components/FileManagerDemo";
+
+function App() {
+  return (
+    <div className="min-h-screen bg-neutral-50">
+      <FileManagerDemo />
+    </div>
+  );
+}
+
+export default App;
+`),d(o,"npm run dev")}function d(o,e="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 ${o}`),console.log(`  ${e}`),console.log("\\nEnjoy building! \u{1F5C2}\uFE0F\\n")}x();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unciatech/file-manager",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",