this.gui 1.3.22 → 1.3.26

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import Switch from './Switch';
+import { FormControlLabel } from '@mui/material';
+import { SxProps, Theme } from '@mui/material/styles';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+
+/**
+ * Switch.resolver
+ * ------------------------------------------------------------
+ * Allows declarative usage of the Switch atom. You can pass any
+ * MUI Switch prop through, plus optional `label` support. If
+ * `label` is provided, we wrap the control in `FormControlLabel`.
+ *
+ * Examples (JSON-ish):
+ *  {
+ *    type: 'Switch',
+ *    props: { checked: true, color: 'primary', size: 'small' }
+ *  }
+ *
+ *  {
+ *    type: 'Switch',
+ *    props: { label: 'Enable feature', defaultChecked: true }
+ *  }
+ */
+
+export type SwitchResolverProps = React.ComponentProps<typeof Switch> & {
+  /** Optional text/element label to render alongside the switch */
+  label?: React.ReactNode;
+  /** Label position when `label` is provided */
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  sx?: SxProps<Theme>;
+  guiId?: string;
+};
+
+export default function resolveSwitch(props: SwitchResolverProps) {
+  const { label, labelPlacement = 'end', guiId, sx, ...rest } = props || ({} as SwitchResolverProps);
+
+  const nodeId = ensureNodeId('Switch', guiId);
+
+  const control = <Switch id={nodeId} sx={sx} {...rest} />;
+
+  if (label != null) {
+    return (
+      <FormControlLabel
+        control={control}
+        label={label}
+        labelPlacement={labelPlacement}
+      />
+    );
+  }
+
+  return control;
+}

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

@@ -0,0 +1,236 @@
+// src/gui/atoms/Switch/Switch.stories.tsx
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box, Stack, Typography, Switch } from '@/gui/components/atoms';
+import { FormControlLabel } from '@mui/material';
+
+// ======================= Meta =======================
+const meta: Meta<typeof Switch> = {
+  title: 'Atoms/Forms & Inputs/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+        <Box sx={{ p: 2 }}>
+          <Story />
+        </Box>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**Switch (This.GUI atom)** is a thin wrapper around MUI's \`Switch\`.
+It keeps MUI behavior, styling, and typing, but you import it from \`@/gui/atoms\` to keep your app decoupled from MUI.
+
+---
+
+# Usage
+
+## React (imperative)
+~~~tsx
+import { Switch } from '@/gui/atoms';
+
+export function Example() {
+  const [enabled, setEnabled] = React.useState(false);
+  return (
+    <Switch
+      checked={enabled}
+      onChange={(_, v) => setEnabled(v)}
+      color="primary"
+      size="medium"
+    />
+  );
+}
+~~~
+
+With an accessible label (MUI way):
+~~~tsx
+import { FormControlLabel } from '@mui/material';
+
+<FormControlLabel control={<Switch defaultChecked />} label="Enable notifications" />
+~~~
+
+---
+
+## Declarative (resolver)
+If you’re rendering via a JSON/registry resolver, you can pass the same props:
+
+~~~json
+{
+  "type": "Switch",
+  "props": {
+    "label": "Enable feature",
+    "defaultChecked": true,
+    "color": "primary",
+    "size": "small",
+    "id": "feat-toggle",
+    "sx": { "ml": 1 }
+  }
+}
+~~~
+
+The resolver supports:
+- All native MUI Switch props (\`checked\`, \`defaultChecked\`, \`onChange\`, \`color\`, \`size\`, \`disabled\`, \`edge\`, \`inputProps\`, \`sx\`, etc.).
+- \`label?: ReactNode\` and \`labelPlacement?: 'start' | 'end' | 'top' | 'bottom'\` (wraps in \`FormControlLabel\` when present).
+- \`id\`, \`className\`, \`data-testid\` passthrough for testing and DOM hooks.
+
+---
+        `,
+      },
+    },
+  },
+  argTypes: {
+    checked: {
+      control: 'boolean',
+      description: 'Controlled state. Use with onChange.',
+      table: { category: 'Behavior' },
+    },
+    defaultChecked: {
+      control: 'boolean',
+      description: 'Uncontrolled initial state.',
+      table: { category: 'Behavior' },
+    },
+    disabled: {
+      control: 'boolean',
+      table: { category: 'Behavior' },
+    },
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'default'],
+      table: { category: 'Appearance' },
+    },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium'],
+      description: 'Same as MUI Switch (no large by default).',
+      table: { category: 'Appearance' },
+    },
+    edge: {
+      control: 'radio',
+      options: [false, 'start', 'end'],
+      table: { category: 'Appearance' },
+    },
+    sx: { table: { category: 'Style' } },
+    id: { table: { category: 'DOM' } },
+    className: { table: { category: 'DOM' } },
+    // Not useful to control live in SB
+    onChange: { table: { disable: true } },
+    inputProps: { table: { disable: true } },
+  },
+  args: {
+    defaultChecked: false,
+    color: 'primary',
+    size: 'medium',
+    edge: false,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+// ======================= Stories =======================
+
+export const Playground: Story = {
+  render: (args) => <Switch {...args} />,
+};
+
+export const LabeledVariants: Story = {
+  name: 'With label & placement',
+  render: () => (
+    <Stack spacing={2}>
+      <FormControlLabel control={<Switch defaultChecked />} label="End (default)" />
+      <FormControlLabel control={<Switch defaultChecked />} label="Start" labelPlacement="start" />
+      <FormControlLabel control={<Switch />} label="Top" labelPlacement="top" />
+      <FormControlLabel control={<Switch />} label="Bottom" labelPlacement="bottom" />
+    </Stack>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When `label` is present, the atom wraps the control with `FormControlLabel`. Use `labelPlacement` to position it.',
+      },
+    },
+  },
+};
+
+export const SizesAndColors: Story = {
+  name: 'Sizes & colors',
+  render: () => (
+    <Stack spacing={2}>
+      <Stack direction="row" spacing={2} alignItems="center">
+        <Typography variant="body2" sx={{ minWidth: 88 }}>small</Typography>
+        <Switch size="small" color="default" defaultChecked />
+        <Switch size="small" color="primary" defaultChecked />
+        <Switch size="small" color="secondary" defaultChecked />
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems="center">
+        <Typography variant="body2" sx={{ minWidth: 88 }}>medium</Typography>
+        <Switch size="medium" color="default" defaultChecked />
+        <Switch size="medium" color="primary" defaultChecked />
+        <Switch size="medium" color="secondary" defaultChecked />
+      </Stack>
+    </Stack>
+  ),
+};
+
+export const ControlledExample: Story = {
+  name: 'Controlled (React state)',
+  render: () => {
+    const [on, setOn] = React.useState(false);
+    return (
+      <Stack spacing={1.5}>
+        <Typography variant="body2">Value: <b>{on ? 'true' : 'false'}</b></Typography>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={on}
+              onChange={(_, v) => setOn(v)}
+              color={on ? 'primary' : 'secondary'}
+            />
+          }
+          label="Controlled switch"
+        />
+      </Stack>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Classic controlled pattern: bind `checked` and update via `onChange`. You can also change appearance based on state.',
+      },
+    },
+  },
+};
+
+export const EdgeAndSx: Story = {
+  name: 'Edge & custom sx',
+  render: () => (
+    <Stack spacing={2}>
+      <FormControlLabel control={<Switch edge="start" defaultChecked />} label="Edge start" />
+      <FormControlLabel
+        control={
+          <Switch
+            defaultChecked
+            sx={{
+              '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                opacity: 0.7,
+              },
+            }}
+          />
+        }
+        label="Custom sx"
+      />
+    </Stack>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Pass any `sx` overrides exactly as you would with MUI. Useful for fine-grained tuning without creating a new variant.',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import MuiSwitch from '@mui/material/Switch';
+import type { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';
+/**
+ * Switch (This.GUI primitive)
+ * ----------------------------------------
+ * Thin wrapper over MUI's `Switch`.
+ * - Non‑polymorphic (same as MUI): forwards ref to the root element.
+ * - Preserves all MUI props (`checked`, `onChange`, `size`, `color`, etc.).
+ *
+ * Usage:
+ *   import { Switch } from '@/gui/atoms';
+ *   <Switch checked={on} onChange={(e) => setOn(e.target.checked)} size="small" />
+ */
+
+// Re-export MUI's prop types so consumers can import from our surface.
+export type SwitchProps = MuiSwitchProps;
+const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(function Switch(props, ref) {
+  return <MuiSwitch ref={ref} {...props} />;
+});
+export default Switch;
+export type { MuiSwitchProps };

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

@@ -0,0 +1,28 @@
+
+
+import React from "react";
+import TextField from "./TextField";
+import { Stack } from "@/gui/components/atoms";
+
+export default {
+  title: "Atoms/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 '@/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;