this.gui 1.3.40 → 1.3.42

package/src/gui/Theme/Layout/Sidebars/LeftSidebar/components/LeftSidebarAction/LeftSidebarAction.resolver.tsx

@@ -0,0 +1,19 @@
+export default function resolveLeftSidebarAction({
+  action,
+  context,
+}: {
+  action: string | (() => any);
+  context?: any;
+}) {
+  try {
+    if (typeof action === 'function') return action();
+    if (typeof action === 'string') {
+      const fn = (window as any)[action];
+      if (typeof fn === 'function') return fn(context);
+      console.warn(`LeftSidebarAction: No global function found for "${action}"`);
+    }
+  } catch (err) {
+    console.error(`Error executing LeftSidebarAction for "${action}":`, err);
+  }
+  return undefined;
+}

package/src/gui/Theme/Layout/Sidebars/LeftSidebar/components/LeftSidebarAction/LeftSidebarAction.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Box, Typography, Tooltip } from '@/gui/components/atoms';
+import Icon from '@/gui/Theme/Icon/Icon';
+import type { LeftSidebarMode } from '../../LeftSidebar.types';
+import { useLeftSidebar } from '@/gui/hooks';
+
+export type LeftSidebarActionProps = {
+  label?: string;
+  icon?: string;
+  iconColor?: string;
+  onClick?: () => void;
+  active?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  resolver?: string; // optional resolver name or JS function string
+  view: LeftSidebarMode; // added line
+};
+
+const LeftSidebarAction: React.FC<LeftSidebarActionProps> = ({
+  label,
+  icon,
+  iconColor,
+  onClick,
+  active = false,
+  className,
+  style,
+  resolver,
+  view,
+}) => {
+  const handleClick = onClick || (resolver ? () => { try { new Function(resolver)(); } catch (e) { console.error(e); } } : undefined);
+
+  const content = (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1.123,
+        justifyContent: view === 'rail' ? 'center' : 'flex-start',
+        alignItems: 'center',
+        width: '100%',
+        textAlign: view === 'rail' ? 'center' : 'left',
+        px: view === 'rail' ? 0 : 1.23,
+      }}
+    >
+      <Icon name={icon || ''} iconColor={iconColor || (active ? 'primary.main' : 'text.secondary')} />
+      {view !== 'rail' && (
+        <Typography
+          variant="body2"
+          sx={{
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            color: active ? 'primary.main' : 'text.primary',
+          }}
+        >
+          {label}
+        </Typography>
+      )}
+    </Box>
+  );
+
+  return (
+    <Box
+      component="button"
+      onClick={handleClick}
+      className={clsx('LeftSidebarAction', className)}
+      style={style}
+      sx={{
+        p: 1.123,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: view === 'rail' ? 'center' : 'flex-start',
+        borderLeft: 2,
+        borderLeftColor: active ? 'primary.main' : 'transparent',
+        borderLeftStyle: 'solid',
+        cursor: 'pointer',
+        backgroundColor: active ? 'action.selected' : 'transparent',
+        '&:hover': {
+          backgroundColor: 'action.hover',
+          borderLeftColor: 'primary.main',
+        },
+        color: active ? 'primary.main' : 'text.primary',
+        width: '100%',
+        textAlign: view === 'rail' ? 'center' : 'left',
+        outline: 'none',
+        border: 'none',
+      }}
+      aria-pressed={active}
+      type="button"
+    >
+      {view === 'rail' ? (
+        <Tooltip
+          title={label}
+          placement="right"
+          arrow
+          slotProps={{ tooltip: { sx: { fontSize: '0.9rem', py: 0.5, px: 1 } } }}
+        >
+          {content}
+        </Tooltip>
+      ) : (
+        content
+      )}
+    </Box>
+  );
+};
+
+export default LeftSidebarAction;

package/src/gui/Theme/Layout/Sidebars/LeftSidebar/components/LeftSidebarLink/LeftSidebarLink.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import { Box, Typography, Tooltip } from '@/gui/components/atoms';
+import Icon from '@/gui/Theme/Icon/Icon';
+import type { LeftSidebarItemProps } from './LeftSidebarLink.types';
+import { useLeftSidebar } from '@/gui/hooks';
+import { Link as RouterLink } from 'react-router-dom';
+
+const LeftSidebarLink: React.FC<LeftSidebarItemProps> = ({
+  label,
+  icon,
+  iconColor,
+  href,
+  to,
+  active,
+  external,
+  onClick,
+  children
+}) => {
+  const { view } = useLeftSidebar();
+  const [expanded, setExpanded] = useState(false);
+  const hasChildren = Boolean(children);
+
+  const handleClick = () => {
+    if (hasChildren) setExpanded((prev) => !prev);
+    if (onClick) onClick();
+  };
+
+  const content = (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 1.123,
+        justifyContent: view === 'rail' ? 'center' : 'flex-start',
+        alignItems: 'center',
+        width: '100%',
+        textAlign: view === 'rail' ? 'center' : 'left',
+        px: view === 'rail' ? 0 : 1.23,
+      }}
+    >
+      {icon && (
+        <Icon name={icon} iconColor={iconColor}/>
+      )}
+      {view !== 'rail' && <Typography variant="body2">{label}</Typography>}
+      {hasChildren && (
+        <Icon
+          name={expanded ? 'expand_less' : 'expand_more'}
+          iconColor={iconColor}
+        />
+      )}
+    </Box>
+  );
+
+  return (
+    <Box
+      component={to ? (RouterLink as any) : href ? 'a' : 'div'}
+      {...(to ? ({ to } as any) : {})}
+      {...(!to && href ? ({ href, target: external ? '_blank' : undefined, rel: external ? 'noreferrer' : undefined } as any) : {})}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        p: 1.123,
+        backgroundColor: 'transparent',
+        border: active ? '1px solid' : 'none',
+        borderColor: active ? 'primary.main' : 'transparent',
+        color: active ? 'white' : 'text.primary',
+        cursor: 'pointer',
+        borderRadius: 1,
+        textDecoration: 'none',
+        '&:hover': {
+          backgroundColor: 'action.hover',
+          textDecoration: 'none',
+        },
+        position: 'relative',
+      }}
+      onClick={(e: any) => {
+        if (hasChildren) {
+          e.preventDefault();
+        }
+        handleClick();
+      }}
+    >
+      {view === 'rail' ? (
+        <Tooltip
+          title={label}
+          placement="right"
+          arrow
+          slotProps={{ tooltip: { sx: { fontSize: '0.9rem', py: 0.5, px: 1 } } }}
+        >
+          {content}
+        </Tooltip>
+      ) : (
+        content
+      )}
+      {hasChildren && (
+        <>
+          {expanded && view !== 'rail' && (
+            <Box sx={{ pl: 2, pt: 0.5 }}>
+              {React.Children.map(children, (child, index) =>
+                React.isValidElement(child) ? (
+                  React.cloneElement(child, { key: index })
+                ) : null
+              )}
+            </Box>
+          )}
+          {expanded && view === 'rail' && (
+            <Box
+              sx={{
+                position: 'absolute',
+                left: '100%',
+                top: 0,
+                backgroundColor: 'background.paper',
+                boxShadow: 3,
+                borderRadius: 1,
+                mt: -1,
+                zIndex: 10,
+                p: 1,
+                minWidth: 180,
+              }}
+            >
+              {React.Children.map(children, (child, index) =>
+                React.isValidElement(child)
+                  ? React.cloneElement(child, { key: index })
+                  : null
+              )}
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+};
+
+export default LeftSidebarLink;

package/src/gui/Theme/Layout/Sidebars/LeftSidebar/components/LeftSidebarLink/LeftSidebarLink.types.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { LeftSidebarView } from '@/gui/contexts/LeftSidebarContext';
+export type LeftSidebarItemProps = {
+  label?: string;
+  icon?: string;
+  iconColor?: string;
+  href?: string;
+  /** react-router path */
+  to?: string;
+  active?: boolean;
+  external?: boolean;
+  onClick?: () => void;
+  view?: LeftSidebarView;
+  children?: React.ReactNode;
+};

package/src/gui/Theme/Layout/Sidebars/LeftSidebar/components/LeftSidebarMenu/LeftSidebarMenu.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from "react";
+import Box from "@/gui/atoms/Box/Box";
+import Collapse from "@/gui/atoms/Collapse/Collapse";
+import Typography from "@/gui/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/Theme/Layout/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/Theme/Layout/Sidebars/RightSidebar/RightSidebar.resolver.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { RegistryEntry } from '@/gui/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;