@unciatech/file-manager 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -37
- package/dist/cli.js +18 -37
- package/dist/cli.mjs +17 -36
- package/dist/index.js +10 -10
- package/dist/index.mjs +21 -21
- package/package.json +17 -25
- package/dist/styles.css +0 -2
- package/styles.css +0 -145
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ It supports deep folder nesting, drag-and-drop file uploads, metadata management
|
|
|
16
16
|
## 🛠️ Tech Stack
|
|
17
17
|
- **Framework**: Next.js / React
|
|
18
18
|
- **Styling**: Tailwind CSS
|
|
19
|
-
- **Icons**:
|
|
19
|
+
- **Icons**: Custom SVG Icons
|
|
20
20
|
- **Notifications**: Sonner
|
|
21
21
|
|
|
22
22
|
> [!WARNING]
|
|
@@ -34,28 +34,41 @@ npm install @unciatech/file-manager
|
|
|
34
34
|
```
|
|
35
35
|
|
|
36
36
|
**(Optional) ⚡ Magic Quick Start Scaffolding**
|
|
37
|
-
Instead of setting everything up manually, our
|
|
38
|
-
|
|
39
|
-
**A) If you just want the component inside your CURRENT project:**
|
|
37
|
+
Instead of setting everything up manually, our init script can spawn a brand new full-stack application instantly:
|
|
40
38
|
```bash
|
|
41
|
-
npx @unciatech/file-manager init
|
|
39
|
+
npx @unciatech/file-manager init my-media-app
|
|
42
40
|
```
|
|
41
|
+
*It will ask if you want Next.js or Vite (React), install Tailwind, install the package, and set everything up including styles!*
|
|
43
42
|
|
|
44
|
-
**
|
|
45
|
-
|
|
46
|
-
|
|
43
|
+
**(CRITICAL) Import the styles:**
|
|
44
|
+
The init script includes this automatically, but if you are installing manually, add this import to your root layout / entry file:
|
|
45
|
+
```ts
|
|
46
|
+
import '@unciatech/file-manager/styles';
|
|
47
47
|
```
|
|
48
|
-
*It will ask if you want Next.js or Vite (React), install Tailwind, install the package, and set everything up for you!*
|
|
49
48
|
|
|
50
|
-
**(CRITICAL)
|
|
51
|
-
|
|
49
|
+
**(CRITICAL) Configure Tailwind CSS:**
|
|
50
|
+
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!
|
|
52
51
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
import
|
|
52
|
+
**For Tailwind v3 (`tailwind.config.ts`):**
|
|
53
|
+
```typescript
|
|
54
|
+
import type { Config } from "tailwindcss";
|
|
55
|
+
|
|
56
|
+
const config: Config = {
|
|
57
|
+
content: [
|
|
58
|
+
// Your existing paths...
|
|
59
|
+
"./node_modules/@unciatech/file-manager/dist/**/*.js",
|
|
60
|
+
"./node_modules/@unciatech/file-manager/dist/**/*.mjs",
|
|
61
|
+
],
|
|
62
|
+
// ...
|
|
63
|
+
};
|
|
64
|
+
export default config;
|
|
56
65
|
```
|
|
57
66
|
|
|
58
|
-
|
|
67
|
+
**For Tailwind v4 (`globals.css`):**
|
|
68
|
+
```css
|
|
69
|
+
@import "tailwindcss";
|
|
70
|
+
@source "../node_modules/@unciatech/file-manager/dist";
|
|
71
|
+
```
|
|
59
72
|
|
|
60
73
|
### Step 2: Create your Custom API Provider
|
|
61
74
|
|
|
@@ -115,43 +128,40 @@ export class MyCustomApiProvider implements IFileManagerProvider {
|
|
|
115
128
|
> **💡 Pro Tip - The Mock Provider:**
|
|
116
129
|
> If you are just prototyping and don't have a backend ready yet, you can skip Step 2 entirely! We included a fully functional `MockFileManagerProvider` that fakes network latency and stores data in memory. Just import it and use it right away to see the UI in action.
|
|
117
130
|
|
|
118
|
-
### Step 3:
|
|
131
|
+
### Step 3: Wrap Your Page with the Provider
|
|
119
132
|
|
|
120
|
-
|
|
133
|
+
Finally, import your provider and wrap the `<FileManager />` component in the Context Provider. Define which file types you want to allow.
|
|
121
134
|
|
|
122
135
|
```tsx
|
|
123
|
-
// app/media/
|
|
124
|
-
|
|
136
|
+
// app/media/page.tsx
|
|
137
|
+
import { FileManagerProvider } from "@/context/file-manager-context";
|
|
138
|
+
import { FileManager } from "@/components/file-manager";
|
|
125
139
|
|
|
126
|
-
|
|
127
|
-
import {
|
|
128
|
-
import {
|
|
140
|
+
// Import your real provider OR the mock one
|
|
141
|
+
import { MyCustomApiProvider } from "@/lib/my-api-provider";
|
|
142
|
+
// import { MockFileManagerProvider } from "@/providers/mock-provider";
|
|
129
143
|
|
|
130
|
-
|
|
144
|
+
export default function MediaLibraryPage() {
|
|
145
|
+
// Instantiate the provider
|
|
146
|
+
const apiProvider = new MyCustomApiProvider();
|
|
131
147
|
|
|
132
|
-
export default function MediaPage() {
|
|
133
148
|
return (
|
|
134
149
|
<div className="h-screen w-full">
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
/>
|
|
142
|
-
</
|
|
150
|
+
<FileManagerProvider
|
|
151
|
+
mode="page"
|
|
152
|
+
selectionMode="multiple"
|
|
153
|
+
allowedFileTypes={["images", "videos", "audios", "files"]}
|
|
154
|
+
provider={apiProvider}
|
|
155
|
+
>
|
|
156
|
+
<FileManager />
|
|
157
|
+
</FileManagerProvider>
|
|
143
158
|
</div>
|
|
144
159
|
);
|
|
145
160
|
}
|
|
146
161
|
```
|
|
147
162
|
|
|
148
|
-
> **`basePath` prop** — Set this to the URL segment where your file manager lives (e.g. `"media"` if mounted at `/media/[[...path]]`). This is required for folder navigation to work correctly — without it, clicking into a folder will 404.
|
|
149
|
-
|
|
150
|
-
> **💡 Quick start with mock data:** Use `import { MockProvider } from '@unciatech/file-manager'` to skip Step 2 and prototype immediately.
|
|
151
|
-
|
|
152
163
|
---
|
|
153
164
|
|
|
154
|
-
|
|
155
165
|
## 💾 Database Schema Design
|
|
156
166
|
|
|
157
167
|
Because this application relies heavily on tree structures (Folders inside Folders) and varied JSON metadata (Video durations vs Document page counts), using a relational database with JSONB support (like PostgreSQL) is highly recommended.
|
package/dist/cli.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
"use strict";var
|
|
2
|
+
"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";
|
|
3
3
|
|
|
4
4
|
import React, { Suspense } from "react";
|
|
5
5
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -13,41 +13,19 @@ export default function FileManagerDemo() {
|
|
|
13
13
|
<FileManager
|
|
14
14
|
allowedFileTypes={["audios", "videos", "images", "files"]}
|
|
15
15
|
viewMode="grid"
|
|
16
|
-
basePath="media"
|
|
17
16
|
provider={mockProvider}
|
|
18
17
|
/>
|
|
19
18
|
</Suspense>
|
|
20
19
|
</div>
|
|
21
20
|
);
|
|
22
21
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
import { Suspense } from "react";
|
|
26
|
-
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
27
|
-
|
|
28
|
-
const mockProvider = new MockProvider();
|
|
29
|
-
|
|
30
|
-
export default function MediaPage() {
|
|
31
|
-
return (
|
|
32
|
-
<div className="h-screen w-full">
|
|
33
|
-
<Suspense fallback={<div className="p-4">Loading...</div>}>
|
|
34
|
-
<FileManager
|
|
35
|
-
allowedFileTypes={["audios", "videos", "images", "files"]}
|
|
36
|
-
viewMode="grid"
|
|
37
|
-
basePath="media"
|
|
38
|
-
provider={mockProvider}
|
|
39
|
-
/>
|
|
40
|
-
</Suspense>
|
|
41
|
-
</div>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
`;async function T(){if(P!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!p){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();i.default.existsSync(o.default.join(process.cwd(),"components"))?s=o.default.join(process.cwd(),"components"):i.default.existsSync(o.default.join(process.cwd(),"src","components"))&&(s=o.default.join(process.cwd(),"src","components"));let t=o.default.join(s,"FileManagerDemo.tsx");i.default.existsSync(t)&&(console.error(`\u274C Error: ${t} already exists.`),process.exit(1)),i.default.writeFileSync(t,g,"utf-8"),console.log(`\u2705 Success! Created ${t}`),console.log(""),console.log("You can now import and render <FileManagerDemo /> anywhere in your application."),console.log(""),console.log("\u26A0\uFE0F IMPORTANT: Add the styles import to your layout.tsx or _app.tsx:"),console.log(" import '@unciatech/file-manager/styles';"),console.log(""),console.log("\u26A0\uFE0F IMPORTANT: Create the catch-all route for folder navigation:"),console.log(" app/media/[[...path]]/page.tsx (Next.js)"),console.log(" See the README for the full page template."),process.exit(0)}console.log(`
|
|
45
|
-
\u{1F680} Initializing a new application: ${p}
|
|
22
|
+
`;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(`
|
|
23
|
+
\u{1F680} Initializing a new application: ${l}
|
|
46
24
|
`),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(`
|
|
47
|
-
Select an option (1-3): `),e=
|
|
48
|
-
\u274C Scaffolding failed:`,
|
|
49
|
-
\u{1F4E6} Creating Next.js application (this may take a minute)...`),(0,
|
|
50
|
-
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),(0,
|
|
25
|
+
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(`
|
|
26
|
+
\u274C Scaffolding failed:`,o),process.exit(1)}process.exit(0)}async function k(n,e){console.log(`
|
|
27
|
+
\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(`
|
|
28
|
+
\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";
|
|
51
29
|
|
|
52
30
|
export default function Home() {
|
|
53
31
|
return (
|
|
@@ -56,10 +34,13 @@ export default function Home() {
|
|
|
56
34
|
</main>
|
|
57
35
|
);
|
|
58
36
|
}
|
|
59
|
-
`);let
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
37
|
+
`);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";
|
|
38
|
+
@plugin "tailwindcss-animate";
|
|
39
|
+
@source "../../node_modules/@unciatech/file-manager/dist";
|
|
40
|
+
|
|
41
|
+
`+r.replace('@import "tailwindcss";',""),i.default.writeFileSync(t,r))}f(n)}async function b(n,e){console.log(`
|
|
42
|
+
\u{1F4E6} Creating Vite React application...`),(0,a.execSync)(`npm create vite@latest ${n} -- --template react-ts`,{stdio:"inherit"}),console.log(`
|
|
43
|
+
\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'
|
|
63
44
|
import react from '@vitejs/plugin-react'
|
|
64
45
|
import tailwindcss from '@tailwindcss/vite'
|
|
65
46
|
|
|
@@ -69,9 +50,9 @@ export default defineConfig({
|
|
|
69
50
|
tailwindcss(),
|
|
70
51
|
],
|
|
71
52
|
})
|
|
72
|
-
`);let
|
|
73
|
-
|
|
74
|
-
|
|
53
|
+
`);let t=s.default.join(e,"src","index.css");i.default.writeFileSync(t,`@import "tailwindcss";
|
|
54
|
+
@source "../../node_modules/@unciatech/file-manager/dist";
|
|
55
|
+
`);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";
|
|
75
56
|
|
|
76
57
|
function App() {
|
|
77
58
|
return (
|
|
@@ -82,4 +63,4 @@ function App() {
|
|
|
82
63
|
}
|
|
83
64
|
|
|
84
65
|
export default App;
|
|
85
|
-
`),
|
|
66
|
+
`),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
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import
|
|
2
|
+
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";
|
|
3
3
|
|
|
4
4
|
import React, { Suspense } from "react";
|
|
5
5
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -13,41 +13,19 @@ export default function FileManagerDemo() {
|
|
|
13
13
|
<FileManager
|
|
14
14
|
allowedFileTypes={["audios", "videos", "images", "files"]}
|
|
15
15
|
viewMode="grid"
|
|
16
|
-
basePath="media"
|
|
17
16
|
provider={mockProvider}
|
|
18
17
|
/>
|
|
19
18
|
</Suspense>
|
|
20
19
|
</div>
|
|
21
20
|
);
|
|
22
21
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const mockProvider = new MockProvider();
|
|
29
|
-
|
|
30
|
-
export default function MediaPage() {
|
|
31
|
-
return (
|
|
32
|
-
<div className="h-screen w-full">
|
|
33
|
-
<Suspense fallback={<div className="p-4">Loading...</div>}>
|
|
34
|
-
<FileManager
|
|
35
|
-
allowedFileTypes={["audios", "videos", "images", "files"]}
|
|
36
|
-
viewMode="grid"
|
|
37
|
-
basePath="media"
|
|
38
|
-
provider={mockProvider}
|
|
39
|
-
/>
|
|
40
|
-
</Suspense>
|
|
41
|
-
</div>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
`;async function S(){if(w!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!r){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let s=process.cwd();e.existsSync(i.join(process.cwd(),"components"))?s=i.join(process.cwd(),"components"):e.existsSync(i.join(process.cwd(),"src","components"))&&(s=i.join(process.cwd(),"src","components"));let t=i.join(s,"FileManagerDemo.tsx");e.existsSync(t)&&(console.error(`\u274C Error: ${t} already exists.`),process.exit(1)),e.writeFileSync(t,d,"utf-8"),console.log(`\u2705 Success! Created ${t}`),console.log(""),console.log("You can now import and render <FileManagerDemo /> anywhere in your application."),console.log(""),console.log("\u26A0\uFE0F IMPORTANT: Add the styles import to your layout.tsx or _app.tsx:"),console.log(" import '@unciatech/file-manager/styles';"),console.log(""),console.log("\u26A0\uFE0F IMPORTANT: Create the catch-all route for folder navigation:"),console.log(" app/media/[[...path]]/page.tsx (Next.js)"),console.log(" See the README for the full page template."),process.exit(0)}console.log(`
|
|
45
|
-
\u{1F680} Initializing a new application: ${r}
|
|
46
|
-
`),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 v(`
|
|
47
|
-
Select an option (1-3): `),n=i.join(process.cwd(),r);try{o==="1"?await F(r,n):o==="2"?await M(r,n):(console.log("Canceled."),process.exit(0))}catch(s){console.error(`
|
|
48
|
-
\u274C Scaffolding failed:`,s),process.exit(1)}process.exit(0)}async function F(o,n){console.log(`
|
|
22
|
+
`;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(`
|
|
23
|
+
\u{1F680} Initializing a new application: ${a}
|
|
24
|
+
`),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(`
|
|
25
|
+
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(`
|
|
26
|
+
\u274C Scaffolding failed:`,s),process.exit(1)}process.exit(0)}async function v(o,e){console.log(`
|
|
49
27
|
\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(`
|
|
50
|
-
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),l("npm install @unciatech/file-manager tailwindcss-animate",{cwd:
|
|
28
|
+
\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";
|
|
51
29
|
|
|
52
30
|
export default function Home() {
|
|
53
31
|
return (
|
|
@@ -56,10 +34,13 @@ export default function Home() {
|
|
|
56
34
|
</main>
|
|
57
35
|
);
|
|
58
36
|
}
|
|
59
|
-
`);let
|
|
60
|
-
|
|
37
|
+
`);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";
|
|
38
|
+
@plugin "tailwindcss-animate";
|
|
39
|
+
@source "../../node_modules/@unciatech/file-manager/dist";
|
|
40
|
+
|
|
41
|
+
`+t.replace('@import "tailwindcss";',""),n.writeFileSync(r,t))}d(o)}async function h(o,e){console.log(`
|
|
61
42
|
\u{1F4E6} Creating Vite React application...`),l(`npm create vite@latest ${o} -- --template react-ts`,{stdio:"inherit"}),console.log(`
|
|
62
|
-
\u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),l("npm install",{cwd:
|
|
43
|
+
\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'
|
|
63
44
|
import react from '@vitejs/plugin-react'
|
|
64
45
|
import tailwindcss from '@tailwindcss/vite'
|
|
65
46
|
|
|
@@ -69,9 +50,9 @@ export default defineConfig({
|
|
|
69
50
|
tailwindcss(),
|
|
70
51
|
],
|
|
71
52
|
})
|
|
72
|
-
`);let
|
|
73
|
-
|
|
74
|
-
|
|
53
|
+
`);let r=i.join(e,"src","index.css");n.writeFileSync(r,`@import "tailwindcss";
|
|
54
|
+
@source "../../node_modules/@unciatech/file-manager/dist";
|
|
55
|
+
`);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";
|
|
75
56
|
|
|
76
57
|
function App() {
|
|
77
58
|
return (
|
|
@@ -82,4 +63,4 @@ function App() {
|
|
|
82
63
|
}
|
|
83
64
|
|
|
84
65
|
export default App;
|
|
85
|
-
`),
|
|
66
|
+
`),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();
|