this.gui 1.3.40 → 1.3.42

package/src/gui/components/atoms/Table/Table.resolver.tsx

@@ -0,0 +1,77 @@
+// src/gui/components/atoms/Table/Table.resolver.tsx
+import * as React from 'react';
+import type { RegistryEntry, ResolveCtx } from '@/gui/registry/types';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import type { SxProps, Theme } from '@mui/material/styles';
+import Table from './Table';
+
+/**
+ * Declarative spec for Table
+ *
+ * Notes
+ * - Wraps MUI's Table. Polymorphic.
+ * - Supports `sx` and common passthrough props.
+ * - Use `id` / `data-gui-id` for editor instrumentation.
+ */
+export type TableSpec = {
+  type: 'Table';
+  props?: {
+    children?: React.ReactNode;
+
+    // Common Table props (subset; rest is passthrough)
+    component?: any;
+    as?: any; // alias
+    size?: 'small' | 'medium';
+    padding?: 'default' | 'checkbox' | 'none';
+    stickyHeader?: boolean;
+
+    // Styling
+    sx?: SxProps<Theme>;
+
+    // Instrumentation / misc
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+    'data-gui-id'?: string;
+
+    // Allow arbitrary passthrough
+    [key: string]: any;
+  };
+};
+
+const TableResolver: RegistryEntry = {
+  type: 'Table',
+  resolve(spec: TableSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+
+    const {
+      children,
+      sx,
+      id,
+      className,
+      as: _as,
+      component: componentProp,
+      'data-gui-id': dataGuiIdProp,
+      ...rest
+    } = p as any;
+
+    const component = componentProp ?? _as;
+    const tableId = ensureNodeId('table', dataGuiIdProp ?? id);
+
+    return (
+      <Table
+        component={component}
+        id={tableId}
+        className={className}
+        sx={sx}
+        data-testid={p['data-testid']}
+        data-gui-id={tableId}
+        {...rest}
+      >
+        {children}
+      </Table>
+    );
+  },
+};
+
+export default TableResolver;

package/src/gui/components/atoms/Table/Table.stories.tsx

@@ -0,0 +1,173 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Table from './Table';
+import { Box,
+      TableHead,
+      TableRow, 
+      TableCell, 
+      TableBody, 
+      Typography } from '@/gui/components/atoms';
+
+const meta: Meta<typeof Table> = {
+  title: 'Atoms/DataDisplay/Table',
+  component: Table,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ padding: 16, minHeight: 260, maxWidth: 920 }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The **Table** atom is a thin wrapper around MUI's \`Table\`.  
+It preserves MUI props and typing (faithful to the original), and fits naturally into This.GUI's declarative/resolver pattern.
+
+---
+## Features
+- Fully preserves MUI Table API and typing.
+- Supports \`sx\` styling via the system.
+- Works with other Table atoms: \`TableHead\`, \`TableBody\`, \`TableRow\`, \`TableCell\`.
+- Can be described declaratively via the **TableResolver**.
+
+---
+## Basic usage (React)
+~~~tsx
+import { Table, TableHead, TableBody, TableRow, TableCell } from '@/gui/components/atoms';
+
+<Table size="small">
+  <TableHead>
+    <TableRow>
+      <TableCell>ID</TableCell>
+      <TableCell>Name</TableCell>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow>
+      <TableCell>1</TableCell>
+      <TableCell>Alice</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+~~~
+
+---
+## Declarative JSON / Resolver
+~~~json
+{
+  "type": "Table",
+  "props": {
+    "size": "small",
+    "sx": { "minWidth": 420 },
+    "children": [
+      { "type": "TableHead", "props": { "children": { "type": "TableRow", "props": { "children": [
+        { "type": "TableCell", "props": { "children": "ID" } },
+        { "type": "TableCell", "props": { "children": "Name" } }
+      ]}}}},
+      { "type": "TableBody", "props": { "children": { "type": "TableRow", "props": { "children": [
+        { "type": "TableCell", "props": { "children": 1 } },
+        { "type": "TableCell", "props": { "children": "Alice" } }
+      ]}}}}
+    ]
+  }
+}
+~~~
+        `,
+      },
+    },
+  },
+  argTypes: {
+    size: { control: { type: 'radio' }, options: ['small', 'medium'] },
+    padding: { control: { type: 'select' }, options: ['default', 'checkbox', 'none'] },
+    stickyHeader: { control: { type: 'boolean' } },
+    sx: { control: 'object' },
+    component: { table: { disable: true } },
+  },
+  args: {
+    size: 'small',
+    padding: 'default' as any, // MUI's types allow 'normal' depending on version; keep story loose
+    stickyHeader: false,
+    sx: {},
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+const DemoTable: React.FC<React.ComponentProps<typeof Table>> = (props) => {
+  return (
+    <Box
+      sx={{
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 2,
+        overflow: 'hidden',
+        bgcolor: 'background.paper',
+      }}
+    >
+      <Table {...props}>
+        {props.children ?? (
+          <>
+            <TableHead>
+              <TableRow sx={{ background: 'background.nav' }}>
+                <TableCell>
+                  <Typography fontWeight={700}>ID</Typography>
+                </TableCell>
+                <TableCell>
+                  <Typography fontWeight={700}>Name</Typography>
+                </TableCell>
+                <TableCell align="right">
+                  <Typography fontWeight={700}>Score</Typography>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {[
+                { id: 1, name: 'Alice', score: 98 },
+                { id: 2, name: 'Bob', score: 84 },
+                { id: 3, name: 'Charlie', score: 91 },
+              ].map((row) => (
+                <TableRow key={row.id} hover>
+                  <TableCell>{row.id}</TableCell>
+                  <TableCell>{row.name}</TableCell>
+                  <TableCell align="right">{row.score}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </Box>
+  );
+};
+
+export const Playground: Story = {
+  render: (args) => <DemoTable {...args} />,
+};
+
+export const MediumSize: Story = {
+  args: { size: 'medium' },
+  render: (args) => <DemoTable {...args} />,
+};
+
+export const StickyHeader: Story = {
+  args: { stickyHeader: true, sx: { minWidth: 520 } },
+  render: (args) => (
+    <Box sx={{ maxHeight: 180, overflow: 'auto', border: '1px solid', borderColor: 'divider', borderRadius: 2 }}>
+      <DemoTable {...args} />
+    </Box>
+  ),
+};
+
+export const DensePaddingNone: Story = {
+  args: { padding: 'none' as any, size: 'small' },
+  render: (args) => <DemoTable {...args} />,
+};
+
+export const WithSx: Story = {
+  args: { sx: { minWidth: 640 } },
+  render: (args) => <DemoTable {...args} />,
+};

package/src/gui/components/atoms/Table/Table.tsx

@@ -0,0 +1,20 @@
+/**
+ * This.GUI — Table
+ * Thin wrapper that preserves MUI's own typing and API.
+ *
+ * Examples:
+ *   <Table size="small">
+ *     ...
+ *   </Table>
+ *
+ * Notes:
+ * - Preserves polymorphism and full MUI Table props.
+ * - Integrates into This.GUI namespace and resolver pattern.
+ */
+import * as React from 'react';
+import MuiTable from '@mui/material/Table';
+// Re-export using MUI's own component type to keep full typing
+const Table = MuiTable;
+export type TableProps = React.ComponentProps<typeof Table>;
+(Table as any).displayName = 'Gui.Table';
+export default Table;

package/src/gui/components/atoms/TextField/TextField.stories.tsx

@@ -0,0 +1,25 @@
+import TextField from "./TextField";
+import { Stack } from "@/gui/components/atoms";
+
+export default {
+  title: "Atoms/Elements/TextField",
+  component: TextField,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const Variants = () => (
+  <Stack spacing={2} sx={{ width: 400 }}>
+    <TextField label="Default" variant="outlined" placeholder="Type something..." />
+    <TextField label="Filled" variant="filled" placeholder="Type something..." />
+    <TextField label="Standard" variant="standard" placeholder="Type something..." />
+    <TextField
+      label="Multiline"
+      variant="outlined"
+      multiline
+      rows={4}
+      placeholder="Write a long message..."
+    />
+  </Stack>
+);

package/src/gui/components/atoms/TextField/TextField.tsx

@@ -0,0 +1,15 @@
+/*
+ * This.GUI — TextField (polymorphic)
+ * Wrapper that keeps MUI's typing, including full prop support.
+ * Examples:
+ *   <TextField label="Name" variant="outlined" />
+ *   <TextField multiline rows={4} placeholder="Write something..." />
+ */
+import MuiTextField from '@mui/material/TextField';
+import * as React from 'react';
+
+// Re-export using MUI's own component type
+const TextField = MuiTextField;
+export type TextFieldProps = React.ComponentProps<typeof TextField>;
+(TextField as any).displayName = 'Gui.TextField';
+export default TextField;

package/src/gui/components/atoms/Toolbar/Toolbar.resolver.tsx

@@ -0,0 +1,60 @@
+// src/gui/atoms/Toolbar/Toolbar.resolver.tsx
+import * as React from 'react';
+import Toolbar from './Toolbar';
+import type { RegistryEntry } from '@/gui/registry/types';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+
+type ToolbarSpec = {
+  type: 'Toolbar';
+  props?: {
+    /** Children content (text or nodes) */
+    children?: React.ReactNode;
+
+    /** MUI props */
+    variant?: 'regular' | 'dense';
+    disableGutters?: boolean;
+
+    /** Styling / misc */
+    sx?: SxProps<Theme>;
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+  };
+};
+
+/**
+ * ToolbarResolver
+ * - Maps JSON-friendly spec → <Toolbar /> props.
+ * - Accepts sx/id/className for styling and test hooks.
+ */
+const ToolbarResolver: RegistryEntry = {
+  type: 'Toolbar',
+  resolve(spec: ToolbarSpec) {
+    const p = spec.props ?? {};
+    const {
+      children,
+      variant,
+      disableGutters,
+      sx,
+      className,
+    } = p;
+
+    const id = ensureNodeId('Toolbar', p.id);
+
+    return (
+      <Toolbar
+        variant={variant}
+        disableGutters={disableGutters}
+        sx={sx}
+        id={id}
+        className={className}
+        data-testid={p['data-testid']}
+      >
+        {children}
+      </Toolbar>
+    );
+  },
+};
+
+export default ToolbarResolver;

package/src/gui/components/atoms/Toolbar/Toolbar.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react';
+// Atoms used in the examples
+import { Toolbar, AppBar, Box, IconButton, Typography, Button } from '@/gui/components/atoms';
+import Icon from '@/gui/Theme/Icon/Icon';
+
+// ======================= Meta =======================
+const meta: Meta<typeof Toolbar> = {
+  title: 'Atoms/Containers/Toolbar',
+  component: Toolbar,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+        <div style={{ padding: 16, minHeight: 240 }}>
+          <Story />
+        </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The **Toolbar** atom is a thin wrapper over MUI's \`MuiToolbar\`.
+
+> **Not polymorphic.** Unlike \`Button\` or \`Box\`, **Toolbar does not accept** a \`component\` prop in MUI. If you need a different semantic element (e.g. \`<header>\`), wrap it with \`<Box component="header">\`.
+
+---
+## Features
+- Density via \`variant\`: \`'regular'\` | \`'dense'\`.
+- Optional gutters removal with \`disableGutters\`.
+- Full **\`sx\`** support for styling.
+- Plays nicely inside **AppBar** and custom layouts.
+
+---
+## Key Props
+- \`variant?: 'regular' | 'dense'\`
+- \`disableGutters?: boolean\`
+- \`sx?: SxProps\` — theme-aware styling.
+
+---
+## Basic usage
+~~~tsx
+import { Toolbar } from '@/gui/atoms';
+
+<Toolbar>
+  <span>Left content</span>
+</Toolbar>
+~~~
+
+## In an AppBar
+~~~tsx
+import { AppBar, Toolbar, Typography } from '@/gui/atoms';
+
+<AppBar position="static">
+  <Toolbar>
+    <Typography variant="h6">Title</Typography>
+  </Toolbar>
+</AppBar>
+~~~
+
+## Change semantic element with Box
+~~~tsx
+import { Box, Toolbar } from '@/gui/atoms';
+
+<Box component="header">
+  <Toolbar variant="dense">Compact header</Toolbar>
+</Box>
+~~~
+        `,
+      },
+    },
+    controls: {
+      exclude: ['component']
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['regular', 'dense'],
+    },
+    disableGutters: { control: 'boolean' },
+    // Toolbar is not polymorphic in MUI, so hide any notion of `component`
+  },
+  args: {
+    variant: 'regular',
+    disableGutters: false,
+    children: (
+      <div style={{ display: 'flex', width: '100%', alignItems: 'center', gap: 12 }}>
+        <strong>Toolbar content</strong>
+      </div>
+    ),
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Toolbar>;
+
+// ======================= Stories =======================
+export const Playground: Story = {};
+
+export const DenseVsRegular: Story = {
+  render: () => (
+    <div style={{ display: 'grid', gap: 12 }}>
+      <Toolbar>
+        <Typography variant="body2">Regular Toolbar</Typography>
+      </Toolbar>
+      <Toolbar variant="dense">
+        <Typography variant="body2">Dense Toolbar</Typography>
+      </Toolbar>
+    </div>
+  ),
+};
+
+export const WithActions: Story = {
+  render: () => (
+    <Toolbar sx={{ display: 'flex', gap: 8 }}>
+      <Typography sx={{ flex: 1 }} variant="h6">Title</Typography>
+      <IconButton aria-label="search">
+        <Icon name="search" fontSize={20} />
+      </IconButton>
+      <IconButton aria-label="user">
+        <Icon name="person" fontSize={20} />
+      </IconButton>
+      <Button variant="contained" size="small">Action</Button>
+    </Toolbar>
+  ),
+};
+
+export const InAppBar: Story = {
+  render: () => (
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6" sx={{ flex: 1 }}>App Bar + Toolbar</Typography>
+        <Button color="inherit" size="small">Login</Button>
+      </Toolbar>
+    </AppBar>
+  ),
+};
+
+export const WrappedInHeader: Story = {
+  render: () => (
+    <Box component="header" sx={{ border: '1px solid', borderColor: 'divider' }}>
+      <Toolbar variant="dense">
+        <Typography variant="body2">Header Toolbar (wrapped by Box)</Typography>
+      </Toolbar>
+    </Box>
+  ),
+};
+
+export const WithCustomSx: Story = {
+  render: () => (
+    <Toolbar sx={{ bgcolor: 'background.paper', border: '1px dashed', borderColor: 'divider', borderRadius: 1 }}>
+      <Typography variant="body2">Styled with sx</Typography>
+    </Toolbar>
+  ),
+};

package/src/gui/components/atoms/Toolbar/Toolbar.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import MuiToolbar from '@mui/material/Toolbar';
+/**
+ * This.GUI — Toolbar atom
+ * Thin wrapper around MUI's Toolbar so consumers import from "@/gui/atoms"
+ * instead of "@mui/material". This keeps the engine swappable.
+ *
+ * Notes:
+ * - We type props from MuiToolbar to preserve its full API (incl. `component`, `sx`, etc.).
+ * - Ref is HTMLDivElement, matching the default DOM element Toolbar renders.
+ */
+export type ToolbarProps = React.ComponentProps<typeof MuiToolbar>;
+const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(props, ref) {
+  return <MuiToolbar ref={ref} {...props} />;});
+(Toolbar as any).displayName = 'Gui.Toolbar';
+export default Toolbar;

package/src/gui/components/atoms/Tooltip/Tooltip.resolver.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import Tooltip from './Tooltip';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import type { RegistryEntry, ResolveCtx } from '@/gui/registry/types';
+
+/**
+ * Tooltip — Resolver
+ * --------------------------------------------------
+ * Declarative spec → live <Tooltip /> with correct props.
+ * Supports nested declarative children via ctx.render when available.
+ */
+export type TooltipSpec = {
+  type: 'Tooltip';
+  props?: {
+    // Content
+    title?: React.ReactNode | string; // required by MUI; we default if missing
+    children?: React.ReactNode | any; // can be a nested spec object
+
+    // Behavior
+    placement?:
+      | 'bottom-end' | 'bottom-start' | 'bottom'
+      | 'left-end'   | 'left-start'   | 'left'
+      | 'right-end'  | 'right-start'  | 'right'
+      | 'top-end'    | 'top-start'    | 'top';
+    arrow?: boolean;
+    followCursor?: boolean;
+    enterDelay?: number;
+    enterNextDelay?: number;
+    enterTouchDelay?: number;
+    leaveDelay?: number;
+    leaveTouchDelay?: number;
+    disableFocusListener?: boolean;
+    disableHoverListener?: boolean;
+    disableInteractive?: boolean;
+    disableTouchListener?: boolean;
+    open?: boolean; // controlled mode
+
+    // Styling / test ids
+    sx?: SxProps<Theme>;
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+    'data-gui-id'?: string;
+  };
+};
+
+const TooltipResolver: RegistryEntry = {
+  type: 'Tooltip',
+  resolve(spec: TooltipSpec, ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    const guiId = ensureNodeId('Tooltip', (p as any)['data-gui-id']);
+
+    // Resolve child: if a nested spec is provided and we have a renderer in ctx, use it.
+    let childCandidate: any = (spec.props?.children ?? (spec.props as any)?.child) as any;
+    if (!React.isValidElement(childCandidate) && childCandidate && typeof childCandidate === 'object' && ctx?.render) {
+      childCandidate = ctx.render(childCandidate);
+    }
+
+    // Tooltip expects exactly ONE ReactElement child. Coerce anything else into an element.
+    let childEl: React.ReactElement;
+    if (React.isValidElement(childCandidate)) {
+      childEl = childCandidate as React.ReactElement;
+    } else if (
+      typeof childCandidate === 'string' ||
+      typeof childCandidate === 'number' ||
+      typeof childCandidate === 'bigint'
+    ) {
+      childEl = <span>{String(childCandidate)}</span>;
+    } else if (childCandidate) {
+      // Arrays, iterables, true/false, portals, promises, etc. → wrap safely
+      childEl = <span>{childCandidate as any}</span>;
+    } else {
+      // No child provided → harmless inline element to satisfy MUI contract
+      childEl = <span style={{ display: 'inline-block', width: 0, height: 0 }} />;
+    }
+
+    let titleNode: React.ReactNode = p.title;
+    if (titleNode && !React.isValidElement(titleNode) && typeof titleNode === 'object' && ctx?.render) {
+      titleNode = ctx.render(titleNode as any);
+    }
+    if (typeof titleNode === 'undefined' || titleNode === null) {
+      titleNode = '';
+    }
+
+    const {
+      // remove resolver-only keys
+      id,
+      className,
+      sx,
+      placement,
+      arrow,
+      followCursor,
+      enterDelay,
+      enterNextDelay,
+      enterTouchDelay,
+      leaveDelay,
+      leaveTouchDelay,
+      disableFocusListener,
+      disableHoverListener,
+      disableInteractive,
+      disableTouchListener,
+      open,
+      // keep title out, we already computed titleNode
+      title: _title,
+      // also remove our custom id
+      ['data-gui-id']: _dataGuiId,
+      // and remove the alias 'child' if present
+      child: _child,
+      ...rest
+    } = p as any;
+
+    return (
+      <Tooltip
+        title={titleNode}
+        placement={placement}
+        arrow={arrow}
+        followCursor={followCursor}
+        enterDelay={enterDelay}
+        enterNextDelay={enterNextDelay}
+        enterTouchDelay={enterTouchDelay}
+        leaveDelay={leaveDelay}
+        leaveTouchDelay={leaveTouchDelay}
+        disableFocusListener={disableFocusListener}
+        disableHoverListener={disableHoverListener}
+        disableInteractive={disableInteractive}
+        disableTouchListener={disableTouchListener}
+        open={open}
+        sx={sx}
+        id={id}
+        className={className}
+        data-testid={(p as any)['data-testid']}
+        data-gui-id={guiId}
+        {...rest}
+      >
+        {childEl}
+      </Tooltip>
+    );
+  },
+};
+
+export default TooltipResolver;