@unciatech/file-manager 0.0.30 → 0.0.32

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.
Files changed (3) hide show
  1. package/dist/cli.cjs +86 -218
  2. package/dist/cli.js +81 -213
  3. package/package.json +1 -1
package/dist/cli.cjs CHANGED
@@ -24,20 +24,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
24
24
  ));
25
25
 
26
26
  // cli.ts
27
- var import_fs = __toESM(require("fs"), 1);
28
- var import_path = __toESM(require("path"), 1);
27
+ var fs = __toESM(require("fs"), 1);
28
+ var path = __toESM(require("path"), 1);
29
29
  var import_child_process = require("child_process");
30
- var import_readline = __toESM(require("readline"), 1);
30
+ var readline = __toESM(require("readline"), 1);
31
31
  var args = process.argv.slice(2);
32
32
  var command = args[0];
33
33
  var projectName = args[1];
34
- var rl = import_readline.default.createInterface({
34
+ var rl = readline.createInterface({
35
35
  input: process.stdin,
36
36
  output: process.stdout
37
37
  });
38
- var askQuestion = (query) => {
39
- return new Promise((resolve) => rl.question(query, resolve));
40
- };
38
+ var askQuestion = (query) => new Promise((resolve) => rl.question(query, resolve));
41
39
  var TEMPLATE = `"use client";
42
40
 
43
41
  import React, { Suspense, useMemo } from "react";
@@ -65,39 +63,30 @@ async function main() {
65
63
  process.exit(0);
66
64
  }
67
65
  if (!projectName) {
68
- console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");
66
+ console.log("\u{1F680} Generating <FileManagerDemo /> component...");
69
67
  let targetDir2 = process.cwd();
70
- if (import_fs.default.existsSync(import_path.default.join(process.cwd(), "components"))) {
71
- targetDir2 = import_path.default.join(process.cwd(), "components");
72
- } else if (import_fs.default.existsSync(import_path.default.join(process.cwd(), "src", "components"))) {
73
- targetDir2 = import_path.default.join(process.cwd(), "src", "components");
74
- }
75
- const targetFile = import_path.default.join(targetDir2, "FileManagerDemo.tsx");
76
- if (import_fs.default.existsSync(targetFile)) {
77
- console.error(`\u274C Error: ${targetFile} already exists.`);
78
- process.exit(1);
68
+ if (fs.existsSync(path.join(process.cwd(), "src/components"))) {
69
+ targetDir2 = path.join(process.cwd(), "src/components");
70
+ } else if (fs.existsSync(path.join(process.cwd(), "components"))) {
71
+ targetDir2 = path.join(process.cwd(), "components");
79
72
  }
80
- import_fs.default.writeFileSync(targetFile, TEMPLATE, "utf-8");
81
- console.log(`\u2705 Success! Created ${targetFile}`);
82
- console.log("");
83
- console.log("You can now import and render <FileManagerDemo /> anywhere in your application.");
84
- console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!");
73
+ const file = path.join(targetDir2, "FileManagerDemo.tsx");
74
+ fs.writeFileSync(file, TEMPLATE);
75
+ console.log(`\u2705 Created ${file}`);
85
76
  process.exit(0);
86
77
  }
87
78
  console.log(`
88
- \u{1F680} Initializing a new application: ${projectName}
79
+ \u{1F680} Initializing project: ${projectName}
89
80
  `);
90
- console.log("Which framework would you like to use?");
91
- console.log(" 1) Next.js (App Router, Tailwind v4)");
92
- console.log(" 2) Vite (React, Tailwind v4)");
93
- console.log(" 3) Cancel");
94
- const choice = await askQuestion("\nSelect an option (1-3): ");
95
- const targetDir = import_path.default.join(process.cwd(), projectName);
96
- if (import_fs.default.existsSync(targetDir)) {
97
- console.error(`
98
- \u274C Error: Directory "${projectName}" already exists in ${process.cwd()}.`);
99
- console.error(` Please choose a different project name or delete the existing directory first.`);
100
- rl.close();
81
+ console.log("Choose framework:");
82
+ console.log("1) Next.js");
83
+ console.log("2) Vite (React)");
84
+ console.log("3) Cancel");
85
+ const choice = await askQuestion("\nSelect option (1-3): ");
86
+ rl.close();
87
+ const targetDir = path.join(process.cwd(), projectName);
88
+ if (fs.existsSync(targetDir)) {
89
+ console.error("\u274C Directory already exists");
101
90
  process.exit(1);
102
91
  }
103
92
  try {
@@ -107,40 +96,34 @@ async function main() {
107
96
  await scaffoldVite(projectName, targetDir);
108
97
  } else {
109
98
  console.log("Canceled.");
110
- process.exit(0);
111
99
  }
112
- } catch (error) {
113
- console.error("\n\u274C Scaffolding failed:", error);
114
- process.exit(1);
100
+ } catch (e) {
101
+ console.error("\u274C Error:", e);
115
102
  }
116
- process.exit(0);
117
103
  }
118
104
  async function scaffoldNextjs(projectName2, targetDir) {
119
- console.log("\n\u{1F4E6} Creating Next.js application (this may take a minute)...");
120
- (0, import_child_process.execSync)(`npx create-next-app@latest ${projectName2} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`, { stdio: "inherit" });
121
- console.log("\n\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...");
122
- (0, import_child_process.execSync)("npm install @unciatech/file-manager tailwindcss-animate", { cwd: targetDir, stdio: "inherit" });
123
- const componentsDir = import_path.default.join(targetDir, "src", "components");
124
- if (!import_fs.default.existsSync(componentsDir)) import_fs.default.mkdirSync(componentsDir, { recursive: true });
125
- import_fs.default.writeFileSync(import_path.default.join(componentsDir, "FileManagerDemo.tsx"), TEMPLATE, "utf-8");
126
- const pagePath = import_path.default.join(targetDir, "src", "app", "page.tsx");
127
- import_fs.default.writeFileSync(pagePath, `import FileManagerDemo from "@/components/FileManagerDemo";
128
-
129
- export default function Home() {
130
- return (
131
- <main className="min-h-screen bg-neutral-50">
132
- <FileManagerDemo />
133
- </main>
105
+ console.log("\n\u{1F4E6} Creating Next.js app...");
106
+ (0, import_child_process.execSync)(
107
+ `npx create-next-app@latest ${projectName2} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,
108
+ { stdio: "inherit" }
134
109
  );
135
- }
136
- `);
137
- const mediaRouteDir = import_path.default.join(targetDir, "src", "app", "media", "[[...path]]");
138
- import_fs.default.mkdirSync(mediaRouteDir, { recursive: true });
139
- import_fs.default.writeFileSync(
140
- import_path.default.join(mediaRouteDir, "page.tsx"),
110
+ console.log("\n\u{1F4E6} Installing dependencies...");
111
+ (0, import_child_process.execSync)("npm install @unciatech/file-manager tailwindcss-animate", {
112
+ cwd: targetDir,
113
+ stdio: "inherit"
114
+ });
115
+ const componentsDir = path.join(targetDir, "src/components");
116
+ fs.mkdirSync(componentsDir, { recursive: true });
117
+ fs.writeFileSync(
118
+ path.join(componentsDir, "FileManagerDemo.tsx"),
119
+ TEMPLATE
120
+ );
121
+ const pagePath = path.join(targetDir, "src/app/page.tsx");
122
+ fs.writeFileSync(
123
+ pagePath,
141
124
  `import FileManagerDemo from "@/components/FileManagerDemo";
142
125
 
143
- export default function MediaPage() {
126
+ export default function Home() {
144
127
  return (
145
128
  <main className="min-h-screen bg-neutral-50">
146
129
  <FileManagerDemo />
@@ -149,166 +132,49 @@ export default function MediaPage() {
149
132
  }
150
133
  `
151
134
  );
152
- const layoutPath = import_path.default.join(targetDir, "src", "app", "layout.tsx");
153
- if (import_fs.default.existsSync(layoutPath)) {
154
- let layoutContent = import_fs.default.readFileSync(layoutPath, "utf8");
155
- if (!layoutContent.includes("@unciatech/file-manager/styles")) {
156
- layoutContent = layoutContent.replace(
157
- /^(import type)/m,
158
- `import '@unciatech/file-manager/styles';
159
- $1`
160
- );
161
- import_fs.default.writeFileSync(layoutPath, layoutContent);
162
- }
163
- }
164
- const cssPath = import_path.default.join(targetDir, "src", "app", "globals.css");
165
- import_fs.default.writeFileSync(cssPath, `@import 'tailwindcss';
166
- @import 'tw-animate-css';
167
- @source "../../node_modules/@unciatech/file-manager/dist";
168
-
169
- /** Dark Mode Variant **/
170
- @custom-variant dark (&:is(.dark *));
171
-
172
- @theme {
173
- --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
174
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
175
- }
176
-
177
- /** Colors **/
178
- :root {
179
- --background: var(--color-white);
180
- --foreground: var(--color-zinc-950);
181
- --card: var(--color-white);
182
- --card-foreground: var(--color-zinc-950);
183
- --popover: var(--color-white);
184
- --popover-foreground: var(--color-zinc-950);
185
- --primary: var(--color-blue-500);
186
- --primary-foreground: var(--color-white);
187
- --secondary: var(--color-zinc-100);
188
- --secondary-foreground: var(--color-zinc-900);
189
- --muted: var(--color-zinc-100);
190
- --muted-foreground: var(--color-zinc-500);
191
- --accent: var(--color-zinc-100);
192
- --accent-foreground: var(--color-zinc-900);
193
- --destructive: var(--color-red-600);
194
- --destructive-foreground: var(--color-white);
195
- --border: oklch(94% 0.004 286.32);
196
- --input: var(--color-zinc-200);
197
- --ring: var(--color-zinc-400);
198
- --radius: 0.5rem;
199
- }
200
-
201
- .dark {
202
- --background: var(--color-zinc-950);
203
- --foreground: var(--color-zinc-50);
204
- --card: var(--color-zinc-950);
205
- --card-foreground: var(--color-zinc-50);
206
- --popover: var(--color-zinc-950);
207
- --popover-foreground: var(--color-zinc-50);
208
- --primary: var(--color-blue-600);
209
- --primary-foreground: var(--color-white);
210
- --secondary: var(--color-zinc-800);
211
- --secondary-foreground: var(--color-zinc-50);
212
- --muted: var(--color-zinc-900);
213
- --muted-foreground: var(--color-zinc-500);
214
- --accent: var(--color-zinc-900);
215
- --accent-foreground: var(--color-zinc-50);
216
- --destructive: var(--color-red-600);
217
- --destructive-foreground: var(--color-white);
218
- --border: var(--color-zinc-800);
219
- --input: var(--color-zinc-800);
220
- --ring: var(--color-zinc-600);
221
- }
222
-
223
- /** Theme Setup **/
224
- @theme inline {
225
- --color-background: var(--background);
226
- --color-foreground: var(--foreground);
227
- --color-card: var(--card);
228
- --color-card-foreground: var(--card-foreground);
229
- --color-popover: var(--popover);
230
- --color-popover-foreground: var(--popover-foreground);
231
- --color-muted: var(--muted);
232
- --color-muted-foreground: var(--muted-foreground);
233
- --color-accent: var(--accent);
234
- --color-accent-foreground: var(--accent-foreground);
235
- --color-primary: var(--primary);
236
- --color-primary-foreground: var(--primary-foreground);
237
- --color-secondary: var(--secondary);
238
- --color-secondary-foreground: var(--secondary-foreground);
239
- --color-destructive: var(--destructive);
240
- --color-destructive-foreground: var(--destructive-foreground);
241
- --color-border: var(--border);
242
- --color-input: var(--input);
243
- --color-ring: var(--ring);
244
- --radius-xl: calc(var(--radius) + 4px);
245
- --radius-lg: var(--radius);
246
- --radius-md: calc(var(--radius) - 2px);
247
- --radius-sm: calc(var(--radius) - 4px);
248
- }
249
-
250
- /** Global Styles **/
251
- @layer base {
252
- * {
253
- @apply border-border;
254
- }
255
- *:focus-visible {
256
- @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
257
- }
258
- }
259
-
260
- /** Custom Scrollbar **/
261
- @layer base {
262
- ::-webkit-scrollbar { width: 5px; }
263
- ::-webkit-scrollbar-track { background: transparent; }
264
- ::-webkit-scrollbar-thumb { background: var(--input); border-radius: 5px; }
265
- * { scrollbar-width: thin; scrollbar-color: var(--input) transparent; }
266
- }
267
-
268
- /** Smooth scroll **/
269
- html {
270
- scroll-behavior: smooth;
271
- }
272
- `);
273
135
  printSuccess(projectName2);
274
136
  }
275
137
  async function scaffoldVite(projectName2, targetDir) {
276
- console.log("\n\u{1F4E6} Creating Vite React application...");
277
- (0, import_child_process.execSync)(`npm create vite@latest ${projectName2} -- --template react-ts`, { stdio: "inherit" });
278
- console.log("\n\u{1F4E6} Installing dependencies (Tailwind + File Manager)...");
138
+ console.log("\n\u{1F4E6} Creating Vite app...");
139
+ (0, import_child_process.execSync)(
140
+ `npm create vite@latest ${projectName2} -- --template react-ts`,
141
+ { stdio: "inherit" }
142
+ );
143
+ console.log("\n\u{1F4E6} Installing dependencies...");
279
144
  (0, import_child_process.execSync)("npm install", { cwd: targetDir, stdio: "inherit" });
280
- (0, import_child_process.execSync)("npm install @unciatech/file-manager tailwindcss @tailwindcss/vite tw-animate-css", { cwd: targetDir, stdio: "inherit" });
281
- const viteConfigPath = import_path.default.join(targetDir, "vite.config.ts");
145
+ (0, import_child_process.execSync)(
146
+ "npm install tailwindcss @tailwindcss/vite tw-animate-css @unciatech/file-manager",
147
+ { cwd: targetDir, stdio: "inherit" }
148
+ );
282
149
  const viteConfig = `import { defineConfig } from 'vite'
283
150
  import react from '@vitejs/plugin-react'
284
151
  import tailwindcss from '@tailwindcss/vite'
285
152
 
286
153
  export default defineConfig({
287
- plugins: [
288
- react(),
289
- tailwindcss(),
290
- ],
154
+ plugins: [react(), tailwindcss()],
291
155
  })
292
156
  `;
293
- import_fs.default.writeFileSync(viteConfigPath, viteConfig);
294
- const cssPath = import_path.default.join(targetDir, "src", "index.css");
295
- import_fs.default.writeFileSync(cssPath, `@import "tailwindcss";
157
+ fs.writeFileSync(path.join(targetDir, "vite.config.ts"), viteConfig);
158
+ const css = `@import "tailwindcss";
159
+ @import "tw-animate-css";
160
+
296
161
  @source "../node_modules/@unciatech/file-manager/dist/**/*.{js,ts,jsx,tsx}";
297
- `);
298
- const mainPath = import_path.default.join(targetDir, "src", "main.tsx");
299
- if (import_fs.default.existsSync(mainPath)) {
300
- let mainContent = import_fs.default.readFileSync(mainPath, "utf8");
301
- if (!mainContent.includes("@unciatech/file-manager/styles")) {
302
- mainContent = `import '@unciatech/file-manager/styles';
303
- ` + mainContent;
304
- import_fs.default.writeFileSync(mainPath, mainContent);
305
- }
162
+ `;
163
+ fs.writeFileSync(path.join(targetDir, "src/index.css"), css);
164
+ const mainFile = path.join(targetDir, "src/main.tsx");
165
+ let main2 = fs.readFileSync(mainFile, "utf8");
166
+ if (!main2.includes("@unciatech/file-manager/styles")) {
167
+ main2 = `import "@unciatech/file-manager/styles";
168
+ ` + main2;
306
169
  }
307
- const componentsDir = import_path.default.join(targetDir, "src", "components");
308
- if (!import_fs.default.existsSync(componentsDir)) import_fs.default.mkdirSync(componentsDir, { recursive: true });
309
- import_fs.default.writeFileSync(import_path.default.join(componentsDir, "FileManagerDemo.tsx"), TEMPLATE, "utf-8");
310
- const appPath = import_path.default.join(targetDir, "src", "App.tsx");
311
- import_fs.default.writeFileSync(appPath, `import FileManagerDemo from "./components/FileManagerDemo";
170
+ fs.writeFileSync(mainFile, main2);
171
+ const compDir = path.join(targetDir, "src/components");
172
+ fs.mkdirSync(compDir, { recursive: true });
173
+ fs.writeFileSync(
174
+ path.join(compDir, "FileManagerDemo.tsx"),
175
+ TEMPLATE
176
+ );
177
+ const app = `import FileManagerDemo from "./components/FileManagerDemo";
312
178
 
313
179
  function App() {
314
180
  return (
@@ -319,16 +185,18 @@ function App() {
319
185
  }
320
186
 
321
187
  export default App;
322
- `);
323
- printSuccess(projectName2, "npm run dev");
188
+ `;
189
+ fs.writeFileSync(path.join(targetDir, "src/App.tsx"), app);
190
+ printSuccess(projectName2);
324
191
  }
325
- function printSuccess(projectName2, devCmd = "npm run dev") {
326
- console.log("\n=========================================");
327
- console.log("\u{1F389} Your Media Library application is ready!");
328
- console.log("=========================================");
329
- console.log("\nNext steps:");
330
- console.log(` cd ${projectName2}`);
331
- console.log(` ${devCmd}`);
332
- console.log("\nEnjoy building! \u{1F5C2}\uFE0F\n");
192
+ function printSuccess(projectName2) {
193
+ console.log("\n=================================");
194
+ console.log("\u{1F389} Project ready!");
195
+ console.log("=================================");
196
+ console.log(`
197
+ Next steps:`);
198
+ console.log(`cd ${projectName2}`);
199
+ console.log(`npm run dev
200
+ `);
333
201
  }
334
202
  main();
package/dist/cli.js CHANGED
@@ -1,10 +1,10 @@
1
1
  #!/usr/bin/env node
2
2
 
3
3
  // cli.ts
4
- import fs from "fs";
5
- import path from "path";
4
+ import * as fs from "fs";
5
+ import * as path from "path";
6
6
  import { execSync } from "child_process";
7
- import readline from "readline";
7
+ import * as readline from "readline";
8
8
  var args = process.argv.slice(2);
9
9
  var command = args[0];
10
10
  var projectName = args[1];
@@ -12,9 +12,7 @@ var rl = readline.createInterface({
12
12
  input: process.stdin,
13
13
  output: process.stdout
14
14
  });
15
- var askQuestion = (query) => {
16
- return new Promise((resolve) => rl.question(query, resolve));
17
- };
15
+ var askQuestion = (query) => new Promise((resolve) => rl.question(query, resolve));
18
16
  var TEMPLATE = `"use client";
19
17
 
20
18
  import React, { Suspense, useMemo } from "react";
@@ -42,39 +40,30 @@ async function main() {
42
40
  process.exit(0);
43
41
  }
44
42
  if (!projectName) {
45
- console.log("\u{1F680} Generating <FileManagerDemo /> component in the current project...");
43
+ console.log("\u{1F680} Generating <FileManagerDemo /> component...");
46
44
  let targetDir2 = process.cwd();
47
- if (fs.existsSync(path.join(process.cwd(), "components"))) {
45
+ if (fs.existsSync(path.join(process.cwd(), "src/components"))) {
46
+ targetDir2 = path.join(process.cwd(), "src/components");
47
+ } else if (fs.existsSync(path.join(process.cwd(), "components"))) {
48
48
  targetDir2 = path.join(process.cwd(), "components");
49
- } else if (fs.existsSync(path.join(process.cwd(), "src", "components"))) {
50
- targetDir2 = path.join(process.cwd(), "src", "components");
51
49
  }
52
- const targetFile = path.join(targetDir2, "FileManagerDemo.tsx");
53
- if (fs.existsSync(targetFile)) {
54
- console.error(`\u274C Error: ${targetFile} already exists.`);
55
- process.exit(1);
56
- }
57
- fs.writeFileSync(targetFile, TEMPLATE, "utf-8");
58
- console.log(`\u2705 Success! Created ${targetFile}`);
59
- console.log("");
60
- console.log("You can now import and render <FileManagerDemo /> anywhere in your application.");
61
- console.log("Don't forget to configure your Tailwind CSS content to scan the library for styles!");
50
+ const file = path.join(targetDir2, "FileManagerDemo.tsx");
51
+ fs.writeFileSync(file, TEMPLATE);
52
+ console.log(`\u2705 Created ${file}`);
62
53
  process.exit(0);
63
54
  }
64
55
  console.log(`
65
- \u{1F680} Initializing a new application: ${projectName}
56
+ \u{1F680} Initializing project: ${projectName}
66
57
  `);
67
- console.log("Which framework would you like to use?");
68
- console.log(" 1) Next.js (App Router, Tailwind v4)");
69
- console.log(" 2) Vite (React, Tailwind v4)");
70
- console.log(" 3) Cancel");
71
- const choice = await askQuestion("\nSelect an option (1-3): ");
58
+ console.log("Choose framework:");
59
+ console.log("1) Next.js");
60
+ console.log("2) Vite (React)");
61
+ console.log("3) Cancel");
62
+ const choice = await askQuestion("\nSelect option (1-3): ");
63
+ rl.close();
72
64
  const targetDir = path.join(process.cwd(), projectName);
73
65
  if (fs.existsSync(targetDir)) {
74
- console.error(`
75
- \u274C Error: Directory "${projectName}" already exists in ${process.cwd()}.`);
76
- console.error(` Please choose a different project name or delete the existing directory first.`);
77
- rl.close();
66
+ console.error("\u274C Directory already exists");
78
67
  process.exit(1);
79
68
  }
80
69
  try {
@@ -84,40 +73,34 @@ async function main() {
84
73
  await scaffoldVite(projectName, targetDir);
85
74
  } else {
86
75
  console.log("Canceled.");
87
- process.exit(0);
88
76
  }
89
- } catch (error) {
90
- console.error("\n\u274C Scaffolding failed:", error);
91
- process.exit(1);
77
+ } catch (e) {
78
+ console.error("\u274C Error:", e);
92
79
  }
93
- process.exit(0);
94
80
  }
95
81
  async function scaffoldNextjs(projectName2, targetDir) {
96
- console.log("\n\u{1F4E6} Creating Next.js application (this may take a minute)...");
97
- execSync(`npx create-next-app@latest ${projectName2} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`, { stdio: "inherit" });
98
- console.log("\n\u{1F4E6} Installing dependencies (@unciatech/file-manager, tailwindcss-animate)...");
99
- execSync("npm install @unciatech/file-manager tailwindcss-animate", { cwd: targetDir, stdio: "inherit" });
100
- const componentsDir = path.join(targetDir, "src", "components");
101
- if (!fs.existsSync(componentsDir)) fs.mkdirSync(componentsDir, { recursive: true });
102
- fs.writeFileSync(path.join(componentsDir, "FileManagerDemo.tsx"), TEMPLATE, "utf-8");
103
- const pagePath = path.join(targetDir, "src", "app", "page.tsx");
104
- fs.writeFileSync(pagePath, `import FileManagerDemo from "@/components/FileManagerDemo";
105
-
106
- export default function Home() {
107
- return (
108
- <main className="min-h-screen bg-neutral-50">
109
- <FileManagerDemo />
110
- </main>
82
+ console.log("\n\u{1F4E6} Creating Next.js app...");
83
+ execSync(
84
+ `npx create-next-app@latest ${projectName2} --ts --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm`,
85
+ { stdio: "inherit" }
111
86
  );
112
- }
113
- `);
114
- const mediaRouteDir = path.join(targetDir, "src", "app", "media", "[[...path]]");
115
- fs.mkdirSync(mediaRouteDir, { recursive: true });
87
+ console.log("\n\u{1F4E6} Installing dependencies...");
88
+ execSync("npm install @unciatech/file-manager tailwindcss-animate", {
89
+ cwd: targetDir,
90
+ stdio: "inherit"
91
+ });
92
+ const componentsDir = path.join(targetDir, "src/components");
93
+ fs.mkdirSync(componentsDir, { recursive: true });
94
+ fs.writeFileSync(
95
+ path.join(componentsDir, "FileManagerDemo.tsx"),
96
+ TEMPLATE
97
+ );
98
+ const pagePath = path.join(targetDir, "src/app/page.tsx");
116
99
  fs.writeFileSync(
117
- path.join(mediaRouteDir, "page.tsx"),
100
+ pagePath,
118
101
  `import FileManagerDemo from "@/components/FileManagerDemo";
119
102
 
120
- export default function MediaPage() {
103
+ export default function Home() {
121
104
  return (
122
105
  <main className="min-h-screen bg-neutral-50">
123
106
  <FileManagerDemo />
@@ -126,166 +109,49 @@ export default function MediaPage() {
126
109
  }
127
110
  `
128
111
  );
129
- const layoutPath = path.join(targetDir, "src", "app", "layout.tsx");
130
- if (fs.existsSync(layoutPath)) {
131
- let layoutContent = fs.readFileSync(layoutPath, "utf8");
132
- if (!layoutContent.includes("@unciatech/file-manager/styles")) {
133
- layoutContent = layoutContent.replace(
134
- /^(import type)/m,
135
- `import '@unciatech/file-manager/styles';
136
- $1`
137
- );
138
- fs.writeFileSync(layoutPath, layoutContent);
139
- }
140
- }
141
- const cssPath = path.join(targetDir, "src", "app", "globals.css");
142
- fs.writeFileSync(cssPath, `@import 'tailwindcss';
143
- @import 'tw-animate-css';
144
- @source "../../node_modules/@unciatech/file-manager/dist";
145
-
146
- /** Dark Mode Variant **/
147
- @custom-variant dark (&:is(.dark *));
148
-
149
- @theme {
150
- --font-sans: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
151
- --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
152
- }
153
-
154
- /** Colors **/
155
- :root {
156
- --background: var(--color-white);
157
- --foreground: var(--color-zinc-950);
158
- --card: var(--color-white);
159
- --card-foreground: var(--color-zinc-950);
160
- --popover: var(--color-white);
161
- --popover-foreground: var(--color-zinc-950);
162
- --primary: var(--color-blue-500);
163
- --primary-foreground: var(--color-white);
164
- --secondary: var(--color-zinc-100);
165
- --secondary-foreground: var(--color-zinc-900);
166
- --muted: var(--color-zinc-100);
167
- --muted-foreground: var(--color-zinc-500);
168
- --accent: var(--color-zinc-100);
169
- --accent-foreground: var(--color-zinc-900);
170
- --destructive: var(--color-red-600);
171
- --destructive-foreground: var(--color-white);
172
- --border: oklch(94% 0.004 286.32);
173
- --input: var(--color-zinc-200);
174
- --ring: var(--color-zinc-400);
175
- --radius: 0.5rem;
176
- }
177
-
178
- .dark {
179
- --background: var(--color-zinc-950);
180
- --foreground: var(--color-zinc-50);
181
- --card: var(--color-zinc-950);
182
- --card-foreground: var(--color-zinc-50);
183
- --popover: var(--color-zinc-950);
184
- --popover-foreground: var(--color-zinc-50);
185
- --primary: var(--color-blue-600);
186
- --primary-foreground: var(--color-white);
187
- --secondary: var(--color-zinc-800);
188
- --secondary-foreground: var(--color-zinc-50);
189
- --muted: var(--color-zinc-900);
190
- --muted-foreground: var(--color-zinc-500);
191
- --accent: var(--color-zinc-900);
192
- --accent-foreground: var(--color-zinc-50);
193
- --destructive: var(--color-red-600);
194
- --destructive-foreground: var(--color-white);
195
- --border: var(--color-zinc-800);
196
- --input: var(--color-zinc-800);
197
- --ring: var(--color-zinc-600);
198
- }
199
-
200
- /** Theme Setup **/
201
- @theme inline {
202
- --color-background: var(--background);
203
- --color-foreground: var(--foreground);
204
- --color-card: var(--card);
205
- --color-card-foreground: var(--card-foreground);
206
- --color-popover: var(--popover);
207
- --color-popover-foreground: var(--popover-foreground);
208
- --color-muted: var(--muted);
209
- --color-muted-foreground: var(--muted-foreground);
210
- --color-accent: var(--accent);
211
- --color-accent-foreground: var(--accent-foreground);
212
- --color-primary: var(--primary);
213
- --color-primary-foreground: var(--primary-foreground);
214
- --color-secondary: var(--secondary);
215
- --color-secondary-foreground: var(--secondary-foreground);
216
- --color-destructive: var(--destructive);
217
- --color-destructive-foreground: var(--destructive-foreground);
218
- --color-border: var(--border);
219
- --color-input: var(--input);
220
- --color-ring: var(--ring);
221
- --radius-xl: calc(var(--radius) + 4px);
222
- --radius-lg: var(--radius);
223
- --radius-md: calc(var(--radius) - 2px);
224
- --radius-sm: calc(var(--radius) - 4px);
225
- }
226
-
227
- /** Global Styles **/
228
- @layer base {
229
- * {
230
- @apply border-border;
231
- }
232
- *:focus-visible {
233
- @apply outline-ring rounded-xs shadow-none outline-2 outline-offset-3 transition-none!;
234
- }
235
- }
236
-
237
- /** Custom Scrollbar **/
238
- @layer base {
239
- ::-webkit-scrollbar { width: 5px; }
240
- ::-webkit-scrollbar-track { background: transparent; }
241
- ::-webkit-scrollbar-thumb { background: var(--input); border-radius: 5px; }
242
- * { scrollbar-width: thin; scrollbar-color: var(--input) transparent; }
243
- }
244
-
245
- /** Smooth scroll **/
246
- html {
247
- scroll-behavior: smooth;
248
- }
249
- `);
250
112
  printSuccess(projectName2);
251
113
  }
252
114
  async function scaffoldVite(projectName2, targetDir) {
253
- console.log("\n\u{1F4E6} Creating Vite React application...");
254
- execSync(`npm create vite@latest ${projectName2} -- --template react-ts`, { stdio: "inherit" });
255
- console.log("\n\u{1F4E6} Installing dependencies (Tailwind + File Manager)...");
115
+ console.log("\n\u{1F4E6} Creating Vite app...");
116
+ execSync(
117
+ `npm create vite@latest ${projectName2} -- --template react-ts`,
118
+ { stdio: "inherit" }
119
+ );
120
+ console.log("\n\u{1F4E6} Installing dependencies...");
256
121
  execSync("npm install", { cwd: targetDir, stdio: "inherit" });
257
- execSync("npm install @unciatech/file-manager tailwindcss @tailwindcss/vite tw-animate-css", { cwd: targetDir, stdio: "inherit" });
258
- const viteConfigPath = path.join(targetDir, "vite.config.ts");
122
+ execSync(
123
+ "npm install tailwindcss @tailwindcss/vite tw-animate-css @unciatech/file-manager",
124
+ { cwd: targetDir, stdio: "inherit" }
125
+ );
259
126
  const viteConfig = `import { defineConfig } from 'vite'
260
127
  import react from '@vitejs/plugin-react'
261
128
  import tailwindcss from '@tailwindcss/vite'
262
129
 
263
130
  export default defineConfig({
264
- plugins: [
265
- react(),
266
- tailwindcss(),
267
- ],
131
+ plugins: [react(), tailwindcss()],
268
132
  })
269
133
  `;
270
- fs.writeFileSync(viteConfigPath, viteConfig);
271
- const cssPath = path.join(targetDir, "src", "index.css");
272
- fs.writeFileSync(cssPath, `@import "tailwindcss";
134
+ fs.writeFileSync(path.join(targetDir, "vite.config.ts"), viteConfig);
135
+ const css = `@import "tailwindcss";
136
+ @import "tw-animate-css";
137
+
273
138
  @source "../node_modules/@unciatech/file-manager/dist/**/*.{js,ts,jsx,tsx}";
274
- `);
275
- const mainPath = path.join(targetDir, "src", "main.tsx");
276
- if (fs.existsSync(mainPath)) {
277
- let mainContent = fs.readFileSync(mainPath, "utf8");
278
- if (!mainContent.includes("@unciatech/file-manager/styles")) {
279
- mainContent = `import '@unciatech/file-manager/styles';
280
- ` + mainContent;
281
- fs.writeFileSync(mainPath, mainContent);
282
- }
139
+ `;
140
+ fs.writeFileSync(path.join(targetDir, "src/index.css"), css);
141
+ const mainFile = path.join(targetDir, "src/main.tsx");
142
+ let main2 = fs.readFileSync(mainFile, "utf8");
143
+ if (!main2.includes("@unciatech/file-manager/styles")) {
144
+ main2 = `import "@unciatech/file-manager/styles";
145
+ ` + main2;
283
146
  }
284
- const componentsDir = path.join(targetDir, "src", "components");
285
- if (!fs.existsSync(componentsDir)) fs.mkdirSync(componentsDir, { recursive: true });
286
- fs.writeFileSync(path.join(componentsDir, "FileManagerDemo.tsx"), TEMPLATE, "utf-8");
287
- const appPath = path.join(targetDir, "src", "App.tsx");
288
- fs.writeFileSync(appPath, `import FileManagerDemo from "./components/FileManagerDemo";
147
+ fs.writeFileSync(mainFile, main2);
148
+ const compDir = path.join(targetDir, "src/components");
149
+ fs.mkdirSync(compDir, { recursive: true });
150
+ fs.writeFileSync(
151
+ path.join(compDir, "FileManagerDemo.tsx"),
152
+ TEMPLATE
153
+ );
154
+ const app = `import FileManagerDemo from "./components/FileManagerDemo";
289
155
 
290
156
  function App() {
291
157
  return (
@@ -296,16 +162,18 @@ function App() {
296
162
  }
297
163
 
298
164
  export default App;
299
- `);
300
- printSuccess(projectName2, "npm run dev");
165
+ `;
166
+ fs.writeFileSync(path.join(targetDir, "src/App.tsx"), app);
167
+ printSuccess(projectName2);
301
168
  }
302
- function printSuccess(projectName2, devCmd = "npm run dev") {
303
- console.log("\n=========================================");
304
- console.log("\u{1F389} Your Media Library application is ready!");
305
- console.log("=========================================");
306
- console.log("\nNext steps:");
307
- console.log(` cd ${projectName2}`);
308
- console.log(` ${devCmd}`);
309
- console.log("\nEnjoy building! \u{1F5C2}\uFE0F\n");
169
+ function printSuccess(projectName2) {
170
+ console.log("\n=================================");
171
+ console.log("\u{1F389} Project ready!");
172
+ console.log("=================================");
173
+ console.log(`
174
+ Next steps:`);
175
+ console.log(`cd ${projectName2}`);
176
+ console.log(`npm run dev
177
+ `);
310
178
  }
311
179
  main();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unciatech/file-manager",
3
- "version": "0.0.30",
3
+ "version": "0.0.32",
4
4
  "description": "Modern file manager component for React and Next.js",
5
5
  "author": "Avi",
6
6
  "license": "MIT",