@floegence/floe-webapp-init 0.1.2 → 0.1.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/templates/full/src/App.tsx +16 -7
  3. package/templates/full/src/pages/HomePage.tsx +8 -16
  4. package/templates/full/src/pages/SettingsPage.tsx +23 -38
  5. package/templates/minimal/src/App.tsx +29 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@floegence/floe-webapp-init",
3
- "version": "0.1.2",
3
+ "version": "0.1.5",
4
4
  "type": "module",
5
5
  "description": "Scaffolding tool for Floe Webapp applications",
6
6
  "bin": {
package/templates/full/src/App.tsx CHANGED
@@ -5,6 +5,8 @@ import {
5
5
  useLayout,
6
6
  type FloeComponent,
7
7
  } from '@floegence/floe-webapp-core';
8
+ import { createMemo } from 'solid-js';
9
+ import { Dynamic } from 'solid-js/web';
8
10
  import { HomePage } from './pages/HomePage';
9
11
  import { SettingsPage } from './pages/SettingsPage';
10
12
 
@@ -22,7 +24,8 @@ const components: FloeComponent[] = [
22
24
  {
23
25
  id: 'home.open',
24
26
  title: 'Go to Home',
25
- handler: ({ setActive }) => setActive('home'),
27
+ category: 'Navigation',
28
+ execute: (ctx) => ctx.layout.setSidebarActiveTab('home'),
26
29
  },
27
30
  ],
28
31
  },
@@ -37,7 +40,8 @@ const components: FloeComponent[] = [
37
40
  {
38
41
  id: 'settings.open',
39
42
  title: 'Open Settings',
40
- handler: ({ setActive }) => setActive('settings'),
43
+ category: 'Navigation',
44
+ execute: (ctx) => ctx.layout.setSidebarActiveTab('settings'),
41
45
  },
42
46
  ],
43
47
  },
@@ -46,18 +50,23 @@ const components: FloeComponent[] = [
46
50
  // Content switcher based on active component
47
51
  function AppContent() {
48
52
  const layout = useLayout();
53
+ const active = createMemo(() => components.find((c) => c.id === layout.sidebarActiveTab()) ?? components[0]);
49
54
 
50
55
  return (
51
- <>
52
- {layout.sidebarActiveTab() === 'home' && <HomePage />}
53
- {layout.sidebarActiveTab() === 'settings' && <SettingsPage />}
54
- </>
56
+ <Dynamic component={active().component} />
55
57
  );
56
58
  }
57
59
 
58
60
  export default function App() {
59
61
  return (
60
- <FloeApp components={components}>
62
+ <FloeApp
63
+ components={components}
64
+ config={{
65
+ layout: {
66
+ sidebar: { defaultActiveTab: 'home' },
67
+ },
68
+ }}
69
+ >
61
70
  <AppContent />
62
71
  </FloeApp>
63
72
  );
package/templates/full/src/pages/HomePage.tsx CHANGED
@@ -2,28 +2,20 @@ export function HomePage() {
2
2
  return (
3
3
  <div class="flex h-full items-center justify-center">
4
4
  <div class="text-center">
5
- <h1 class="text-3xl font-bold text-foreground">Welcome to Floe</h1>
6
- <p class="mt-2 text-muted-foreground">
7
- A feature-rich starter template
8
- </p>
5
+ <h1 class="text-lg font-semibold text-foreground">Welcome to Floe</h1>
6
+ <p class="mt-1 text-xs text-muted-foreground">A feature-rich starter template</p>
9
7
  <div class="mt-6 flex justify-center gap-4">
10
8
  <div class="rounded-lg border border-border bg-card p-4">
11
- <h3 class="font-medium text-foreground">Components</h3>
12
- <p class="mt-1 text-sm text-muted-foreground">
13
- Pre-built UI components
14
- </p>
9
+ <h3 class="text-sm font-medium text-foreground">Components</h3>
10
+ <p class="mt-1 text-xs text-muted-foreground">Pre-built UI components</p>
15
11
  </div>
16
12
  <div class="rounded-lg border border-border bg-card p-4">
17
- <h3 class="font-medium text-foreground">Commands</h3>
18
- <p class="mt-1 text-sm text-muted-foreground">
19
- Press Cmd+K to open
20
- </p>
13
+ <h3 class="text-sm font-medium text-foreground">Commands</h3>
14
+ <p class="mt-1 text-xs text-muted-foreground">Press Cmd+K to open</p>
21
15
  </div>
22
16
  <div class="rounded-lg border border-border bg-card p-4">
23
- <h3 class="font-medium text-foreground">Themes</h3>
24
- <p class="mt-1 text-sm text-muted-foreground">
25
- Light and dark mode
26
- </p>
17
+ <h3 class="text-sm font-medium text-foreground">Themes</h3>
18
+ <p class="mt-1 text-xs text-muted-foreground">Light and dark mode</p>
27
19
  </div>
28
20
  </div>
29
21
  </div>
package/templates/full/src/pages/SettingsPage.tsx CHANGED
@@ -1,67 +1,52 @@
1
- import { useTheme, Sun, Moon } from '@floegence/floe-webapp-core';
1
+ import { Button, useTheme, Sun, Moon } from '@floegence/floe-webapp-core';
2
2
 
3
3
  export function SettingsPage() {
4
4
  const { theme, setTheme } = useTheme();
5
5
 
6
6
  return (
7
7
  <div class="h-full overflow-auto p-6">
8
- <h1 class="text-2xl font-bold text-foreground">Settings</h1>
9
- <p class="mt-1 text-muted-foreground">
10
- Manage your application preferences
11
- </p>
8
+ <h1 class="text-lg font-semibold text-foreground">Settings</h1>
9
+ <p class="mt-1 text-xs text-muted-foreground">Manage your application preferences</p>
12
10
 
13
11
  <div class="mt-6 space-y-6">
14
12
  {/* Theme Section */}
15
13
  <section class="rounded-lg border border-border bg-card p-4">
16
- <h2 class="font-medium text-foreground">Appearance</h2>
17
- <p class="mt-1 text-sm text-muted-foreground">
18
- Customize how the app looks
19
- </p>
14
+ <h2 class="text-sm font-medium text-foreground">Appearance</h2>
15
+ <p class="mt-1 text-xs text-muted-foreground">Customize how the app looks</p>
20
16
 
21
- <div class="mt-4 flex gap-3">
22
- <button
23
- class={`flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
24
- theme() === 'light'
25
- ? 'border-primary bg-primary/10 text-primary'
26
- : 'border-border text-muted-foreground hover:border-foreground/50'
27
- }`}
17
+ <div class="mt-4 flex flex-wrap gap-2">
18
+ <Button
19
+ size="sm"
20
+ icon={Sun}
21
+ variant={theme() === 'light' ? 'default' : 'outline'}
28
22
  onClick={() => setTheme('light')}
29
23
  >
30
- <Sun size={16} />
31
24
  Light
32
- </button>
33
- <button
34
- class={`flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
35
- theme() === 'dark'
36
- ? 'border-primary bg-primary/10 text-primary'
37
- : 'border-border text-muted-foreground hover:border-foreground/50'
38
- }`}
25
+ </Button>
26
+ <Button
27
+ size="sm"
28
+ icon={Moon}
29
+ variant={theme() === 'dark' ? 'default' : 'outline'}
39
30
  onClick={() => setTheme('dark')}
40
31
  >
41
- <Moon size={16} />
42
32
  Dark
43
- </button>
44
- <button
45
- class={`flex items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
46
- theme() === 'system'
47
- ? 'border-primary bg-primary/10 text-primary'
48
- : 'border-border text-muted-foreground hover:border-foreground/50'
49
- }`}
33
+ </Button>
34
+ <Button
35
+ size="sm"
36
+ variant={theme() === 'system' ? 'default' : 'outline'}
50
37
  onClick={() => setTheme('system')}
51
38
  >
52
39
  System
53
- </button>
40
+ </Button>
54
41
  </div>
55
42
  </section>
56
43
 
57
44
  {/* About Section */}
58
45
  <section class="rounded-lg border border-border bg-card p-4">
59
- <h2 class="font-medium text-foreground">About</h2>
60
- <p class="mt-1 text-sm text-muted-foreground">
61
- Application information
62
- </p>
46
+ <h2 class="text-sm font-medium text-foreground">About</h2>
47
+ <p class="mt-1 text-xs text-muted-foreground">Application information</p>
63
48
 
64
- <div class="mt-4 space-y-2 text-sm">
49
+ <div class="mt-4 space-y-2 text-xs">
65
50
  <div class="flex justify-between">
66
51
  <span class="text-muted-foreground">Version</span>
67
52
  <span class="text-foreground">0.0.0</span>
package/templates/minimal/src/App.tsx CHANGED
@@ -1,10 +1,12 @@
1
- import { FloeApp, Files, type FloeComponent } from '@floegence/floe-webapp-core';
1
+ import { FloeApp, Files, useLayout, type FloeComponent } from '@floegence/floe-webapp-core';
2
+ import { createMemo } from 'solid-js';
3
+ import { Dynamic } from 'solid-js/web';
2
4
 
3
5
  const HomePage = () => (
4
6
  <div class="flex h-full items-center justify-center">
5
7
  <div class="text-center">
6
- <h1 class="text-2xl font-bold text-foreground">Welcome to Floe</h1>
7
- <p class="mt-2 text-muted-foreground">Start building your app</p>
8
+ <h1 class="text-lg font-semibold text-foreground">Welcome to Floe</h1>
9
+ <p class="mt-1 text-xs text-muted-foreground">Start building your app</p>
8
10
  </div>
9
11
  </div>
10
12
  );
@@ -16,14 +18,35 @@ const components: FloeComponent[] = [
16
18
  icon: Files,
17
19
  description: 'Home page',
18
20
  component: HomePage,
19
- sidebar: { order: 0 },
21
+ sidebar: { order: 0, fullScreen: true },
22
+ commands: [
23
+ {
24
+ id: 'home.open',
25
+ title: 'Go to Home',
26
+ category: 'Navigation',
27
+ execute: (ctx) => ctx.layout.setSidebarActiveTab('home'),
28
+ },
29
+ ],
20
30
  },
21
31
  ];
22
32
 
33
+ function AppContent() {
34
+ const layout = useLayout();
35
+ const active = createMemo(() => components.find((c) => c.id === layout.sidebarActiveTab()) ?? components[0]);
36
+ return <Dynamic component={active().component} />;
37
+ }
38
+
23
39
  export default function App() {
24
40
  return (
25
- <FloeApp components={components}>
26
- <HomePage />
41
+ <FloeApp
42
+ components={components}
43
+ config={{
44
+ layout: {
45
+ sidebar: { defaultActiveTab: 'home' },
46
+ },
47
+ }}
48
+ >
49
+ <AppContent />
27
50
  </FloeApp>
28
51
  );
29
52
  }