feat: implement CoreAppShell component with flexible layout configurations and state management context

2026-06-22 16:27:50 +07:00
parent a7ffa7cb9c
commit 25f3cd3b30
9 changed files with 689 additions and 1 deletions
@@ -6,6 +6,7 @@ import { NotFound, Forbidden, Maintenance, ComingSoon } from '@repo/ui/component
 const AuthModule = lazy(() => import('./auth'));
 const AppModule = lazy(() => import('./modules'));
 const ShowcaseView = lazy(() => import('./showcase/showcase-view'));
+const ShellDemo = lazy(() => import('./shell-demo'));

 export default function App() {
  const [colorScheme, setColorScheme] = useState<ColorSchemeType>('light');
@@ -29,6 +30,7 @@ export default function App() {
                />
              }
            />
+            <Route path="/shell-demo" element={<ShellDemo />} />
            <Route path="/404" element={<NotFound />} />
            <Route path="/403" element={<Forbidden />} />
            <Route path="/maintenance" element={<Maintenance />} />
@@ -0,0 +1,306 @@
+import { useState, useMemo, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+import { 
+  Box, 
+  Button, 
+  Group, 
+  SegmentedControl, 
+  Stack, 
+  Text, 
+  Paper,
+  Switch,
+  Select,
+  Burger
+} from '@repo/ui/components';
+import { 
+  CoreAppShell, 
+  CorePageContainer, 
+  CoreAppShellConfig, 
+  LayoutVariant, 
+  DesktopCollapseVariant,
+  useCoreAppShell
+} from '@repo/ui/components';
+import { Home, BarChart2, Settings as SettingsIcon } from 'lucide-react';
+
+// Sub-component to test hook methods
+function LayoutControls() {
+  const { toggleDesktop, toggleMobile, sidebarVariant, setSidebarVariant, toggleAside, toggleNavbarPanel } = useCoreAppShell();
+
+  return (
+    <Group mb="md">
+      <Button onClick={toggleDesktop} variant="default" size="xs">Toggle Desktop Sidebar</Button>
+      <Button onClick={toggleMobile} variant="default" size="xs" hiddenFrom="sm">Toggle Mobile Sidebar</Button>
+      <Button 
+        onClick={() => setSidebarVariant(sidebarVariant === 'expanded' ? 'mini' : 'expanded')} 
+        variant="default"
+        size="xs"
+      >
+        Toggle Sidebar Variant (Current: {sidebarVariant})
+      </Button>
+      <Button onClick={toggleNavbarPanel} variant="light" color="grape" size="xs">
+        Toggle Secondary Panel (Double Sidebar)
+      </Button>
+      <Button onClick={toggleAside} variant="filled" color="cyan" size="xs">
+        Toggle Aside via Context
+      </Button>
+    </Group>
+  );
+}
+
+function MockHeader() {
+  const { mobileOpened, toggleMobile } = useCoreAppShell();
+  return (
+    <Group h="100%" px="md" justify="space-between" bg="green.1" c="green.9" style={{ borderBottom: '1px solid var(--mantine-color-green-3)' }}>
+      <Group>
+        <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" />
+        <Text fw={700} size="lg">Mock Header (bg="green.1")</Text>
+      </Group>
+    </Group>
+  );
+}
+
+function MockMobileDrawer() {
+  return (
+    <Box p="md" h="100%" bg="yellow.1" c="yellow.9">
+      <Text fw={700} mb="sm">Mock Mobile Drawer (bg="yellow.1")</Text>
+      <Stack gap="xs">
+        <Button variant="light" color="yellow" justify="flex-start" fullWidth>Mobile Dashboard</Button>
+        <Button variant="light" color="yellow" justify="flex-start" fullWidth>Mobile Settings</Button>
+      </Stack>
+    </Box>
+  );
+}
+
+function SettingRow({ title, description, control }: { title: string; description: string; control: ReactNode }) {
+  return (
+    <Paper withBorder p="md" radius="md">
+      <Group justify="space-between" wrap="nowrap">
+        <Stack gap={0}>
+          <Text fw={500}>{title}</Text>
+          <Text c="dimmed" size="sm">{description}</Text>
+        </Stack>
+        <Box>{control}</Box>
+      </Group>
+    </Paper>
+  );
+}
+
+export default function ShellDemo() {
+  const [layoutVariant, setLayoutVariant] = useState<LayoutVariant>('header-first');
+  const [collapseVariant, setCollapseVariant] = useState<DesktopCollapseVariant>('hide');
+  const [withUtilityBar, setWithUtilityBar] = useState(true);
+  const [withAside, setWithAside] = useState(true);
+  const [withFooter, setWithFooter] = useState(true);
+  const [withDoubleSidebar, setWithDoubleSidebar] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  const liveConfig = useMemo(() => {
+    return {
+      variant: layoutVariant,
+      features: {
+        desktopCollapseVariant: collapseVariant,
+        withUtilityBar: withUtilityBar ? undefined : false,
+        withAside: withAside ? undefined : false,
+        withFooter: withFooter ? undefined : false,
+        withDoubleSidebar,
+      }
+    };
+  }, [layoutVariant, collapseVariant, withUtilityBar, withAside, withFooter, withDoubleSidebar]);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(JSON.stringify(liveConfig, null, 2));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2500);
+  };
+
+  const config: CoreAppShellConfig = {
+    variant: layoutVariant,
+    features: {
+      desktopCollapseVariant: collapseVariant,
+      withUtilityBar: withUtilityBar ? undefined : false,
+      withAside: withAside ? undefined : false,
+      withFooter: withFooter ? undefined : false,
+      withDoubleSidebar,
+      persistState: false, // Don't persist for the demo to avoid confusing other showcases
+      disabled: false,     // Allow nested render overrides if needed
+      zIndex: 100,
+    }
+  };
+
+  return (
+    <CoreAppShell
+      config={config}
+    
+          slots={{
+            utilityBar: (
+              <Group h="100%" px="md" justify="flex-end" bg="blue.1" c="blue.9">
+                <Text size="xs" fw={600}>Mock Utility Bar (bg="blue.1")</Text>
+              </Group>
+            ),
+            header: <MockHeader />,
+            navbarMobile: <MockMobileDrawer />,
+            navbar: !withDoubleSidebar ? (
+              <Box p="md" h="100%" bg="grape.1" c="grape.9" style={{ borderRight: '1px solid var(--mantine-color-grape-3)' }}>
+                <Text fw={700} mb="sm">Mock Standard Navbar (bg="grape.1")</Text>
+                <Stack gap="xs">
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Dashboard</Button>
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Users</Button>
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Reports</Button>
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Settings</Button>
+                </Stack>
+              </Box>
+            ) : undefined,
+            navbarRail: withDoubleSidebar ? (
+              <Stack align="center" gap="lg" pt="md" h="100%" bg="orange.1" c="orange.9">
+                <Text size="xs" fw={700} style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
+                  Mock Rail (bg="orange.1")
+                </Text>
+                <Home size={24} />
+                <BarChart2 size={24} />
+                <SettingsIcon size={24} />
+              </Stack>
+            ) : undefined,
+            navbarPanel: withDoubleSidebar ? (
+              <Box p="md" h="100%" bg="grape.1" c="grape.9" style={{ borderRight: '1px solid var(--mantine-color-grape-3)' }}>
+                <Text fw={700} mb="sm">Mock Panel (bg="grape.1")</Text>
+                <Stack gap="xs">
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Dashboard</Button>
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Users</Button>
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Reports</Button>
+                  <Button variant="light" color="grape" justify="flex-start" fullWidth>Settings</Button>
+                </Stack>
+              </Box>
+            ) : undefined,
+            aside: (
+              <Box p="md" h="100%" bg="cyan.1" c="cyan.9">
+                <Text fw={700} mb="md">Mock Aside</Text>
+                <Text size="sm">This area could be used for notifications, help text, or contextual settings.</Text>
+              </Box>
+            ),
+            footer: (
+              <Group h="100%" px="md" justify="space-between" bg="gray.1" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
+                <Text size="sm" fw={600}>Mock Footer (bg="gray.1")</Text>
+              </Group>
+            ),
+        
+
+          }}
+      >
+        <CorePageContainer
+          headerSlot={
+            <Group justify="space-between" align="center">
+              <Text component="h1" size="xl" fw={700} m={0}>
+                Layout Engine Interactive Demo
+              </Text>
+              <Group>
+                <Button component={Link} to="/showcase" leftSection={<ArrowLeft size={16} />} variant="default">
+                  Back to Showcase
+                </Button>
+              </Group>
+            </Group>
+          }
+          stickyHeader
+        >
+          <Stack gap="md">
+            <Paper withBorder p="md" bg="var(--mantine-color-gray-0)">
+              <LayoutControls />
+            </Paper>
+
+            <SettingRow 
+              title="Layout Variant"
+              description="Switch between standard cloud or SaaS layout styles."
+              control={
+                <Select
+                  value={layoutVariant}
+                  onChange={(value) => setLayoutVariant((value as LayoutVariant) || 'sidebar-first')}
+                  data={[
+                    { label: 'Sidebar First (Alt)', value: 'sidebar-first' },
+                    { label: 'Header First (Default)', value: 'header-first' },
+                    { label: 'Top Nav (Hidden Sidebar)', value: 'top-nav' },
+                  ]}
+                />
+              }
+            />
+
+            <SettingRow 
+              title="Desktop Collapse Strategy"
+              description="Determine if the sidebar shrinks to icons or slides out completely."
+              control={
+                <SegmentedControl
+                  value={collapseVariant}
+                  onChange={(value) => setCollapseVariant(value as DesktopCollapseVariant)}
+                  data={[
+                    { label: 'Hide (Slide Out)', value: 'hide' },
+                    { label: 'Mini (Shrink)', value: 'mini' },
+                  ]}
+                />
+              }
+            />
+
+            <SettingRow 
+              title="Enable Double Sidebar"
+              description="Activate the Google-style rail and contextual panel navigation."
+              control={
+                <Switch
+                  checked={withDoubleSidebar}
+                  onChange={(event) => setWithDoubleSidebar(event.currentTarget.checked)}
+                />
+              }
+            />
+
+            <SettingRow 
+              title="Render Utility Bar"
+              description="Show a system-level announcement bar above the main header."
+              control={
+                <Switch
+                  checked={withUtilityBar}
+                  onChange={(event) => setWithUtilityBar(event.currentTarget.checked)}
+                />
+              }
+            />
+
+            <SettingRow 
+              title="Render Aside"
+              description="Toggle the right-hand properties or filter panel."
+              control={
+                <Switch
+                  checked={withAside}
+                  onChange={(event) => setWithAside(event.currentTarget.checked)}
+                />
+              }
+            />
+
+            <SettingRow 
+              title="Render Footer"
+              description="Toggle the bottom application footer."
+              control={
+                <Switch
+                  checked={withFooter}
+                  onChange={(event) => setWithFooter(event.currentTarget.checked)}
+                />
+              }
+            />
+
+            <Box mt="xl">
+              <Group justify="space-between" mb="sm">
+                <Text fw={700} size="lg">Configuration Preview</Text>
+                <Button 
+                    variant={copied ? 'filled' : 'light'} 
+                    color={copied ? 'teal' : 'blue'} 
+                    size="xs" 
+                    onClick={handleCopy}
+                  >
+                    {copied ? 'Copied to Clipboard!' : 'Copy JSON'}
+                  </Button>
+              </Group>
+              <Paper withBorder p="md" bg="dark.8" c="gray.0" style={{ fontFamily: 'monospace', overflowX: 'auto' }}>
+                <pre style={{ margin: 0 }}>{JSON.stringify(liveConfig, null, 2)}</pre>
+              </Paper>
+            </Box>
+
+          </Stack>
+        </CorePageContainer>
+      </CoreAppShell>
+  );
+}
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { ColorSchemeType, DensityType } from '@repo/ui/provider';
 import {
  Button,
@@ -41,6 +42,7 @@ interface ShowcaseViewProps {
 export default function ShowcaseView({ colorScheme, setColorScheme, density, setDensity }: ShowcaseViewProps) {
  const [activeTab, setActiveTab] = useState<string | null>('ui-components');
  const { i18n } = useTranslation();
+  const navigate = useNavigate();

  // Mock data for the table
  const tableData = [
@@ -65,6 +67,8 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
        return 'Global Event Bus Synchronization';
      case 'hardware':
        return 'Hardware Integration & Printers';
+      case 'layout-engine':
+        return 'Core Layout Engine & Variants';
      default:
        return 'Architecture Showcase';
    }
@@ -76,7 +80,13 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
        orientation="vertical"
        placement="left"
        value={activeTab}
-        onChange={setActiveTab}
+        onChange={(val) => {
+          if (val === 'layout-engine') {
+            navigate('/shell-demo');
+          } else {
+            setActiveTab(val);
+          }
+        }}
        variant="pills"
        radius="md"
        className="h-screen"
@@ -106,6 +116,9 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
          <Tabs.Tab value="ui-components" leftSection={<Layout size={18} />}>
            UI Components
          </Tabs.Tab>
+          <Tabs.Tab value="layout-engine" leftSection={<Layout size={18} />}>
+            Layout Engine
+          </Tabs.Tab>
          <Tabs.Tab value="forms" leftSection={<FileText size={18} />}>
            Form Engine
          </Tabs.Tab>
@@ -360,6 +373,8 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
                  </Card>
                </Stack>
              )}
+
+
            </Container>
          </Box>
        </Tabs.Panel>