this.gui 1.3.22 → 1.3.26

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarMenu/LeftSidebarMenu.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import Box from "@/gui/components/atoms/Box/Box";
+import Collapse from "@/gui/components/atoms/Collapse/Collapse";
+import Typography from "@/gui/components/atoms/Typography/Typography";
+import Icon from "@/gui/Theme/Icon/Icon";
+type LeftSidebarMenuItem = {
+  label?: string;
+  icon?: string;
+  onClick?: () => void;
+};
+
+type LeftSidebarMenuProps = {
+  label?: string;
+  icon?: string;
+  items?: LeftSidebarMenuItem[];
+  view?: 'rail' | 'expanded' | 'mobile';
+};
+
+const LeftSidebarMenu: React.FC<LeftSidebarMenuProps> = ({ label, icon, items, view }) => {
+  const [open, setOpen] = useState(false);
+  const [anchorTop, setAnchorTop] = useState<number | null>(null);
+  const isRail = view === 'rail';
+
+  return (
+    <Box
+      onMouseEnter={(e) => {
+        if (isRail) {
+          const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+          setAnchorTop(rect.top);
+          setOpen(true);
+        }
+      }}
+      onMouseLeave={() => {
+        if (isRail) {
+          setOpen(false);
+          setAnchorTop(null);
+        }
+      }}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        p: 1.123,
+        backgroundColor: 'transparent',
+        cursor: 'pointer',
+        borderRadius: 1,
+        color: 'text.primary',
+        '&:hover': { backgroundColor: 'action.hover' },
+        position: 'relative',
+      }}
+      onClick={() => !isRail && setOpen(!open)}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 1.5,
+          justifyContent: view === 'rail' ? 'center' : 'flex-start',
+          alignItems: 'center',
+          width: '100%',
+          textAlign: view === 'rail' ? 'center' : 'left',
+          px: view === 'rail' ? 0 : 1.23,
+        }}
+      >
+        <Icon name={icon ?? ''} />
+        {view !== 'rail' && <Typography variant="body2">{label}</Typography>}
+        {!isRail && (
+          <Icon name={open ? 'expand_less' : 'expand_more'} />
+        )}
+      </Box>
+
+      {isRail ? (
+        open && (
+          <Box
+            sx={{
+              position: 'fixed',
+              left: 'calc(var(--gui-rail-width, 60px) + 2px)',
+              marginLeft: '-2px',
+              top: anchorTop ?? 0,
+              backgroundColor: 'background.paper',
+              color: 'text.primary',
+              borderRadius: 1,
+              boxShadow: 3,
+              zIndex: 1500,
+              border: '1px solid',
+              borderColor: 'divider',
+              minWidth: 180,
+              maxHeight: '80vh',
+              overflowY: 'auto',
+              py: 1,
+            }}
+          >
+            {(items ?? []).map((item, idx) => (
+              <Box
+                key={idx}
+                onClick={item.onClick}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  px: 2,
+                  py: 0.75,
+                  gap: 1.5,
+                  cursor: 'pointer',
+                  borderRadius: 1,
+                  color: 'text.primary',
+                  '&:hover': { backgroundColor: 'action.hover' },
+                }}
+              >
+                <Icon name={item.icon ?? ''} />
+                <Typography variant="body2">{item.label}</Typography>
+              </Box>
+            ))}
+          </Box>
+        )
+      ) : (
+        <Collapse in={open}>
+          {(items ?? []).map((item, idx) => (
+            <Box
+              key={idx}
+              onClick={item.onClick}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                px: 2,
+                py: 0.75,
+                gap: 1.123,
+                cursor: 'pointer',
+                borderRadius: 1,
+                color: 'text.primary',
+                '&:hover': { backgroundColor: 'action.hover' },
+              }}
+            >
+              <Icon name={item.icon ?? ''} />
+              <Typography variant="body2">{item.label}</Typography>
+            </Box>
+          ))}
+        </Collapse>
+      )}
+    </Box>
+  );
+}
+
+export default LeftSidebarMenu;

package/src/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarToggleButton/LeftSidebarToggleButton.tsx

@@ -0,0 +1,23 @@
+//@/gui/Layouts/ResponsiveUI/Sidebars/LeftSidebar/components/LeftSidebarToggleButton/LeftSidebarToggleButton.tsx
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Icon from '@/gui/Theme/Icon/Icon';
+
+type LeftSidebarToggleButtonProps = {
+  expanded: boolean;
+  onToggle: () => void;
+};
+
+const LeftSidebarToggleButton: React.FC<LeftSidebarToggleButtonProps> = ({ expanded, onToggle }) => {
+  return (
+    <IconButton
+      aria-label="Toggle Sidebar"
+      onClick={onToggle}
+      sx={{ margin: 1 }}
+    >
+      <Icon name={expanded ? 'chevron_left' : 'chevron_right'} />
+    </IconButton>
+  );
+};
+
+export default LeftSidebarToggleButton;

package/src/gui/Layouts/ResponsiveUI/Sidebars/RightSidebar/RightSidebar.resolver.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { RegistryEntry } from '@/registry/types';
+import RightSidebar from './RightSidebar';
+import type { RightSidebarElement } from './RightSidebar.types';
+
+type RightSidebarSpec = {
+  type: 'RightSidebar';
+  props?: {
+    elements?: RightSidebarElement[];
+    footerElements?: RightSidebarElement[];
+    initialView?: 'rail' | 'expanded' | 'mobile';
+    className?: string;
+    id?: string;
+    'data-testid'?: string;
+  };
+};
+
+const RightSidebarResolver: RegistryEntry = {
+  type: 'RightSidebar',
+  resolve(spec: RightSidebarSpec) {
+    const props = spec.props ?? {};
+    return (
+      <RightSidebar
+        elements={props.elements ?? []}
+        footerElements={props.footerElements ?? []}
+        initialView={props.initialView}
+        className={props.className}
+        id={props.id}
+        data-testid={props['data-testid']}
+      />
+    );
+  },
+};
+
+export default RightSidebarResolver;

package/src/gui/Layouts/ResponsiveUI/Sidebars/RightSidebar/RightSidebar.stories.tsx

@@ -0,0 +1,240 @@
+import { StoryFn } from "@storybook/react";
+import React from "react";
+import Layout from "@/gui/Layouts/ResponsiveUI/Layout/Layout";
+import ThemeModeToggle from "@/gui/components/molecules/Theme/ThemeModeToggle/ThemeModeToggle";
+
+export default {
+  title: "Layouts/ResponsiveUI/Sidebars/RightSidebar",
+  component: Layout,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+`The **RightSidebar** component mirrors the LeftSidebar experience on the opposite edge of the screen. Use it for complementary tools, contextual insights, and secondary actions without losing alignment with the primary content area.
+---
+## Features
+- **Rail-first orientation:** Defaults to a compact 72px rail so charts or documents remain visible.
+- **Expandable workspace:** Switch to a wide panel (264px) for verbose content, filters, or inspectors.
+- **Mobile-friendly drawer:** On small screens it becomes a temporary drawer that slides over content from the right.
+- **Footer actions:** Accepts \`footerElements\` so pinned tools (settings, help) stay reachable.
+- **Inset synchronization:** Updates \`theme.layout.insets.right\` so TopBar and other surfaces adapt automatically.
+
+---
+## Layout Modes
+- \`rail\`: icon-only column hugging the right edge.
+- \`expanded\`: full-width tools panel with labels and nested menus.
+- \`mobile\`: overlay drawer controlled by a floating button.
+Modes can be toggled programmatically via \`useRightSidebar()\` or automatically through built-in breakpoints.
+
+---
+## Props
+- \`elements?: RightSidebarElement[]\` — Declarative items (\`link\`, \`menu\`, \`action\`) rendered in order.
+- \`footerElements?: RightSidebarElement[]\` — Optional sticky footer actions.
+- \`initialView?: 'rail' | 'expanded' | 'mobile'\` — Starting mode (defaults to \`rail\`).
+- \`className?\` and other DOM props are forwarded to the root \`aside\`.
+
+---
+## Declarative usage
+~~~tsx
+import RightSidebar from '@/gui/Layouts/ResponsiveUI/Sidebars/RightSidebar/RightSidebar';
+
+<RightSidebar
+  elements={[
+    { type: 'link', props: { label: 'Notifications', icon: 'notifications' } },
+    { type: 'link', props: { label: 'Activity', icon: 'history' } },
+    {
+      type: 'menu',
+      props: {
+        label: 'Views',
+        icon: 'view_cozy',
+        items: [
+          { label: 'Timeline', icon: 'timeline' },
+          { label: 'JSON', icon: 'code' },
+        ],
+      },
+    },
+  ]}
+  footerElements={[
+    { type: 'link', props: { label: 'Settings', icon: 'settings' } },
+    { type: 'action', props: { label: 'Support', icon: 'help' } },
+  ]}
+/>;
+~~~
+
+---
+## React usage
+Combine the context provider and hook to manage the view explicitly:
+~~~tsx
+import { RightSidebarProvider } from '@/gui/contexts';
+import { useRightSidebar } from '@/gui/hooks';
+import RightSidebar from '@/gui/Layouts/ResponsiveUI/Sidebars/RightSidebar/RightSidebar';
+
+const items = [{ type: 'link', props: { label: 'History', icon: 'history' } }];
+
+function Inspector() {
+  const { view, setView } = useRightSidebar();
+  return (
+    <>
+      <button onClick={() => setView(view === 'expanded' ? 'rail' : 'expanded')}>
+        Toggle inspector
+      </button>
+      <RightSidebar elements={items} />
+    </>
+  );
+}
+
+export function InspectorShell() {
+  return (
+    <RightSidebarProvider>
+      <Inspector />
+    </RightSidebarProvider>
+  );
+}
+~~~
+
+---
+## Notes
+- The floating toggle only appears in mobile mode; closing the drawer restores the underlying layout insets.
+- Footer elements share the same declarative shape as main items, so you can reuse links or action buttons.
+- Works seamlessly alongside \`LeftSidebar\` and \`TopBar\` when using the responsive Layout shell.
+`,
+      },
+    },
+  },
+};
+
+const Template: StoryFn<React.ComponentProps<typeof Layout>> = (args) => (
+  <Layout {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  topBarConfig: {
+    title: "Analytics",
+    elementsRight: [
+      {
+        type: "action",
+        props: {
+          element: <ThemeModeToggle variant="minimal" show="icons" iconSize="small" />,
+        },
+      },
+      { type: "action", props: { label: "Share", icon: "ios_share", iconColor: "var(--gui-primary)" } },
+    ],
+  },
+  rightSidebarConfig: {
+    elements: [
+      { type: "link", props: { label: "Notifications", icon: "notifications", iconColor: "var(--gui-warning)" } },
+      { type: "link", props: { label: "Activity", icon: "history", iconColor: "var(--gui-secondary)" } },
+      {
+        type: "menu",
+        props: {
+          label: "Views",
+          icon: "view_cozy",
+          iconColor: "var(--gui-primary)",
+          items: [
+            { label: "Timeline", icon: "timeline", iconColor: "var(--gui-success)" },
+            { label: "JSON", icon: "code", iconColor: "var(--gui-info)" },
+          ],
+        },
+      },
+      { type: "action", props: { label: "Download", icon: "download", iconColor: "var(--gui-primary)" } },
+    ],
+  },
+};
+
+export const WithFooter = Template.bind({});
+WithFooter.args = {
+  topBarConfig: {
+    title: "Analytics",
+    elementsRight: [
+      {
+        type: "action",
+        props: {
+          element: <ThemeModeToggle variant="minimal" show="icons" iconSize="small" />,
+        },
+      },
+      { type: "action", props: { label: "Share", icon: "ios_share", iconColor: "var(--gui-primary)" } },
+    ],
+  },
+  rightSidebarConfig: {
+    elements: [
+      { type: "link", props: { label: "Notifications", icon: "notifications", iconColor: "var(--gui-warning)" } },
+      { type: "link", props: { label: "Activity", icon: "history", iconColor: "var(--gui-secondary)" } },
+      {
+        type: "menu",
+        props: {
+          label: "Views",
+          icon: "view_cozy",
+          iconColor: "var(--gui-primary)",
+          items: [
+            { label: "Timeline", icon: "timeline", iconColor: "var(--gui-success)" },
+            { label: "JSON", icon: "code", iconColor: "var(--gui-info)" },
+          ],
+        },
+      },
+      { type: "action", props: { label: "Download", icon: "download", iconColor: "var(--gui-primary)" } },
+    ],
+    footerElements: [
+      { type: "link", props: { label: "Settings", icon: "settings", iconColor: "var(--gui-secondary)" } },
+      { type: "action", props: { label: "Support", icon: "help", iconColor: "var(--gui-success)" } },
+    ],
+  },
+};
+
+export const WithBothSidebars = Template.bind({});
+WithBothSidebars.args = {
+  topBarConfig: {
+    title: "Analytics",
+    elementsRight: [
+      {
+        type: "action",
+        props: {
+          element: <ThemeModeToggle variant="minimal" show="icons" iconSize="small" />,
+        },
+      },
+      { type: "action", props: { label: "Share", icon: "ios_share", iconColor: "var(--gui-primary)" } },
+    ],
+  },
+  leftSidebarConfig: {
+    elements: [
+      { type: "link", props: { label: "Dashboard", icon: "dashboard", iconColor: "var(--gui-primary)" } },
+      {
+        type: "menu",
+        props: {
+          label: "Projects",
+          icon: "folder",
+          iconColor: "var(--gui-secondary)",
+          items: [
+            { label: "Project A", icon: "folder_open" },
+            { label: "Project B", icon: "folder_open" },
+          ],
+        },
+      },
+      { type: "action", props: { label: "Create", icon: "add_circle", iconColor: "var(--gui-success)" } },
+    ],
+    footerElements: [
+      { type: "link", props: { label: "Settings", icon: "settings", iconColor: "var(--gui-secondary)" } },
+      { type: "action", props: { label: "Help", icon: "help_outline", iconColor: "var(--gui-info)" } },
+    ],
+  },
+  rightSidebarConfig: {
+    elements: [
+      { type: "link", props: { label: "Notifications", icon: "notifications", iconColor: "var(--gui-warning)" } },
+      { type: "link", props: { label: "Activity", icon: "history", iconColor: "var(--gui-secondary)" } },
+      {
+        type: "menu",
+        props: {
+          label: "Views",
+          icon: "view_cozy",
+          iconColor: "var(--gui-primary)",
+          items: [
+            { label: "Timeline", icon: "timeline", iconColor: "var(--gui-success)" },
+            { label: "JSON", icon: "code", iconColor: "var(--gui-info)" },
+          ],
+        },
+      },
+      { type: "action", props: { label: "Download", icon: "download", iconColor: "var(--gui-primary)" } },
+    ],
+  },
+};