@unciatech/file-manager 0.0.40 → 0.0.41
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/dist/cli.cjs +39 -125
- package/dist/cli.js +39 -125
- package/package.json +1 -1
package/dist/cli.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
'use strict';var e=require('fs'),
|
|
2
|
+
'use strict';var e=require('fs'),o=require('path'),child_process=require('child_process'),f=require('readline');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var e__default=/*#__PURE__*/_interopDefault(e);var o__default=/*#__PURE__*/_interopDefault(o);var f__default=/*#__PURE__*/_interopDefault(f);var m=process.argv.slice(2),g=m[0],a=m[1],p=f__default.default.createInterface({input:process.stdin,output:process.stdout}),x=t=>new Promise(i=>p.question(t,i)),v=(t="/media")=>`"use client";
|
|
3
3
|
|
|
4
4
|
import React, { Suspense } from "react";
|
|
5
5
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -14,27 +14,27 @@ export default function FileManagerDemo() {
|
|
|
14
14
|
allowedFileTypes={["audios", "videos", "images", "files"]}
|
|
15
15
|
viewMode="grid"
|
|
16
16
|
provider={mockProvider}
|
|
17
|
-
basePath="${
|
|
17
|
+
basePath="${t}"
|
|
18
18
|
/>
|
|
19
19
|
</Suspense>
|
|
20
20
|
</div>
|
|
21
21
|
);
|
|
22
22
|
}
|
|
23
|
-
`;async function
|
|
24
|
-
\u{1F680} Initializing a new application: ${
|
|
25
|
-
`),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
|
|
26
|
-
Select an option (1-3): `),i=
|
|
27
|
-
\u274C Error: Directory "${
|
|
28
|
-
\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function
|
|
29
|
-
\u{1F4E6} Creating Next.js application (this may take a minute)...`),child_process.execSync(`npx create-next-app@latest ${
|
|
30
|
-
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),child_process.execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:i,stdio:"inherit"});let s=
|
|
23
|
+
`;async function w(){if(g!=="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();e__default.default.existsSync(o__default.default.join(process.cwd(),"components"))?s=o__default.default.join(process.cwd(),"components"):e__default.default.existsSync(o__default.default.join(process.cwd(),"src","components"))&&(s=o__default.default.join(process.cwd(),"src","components"));let n=o__default.default.join(s,"FileManagerDemo.tsx");e__default.default.existsSync(n)&&(console.error(`\u274C Error: ${n} already exists.`),process.exit(1)),e__default.default.writeFileSync(n,v("/"),"utf-8"),console.log(`\u2705 Success! Created ${n}`),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(`
|
|
24
|
+
\u{1F680} Initializing a new application: ${a}
|
|
25
|
+
`),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 t=await x(`
|
|
26
|
+
Select an option (1-3): `),i=o__default.default.join(process.cwd(),a);e__default.default.existsSync(i)&&(console.error(`
|
|
27
|
+
\u274C Error: Directory "${a}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),p.close(),process.exit(1));try{t==="1"?await h(a,i):t==="2"?await y(a,i):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
|
|
28
|
+
\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function h(t,i){console.log(`
|
|
29
|
+
\u{1F4E6} Creating Next.js application (this may take a minute)...`),child_process.execSync(`npx create-next-app@latest ${t} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
|
|
30
|
+
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),child_process.execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:i,stdio:"inherit"});let s=o__default.default.join(i,"src","app","page.tsx");e__default.default.writeFileSync(s,`"use client";
|
|
31
31
|
|
|
32
32
|
import { redirect } from "next/navigation";
|
|
33
33
|
|
|
34
34
|
export default function Home() {
|
|
35
35
|
redirect("/media");
|
|
36
36
|
}
|
|
37
|
-
`);let n=
|
|
37
|
+
`);let n=o__default.default.join(i,"src","app","media","[[...path]]");e__default.default.mkdirSync(n,{recursive:true}),e__default.default.writeFileSync(o__default.default.join(n,"page.tsx"),`"use client";
|
|
38
38
|
|
|
39
39
|
import { Suspense, useState } from "react";
|
|
40
40
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -73,7 +73,7 @@ export default function MediaPage() {
|
|
|
73
73
|
</Suspense>
|
|
74
74
|
);
|
|
75
75
|
}
|
|
76
|
-
`);let
|
|
76
|
+
`);let c=o__default.default.join(i,"src","app","modal-demo");e__default.default.mkdirSync(c,{recursive:true}),e__default.default.writeFileSync(o__default.default.join(c,"page.tsx"),`"use client";
|
|
77
77
|
|
|
78
78
|
import { Suspense, useState } from "react";
|
|
79
79
|
import { FileManagerModal, MockProvider } from "@unciatech/file-manager";
|
|
@@ -156,8 +156,8 @@ export default function ModalDemoPage() {
|
|
|
156
156
|
</Suspense>
|
|
157
157
|
);
|
|
158
158
|
}
|
|
159
|
-
`);let
|
|
160
|
-
$1`),e__default.default.writeFileSync(
|
|
159
|
+
`);let r=o__default.default.join(i,"src","app","layout.tsx");if(e__default.default.existsSync(r)){let d=e__default.default.readFileSync(r,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
|
|
160
|
+
$1`),e__default.default.writeFileSync(r,d));}let u=o__default.default.join(i,"src","app","globals.css");e__default.default.writeFileSync(u,`@import "tailwindcss";
|
|
161
161
|
@import "@unciatech/file-manager/styles";
|
|
162
162
|
@import "tw-animate-css";
|
|
163
163
|
|
|
@@ -167,133 +167,47 @@ $1`),e__default.default.writeFileSync(l,a));}let m=t__default.default.join(i,"sr
|
|
|
167
167
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
168
168
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
169
169
|
}
|
|
170
|
-
`),
|
|
171
|
-
\u{1F4E6} Creating Vite React application...`),child_process.execSync(`
|
|
172
|
-
\u{1F4E6} Installing dependencies...`),child_process.execSync("npm install",{
|
|
173
|
-
\u2699\uFE0F Configuring project...`),["App.
|
|
174
|
-
import react from '@vitejs/plugin-react'
|
|
175
|
-
import tailwindcss from '@tailwindcss/vite'
|
|
176
|
-
|
|
177
|
-
export default defineConfig({
|
|
178
|
-
plugins: [
|
|
179
|
-
react(),
|
|
180
|
-
tailwindcss()
|
|
181
|
-
],
|
|
182
|
-
})
|
|
183
|
-
`);let l=t__default.default.join(s,"index.css");e__default.default.writeFileSync(l,`@import "tailwindcss";
|
|
170
|
+
`),S(t);}async function y(t,i){if(console.log(`
|
|
171
|
+
\u{1F4E6} Creating Vite React application...`),child_process.execSync(`npm create vite@latest ${t} -- --template react-ts`,{stdio:"inherit"}),!e__default.default.existsSync(i))throw new Error("Project creation failed");process.chdir(i),console.log(`
|
|
172
|
+
\u{1F4E6} Installing dependencies...`),child_process.execSync("npm install",{stdio:"inherit"}),child_process.execSync("npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react react-router-dom @unciatech/file-manager",{stdio:"inherit"}),console.log(`
|
|
173
|
+
\u2699\uFE0F Configuring Vite project...`);let s=o__default.default.join(i,"src");["App.tsx","App.css"].forEach(c=>{let r=o__default.default.join(s,c);e__default.default.existsSync(r)&&e__default.default.unlinkSync(r);}),e__default.default.writeFileSync(o__default.default.join(s,"index.css"),`@import "tailwindcss";
|
|
184
174
|
@import "@unciatech/file-manager/styles";
|
|
185
175
|
|
|
186
176
|
@source "../node_modules/@unciatech/file-manager";
|
|
187
|
-
`)
|
|
188
|
-
import ReactDOM from
|
|
189
|
-
import { BrowserRouter } from
|
|
190
|
-
import App from
|
|
191
|
-
import
|
|
177
|
+
`),e__default.default.writeFileSync(o__default.default.join(s,"main.tsx"),`import React from "react";
|
|
178
|
+
import ReactDOM from "react-dom/client";
|
|
179
|
+
import { BrowserRouter } from "react-router-dom";
|
|
180
|
+
import App from "./App";
|
|
181
|
+
import "./index.css";
|
|
192
182
|
|
|
193
|
-
ReactDOM.createRoot(document.getElementById(
|
|
183
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
194
184
|
<React.StrictMode>
|
|
195
185
|
<BrowserRouter>
|
|
196
186
|
<App />
|
|
197
187
|
</BrowserRouter>
|
|
198
|
-
</React.StrictMode
|
|
199
|
-
)
|
|
200
|
-
`)
|
|
201
|
-
import { Routes, Route, Link, useNavigate } from 'react-router-dom'
|
|
202
|
-
import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
|
|
203
|
-
import type { FileMetaData } from '@unciatech/file-manager'
|
|
204
|
-
|
|
205
|
-
const provider = new MockProvider()
|
|
188
|
+
</React.StrictMode>
|
|
189
|
+
);
|
|
190
|
+
`),e__default.default.writeFileSync(o__default.default.join(s,"App.tsx"),`import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
206
191
|
|
|
207
|
-
|
|
208
|
-
const navigate = useNavigate()
|
|
209
|
-
|
|
210
|
-
return (
|
|
211
|
-
<div className="h-screen w-full flex flex-col">
|
|
212
|
-
<div className="flex gap-4 p-4 border-b items-center justify-between">
|
|
213
|
-
<h1 className="text-xl font-bold">Full Page View</h1>
|
|
214
|
-
<Link
|
|
215
|
-
to="/"
|
|
216
|
-
className="px-4 py-2 bg-blue-600 text-white rounded-md"
|
|
217
|
-
>
|
|
218
|
-
Back
|
|
219
|
-
</Link>
|
|
220
|
-
</div>
|
|
221
|
-
|
|
222
|
-
<div className="flex-1 relative overflow-hidden">
|
|
223
|
-
<FileManager
|
|
224
|
-
provider={provider}
|
|
225
|
-
basePath="/full"
|
|
226
|
-
allowedFileTypes={["images","videos","audios","files"]}
|
|
227
|
-
viewMode="grid"
|
|
228
|
-
onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
|
|
229
|
-
/>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
)
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
function ModalDemo() {
|
|
236
|
-
const navigate = useNavigate()
|
|
237
|
-
const [open, setOpen] = useState(false)
|
|
238
|
-
const [files, setFiles] = useState<FileMetaData[]>([])
|
|
192
|
+
const provider = new MockProvider();
|
|
239
193
|
|
|
194
|
+
export default function App() {
|
|
240
195
|
return (
|
|
241
|
-
<div className="
|
|
242
|
-
<
|
|
243
|
-
|
|
244
|
-
<div className="flex gap-4">
|
|
245
|
-
<button
|
|
246
|
-
onClick={() => setOpen(true)}
|
|
247
|
-
className="px-6 py-2 bg-blue-600 text-white rounded-md"
|
|
248
|
-
>
|
|
249
|
-
Open File Picker
|
|
250
|
-
</button>
|
|
251
|
-
|
|
252
|
-
<Link
|
|
253
|
-
to="/full"
|
|
254
|
-
className="px-6 py-2 bg-zinc-200 rounded-md"
|
|
255
|
-
>
|
|
256
|
-
Full Page View
|
|
257
|
-
</Link>
|
|
258
|
-
</div>
|
|
259
|
-
|
|
260
|
-
{files.length > 0 && (
|
|
261
|
-
<div className="grid grid-cols-4 gap-4">
|
|
262
|
-
{files.map((file, i) => (
|
|
263
|
-
<div key={i} className="border rounded p-2">
|
|
264
|
-
{file.url && file.mime?.startsWith('image/') ? (
|
|
265
|
-
<img src={file.url} className="w-full h-32 object-cover" />
|
|
266
|
-
) : (
|
|
267
|
-
<div className="text-xs">{file.name}</div>
|
|
268
|
-
)}
|
|
269
|
-
</div>
|
|
270
|
-
))}
|
|
271
|
-
</div>
|
|
272
|
-
)}
|
|
273
|
-
|
|
274
|
-
<FileManagerModal
|
|
275
|
-
open={open}
|
|
276
|
-
onClose={() => setOpen(false)}
|
|
196
|
+
<div className="h-screen w-full">
|
|
197
|
+
<FileManager
|
|
277
198
|
provider={provider}
|
|
278
199
|
basePath="/"
|
|
200
|
+
viewMode="grid"
|
|
279
201
|
allowedFileTypes={["images","videos","audios","files"]}
|
|
280
|
-
onFilesSelected={(f) => setFiles(f)}
|
|
281
|
-
onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
|
|
282
202
|
/>
|
|
283
203
|
</div>
|
|
284
|
-
)
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
export default function App() {
|
|
288
|
-
return (
|
|
289
|
-
<Routes>
|
|
290
|
-
<Route path="/" element={<ModalDemo />} />
|
|
291
|
-
<Route path="/full/*" element={<FullPage />} />
|
|
292
|
-
</Routes>
|
|
293
|
-
)
|
|
204
|
+
);
|
|
294
205
|
}
|
|
295
|
-
`),
|
|
206
|
+
`),console.log(`
|
|
207
|
+
=================================`),console.log("\u{1F389} Vite File Manager ready!"),console.log(`=================================
|
|
208
|
+
`),console.log(`cd ${t}`),console.log(`npm run dev
|
|
209
|
+
`);}function S(t,i="npm run dev"){console.log(`
|
|
296
210
|
=========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
|
|
297
|
-
Next steps:`),console.log(` cd ${
|
|
211
|
+
Next steps:`),console.log(` cd ${t}`),console.log(` ${i}`),console.log(`
|
|
298
212
|
Enjoy building! \u{1F5C2}\uFE0F
|
|
299
|
-
`);}
|
|
213
|
+
`);}w();
|
package/dist/cli.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import e from'fs';import
|
|
2
|
+
import e from'fs';import o from'path';import {execSync}from'child_process';import f from'readline';var m=process.argv.slice(2),g=m[0],a=m[1],p=f.createInterface({input:process.stdin,output:process.stdout}),x=t=>new Promise(i=>p.question(t,i)),v=(t="/media")=>`"use client";
|
|
3
3
|
|
|
4
4
|
import React, { Suspense } from "react";
|
|
5
5
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -14,27 +14,27 @@ export default function FileManagerDemo() {
|
|
|
14
14
|
allowedFileTypes={["audios", "videos", "images", "files"]}
|
|
15
15
|
viewMode="grid"
|
|
16
16
|
provider={mockProvider}
|
|
17
|
-
basePath="${
|
|
17
|
+
basePath="${t}"
|
|
18
18
|
/>
|
|
19
19
|
</Suspense>
|
|
20
20
|
</div>
|
|
21
21
|
);
|
|
22
22
|
}
|
|
23
|
-
`;async function
|
|
24
|
-
\u{1F680} Initializing a new application: ${
|
|
25
|
-
`),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
|
|
26
|
-
Select an option (1-3): `),i=
|
|
27
|
-
\u274C Error: Directory "${
|
|
28
|
-
\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function
|
|
29
|
-
\u{1F4E6} Creating Next.js application (this may take a minute)...`),execSync(`npx create-next-app@latest ${
|
|
30
|
-
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:i,stdio:"inherit"});let s=
|
|
23
|
+
`;async function w(){if(g!=="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();e.existsSync(o.join(process.cwd(),"components"))?s=o.join(process.cwd(),"components"):e.existsSync(o.join(process.cwd(),"src","components"))&&(s=o.join(process.cwd(),"src","components"));let n=o.join(s,"FileManagerDemo.tsx");e.existsSync(n)&&(console.error(`\u274C Error: ${n} already exists.`),process.exit(1)),e.writeFileSync(n,v("/"),"utf-8"),console.log(`\u2705 Success! Created ${n}`),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(`
|
|
24
|
+
\u{1F680} Initializing a new application: ${a}
|
|
25
|
+
`),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 t=await x(`
|
|
26
|
+
Select an option (1-3): `),i=o.join(process.cwd(),a);e.existsSync(i)&&(console.error(`
|
|
27
|
+
\u274C Error: Directory "${a}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),p.close(),process.exit(1));try{t==="1"?await h(a,i):t==="2"?await y(a,i):(console.log("Canceled."),process.exit(0));}catch(s){console.error(`
|
|
28
|
+
\u274C Scaffolding failed:`,s),process.exit(1);}process.exit(0);}async function h(t,i){console.log(`
|
|
29
|
+
\u{1F4E6} Creating Next.js application (this may take a minute)...`),execSync(`npx create-next-app@latest ${t} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
|
|
30
|
+
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:i,stdio:"inherit"});let s=o.join(i,"src","app","page.tsx");e.writeFileSync(s,`"use client";
|
|
31
31
|
|
|
32
32
|
import { redirect } from "next/navigation";
|
|
33
33
|
|
|
34
34
|
export default function Home() {
|
|
35
35
|
redirect("/media");
|
|
36
36
|
}
|
|
37
|
-
`);let n=
|
|
37
|
+
`);let n=o.join(i,"src","app","media","[[...path]]");e.mkdirSync(n,{recursive:true}),e.writeFileSync(o.join(n,"page.tsx"),`"use client";
|
|
38
38
|
|
|
39
39
|
import { Suspense, useState } from "react";
|
|
40
40
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -73,7 +73,7 @@ export default function MediaPage() {
|
|
|
73
73
|
</Suspense>
|
|
74
74
|
);
|
|
75
75
|
}
|
|
76
|
-
`);let
|
|
76
|
+
`);let c=o.join(i,"src","app","modal-demo");e.mkdirSync(c,{recursive:true}),e.writeFileSync(o.join(c,"page.tsx"),`"use client";
|
|
77
77
|
|
|
78
78
|
import { Suspense, useState } from "react";
|
|
79
79
|
import { FileManagerModal, MockProvider } from "@unciatech/file-manager";
|
|
@@ -156,8 +156,8 @@ export default function ModalDemoPage() {
|
|
|
156
156
|
</Suspense>
|
|
157
157
|
);
|
|
158
158
|
}
|
|
159
|
-
`);let
|
|
160
|
-
$1`),e.writeFileSync(
|
|
159
|
+
`);let r=o.join(i,"src","app","layout.tsx");if(e.existsSync(r)){let d=e.readFileSync(r,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
|
|
160
|
+
$1`),e.writeFileSync(r,d));}let u=o.join(i,"src","app","globals.css");e.writeFileSync(u,`@import "tailwindcss";
|
|
161
161
|
@import "@unciatech/file-manager/styles";
|
|
162
162
|
@import "tw-animate-css";
|
|
163
163
|
|
|
@@ -167,133 +167,47 @@ $1`),e.writeFileSync(l,a));}let m=t.join(i,"src","app","globals.css");e.writeFil
|
|
|
167
167
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
168
168
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
169
169
|
}
|
|
170
|
-
`),
|
|
171
|
-
\u{1F4E6} Creating Vite React application...`),execSync(`
|
|
172
|
-
\u{1F4E6} Installing dependencies...`),execSync("npm install",{
|
|
173
|
-
\u2699\uFE0F Configuring project...`),["App.
|
|
174
|
-
import react from '@vitejs/plugin-react'
|
|
175
|
-
import tailwindcss from '@tailwindcss/vite'
|
|
176
|
-
|
|
177
|
-
export default defineConfig({
|
|
178
|
-
plugins: [
|
|
179
|
-
react(),
|
|
180
|
-
tailwindcss()
|
|
181
|
-
],
|
|
182
|
-
})
|
|
183
|
-
`);let l=t.join(s,"index.css");e.writeFileSync(l,`@import "tailwindcss";
|
|
170
|
+
`),S(t);}async function y(t,i){if(console.log(`
|
|
171
|
+
\u{1F4E6} Creating Vite React application...`),execSync(`npm create vite@latest ${t} -- --template react-ts`,{stdio:"inherit"}),!e.existsSync(i))throw new Error("Project creation failed");process.chdir(i),console.log(`
|
|
172
|
+
\u{1F4E6} Installing dependencies...`),execSync("npm install",{stdio:"inherit"}),execSync("npm install tailwindcss @tailwindcss/vite @vitejs/plugin-react react-router-dom @unciatech/file-manager",{stdio:"inherit"}),console.log(`
|
|
173
|
+
\u2699\uFE0F Configuring Vite project...`);let s=o.join(i,"src");["App.tsx","App.css"].forEach(c=>{let r=o.join(s,c);e.existsSync(r)&&e.unlinkSync(r);}),e.writeFileSync(o.join(s,"index.css"),`@import "tailwindcss";
|
|
184
174
|
@import "@unciatech/file-manager/styles";
|
|
185
175
|
|
|
186
176
|
@source "../node_modules/@unciatech/file-manager";
|
|
187
|
-
`)
|
|
188
|
-
import ReactDOM from
|
|
189
|
-
import { BrowserRouter } from
|
|
190
|
-
import App from
|
|
191
|
-
import
|
|
177
|
+
`),e.writeFileSync(o.join(s,"main.tsx"),`import React from "react";
|
|
178
|
+
import ReactDOM from "react-dom/client";
|
|
179
|
+
import { BrowserRouter } from "react-router-dom";
|
|
180
|
+
import App from "./App";
|
|
181
|
+
import "./index.css";
|
|
192
182
|
|
|
193
|
-
ReactDOM.createRoot(document.getElementById(
|
|
183
|
+
ReactDOM.createRoot(document.getElementById("root")!).render(
|
|
194
184
|
<React.StrictMode>
|
|
195
185
|
<BrowserRouter>
|
|
196
186
|
<App />
|
|
197
187
|
</BrowserRouter>
|
|
198
|
-
</React.StrictMode
|
|
199
|
-
)
|
|
200
|
-
`)
|
|
201
|
-
import { Routes, Route, Link, useNavigate } from 'react-router-dom'
|
|
202
|
-
import { FileManager, FileManagerModal, MockProvider } from '@unciatech/file-manager'
|
|
203
|
-
import type { FileMetaData } from '@unciatech/file-manager'
|
|
204
|
-
|
|
205
|
-
const provider = new MockProvider()
|
|
188
|
+
</React.StrictMode>
|
|
189
|
+
);
|
|
190
|
+
`),e.writeFileSync(o.join(s,"App.tsx"),`import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
206
191
|
|
|
207
|
-
|
|
208
|
-
const navigate = useNavigate()
|
|
209
|
-
|
|
210
|
-
return (
|
|
211
|
-
<div className="h-screen w-full flex flex-col">
|
|
212
|
-
<div className="flex gap-4 p-4 border-b items-center justify-between">
|
|
213
|
-
<h1 className="text-xl font-bold">Full Page View</h1>
|
|
214
|
-
<Link
|
|
215
|
-
to="/"
|
|
216
|
-
className="px-4 py-2 bg-blue-600 text-white rounded-md"
|
|
217
|
-
>
|
|
218
|
-
Back
|
|
219
|
-
</Link>
|
|
220
|
-
</div>
|
|
221
|
-
|
|
222
|
-
<div className="flex-1 relative overflow-hidden">
|
|
223
|
-
<FileManager
|
|
224
|
-
provider={provider}
|
|
225
|
-
basePath="/full"
|
|
226
|
-
allowedFileTypes={["images","videos","audios","files"]}
|
|
227
|
-
viewMode="grid"
|
|
228
|
-
onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
|
|
229
|
-
/>
|
|
230
|
-
</div>
|
|
231
|
-
</div>
|
|
232
|
-
)
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
function ModalDemo() {
|
|
236
|
-
const navigate = useNavigate()
|
|
237
|
-
const [open, setOpen] = useState(false)
|
|
238
|
-
const [files, setFiles] = useState<FileMetaData[]>([])
|
|
192
|
+
const provider = new MockProvider();
|
|
239
193
|
|
|
194
|
+
export default function App() {
|
|
240
195
|
return (
|
|
241
|
-
<div className="
|
|
242
|
-
<
|
|
243
|
-
|
|
244
|
-
<div className="flex gap-4">
|
|
245
|
-
<button
|
|
246
|
-
onClick={() => setOpen(true)}
|
|
247
|
-
className="px-6 py-2 bg-blue-600 text-white rounded-md"
|
|
248
|
-
>
|
|
249
|
-
Open File Picker
|
|
250
|
-
</button>
|
|
251
|
-
|
|
252
|
-
<Link
|
|
253
|
-
to="/full"
|
|
254
|
-
className="px-6 py-2 bg-zinc-200 rounded-md"
|
|
255
|
-
>
|
|
256
|
-
Full Page View
|
|
257
|
-
</Link>
|
|
258
|
-
</div>
|
|
259
|
-
|
|
260
|
-
{files.length > 0 && (
|
|
261
|
-
<div className="grid grid-cols-4 gap-4">
|
|
262
|
-
{files.map((file, i) => (
|
|
263
|
-
<div key={i} className="border rounded p-2">
|
|
264
|
-
{file.url && file.mime?.startsWith('image/') ? (
|
|
265
|
-
<img src={file.url} className="w-full h-32 object-cover" />
|
|
266
|
-
) : (
|
|
267
|
-
<div className="text-xs">{file.name}</div>
|
|
268
|
-
)}
|
|
269
|
-
</div>
|
|
270
|
-
))}
|
|
271
|
-
</div>
|
|
272
|
-
)}
|
|
273
|
-
|
|
274
|
-
<FileManagerModal
|
|
275
|
-
open={open}
|
|
276
|
-
onClose={() => setOpen(false)}
|
|
196
|
+
<div className="h-screen w-full">
|
|
197
|
+
<FileManager
|
|
277
198
|
provider={provider}
|
|
278
199
|
basePath="/"
|
|
200
|
+
viewMode="grid"
|
|
279
201
|
allowedFileTypes={["images","videos","audios","files"]}
|
|
280
|
-
onFilesSelected={(f) => setFiles(f)}
|
|
281
|
-
onNavigate={(url, opts) => navigate(url, { replace: opts?.replace })}
|
|
282
202
|
/>
|
|
283
203
|
</div>
|
|
284
|
-
)
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
export default function App() {
|
|
288
|
-
return (
|
|
289
|
-
<Routes>
|
|
290
|
-
<Route path="/" element={<ModalDemo />} />
|
|
291
|
-
<Route path="/full/*" element={<FullPage />} />
|
|
292
|
-
</Routes>
|
|
293
|
-
)
|
|
204
|
+
);
|
|
294
205
|
}
|
|
295
|
-
`),
|
|
206
|
+
`),console.log(`
|
|
207
|
+
=================================`),console.log("\u{1F389} Vite File Manager ready!"),console.log(`=================================
|
|
208
|
+
`),console.log(`cd ${t}`),console.log(`npm run dev
|
|
209
|
+
`);}function S(t,i="npm run dev"){console.log(`
|
|
296
210
|
=========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
|
|
297
|
-
Next steps:`),console.log(` cd ${
|
|
211
|
+
Next steps:`),console.log(` cd ${t}`),console.log(` ${i}`),console.log(`
|
|
298
212
|
Enjoy building! \u{1F5C2}\uFE0F
|
|
299
|
-
`);}
|
|
213
|
+
`);}w();
|