@unciatech/file-manager 0.0.14 → 0.0.16
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/chunk-4DQRTTKI.mjs +18 -0
- package/dist/chunk-S4HRPNKF.js +18 -0
- package/dist/cli.js +124 -21
- package/dist/cli.mjs +124 -21
- package/dist/file-manager-4KJI2OA3.d.mts +194 -0
- package/dist/file-manager-4KJI2OA3.d.ts +194 -0
- package/dist/index.d.mts +3 -229
- package/dist/index.d.ts +3 -229
- package/dist/index.js +20 -35
- package/dist/index.mjs +20 -35
- package/dist/mock.d.mts +38 -0
- package/dist/mock.d.ts +38 -0
- package/dist/mock.js +2 -0
- package/dist/mock.mjs +2 -0
- package/dist/styles.css +96 -52
- package/package.json +8 -2
- package/styles.css +96 -52
package/dist/cli.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import e from
|
|
2
|
+
import e from'fs';import r from'path';import {execSync}from'child_process';import v from'readline';var m=process.argv.slice(2),y=m[0],t=m[1],g=v.createInterface({input:process.stdin,output:process.stdout}),w=n=>new Promise(o=>g.question(n,o)),p=`"use client";
|
|
3
3
|
|
|
4
4
|
import React, { Suspense } from "react";
|
|
5
5
|
import { FileManager, MockProvider } from "@unciatech/file-manager";
|
|
@@ -19,14 +19,14 @@ export default function FileManagerDemo() {
|
|
|
19
19
|
</div>
|
|
20
20
|
);
|
|
21
21
|
}
|
|
22
|
-
`;async function h(){if(
|
|
23
|
-
\u{1F680} Initializing a new application: ${
|
|
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
|
|
25
|
-
Select an option (1-3): `),
|
|
26
|
-
\u274C Error: Directory "${
|
|
27
|
-
\u274C Scaffolding failed:`,
|
|
28
|
-
\u{1F4E6} Creating Next.js application (this may take a minute)...`),
|
|
29
|
-
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),
|
|
22
|
+
`;async function h(){if(y!=="init"&&(console.log("Usage: npx @unciatech/file-manager init [project-name]"),process.exit(0)),!t){console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");let i=process.cwd();e.existsSync(r.join(process.cwd(),"components"))?i=r.join(process.cwd(),"components"):e.existsSync(r.join(process.cwd(),"src","components"))&&(i=r.join(process.cwd(),"src","components"));let c=r.join(i,"FileManagerDemo.tsx");e.existsSync(c)&&(console.error(`\u274C Error: ${c} already exists.`),process.exit(1)),e.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: ${t}
|
|
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 w(`
|
|
25
|
+
Select an option (1-3): `),o=r.join(process.cwd(),t);e.existsSync(o)&&(console.error(`
|
|
26
|
+
\u274C Error: Directory "${t}" already exists in ${process.cwd()}.`),console.error(" Please choose a different project name or delete the existing directory first."),g.close(),process.exit(1));try{n==="1"?await x(t,o):n==="2"?await b(t,o):(console.log("Canceled."),process.exit(0));}catch(i){console.error(`
|
|
27
|
+
\u274C Scaffolding failed:`,i),process.exit(1);}process.exit(0);}async function x(n,o){console.log(`
|
|
28
|
+
\u{1F4E6} Creating Next.js application (this may take a minute)...`),execSync(`npx create-next-app@latest ${n} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,{stdio:"inherit"}),console.log(`
|
|
29
|
+
\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...`),execSync("npm install @unciatech/file-manager tailwindcss-animate",{cwd:o,stdio:"inherit"});let i=r.join(o,"src","components");e.existsSync(i)||e.mkdirSync(i,{recursive:true}),e.writeFileSync(r.join(i,"FileManagerDemo.tsx"),p,"utf-8");let c=r.join(o,"src","app","page.tsx");e.writeFileSync(c,`import FileManagerDemo from "@/components/FileManagerDemo";
|
|
30
30
|
|
|
31
31
|
export default function Home() {
|
|
32
32
|
return (
|
|
@@ -35,7 +35,7 @@ export default function Home() {
|
|
|
35
35
|
</main>
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
|
-
`);let
|
|
38
|
+
`);let l=r.join(o,"src","app","media","[[...path]]");e.mkdirSync(l,{recursive:true}),e.writeFileSync(r.join(l,"page.tsx"),`import FileManagerDemo from "@/components/FileManagerDemo";
|
|
39
39
|
|
|
40
40
|
export default function MediaPage() {
|
|
41
41
|
return (
|
|
@@ -44,14 +44,117 @@ export default function MediaPage() {
|
|
|
44
44
|
</main>
|
|
45
45
|
);
|
|
46
46
|
}
|
|
47
|
-
`);let r
|
|
48
|
-
$1`),e.writeFileSync(
|
|
49
|
-
@
|
|
47
|
+
`);let a=r.join(o,"src","app","layout.tsx");if(e.existsSync(a)){let d=e.readFileSync(a,"utf8");d.includes("@unciatech/file-manager/styles")||(d=d.replace(/^(import type)/m,`import '@unciatech/file-manager/styles';
|
|
48
|
+
$1`),e.writeFileSync(a,d));}let u=r.join(o,"src","app","globals.css");e.writeFileSync(u,`@import 'tailwindcss';
|
|
49
|
+
@import 'tw-animate-css';
|
|
50
50
|
@source "../../node_modules/@unciatech/file-manager/dist";
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
/** Dark Mode Variant **/
|
|
53
|
+
@custom-variant dark (&:is(.dark *));
|
|
54
|
+
|
|
55
|
+
@theme {
|
|
56
|
+
--font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
57
|
+
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/** Colors **/
|
|
61
|
+
:root {
|
|
62
|
+
--background: var(--color-white);
|
|
63
|
+
--foreground: var(--color-zinc-950);
|
|
64
|
+
--card: var(--color-white);
|
|
65
|
+
--card-foreground: var(--color-zinc-950);
|
|
66
|
+
--popover: var(--color-white);
|
|
67
|
+
--popover-foreground: var(--color-zinc-950);
|
|
68
|
+
--primary: var(--color-blue-500);
|
|
69
|
+
--primary-foreground: var(--color-white);
|
|
70
|
+
--secondary: var(--color-zinc-100);
|
|
71
|
+
--secondary-foreground: var(--color-zinc-900);
|
|
72
|
+
--muted: var(--color-zinc-100);
|
|
73
|
+
--muted-foreground: var(--color-zinc-500);
|
|
74
|
+
--accent: var(--color-zinc-100);
|
|
75
|
+
--accent-foreground: var(--color-zinc-900);
|
|
76
|
+
--destructive: var(--color-red-600);
|
|
77
|
+
--destructive-foreground: var(--color-white);
|
|
78
|
+
--border: oklch(94% 0.004 286.32);
|
|
79
|
+
--input: var(--color-zinc-200);
|
|
80
|
+
--ring: var(--color-zinc-400);
|
|
81
|
+
--radius: 0.5rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.dark {
|
|
85
|
+
--background: var(--color-zinc-950);
|
|
86
|
+
--foreground: var(--color-zinc-50);
|
|
87
|
+
--card: var(--color-zinc-950);
|
|
88
|
+
--card-foreground: var(--color-zinc-50);
|
|
89
|
+
--popover: var(--color-zinc-950);
|
|
90
|
+
--popover-foreground: var(--color-zinc-50);
|
|
91
|
+
--primary: var(--color-blue-600);
|
|
92
|
+
--primary-foreground: var(--color-white);
|
|
93
|
+
--secondary: var(--color-zinc-800);
|
|
94
|
+
--secondary-foreground: var(--color-zinc-50);
|
|
95
|
+
--muted: var(--color-zinc-900);
|
|
96
|
+
--muted-foreground: var(--color-zinc-500);
|
|
97
|
+
--accent: var(--color-zinc-900);
|
|
98
|
+
--accent-foreground: var(--color-zinc-50);
|
|
99
|
+
--destructive: var(--color-red-600);
|
|
100
|
+
--destructive-foreground: var(--color-white);
|
|
101
|
+
--border: var(--color-zinc-800);
|
|
102
|
+
--input: var(--color-zinc-800);
|
|
103
|
+
--ring: var(--color-zinc-600);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/** Theme Setup **/
|
|
107
|
+
@theme inline {
|
|
108
|
+
--color-background: var(--background);
|
|
109
|
+
--color-foreground: var(--foreground);
|
|
110
|
+
--color-card: var(--card);
|
|
111
|
+
--color-card-foreground: var(--card-foreground);
|
|
112
|
+
--color-popover: var(--popover);
|
|
113
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
114
|
+
--color-muted: var(--muted);
|
|
115
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
116
|
+
--color-accent: var(--accent);
|
|
117
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
118
|
+
--color-primary: var(--primary);
|
|
119
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
120
|
+
--color-secondary: var(--secondary);
|
|
121
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
122
|
+
--color-destructive: var(--destructive);
|
|
123
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
124
|
+
--color-border: var(--border);
|
|
125
|
+
--color-input: var(--input);
|
|
126
|
+
--color-ring: var(--ring);
|
|
127
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
128
|
+
--radius-lg: var(--radius);
|
|
129
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
130
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/** Global Styles **/
|
|
134
|
+
@layer base {
|
|
135
|
+
* {
|
|
136
|
+
@apply border-border;
|
|
137
|
+
}
|
|
138
|
+
*:focus-visible {
|
|
139
|
+
@apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/** Custom Scrollbar **/
|
|
144
|
+
@layer base {
|
|
145
|
+
::-webkit-scrollbar { width: 5px; }
|
|
146
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
147
|
+
::-webkit-scrollbar-thumb { background: var(--input); border-radius: 5px; }
|
|
148
|
+
* { scrollbar-width: thin; scrollbar-color: var(--input) transparent; }
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
/** Smooth scroll **/
|
|
152
|
+
html {
|
|
153
|
+
scroll-behavior: smooth;
|
|
154
|
+
}
|
|
155
|
+
`),f(n);}async function b(n,o){console.log(`
|
|
156
|
+
\u{1F4E6} Creating Vite React application...`),execSync(`npm create vite@latest ${n} -- --template react-ts`,{stdio:"inherit"}),console.log(`
|
|
157
|
+
\u{1F4E6} Installing dependencies (Tailwind + File Manager)...`),execSync("npm install",{cwd:o,stdio:"inherit"}),execSync("npm install tailwindcss @tailwindcss/vite @unciatech/file-manager",{cwd:o,stdio:"inherit"});let i=r.join(o,"vite.config.ts");e.writeFileSync(i,`import { defineConfig } from 'vite'
|
|
55
158
|
import react from '@vitejs/plugin-react'
|
|
56
159
|
import tailwindcss from '@tailwindcss/vite'
|
|
57
160
|
|
|
@@ -61,9 +164,9 @@ export default defineConfig({
|
|
|
61
164
|
tailwindcss(),
|
|
62
165
|
],
|
|
63
166
|
})
|
|
64
|
-
`);let
|
|
167
|
+
`);let l=r.join(o,"src","index.css");e.writeFileSync(l,`@import "tailwindcss";
|
|
65
168
|
@source "../../node_modules/@unciatech/file-manager/dist";
|
|
66
|
-
`);let r
|
|
169
|
+
`);let a=r.join(o,"src","components");e.existsSync(a)||e.mkdirSync(a,{recursive:true}),e.writeFileSync(r.join(a,"FileManagerDemo.tsx"),p,"utf-8");let u=r.join(o,"src","App.tsx");e.writeFileSync(u,`import FileManagerDemo from "./components/FileManagerDemo";
|
|
67
170
|
|
|
68
171
|
function App() {
|
|
69
172
|
return (
|
|
@@ -74,8 +177,8 @@ function App() {
|
|
|
74
177
|
}
|
|
75
178
|
|
|
76
179
|
export default App;
|
|
77
|
-
`),f(
|
|
180
|
+
`),f(n,"npm run dev");}function f(n,o="npm run dev"){console.log(`
|
|
78
181
|
=========================================`),console.log("\u{1F389} Your Media Library application is ready!"),console.log("========================================="),console.log(`
|
|
79
|
-
Next steps:`),console.log(` cd ${
|
|
182
|
+
Next steps:`),console.log(` cd ${n}`),console.log(` ${o}`),console.log(`
|
|
80
183
|
Enjoy building! \u{1F5C2}\uFE0F
|
|
81
|
-
`)}h();
|
|
184
|
+
`);}h();
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
type FileUploadInput = {
|
|
2
|
+
file: File;
|
|
3
|
+
metadata: Partial<FileMetaData>;
|
|
4
|
+
videoSource?: VideoSource;
|
|
5
|
+
};
|
|
6
|
+
interface IFileManagerProvider {
|
|
7
|
+
getFolder(folderId: FolderId): Promise<Folder | null>;
|
|
8
|
+
getFolders(folderId: FolderId, page?: number, limit?: number, query?: string): Promise<{
|
|
9
|
+
folders: Folder[];
|
|
10
|
+
pagination: PaginationInfo;
|
|
11
|
+
}>;
|
|
12
|
+
getTags(): Promise<string[]>;
|
|
13
|
+
getFiles(folderId: FolderId, fileTypes?: FileType[] | null, page?: number, limit?: number, query?: string): Promise<{
|
|
14
|
+
files: FileMetaData[];
|
|
15
|
+
pagination: PaginationInfo;
|
|
16
|
+
}>;
|
|
17
|
+
/**
|
|
18
|
+
* Get files and folders separately (folders always come first)
|
|
19
|
+
* Folders are returned for the current page, followed by files
|
|
20
|
+
*/
|
|
21
|
+
getItems(folderId: FolderId, fileTypes?: FileType[], page?: number, limit?: number, query?: string): Promise<{
|
|
22
|
+
folders: Folder[];
|
|
23
|
+
files: FileMetaData[];
|
|
24
|
+
pagination: PaginationInfo;
|
|
25
|
+
}>;
|
|
26
|
+
createFolder(name: string, parentId?: FolderId): Promise<Folder>;
|
|
27
|
+
uploadFiles(files: FileUploadInput[], folderId?: FolderId): Promise<FileMetaData[]>;
|
|
28
|
+
renameFolder(folderId: FolderId, newName: string): Promise<Folder>;
|
|
29
|
+
moveFiles(fileIds: EntityId[], newFolderId: FolderId): Promise<FileMetaData[]>;
|
|
30
|
+
moveFolders(folderIds: FolderId[], newParentId: FolderId): Promise<Folder[]>;
|
|
31
|
+
updateFileMetaData(fileId: EntityId, metaData: Partial<FileMetaData>): Promise<FileMetaData>;
|
|
32
|
+
deleteFiles(fileIds: EntityId[]): Promise<void>;
|
|
33
|
+
deleteFolders(folderIds: FolderId[]): Promise<void>;
|
|
34
|
+
findFiles(searchQuery: string): Promise<FileMetaData[]>;
|
|
35
|
+
findFolders(searchQuery: string): Promise<Folder[]>;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
declare const MODE: {
|
|
39
|
+
readonly PAGE: "page";
|
|
40
|
+
readonly MODAL: "modal";
|
|
41
|
+
};
|
|
42
|
+
type Mode = (typeof MODE)[keyof typeof MODE];
|
|
43
|
+
declare const FILE_TYPE: {
|
|
44
|
+
readonly IMAGE: "images";
|
|
45
|
+
readonly VIDEO: "videos";
|
|
46
|
+
readonly AUDIO: "audios";
|
|
47
|
+
readonly FILE: "files";
|
|
48
|
+
};
|
|
49
|
+
type FileType = (typeof FILE_TYPE)[keyof typeof FILE_TYPE];
|
|
50
|
+
declare const SELECTION_MODE: {
|
|
51
|
+
readonly SINGLE: "single";
|
|
52
|
+
readonly MULTIPLE: "multiple";
|
|
53
|
+
};
|
|
54
|
+
type SelectionMode = (typeof SELECTION_MODE)[keyof typeof SELECTION_MODE];
|
|
55
|
+
declare const VIEW_MODE: {
|
|
56
|
+
readonly GRID: "grid";
|
|
57
|
+
readonly LIST: "list";
|
|
58
|
+
};
|
|
59
|
+
type ViewMode = (typeof VIEW_MODE)[keyof typeof VIEW_MODE];
|
|
60
|
+
declare const VIDEO_SOURCE: {
|
|
61
|
+
readonly LOCAL: "local";
|
|
62
|
+
readonly REMOTE: "remote";
|
|
63
|
+
readonly YOUTUBE: "youtube";
|
|
64
|
+
readonly VIMEO: "vimeo";
|
|
65
|
+
};
|
|
66
|
+
type VideoSource = (typeof VIDEO_SOURCE)[keyof typeof VIDEO_SOURCE];
|
|
67
|
+
interface MetaDataType {
|
|
68
|
+
/** Video or Audio duration in seconds. */
|
|
69
|
+
duration?: number;
|
|
70
|
+
/** Provider source for video content (e.g., 'local', 'youtube'). */
|
|
71
|
+
videoSource?: VideoSource;
|
|
72
|
+
/** Audio bitrate in kbps. */
|
|
73
|
+
bitrate?: number;
|
|
74
|
+
/** Total number of pages for document file types. */
|
|
75
|
+
pageCount?: number;
|
|
76
|
+
/** Original creator or author of the document. */
|
|
77
|
+
author?: string;
|
|
78
|
+
/** General description text used across multiple asset types. */
|
|
79
|
+
description?: string;
|
|
80
|
+
}
|
|
81
|
+
type EntityId = string | number;
|
|
82
|
+
type FolderId = string | number | null;
|
|
83
|
+
interface Folder {
|
|
84
|
+
id: FolderId;
|
|
85
|
+
name: string;
|
|
86
|
+
pathId: number;
|
|
87
|
+
path: string;
|
|
88
|
+
parent?: Folder | null;
|
|
89
|
+
folderCount?: number;
|
|
90
|
+
parentId: FolderId;
|
|
91
|
+
folderPath?: string;
|
|
92
|
+
color?: string;
|
|
93
|
+
fileCount?: number;
|
|
94
|
+
createdAt: Date;
|
|
95
|
+
updatedAt: Date;
|
|
96
|
+
tags?: string[];
|
|
97
|
+
}
|
|
98
|
+
interface FormatDetails {
|
|
99
|
+
ext: string;
|
|
100
|
+
url: string;
|
|
101
|
+
hash: string;
|
|
102
|
+
mime: string;
|
|
103
|
+
name: string;
|
|
104
|
+
path: string | null;
|
|
105
|
+
size: number;
|
|
106
|
+
width: number;
|
|
107
|
+
height: number;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Core interface representing a File entity in the file manager.
|
|
111
|
+
* Supports various formats (images, videos, audio, documents) via common fields
|
|
112
|
+
* and nested metadata structures.
|
|
113
|
+
*/
|
|
114
|
+
interface FileMetaData {
|
|
115
|
+
/** Unique identifier for the file. */
|
|
116
|
+
id: EntityId;
|
|
117
|
+
/** Human-readable name of the file (including extension). */
|
|
118
|
+
name: string;
|
|
119
|
+
/** ID of the folder containing this file. Null represents the root directory. */
|
|
120
|
+
folderId: FolderId;
|
|
121
|
+
/** Path representation of the file's location (e.g., "/1/156"). */
|
|
122
|
+
folderPath?: string;
|
|
123
|
+
/** Size of the file in bytes. */
|
|
124
|
+
size: number;
|
|
125
|
+
/** Direct URL path to access or download the full asset. */
|
|
126
|
+
url: string;
|
|
127
|
+
/** URL to an optimized, lightweight thumbnail or preview of the asset. */
|
|
128
|
+
previewUrl?: string;
|
|
129
|
+
/** Content-Type HTTP header representation (e.g., "image/jpeg"). */
|
|
130
|
+
mime: string;
|
|
131
|
+
/** File extension including the dot (e.g., ".jpg"). */
|
|
132
|
+
ext?: string;
|
|
133
|
+
/** Content hash for deduplication and cache busting. */
|
|
134
|
+
hash?: string;
|
|
135
|
+
/** Accessible alt text for images to display when images are disabled. */
|
|
136
|
+
alternativeText?: string;
|
|
137
|
+
/** Caption text commonly used in images and videos. */
|
|
138
|
+
caption?: string;
|
|
139
|
+
/** Intrinsic width in pixels for image/video assets. */
|
|
140
|
+
width?: number;
|
|
141
|
+
/** Intrinsic height in pixels for image/video assets. */
|
|
142
|
+
height?: number;
|
|
143
|
+
/** Collection of generated optimized formats for images. */
|
|
144
|
+
formats?: Record<string, FormatDetails>;
|
|
145
|
+
/** Dynamic metadata payload containing properties specific to the asset type. */
|
|
146
|
+
metaData: MetaDataType;
|
|
147
|
+
/** Timestamp of file creation. */
|
|
148
|
+
createdAt: Date;
|
|
149
|
+
/** Timestamp of last file modification. */
|
|
150
|
+
updatedAt: Date;
|
|
151
|
+
/** Categorization tags for sorting and discovery. */
|
|
152
|
+
tags?: string[];
|
|
153
|
+
}
|
|
154
|
+
interface PaginationInfo {
|
|
155
|
+
currentPage: number;
|
|
156
|
+
totalPages: number;
|
|
157
|
+
totalFiles: number;
|
|
158
|
+
filesPerPage: number;
|
|
159
|
+
}
|
|
160
|
+
interface FileManagerPageProps {
|
|
161
|
+
allowedFileTypes: FileType[];
|
|
162
|
+
viewMode: ViewMode;
|
|
163
|
+
initialFolderId?: FolderId;
|
|
164
|
+
provider: IFileManagerProvider;
|
|
165
|
+
basePath?: string;
|
|
166
|
+
}
|
|
167
|
+
interface FileManagerModalProps {
|
|
168
|
+
open: boolean;
|
|
169
|
+
onClose: () => void;
|
|
170
|
+
onFilesSelected: (files: FileMetaData[]) => void;
|
|
171
|
+
fileSelectionMode?: SelectionMode;
|
|
172
|
+
allowedFileTypes: FileType[];
|
|
173
|
+
acceptedFileTypes?: FileType[];
|
|
174
|
+
viewMode?: ViewMode;
|
|
175
|
+
initialFolderId?: FolderId;
|
|
176
|
+
provider: IFileManagerProvider;
|
|
177
|
+
basePath?: string;
|
|
178
|
+
}
|
|
179
|
+
interface FileManagerRootProps {
|
|
180
|
+
mode: Mode;
|
|
181
|
+
selectionMode: SelectionMode;
|
|
182
|
+
allowedFileTypes: FileType[];
|
|
183
|
+
viewMode: ViewMode;
|
|
184
|
+
initialFolderId?: FolderId;
|
|
185
|
+
acceptedFileTypesForModal?: FileType[];
|
|
186
|
+
provider: IFileManagerProvider;
|
|
187
|
+
basePath?: string;
|
|
188
|
+
onFilesSelected?: (files: FileMetaData[]) => void;
|
|
189
|
+
onClose?: () => void;
|
|
190
|
+
maxUploadFiles?: number;
|
|
191
|
+
maxUploadSize?: number;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
export type { EntityId as E, FolderId as F, IFileManagerProvider as I, Mode as M, PaginationInfo as P, SelectionMode as S, ViewMode as V, Folder as a, FileType as b, FileMetaData as c, FileUploadInput as d, FileManagerPageProps as e, FileManagerModalProps as f, FileManagerRootProps as g };
|
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
type FileUploadInput = {
|
|
2
|
+
file: File;
|
|
3
|
+
metadata: Partial<FileMetaData>;
|
|
4
|
+
videoSource?: VideoSource;
|
|
5
|
+
};
|
|
6
|
+
interface IFileManagerProvider {
|
|
7
|
+
getFolder(folderId: FolderId): Promise<Folder | null>;
|
|
8
|
+
getFolders(folderId: FolderId, page?: number, limit?: number, query?: string): Promise<{
|
|
9
|
+
folders: Folder[];
|
|
10
|
+
pagination: PaginationInfo;
|
|
11
|
+
}>;
|
|
12
|
+
getTags(): Promise<string[]>;
|
|
13
|
+
getFiles(folderId: FolderId, fileTypes?: FileType[] | null, page?: number, limit?: number, query?: string): Promise<{
|
|
14
|
+
files: FileMetaData[];
|
|
15
|
+
pagination: PaginationInfo;
|
|
16
|
+
}>;
|
|
17
|
+
/**
|
|
18
|
+
* Get files and folders separately (folders always come first)
|
|
19
|
+
* Folders are returned for the current page, followed by files
|
|
20
|
+
*/
|
|
21
|
+
getItems(folderId: FolderId, fileTypes?: FileType[], page?: number, limit?: number, query?: string): Promise<{
|
|
22
|
+
folders: Folder[];
|
|
23
|
+
files: FileMetaData[];
|
|
24
|
+
pagination: PaginationInfo;
|
|
25
|
+
}>;
|
|
26
|
+
createFolder(name: string, parentId?: FolderId): Promise<Folder>;
|
|
27
|
+
uploadFiles(files: FileUploadInput[], folderId?: FolderId): Promise<FileMetaData[]>;
|
|
28
|
+
renameFolder(folderId: FolderId, newName: string): Promise<Folder>;
|
|
29
|
+
moveFiles(fileIds: EntityId[], newFolderId: FolderId): Promise<FileMetaData[]>;
|
|
30
|
+
moveFolders(folderIds: FolderId[], newParentId: FolderId): Promise<Folder[]>;
|
|
31
|
+
updateFileMetaData(fileId: EntityId, metaData: Partial<FileMetaData>): Promise<FileMetaData>;
|
|
32
|
+
deleteFiles(fileIds: EntityId[]): Promise<void>;
|
|
33
|
+
deleteFolders(folderIds: FolderId[]): Promise<void>;
|
|
34
|
+
findFiles(searchQuery: string): Promise<FileMetaData[]>;
|
|
35
|
+
findFolders(searchQuery: string): Promise<Folder[]>;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
declare const MODE: {
|
|
39
|
+
readonly PAGE: "page";
|
|
40
|
+
readonly MODAL: "modal";
|
|
41
|
+
};
|
|
42
|
+
type Mode = (typeof MODE)[keyof typeof MODE];
|
|
43
|
+
declare const FILE_TYPE: {
|
|
44
|
+
readonly IMAGE: "images";
|
|
45
|
+
readonly VIDEO: "videos";
|
|
46
|
+
readonly AUDIO: "audios";
|
|
47
|
+
readonly FILE: "files";
|
|
48
|
+
};
|
|
49
|
+
type FileType = (typeof FILE_TYPE)[keyof typeof FILE_TYPE];
|
|
50
|
+
declare const SELECTION_MODE: {
|
|
51
|
+
readonly SINGLE: "single";
|
|
52
|
+
readonly MULTIPLE: "multiple";
|
|
53
|
+
};
|
|
54
|
+
type SelectionMode = (typeof SELECTION_MODE)[keyof typeof SELECTION_MODE];
|
|
55
|
+
declare const VIEW_MODE: {
|
|
56
|
+
readonly GRID: "grid";
|
|
57
|
+
readonly LIST: "list";
|
|
58
|
+
};
|
|
59
|
+
type ViewMode = (typeof VIEW_MODE)[keyof typeof VIEW_MODE];
|
|
60
|
+
declare const VIDEO_SOURCE: {
|
|
61
|
+
readonly LOCAL: "local";
|
|
62
|
+
readonly REMOTE: "remote";
|
|
63
|
+
readonly YOUTUBE: "youtube";
|
|
64
|
+
readonly VIMEO: "vimeo";
|
|
65
|
+
};
|
|
66
|
+
type VideoSource = (typeof VIDEO_SOURCE)[keyof typeof VIDEO_SOURCE];
|
|
67
|
+
interface MetaDataType {
|
|
68
|
+
/** Video or Audio duration in seconds. */
|
|
69
|
+
duration?: number;
|
|
70
|
+
/** Provider source for video content (e.g., 'local', 'youtube'). */
|
|
71
|
+
videoSource?: VideoSource;
|
|
72
|
+
/** Audio bitrate in kbps. */
|
|
73
|
+
bitrate?: number;
|
|
74
|
+
/** Total number of pages for document file types. */
|
|
75
|
+
pageCount?: number;
|
|
76
|
+
/** Original creator or author of the document. */
|
|
77
|
+
author?: string;
|
|
78
|
+
/** General description text used across multiple asset types. */
|
|
79
|
+
description?: string;
|
|
80
|
+
}
|
|
81
|
+
type EntityId = string | number;
|
|
82
|
+
type FolderId = string | number | null;
|
|
83
|
+
interface Folder {
|
|
84
|
+
id: FolderId;
|
|
85
|
+
name: string;
|
|
86
|
+
pathId: number;
|
|
87
|
+
path: string;
|
|
88
|
+
parent?: Folder | null;
|
|
89
|
+
folderCount?: number;
|
|
90
|
+
parentId: FolderId;
|
|
91
|
+
folderPath?: string;
|
|
92
|
+
color?: string;
|
|
93
|
+
fileCount?: number;
|
|
94
|
+
createdAt: Date;
|
|
95
|
+
updatedAt: Date;
|
|
96
|
+
tags?: string[];
|
|
97
|
+
}
|
|
98
|
+
interface FormatDetails {
|
|
99
|
+
ext: string;
|
|
100
|
+
url: string;
|
|
101
|
+
hash: string;
|
|
102
|
+
mime: string;
|
|
103
|
+
name: string;
|
|
104
|
+
path: string | null;
|
|
105
|
+
size: number;
|
|
106
|
+
width: number;
|
|
107
|
+
height: number;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Core interface representing a File entity in the file manager.
|
|
111
|
+
* Supports various formats (images, videos, audio, documents) via common fields
|
|
112
|
+
* and nested metadata structures.
|
|
113
|
+
*/
|
|
114
|
+
interface FileMetaData {
|
|
115
|
+
/** Unique identifier for the file. */
|
|
116
|
+
id: EntityId;
|
|
117
|
+
/** Human-readable name of the file (including extension). */
|
|
118
|
+
name: string;
|
|
119
|
+
/** ID of the folder containing this file. Null represents the root directory. */
|
|
120
|
+
folderId: FolderId;
|
|
121
|
+
/** Path representation of the file's location (e.g., "/1/156"). */
|
|
122
|
+
folderPath?: string;
|
|
123
|
+
/** Size of the file in bytes. */
|
|
124
|
+
size: number;
|
|
125
|
+
/** Direct URL path to access or download the full asset. */
|
|
126
|
+
url: string;
|
|
127
|
+
/** URL to an optimized, lightweight thumbnail or preview of the asset. */
|
|
128
|
+
previewUrl?: string;
|
|
129
|
+
/** Content-Type HTTP header representation (e.g., "image/jpeg"). */
|
|
130
|
+
mime: string;
|
|
131
|
+
/** File extension including the dot (e.g., ".jpg"). */
|
|
132
|
+
ext?: string;
|
|
133
|
+
/** Content hash for deduplication and cache busting. */
|
|
134
|
+
hash?: string;
|
|
135
|
+
/** Accessible alt text for images to display when images are disabled. */
|
|
136
|
+
alternativeText?: string;
|
|
137
|
+
/** Caption text commonly used in images and videos. */
|
|
138
|
+
caption?: string;
|
|
139
|
+
/** Intrinsic width in pixels for image/video assets. */
|
|
140
|
+
width?: number;
|
|
141
|
+
/** Intrinsic height in pixels for image/video assets. */
|
|
142
|
+
height?: number;
|
|
143
|
+
/** Collection of generated optimized formats for images. */
|
|
144
|
+
formats?: Record<string, FormatDetails>;
|
|
145
|
+
/** Dynamic metadata payload containing properties specific to the asset type. */
|
|
146
|
+
metaData: MetaDataType;
|
|
147
|
+
/** Timestamp of file creation. */
|
|
148
|
+
createdAt: Date;
|
|
149
|
+
/** Timestamp of last file modification. */
|
|
150
|
+
updatedAt: Date;
|
|
151
|
+
/** Categorization tags for sorting and discovery. */
|
|
152
|
+
tags?: string[];
|
|
153
|
+
}
|
|
154
|
+
interface PaginationInfo {
|
|
155
|
+
currentPage: number;
|
|
156
|
+
totalPages: number;
|
|
157
|
+
totalFiles: number;
|
|
158
|
+
filesPerPage: number;
|
|
159
|
+
}
|
|
160
|
+
interface FileManagerPageProps {
|
|
161
|
+
allowedFileTypes: FileType[];
|
|
162
|
+
viewMode: ViewMode;
|
|
163
|
+
initialFolderId?: FolderId;
|
|
164
|
+
provider: IFileManagerProvider;
|
|
165
|
+
basePath?: string;
|
|
166
|
+
}
|
|
167
|
+
interface FileManagerModalProps {
|
|
168
|
+
open: boolean;
|
|
169
|
+
onClose: () => void;
|
|
170
|
+
onFilesSelected: (files: FileMetaData[]) => void;
|
|
171
|
+
fileSelectionMode?: SelectionMode;
|
|
172
|
+
allowedFileTypes: FileType[];
|
|
173
|
+
acceptedFileTypes?: FileType[];
|
|
174
|
+
viewMode?: ViewMode;
|
|
175
|
+
initialFolderId?: FolderId;
|
|
176
|
+
provider: IFileManagerProvider;
|
|
177
|
+
basePath?: string;
|
|
178
|
+
}
|
|
179
|
+
interface FileManagerRootProps {
|
|
180
|
+
mode: Mode;
|
|
181
|
+
selectionMode: SelectionMode;
|
|
182
|
+
allowedFileTypes: FileType[];
|
|
183
|
+
viewMode: ViewMode;
|
|
184
|
+
initialFolderId?: FolderId;
|
|
185
|
+
acceptedFileTypesForModal?: FileType[];
|
|
186
|
+
provider: IFileManagerProvider;
|
|
187
|
+
basePath?: string;
|
|
188
|
+
onFilesSelected?: (files: FileMetaData[]) => void;
|
|
189
|
+
onClose?: () => void;
|
|
190
|
+
maxUploadFiles?: number;
|
|
191
|
+
maxUploadSize?: number;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
export type { EntityId as E, FolderId as F, IFileManagerProvider as I, Mode as M, PaginationInfo as P, SelectionMode as S, ViewMode as V, Folder as a, FileType as b, FileMetaData as c, FileUploadInput as d, FileManagerPageProps as e, FileManagerModalProps as f, FileManagerRootProps as g };
|