boha_admin/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 26 Wiki Activity

feat(mui): dev-only /ui-kit showcase proving the theme + data-theme bridge

Browse Source 
Adds src/admin/pages/UiKit.tsx and registers a DEV-only <Route path="ui-kit">
sibling to <Route path="login">, outside the AdminLayout shell. The lazy import
uses the ternary `import.meta.env.DEV ? lazy(...) : null` pattern so Vite/Rolldown
evaluates the condition at build time and the UiKit chunk is entirely absent from
production bundles (confirmed: no UiKit-*.js in dist-client/assets after build:client).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BOHA
2026-06-06 19:16:42 +02:00
parent 090cfd7400
commit 859ae1a458
2 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/admin/AdminApp.tsx
View File

@@ -82,6 +82,7 @@ const WarehouseReports = lazy(() => import("./pages/WarehouseReports"));
const WarehouseSuppliers = lazy(() => import("./pages/WarehouseSuppliers")); const WarehouseSuppliers = lazy(() => import("./pages/WarehouseSuppliers"));
const WarehouseLocations = lazy(() => import("./pages/WarehouseLocations")); const WarehouseLocations = lazy(() => import("./pages/WarehouseLocations"));
const WarehouseCategories = lazy(() => import("./pages/WarehouseCategories")); const WarehouseCategories = lazy(() => import("./pages/WarehouseCategories"));
const UiKit = import.meta.env.DEV ? lazy(() => import("./pages/UiKit")) : null;
export default function AdminApp() { export default function AdminApp() {
return ( return (
@@ -100,6 +101,9 @@ export default function AdminApp() {
> >
<Routes> <Routes>
<Route path="login" element={<Login />} /> <Route path="login" element={<Login />} />
{import.meta.env.DEV && UiKit && (
<Route path="ui-kit" element={<UiKit />} />
)}
<Route element={<AdminLayout />}> <Route element={<AdminLayout />}>
<Route index element={<Dashboard />} /> <Route index element={<Dashboard />} />
<Route path="users" element={<Users />} /> <Route path="users" element={<Users />} />

45
src/admin/pages/UiKit.tsx Normal file
View File

@@ -0,0 +1,45 @@
import ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import Chip from "@mui/material/Chip";
import { Button, Card, TextField } from "../ui";
import { useTheme } from "../../context/ThemeContext";
export default function UiKit() {
const { theme, toggleTheme } = useTheme();
return (
<ScopedCssBaseline>
<Box sx={{ p: 4, minHeight: "100vh", bgcolor: "background.default" }}>
<Stack direction="row" alignItems="center" spacing={2} mb={3}>
<Typography variant="h4">UI Kit</Typography>
<Button color="inherit" variant="outlined" onClick={toggleTheme}>
Theme: {theme}
</Button>
</Stack>
<Stack spacing={3} sx={{ maxWidth: 520 }}>
<Card>
<Typography variant="h6" gutterBottom>
Faktury
</Typography>
<Typography color="text.secondary" gutterBottom>
12 vystavených tento měsíc
</Typography>
<Stack direction="row" spacing={1} mb={2}>
<Chip label="Zaplaceno" color="success" size="small" />
<Chip label="Po splatnosti" color="error" size="small" />
</Stack>
<TextField
label="Hledat fakturu"
placeholder="Číslo nebo klient…"
/>
<Box mt={2}>
<Button>Nová faktura</Button>
</Box>
</Card>
</Stack>
</Box>
</ScopedCssBaseline>
);
}