@fde-desktop/fde-core 0.4.2 → 0.4.5
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 +174 -63
- package/package.json +5 -4
package/README.md
CHANGED
|
@@ -20,6 +20,14 @@ yarn add @fde-desktop/fde-core
|
|
|
20
20
|
bun add @fde-desktop/fde-core
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
+
You also need to import the package styles in your entry point:
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import '@fde-desktop/fde-core/dist/index.css';
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
This single import includes all required styles (Mantine, component styles, etc.).
|
|
30
|
+
|
|
23
31
|
## Peer Dependencies
|
|
24
32
|
|
|
25
33
|
- `react` ^19.0.0
|
|
@@ -31,6 +39,7 @@ The simplest way is to use the `FdeDesktop` component:
|
|
|
31
39
|
|
|
32
40
|
```tsx
|
|
33
41
|
import { FdeDesktop, type AppRegistryEntry } from '@fde-desktop/fde-core';
|
|
42
|
+
import '@fde-desktop/fde-core/dist/index.css';
|
|
34
43
|
|
|
35
44
|
// Define your custom apps (optional)
|
|
36
45
|
const myApps: Record<string, AppRegistryEntry> = {
|
|
@@ -41,50 +50,159 @@ const myApps: Record<string, AppRegistryEntry> = {
|
|
|
41
50
|
};
|
|
42
51
|
|
|
43
52
|
function App() {
|
|
44
|
-
return <FdeDesktop customApps={myApps}
|
|
53
|
+
return <FdeDesktop customApps={myApps} />;
|
|
45
54
|
}
|
|
46
55
|
```
|
|
47
56
|
|
|
48
57
|
Core apps (Files, Settings, Notepad, etc.) are loaded automatically. Your custom apps are merged with the core registry.
|
|
49
58
|
|
|
59
|
+
## FdeDesktop Props
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<FdeDesktop
|
|
63
|
+
customApps={userApps} // Optional: your custom apps
|
|
64
|
+
defaultWallpaper={wallpaperUrl} // Optional: default wallpaper URL
|
|
65
|
+
initialApp="welcome" // Optional: app ID to open on start
|
|
66
|
+
mode="dark" // Optional: force 'light' | 'dark' theme
|
|
67
|
+
prefetchLoaders={[ // Optional: preload lazy apps
|
|
68
|
+
{ id: 'dos-emulator', loader: () => import('./DosEmulatorApp') },
|
|
69
|
+
]}
|
|
70
|
+
>
|
|
71
|
+
{/* Optional: extra desktop content */}
|
|
72
|
+
</FdeDesktop>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Creating a Custom App
|
|
76
|
+
|
|
77
|
+
#### Step 1: Create the component
|
|
78
|
+
|
|
79
|
+
Every app receives `WindowContentProps` — a `window` entity and a `notifyReady` callback:
|
|
80
|
+
|
|
81
|
+
```tsx
|
|
82
|
+
// MyApp.tsx
|
|
83
|
+
import { type FC, useEffect } from 'react';
|
|
84
|
+
import type { WindowContentProps } from '@fde-desktop/fde-core';
|
|
85
|
+
|
|
86
|
+
const MyApp: FC<WindowContentProps> = ({ window: win, notifyReady }) => {
|
|
87
|
+
const { filePath } = (win?.contentData ?? {}) as { filePath?: string };
|
|
88
|
+
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
notifyReady?.({});
|
|
91
|
+
}, [win, notifyReady]);
|
|
92
|
+
|
|
93
|
+
return (
|
|
94
|
+
<div>
|
|
95
|
+
<h1>My App</h1>
|
|
96
|
+
{filePath && <p>Opening: {filePath}</p>}
|
|
97
|
+
</div>
|
|
98
|
+
);
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
export default MyApp;
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### Step 2: Register the app
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
// App.tsx
|
|
108
|
+
import { FdeDesktop, type AppRegistryEntry } from '@fde-desktop/fde-core';
|
|
109
|
+
|
|
110
|
+
const myApps: Record<string, AppRegistryEntry> = {
|
|
111
|
+
'my-app': {
|
|
112
|
+
loader: () => import('./MyApp'),
|
|
113
|
+
appName: 'My App',
|
|
114
|
+
isLazy: true,
|
|
115
|
+
defaultWidth: 800,
|
|
116
|
+
defaultHeight: 600,
|
|
117
|
+
minWidth: 640,
|
|
118
|
+
minHeight: 480,
|
|
119
|
+
fcIcon: 'FcFolder',
|
|
120
|
+
},
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
function App() {
|
|
124
|
+
return <FdeDesktop customApps={myApps} />;
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
#### Step 3: Open the app programmatically
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
import { useOpenApp } from '@fde-desktop/fde-core';
|
|
132
|
+
|
|
133
|
+
function MyButton() {
|
|
134
|
+
const openApp = useOpenApp();
|
|
135
|
+
|
|
136
|
+
return (
|
|
137
|
+
<button onClick={() => openApp('my-app', { contentData: { filePath: '/docs/readme.md' } })}>
|
|
138
|
+
Open My App
|
|
139
|
+
</button>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
#### Step 4: Add a menu bar (optional)
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
// MyAppMenuBar.tsx
|
|
148
|
+
import { type FC, memo } from 'react';
|
|
149
|
+
import { AppMenuBar } from '@fde-desktop/fde-core';
|
|
150
|
+
import type { MenuBarComponentProps, AppMenuElement } from '@fde-desktop/fde-core';
|
|
151
|
+
|
|
152
|
+
export const MyAppMenuBar: FC<MenuBarComponentProps> = memo(({ windowId, onExit }) => {
|
|
153
|
+
const elements: AppMenuElement[] = [
|
|
154
|
+
{
|
|
155
|
+
type: 'menu',
|
|
156
|
+
label: 'File',
|
|
157
|
+
items: [
|
|
158
|
+
{ type: 'item', label: 'Exit', icon: 'FcLeave', onClick: onExit },
|
|
159
|
+
],
|
|
160
|
+
},
|
|
161
|
+
];
|
|
162
|
+
|
|
163
|
+
return <AppMenuBar elements={elements} />;
|
|
164
|
+
});
|
|
165
|
+
MyAppMenuBar.displayName = 'MyAppMenuBar';
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
Register it alongside the component:
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
const myApps: Record<string, AppRegistryEntry> = {
|
|
172
|
+
'my-app': {
|
|
173
|
+
loader: () => import('./MyApp'),
|
|
174
|
+
menuBarLoader: () => import('./MyAppMenuBar').then(m => ({ default: m.MyAppMenuBar })),
|
|
175
|
+
appName: 'My App',
|
|
176
|
+
isLazy: true,
|
|
177
|
+
},
|
|
178
|
+
};
|
|
179
|
+
```
|
|
180
|
+
|
|
50
181
|
## Exports
|
|
51
182
|
|
|
52
183
|
### UI Components
|
|
53
184
|
|
|
54
185
|
```tsx
|
|
55
186
|
import {
|
|
56
|
-
// Main wrapper
|
|
57
187
|
FdeDesktop,
|
|
58
|
-
|
|
59
|
-
// Desktop components
|
|
60
188
|
Desktop,
|
|
61
189
|
DesktopIcon,
|
|
62
190
|
Window,
|
|
63
191
|
AppMenuBar,
|
|
64
192
|
DynamicMenuBarRenderer,
|
|
65
|
-
|
|
66
|
-
// System UI
|
|
67
193
|
Taskbar,
|
|
68
194
|
Launcher,
|
|
69
195
|
TaskbarContextMenu,
|
|
70
196
|
LanguageSelector,
|
|
71
|
-
|
|
72
|
-
// Menus
|
|
73
197
|
ContextMenu,
|
|
74
198
|
CreateItemContextMenu,
|
|
75
|
-
|
|
76
|
-
// Theme
|
|
77
199
|
ThemeProvider,
|
|
78
200
|
useTheme,
|
|
79
201
|
DEFAULT_FDE_THEME,
|
|
80
|
-
|
|
81
|
-
// Context
|
|
82
202
|
FdeProvider,
|
|
83
203
|
useFdeContext,
|
|
84
204
|
AppReadyProvider,
|
|
85
205
|
useAppReady,
|
|
86
|
-
|
|
87
|
-
// Registry helpers
|
|
88
206
|
initRegistry,
|
|
89
207
|
getAppComponent,
|
|
90
208
|
getMenuBarComponent,
|
|
@@ -113,10 +231,7 @@ import {
|
|
|
113
231
|
CORE_APPS,
|
|
114
232
|
CORE_APP_IDS,
|
|
115
233
|
DEFAULT_WINDOW_DIMENSIONS,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
// Menu bar components for apps
|
|
119
|
-
import {
|
|
234
|
+
// Menu bars
|
|
120
235
|
NotesMenuBar,
|
|
121
236
|
SettingsMenuBar,
|
|
122
237
|
PdfMenuBar,
|
|
@@ -184,6 +299,7 @@ import {
|
|
|
184
299
|
fileSystem,
|
|
185
300
|
resetFileSystem,
|
|
186
301
|
resetWindowManager,
|
|
302
|
+
getPersistedThemeMode, // Read theme from localStorage before React mounts
|
|
187
303
|
} from '@fde-desktop/fde-core';
|
|
188
304
|
|
|
189
305
|
// Desktop state
|
|
@@ -415,7 +531,6 @@ import {
|
|
|
415
531
|
|
|
416
532
|
```tsx
|
|
417
533
|
import {
|
|
418
|
-
// Layout
|
|
419
534
|
DEFAULT_WINDOW_DIMENSIONS,
|
|
420
535
|
ICON_COLUMN_WIDTH,
|
|
421
536
|
ICON_ROW_HEIGHT,
|
|
@@ -423,32 +538,16 @@ import {
|
|
|
423
538
|
TASKBAR_HEIGHT,
|
|
424
539
|
DEFAULT_VIEWPORT_WIDTH,
|
|
425
540
|
DEFAULT_VIEWPORT_HEIGHT,
|
|
426
|
-
|
|
427
|
-
// Breakpoints
|
|
428
541
|
BREAKPOINTS,
|
|
429
|
-
|
|
430
|
-
// Animation
|
|
431
542
|
ANIMATION_DURATION,
|
|
432
|
-
|
|
433
|
-
// Fonts
|
|
434
543
|
AVAILABLE_FONTS,
|
|
435
544
|
FONT_STACKS,
|
|
436
545
|
GOOGLE_FONTS_HREF,
|
|
437
|
-
|
|
438
|
-
// Colors
|
|
439
546
|
PRESET_COLORS,
|
|
440
|
-
|
|
441
|
-
// Icons
|
|
442
547
|
PRESET_ICONS,
|
|
443
|
-
|
|
444
|
-
// Launcher
|
|
445
548
|
DEFAULT_LAUNCHER_FOLDERS,
|
|
446
549
|
CUSTOM_APPS_FOLDER_ID,
|
|
447
|
-
|
|
448
|
-
// App IDs
|
|
449
550
|
APP_IDS,
|
|
450
|
-
|
|
451
|
-
// Themes
|
|
452
551
|
DEFAULT_FDE_THEME,
|
|
453
552
|
} from '@fde-desktop/fde-core';
|
|
454
553
|
```
|
|
@@ -459,7 +558,6 @@ import {
|
|
|
459
558
|
import { i18n } from '@fde-desktop/fde-core';
|
|
460
559
|
import { I18nextProvider } from 'react-i18next';
|
|
461
560
|
|
|
462
|
-
// Use in your app
|
|
463
561
|
function App() {
|
|
464
562
|
return (
|
|
465
563
|
<I18nextProvider i18n={i18n}>
|
|
@@ -471,32 +569,19 @@ function App() {
|
|
|
471
569
|
|
|
472
570
|
## Core Apps
|
|
473
571
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
|
477
|
-
|
|
|
478
|
-
| `
|
|
479
|
-
| `
|
|
480
|
-
| `
|
|
481
|
-
| `
|
|
482
|
-
| `
|
|
483
|
-
| `
|
|
484
|
-
| `
|
|
485
|
-
| `
|
|
486
|
-
| `
|
|
487
|
-
| `terminal` | Terminal | Terminal emulator |
|
|
488
|
-
| `code-server` | VS Code | VS Code in browser |
|
|
489
|
-
|
|
490
|
-
## Example App
|
|
491
|
-
|
|
492
|
-
The main repository's `src/` directory contains a complete example application that demonstrates how to use this package. It includes:
|
|
493
|
-
|
|
494
|
-
- **WelcomeApp**: Personal portfolio/profile app
|
|
495
|
-
- **LinkedinApp** / **GithubApp**: External link apps
|
|
496
|
-
- **DosEmulatorApp**: DOS game emulator using js-dos
|
|
497
|
-
- **Custom App Registry**: Shows how to register custom apps
|
|
498
|
-
|
|
499
|
-
See the [main repository](https://github.com/frannunpal/fde-desktop) for the complete example.
|
|
572
|
+
| App ID | Name | Description |
|
|
573
|
+
| -------------- | ------------ | ----------------------- |
|
|
574
|
+
| `files` | Files | File browser |
|
|
575
|
+
| `settings` | Settings | System settings |
|
|
576
|
+
| `notepad` | Notepad | Text editor (TipTap v3) |
|
|
577
|
+
| `image-viewer` | Image Viewer | Image viewer |
|
|
578
|
+
| `pdf` | PDF Viewer | PDF viewer |
|
|
579
|
+
| `uploader` | Uploader | File uploader |
|
|
580
|
+
| `device-info` | Device Info | System information |
|
|
581
|
+
| `calendar` | Calendar | Calendar widget |
|
|
582
|
+
| `menuedit` | MenuEdit | Launcher folder editor |
|
|
583
|
+
| `terminal` | Terminal | Terminal emulator |
|
|
584
|
+
| `code-server` | VS Code | VS Code in browser |
|
|
500
585
|
|
|
501
586
|
## Runtime Detection
|
|
502
587
|
|
|
@@ -518,6 +603,32 @@ if (isElectron()) {
|
|
|
518
603
|
}
|
|
519
604
|
```
|
|
520
605
|
|
|
606
|
+
## Docker Integration
|
|
607
|
+
|
|
608
|
+
For Docker-based deployments:
|
|
609
|
+
|
|
610
|
+
```typescript
|
|
611
|
+
import { DockerFileSystemAdapter, FdeApiAdapter, initializeFdeApi } from '@fde-desktop/fde-core';
|
|
612
|
+
|
|
613
|
+
initializeFdeApi();
|
|
614
|
+
|
|
615
|
+
const dockerFs = new DockerFileSystemAdapter();
|
|
616
|
+
|
|
617
|
+
// Custom app hot-reload
|
|
618
|
+
useCustomAppHMR();
|
|
619
|
+
```
|
|
620
|
+
|
|
621
|
+
## Example App
|
|
622
|
+
|
|
623
|
+
The main repository's `src/` directory contains a complete example application that demonstrates how to use this package. It includes:
|
|
624
|
+
|
|
625
|
+
- **WelcomeApp**: Personal portfolio/profile app
|
|
626
|
+
- **LinkedinApp** / **GithubApp**: External link apps
|
|
627
|
+
- **DosEmulatorApp**: DOS game emulator using js-dos
|
|
628
|
+
- **Custom App Registry**: Shows how to register custom apps
|
|
629
|
+
|
|
630
|
+
See the [main repository](https://github.com/frannunpal/fde-desktop) for the complete example.
|
|
631
|
+
|
|
521
632
|
## License
|
|
522
633
|
|
|
523
|
-
|
|
634
|
+
Apache-2.0
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fde-desktop/fde-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Core library for building FDE Desktop environments",
|
|
6
6
|
"author": "Francisco Núñez Palomares (frannunpal@gmail.com)",
|
|
7
|
-
"license": "
|
|
7
|
+
"license": "Apache-2.0",
|
|
8
8
|
"main": "./dist/index.cjs",
|
|
9
9
|
"module": "./dist/index.js",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
"types": "./dist/index.d.cts",
|
|
19
19
|
"default": "./dist/index.cjs"
|
|
20
20
|
}
|
|
21
|
-
}
|
|
21
|
+
},
|
|
22
|
+
"./dist/index.css": "./dist/index.css"
|
|
22
23
|
},
|
|
23
24
|
"files": [
|
|
24
25
|
"dist"
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
"test": "vitest run",
|
|
31
32
|
"test:unit": "vitest run",
|
|
32
33
|
"test:watch": "vitest",
|
|
33
|
-
"prepublishOnly": "
|
|
34
|
+
"prepublishOnly": ""
|
|
34
35
|
},
|
|
35
36
|
"publishConfig": {
|
|
36
37
|
"access": "public"
|