@unciatech/file-manager 0.0.2 → 0.0.3

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,5 +1,5 @@
 #!/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 h=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var S=(n,e,o,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of x(e))!F.call(n,s)&&s!==o&&d(n,s,{get:()=>e[s],enumerable:!(c=h(e,s))||c.enumerable});return n};var p=(n,e,o)=>(o=n!=null?y(v(n)):{},S(e||!n||!n.__esModule?d(o,"default",{value:n,enumerable:!0}):o,n));var i=p(require("fs")),t=p(require("path")),a=require("child_process"),g=p(require("readline")),f=process.argv.slice(2),M=f[0],l=f[1],j=g.default.createInterface({input:process.stdin,output:process.stdout}),P=n=>new Promise(e=>j.question(n,e)),m=`"use client";
 
 import React from "react";
 import { FileManagerProvider } from "@unciatech/file-manager";
@@ -7,7 +7,6 @@ import { FileManager } from "@unciatech/file-manager";
 import { MockProvider } from "@unciatech/file-manager";
 
 export default function FileManagerDemo() {
-  // Instantiate the mock provider for demonstration purposes
   const mockProvider = new MockProvider();
 
   return (
@@ -23,4 +22,48 @@ export default function FileManagerDemo() {
     </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 C(){if(M!=="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(t.default.join(process.cwd(),"components"))?o=t.default.join(process.cwd(),"components"):i.default.existsSync(t.default.join(process.cwd(),"src","components"))&&(o=t.default.join(process.cwd(),"src","components"));let c=t.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 P(`
+Select an option (1-3): `),e=t.default.join(process.cwd(),l);try{n==="1"?await k(l,e):n==="2"?await D(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 @unciatech/file-manager...`),(0,a.execSync)("npm install @unciatech/file-manager",{cwd:e,stdio:"inherit"});let o=t.default.join(e,"src","components");i.default.existsSync(o)||i.default.mkdirSync(o,{recursive:!0}),i.default.writeFileSync(t.default.join(o,"FileManagerDemo.tsx"),m,"utf-8");let c=t.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 s=t.default.join(e,"src","app","globals.css");if(i.default.existsSync(s)){let r=i.default.readFileSync(s,"utf8");r.includes("@source")||(r=`@import "tailwindcss";
+@plugin "tailwindcss-animate";
+@source "../../node_modules/@unciatech/file-manager/dist";
+
+`+r.replace('@import "tailwindcss";',""),i.default.writeFileSync(s,r))}u(n)}async function D(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=t.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 s=t.default.join(e,"src","index.css");i.default.writeFileSync(s,`@import "tailwindcss";
+@source "../../node_modules/@unciatech/file-manager/dist";
+`);let r=t.default.join(e,"src","components");i.default.existsSync(r)||i.default.mkdirSync(r,{recursive:!0}),i.default.writeFileSync(t.default.join(r,"FileManagerDemo.tsx"),m,"utf-8");let w=t.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;
+`),u(n,"npm run dev")}function u(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")}C();

package/dist/cli.mjs

@@ -1,5 +1,5 @@
 #!/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 f from"readline";var m=process.argv.slice(2),u=m[0],a=m[1],w=f.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";
@@ -7,7 +7,6 @@ import { FileManager } from "@unciatech/file-manager";
 import { MockProvider } from "@unciatech/file-manager";
 
 export default function FileManagerDemo() {
-  // Instantiate the mock provider for demonstration purposes
   const mockProvider = new MockProvider();
 
   return (
@@ -23,4 +22,48 @@ export default function FileManagerDemo() {
     </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 h(){if(u!=="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 t=process.cwd();n.existsSync(i.join(process.cwd(),"components"))?t=i.join(process.cwd(),"components"):n.existsSync(i.join(process.cwd(),"src","components"))&&(t=i.join(process.cwd(),"src","components"));let c=i.join(t,"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 x(a,e):o==="2"?await v(a,e):(console.log("Canceled."),process.exit(0))}catch(t){console.error(`
+\u274C Scaffolding failed:`,t),process.exit(1)}process.exit(0)}async function x(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 @unciatech/file-manager...`),l("npm install @unciatech/file-manager",{cwd:e,stdio:"inherit"});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 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 s=n.readFileSync(r,"utf8");s.includes("@source")||(s=`@import "tailwindcss";
+@plugin "tailwindcss-animate";
+@source "../../node_modules/@unciatech/file-manager/dist";
+
+`+s.replace('@import "tailwindcss";',""),n.writeFileSync(r,s))}d(o)}async function v(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 t=i.join(e,"vite.config.ts");n.writeFileSync(t,`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 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 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")}h();

package/package.json

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