Skip to content

Commit c051a9e

Browse files
hotlonghotlong
committed
feat: Refactor console structure and enhance routing with new plugins
1 parent b279d80 commit c051a9e

12 files changed

Lines changed: 460 additions & 284 deletions

File tree

‎apps/console-starter/package.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,29 @@
1414
"@object-ui/auth": "workspace:*",
1515
"@object-ui/components": "workspace:*",
1616
"@object-ui/i18n": "workspace:*",
17+
"@object-ui/plugin-calendar": "workspace:*",
18+
"@object-ui/plugin-charts": "workspace:*",
19+
"@object-ui/plugin-chatbot": "workspace:*",
20+
"@object-ui/plugin-dashboard": "workspace:*",
21+
"@object-ui/plugin-designer": "workspace:*",
22+
"@object-ui/plugin-detail": "workspace:*",
1723
"@object-ui/plugin-form": "workspace:*",
1824
"@object-ui/plugin-grid": "workspace:*",
25+
"@object-ui/plugin-kanban": "workspace:*",
26+
"@object-ui/plugin-list": "workspace:*",
27+
"@object-ui/plugin-report": "workspace:*",
1928
"@object-ui/plugin-view": "workspace:*",
2029
"react": "19.2.5",
2130
"react-dom": "19.2.5",
2231
"react-router-dom": "^7.14.2",
2332
"sonner": "^2.0.7"
2433
},
2534
"devDependencies": {
35+
"@tailwindcss/postcss": "^4.2.4",
2636
"@types/react": "19.2.14",
2737
"@types/react-dom": "19.2.3",
2838
"@vitejs/plugin-react": "^6.0.1",
39+
"tailwindcss": "^4.2.4",
2940
"typescript": "^6.0.3",
3041
"vite": "^8.0.9"
3142
}

‎apps/console-starter/postcss.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
};

‎apps/console-starter/src/App.tsx‎

Lines changed: 52 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,69 @@
11
/**
22
* Minimal third-party console template.
33
*
4-
* `createConsole({})` is enough — every slot (auth pages, home, organizations,
5-
* AppContent) defaults to the implementation shipped from @object-ui/app-shell,
6-
* so this starter renders a fully functional console out of the box against
7-
* the backend at VITE_SERVER_URL.
4+
* This file owns the routing tree — fork and edit it. The building blocks
5+
* imported from @object-ui/app-shell (ConsoleShell, AuthenticatedRoute,
6+
* RootRedirect, Default* pages) encapsulate the provider stack and auth guard
7+
* so you only write JSX.
88
*
9-
* To customise: pass any of `authPages`, `homePage`, `organizationsPage`, or
10-
* `AppContent` overrides into `createConsole(...)`. See
11-
* @object-ui/app-shell/src/console/types.ts for the full surface.
9+
* Common customisations:
10+
* - add routes: drop a <Route path="/billing" ... /> inside <Routes>
11+
* - swap auth: replace <DefaultLoginPage /> with your own component
12+
* - skip orgs: <AuthenticatedRoute requireOrganization={false}>
1213
*/
1314

14-
import { createConsole } from '@object-ui/app-shell';
15+
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
1516
import { AuthProvider } from '@object-ui/auth';
1617
import { Toaster } from 'sonner';
18+
import {
19+
ConsoleShell,
20+
ConnectedShell,
21+
AuthenticatedRoute,
22+
RootRedirect,
23+
SystemRedirect,
24+
DefaultLoginPage,
25+
DefaultRegisterPage,
26+
DefaultForgotPasswordPage,
27+
DefaultHomeLayout,
28+
DefaultHomePage,
29+
DefaultOrganizationsLayout,
30+
DefaultOrganizationsPage,
31+
DefaultAppContent,
32+
} from '@object-ui/app-shell';
1733

18-
const SERVER_URL = import.meta.env.VITE_SERVER_URL || '';
19-
const AUTH_URL = `${SERVER_URL}/api/v1/auth`;
20-
21-
const ConsoleApp = createConsole({ basename: '/' });
34+
const AUTH_URL = `${import.meta.env.VITE_SERVER_URL || ''}/api/v1/auth`;
2235

2336
export function App() {
2437
return (
2538
<AuthProvider authUrl={AUTH_URL}>
2639
<Toaster position="bottom-right" />
27-
<ConsoleApp />
40+
<BrowserRouter>
41+
<ConsoleShell>
42+
<Routes>
43+
<Route path="/login" element={<DefaultLoginPage />} />
44+
<Route path="/register" element={<DefaultRegisterPage />} />
45+
<Route path="/forgot-password" element={<DefaultForgotPasswordPage />} />
46+
<Route path="/home" element={
47+
<AuthenticatedRoute>
48+
<DefaultHomeLayout><DefaultHomePage /></DefaultHomeLayout>
49+
</AuthenticatedRoute>
50+
} />
51+
<Route path="/organizations" element={
52+
<AuthenticatedRoute requireOrganization={false}>
53+
<DefaultOrganizationsLayout><DefaultOrganizationsPage /></DefaultOrganizationsLayout>
54+
</AuthenticatedRoute>
55+
} />
56+
<Route path="/system/*" element={<SystemRedirect />} />
57+
<Route path="/apps/:appName/*" element={
58+
<AuthenticatedRoute>
59+
<DefaultAppContent />
60+
</AuthenticatedRoute>
61+
} />
62+
<Route path="/" element={<ConnectedShell><RootRedirect /></ConnectedShell>} />
63+
<Route path="*" element={<Navigate to="/" replace />} />
64+
</Routes>
65+
</ConsoleShell>
66+
</BrowserRouter>
2867
</AuthProvider>
2968
);
3069
}

‎apps/console-starter/src/index.css‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
@import 'tailwindcss';
2+
3+
@source '../src/**/*.{ts,tsx}';
4+
@source '../../../packages/app-shell/src/**/*.{ts,tsx}';
5+
@source '../../../packages/auth/src/**/*.{ts,tsx}';
6+
@source '../../../packages/components/src/**/*.{ts,tsx}';
7+
@source '../../../packages/layout/src/**/*.{ts,tsx}';
8+
@source '../../../packages/fields/src/**/*.{ts,tsx}';
9+
@source '../../../packages/react/src/**/*.{ts,tsx}';
10+
@source '../../../packages/plugin-dashboard/src/**/*.{ts,tsx}';
11+
@source '../../../packages/plugin-report/src/**/*.{ts,tsx}';
12+
@source '../../../packages/plugin-form/src/**/*.{ts,tsx}';
13+
@source '../../../packages/plugin-grid/src/**/*.{ts,tsx}';
14+
@source '../../../packages/plugin-calendar/src/**/*.{ts,tsx}';
15+
@source '../../../packages/plugin-kanban/src/**/*.{ts,tsx}';
16+
@source '../../../packages/plugin-charts/src/**/*.{ts,tsx}';
17+
@source '../../../packages/plugin-chatbot/src/**/*.{ts,tsx}';
18+
@source '../../../packages/plugin-list/src/**/*.{ts,tsx}';
19+
@source '../../../packages/plugin-detail/src/**/*.{ts,tsx}';
20+
@source '../../../packages/plugin-view/src/**/*.{ts,tsx}';
21+
@source '../../../packages/plugin-designer/src/**/*.{ts,tsx}';
22+
23+
@theme {
24+
--radius-lg: var(--radius);
25+
--radius-md: calc(var(--radius) - 2px);
26+
--radius-sm: calc(var(--radius) - 4px);
27+
28+
--color-border: hsl(var(--border));
29+
--color-input: hsl(var(--input));
30+
--color-ring: hsl(var(--ring));
31+
--color-background: hsl(var(--background));
32+
--color-foreground: hsl(var(--foreground));
33+
--color-primary: hsl(var(--primary));
34+
--color-primary-foreground: hsl(var(--primary-foreground));
35+
--color-secondary: hsl(var(--secondary));
36+
--color-secondary-foreground: hsl(var(--secondary-foreground));
37+
--color-destructive: hsl(var(--destructive));
38+
--color-destructive-foreground: hsl(var(--destructive-foreground));
39+
--color-muted: hsl(var(--muted));
40+
--color-muted-foreground: hsl(var(--muted-foreground));
41+
--color-accent: hsl(var(--accent));
42+
--color-accent-foreground: hsl(var(--accent-foreground));
43+
--color-popover: hsl(var(--popover));
44+
--color-popover-foreground: hsl(var(--popover-foreground));
45+
--color-card: hsl(var(--card));
46+
--color-card-foreground: hsl(var(--card-foreground));
47+
--color-sidebar: hsl(var(--sidebar));
48+
--color-sidebar-foreground: hsl(var(--sidebar-foreground));
49+
--color-sidebar-primary: hsl(var(--sidebar-primary));
50+
--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
51+
--color-sidebar-accent: hsl(var(--sidebar-accent));
52+
--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
53+
--color-sidebar-border: hsl(var(--sidebar-border));
54+
--color-sidebar-ring: hsl(var(--sidebar-ring));
55+
}
56+
57+
@layer base {
58+
:root {
59+
--background: 0 0% 100%;
60+
--foreground: 222.2 84% 4.9%;
61+
--card: 0 0% 100%;
62+
--card-foreground: 222.2 84% 4.9%;
63+
--popover: 0 0% 100%;
64+
--popover-foreground: 222.2 84% 4.9%;
65+
--primary: 222.2 47.4% 11.2%;
66+
--primary-foreground: 210 40% 98%;
67+
--secondary: 210 40% 96.1%;
68+
--secondary-foreground: 222.2 47.4% 11.2%;
69+
--muted: 210 40% 96.1%;
70+
--muted-foreground: 215.4 16.3% 46.9%;
71+
--accent: 210 40% 96.1%;
72+
--accent-foreground: 222.2 47.4% 11.2%;
73+
--destructive: 0 84.2% 60.2%;
74+
--destructive-foreground: 210 40% 98%;
75+
--border: 214.3 31.8% 91.4%;
76+
--input: 214.3 31.8% 91.4%;
77+
--ring: 222.2 84% 4.9%;
78+
--radius: 0.5rem;
79+
--sidebar: 0 0% 98%;
80+
--sidebar-foreground: 240 5.3% 26.1%;
81+
--sidebar-primary: 240 5.9% 10%;
82+
--sidebar-primary-foreground: 0 0% 98%;
83+
--sidebar-accent: 240 4.8% 95.9%;
84+
--sidebar-accent-foreground: 240 5.9% 10%;
85+
--sidebar-border: 220 13% 91%;
86+
--sidebar-ring: 217.2 91.2% 59.8%;
87+
}
88+
89+
.dark {
90+
--background: 222.2 84% 4.9%;
91+
--foreground: 210 40% 98%;
92+
--card: 222.2 84% 4.9%;
93+
--card-foreground: 210 40% 98%;
94+
--popover: 222.2 84% 4.9%;
95+
--popover-foreground: 210 40% 98%;
96+
--primary: 210 40% 98%;
97+
--primary-foreground: 222.2 47.4% 11.2%;
98+
--secondary: 217.2 32.6% 17.5%;
99+
--secondary-foreground: 210 40% 98%;
100+
--muted: 217.2 32.6% 17.5%;
101+
--muted-foreground: 215 20.2% 65.1%;
102+
--accent: 217.2 32.6% 17.5%;
103+
--accent-foreground: 210 40% 98%;
104+
--destructive: 0 62.8% 30.6%;
105+
--destructive-foreground: 210 40% 98%;
106+
--border: 217.2 32.6% 17.5%;
107+
--input: 217.2 32.6% 17.5%;
108+
--ring: 212.7 26.8% 83.9%;
109+
--sidebar: 240 5.9% 10%;
110+
--sidebar-foreground: 240 4.8% 95.9%;
111+
--sidebar-primary: 224.3 76.3% 48%;
112+
--sidebar-primary-foreground: 0 0% 100%;
113+
--sidebar-accent: 240 3.7% 15.9%;
114+
--sidebar-accent-foreground: 240 4.8% 95.9%;
115+
--sidebar-border: 240 3.7% 15.9%;
116+
--sidebar-ring: 217.2 91.2% 59.8%;
117+
}
118+
119+
* {
120+
border-color: hsl(var(--border));
121+
}
122+
123+
body {
124+
background-color: hsl(var(--background));
125+
color: hsl(var(--foreground));
126+
}
127+
}

‎apps/console-starter/src/main.tsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
3+
import { I18nProvider } from '@object-ui/i18n';
4+
import './index.css';
35
import { App } from './App';
46

7+
import '@object-ui/plugin-grid';
8+
import '@object-ui/plugin-kanban';
9+
import '@object-ui/plugin-calendar';
10+
import '@object-ui/plugin-charts';
11+
import '@object-ui/plugin-list';
12+
import '@object-ui/plugin-detail';
13+
import '@object-ui/plugin-view';
14+
import '@object-ui/plugin-form';
15+
import '@object-ui/plugin-dashboard';
16+
import '@object-ui/plugin-report';
17+
18+
async function loadLanguage(lang: string): Promise<Record<string, unknown>> {
19+
try {
20+
const serverUrl = import.meta.env.VITE_SERVER_URL || '';
21+
const res = await fetch(`${serverUrl}/api/v1/i18n/translations/${lang}`);
22+
if (!res.ok) return {};
23+
const json = await res.json();
24+
return json?.data?.translations ?? json ?? {};
25+
} catch {
26+
return {};
27+
}
28+
}
29+
530
ReactDOM.createRoot(document.getElementById('root')!).render(
631
<React.StrictMode>
7-
<App />
32+
<I18nProvider loadLanguage={loadLanguage}>
33+
<App />
34+
</I18nProvider>
835
</React.StrictMode>,
936
);

‎apps/console-starter/vite.config.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,25 @@ import path from 'path';
99
const workspaceAliases: Record<string, string> = {
1010
'@object-ui/app-shell': path.resolve(__dirname, '../../packages/app-shell/src'),
1111
'@object-ui/auth': path.resolve(__dirname, '../../packages/auth/src'),
12+
'@object-ui/collaboration': path.resolve(__dirname, '../../packages/collaboration/src'),
1213
'@object-ui/components': path.resolve(__dirname, '../../packages/components/src'),
1314
'@object-ui/core': path.resolve(__dirname, '../../packages/core/src'),
15+
'@object-ui/data-objectstack': path.resolve(__dirname, '../../packages/data-objectstack/src'),
1416
'@object-ui/fields': path.resolve(__dirname, '../../packages/fields/src'),
1517
'@object-ui/i18n': path.resolve(__dirname, '../../packages/i18n/src'),
18+
'@object-ui/layout': path.resolve(__dirname, '../../packages/layout/src'),
19+
'@object-ui/permissions': path.resolve(__dirname, '../../packages/permissions/src'),
20+
'@object-ui/plugin-calendar': path.resolve(__dirname, '../../packages/plugin-calendar/src'),
21+
'@object-ui/plugin-charts': path.resolve(__dirname, '../../packages/plugin-charts/src'),
22+
'@object-ui/plugin-chatbot': path.resolve(__dirname, '../../packages/plugin-chatbot/src'),
23+
'@object-ui/plugin-dashboard': path.resolve(__dirname, '../../packages/plugin-dashboard/src'),
24+
'@object-ui/plugin-designer': path.resolve(__dirname, '../../packages/plugin-designer/src'),
25+
'@object-ui/plugin-detail': path.resolve(__dirname, '../../packages/plugin-detail/src'),
1626
'@object-ui/plugin-form': path.resolve(__dirname, '../../packages/plugin-form/src'),
1727
'@object-ui/plugin-grid': path.resolve(__dirname, '../../packages/plugin-grid/src'),
28+
'@object-ui/plugin-kanban': path.resolve(__dirname, '../../packages/plugin-kanban/src'),
29+
'@object-ui/plugin-list': path.resolve(__dirname, '../../packages/plugin-list/src'),
30+
'@object-ui/plugin-report': path.resolve(__dirname, '../../packages/plugin-report/src'),
1831
'@object-ui/plugin-view': path.resolve(__dirname, '../../packages/plugin-view/src'),
1932
'@object-ui/react': path.resolve(__dirname, '../../packages/react/src'),
2033
'@object-ui/types': path.resolve(__dirname, '../../packages/types/src'),

0 commit comments

Comments
 (0)