this.gui 1.3.24 → 1.3.26

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import Card from './Card';
+
+/**
+ * Declarative resolver for Card
+ * -----------------------------
+ * - Faithfully wraps MUI's Card.
+ * - Supports standard props like `variant`, `elevation`, `sx`, etc.
+ * - `children` maps directly to content inside the Card.
+ * - Supports polymorphic `component` prop and alias `as`.
+ */
+export type CardSpec = {
+  type: 'Card';
+  props?: {
+    children?: React.ReactNode;
+    variant?: 'elevation' | 'outlined';
+    raised?: boolean;
+    elevation?: number;
+    sx?: SxProps<Theme>;
+    className?: string;
+    id?: string;
+    'data-testid'?: string;
+    component?: React.ElementType;
+    as?: React.ElementType;
+    [key: string]: any;
+  };
+};
+
+const CardResolver: RegistryEntry = {
+  type: 'Card',
+  resolve(spec: CardSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    const {
+      children,
+      id,
+      className,
+      sx,
+      component,
+      as,
+      ...rest
+    } = p;
+
+    const resolvedComponent = component ?? as;
+    const cardId = ensureNodeId('card', id);
+
+    return (
+      <Card
+        {...(resolvedComponent ? { component: resolvedComponent } : {})}
+        id={cardId}
+        className={className}
+        sx={sx}
+        {...rest}
+      >
+        {children}
+      </Card>
+    );
+  },
+};
+
+export default CardResolver;

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Card from './Card';
+import Typography from '@mui/material/Typography';
+
+const meta: Meta<typeof Card> = {
+  title: 'Atoms/Organization/Card/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const BasicCard: Story = {
+  render: () => (
+    <Card sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Basic Card
+      </Typography>
+      <Typography variant="body2">
+        This is a simple card using the GUI Card atom. It supports all typical MUI props.
+      </Typography>
+    </Card>
+  ),
+  name: 'Basic Card',
+};
+
+export const OutlinedCard: Story = {
+  render: () => (
+    <Card variant="outlined" sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Outlined Card
+      </Typography>
+      <Typography variant="body2">
+        This card uses the `variant="outlined"` prop for a border style.
+      </Typography>
+    </Card>
+  ),
+  name: 'Outlined Card',
+};
+
+export const RaisedCard: Story = {
+  render: () => (
+    <Card raised sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Raised Card
+      </Typography>
+      <Typography variant="body2">
+        Raised cards use elevation to create visual depth.
+      </Typography>
+    </Card>
+  ),
+  name: 'Raised Card',
+};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MuiCard from '@mui/material/Card';
+/**
+ * This.GUI — Card (atom)
+ * Wrapper around MUI’s Card that preserves props & typing.
+ *
+ * - Full support for MUI’s props and styling (`sx`, `elevation`, `variant`, etc.).
+ * - No behavior changes; designed to keep consistent with the This.GUI atom model.
+ */
+const Card = MuiCard;
+export type CardProps = React.ComponentProps<typeof Card>;
+(Card as any).displayName = 'Gui.Card';
+export default Card;

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import CardActions from './CardActions';
+
+/**
+ * Declarative resolver for CardActions
+ *
+ * - Preserves MUI fidelity: `disableSpacing`, `sx`, and any pass-through props.
+ * - Supports polymorphism via `component` or `as`.
+ * - Accepts children and standard layout styling.
+ */
+export type CardActionsSpec = {
+  type: 'CardActions';
+  props?: {
+    children?: React.ReactNode;
+    disableSpacing?: boolean;
+    sx?: SxProps<Theme>;
+    className?: string;
+    id?: string;
+    'data-testid'?: string;
+    component?: React.ElementType;
+    as?: React.ElementType;
+    [key: string]: any;
+  };
+};
+
+const CardActionsResolver: RegistryEntry = {
+  type: 'CardActions',
+  resolve(spec: CardActionsSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    const {
+      children,
+      sx,
+      className,
+      id,
+      component,
+      as,
+      ...rest
+    } = p;
+    const resolvedComponent = component ?? as;
+    const actionsId = ensureNodeId('cardActions', id);
+    return (
+      <CardActions
+        sx={sx}
+        className={className}
+        id={actionsId}
+        data-testid={p['data-testid']}
+        {...(resolvedComponent ? { component: resolvedComponent } : {})}
+        {...rest}
+      >
+        {children}
+      </CardActions>
+    );
+  },
+};
+
+export default CardActionsResolver;

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CardActions from './CardActions';
+import Button from '@/gui/components/atoms/Button/Button';
+
+const meta: Meta<typeof CardActions> = {
+  title: 'Atoms/Organization/Card/CardActions',
+  component: CardActions,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardActions>;
+
+export const BasicActions: Story = {
+  render: () => (
+    <CardActions>
+      <Button>Cancel</Button>
+      <Button variant="contained" color="primary">Submit</Button>
+    </CardActions>
+  ),
+  name: 'Basic Actions',
+};
+
+export const WithSpacingDisabled: Story = {
+  render: () => (
+    <CardActions disableSpacing>
+      <Button>Back</Button>
+      <Button variant="outlined">Next</Button>
+    </CardActions>
+  ),
+  name: 'Actions without spacing',
+};

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import MuiCardActions from '@mui/material/CardActions';
+
+/**
+ * This.GUI — CardActions (atom)
+ * Thin wrapper around MUI’s CardActions.
+ *
+ * - Preserves all props from MUI.
+ * - Supports polymorphism, `sx`, layout spacing, and children.
+ */
+const CardActions = MuiCardActions;
+export type CardActionsProps = React.ComponentProps<typeof CardActions>;
+(CardActions as any).displayName = 'Gui.CardActions';
+export default CardActions;

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

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import CardContent from './CardContent';
+
+/**
+ * Declarative resolver for CardContent
+ *
+ * Maps JSON-friendly specs into a GUI-compatible CardContent wrapper.
+ * - Passes through `children`, `sx`, `className`, `id`, and `component`/`as`.
+ * - Allows custom styling and polymorphic rendering.
+ */
+export type CardContentSpec = {
+  type: 'CardContent';
+  props?: {
+    children?: React.ReactNode;
+    sx?: SxProps<Theme>;
+    className?: string;
+    id?: string;
+    'data-testid'?: string;
+    component?: React.ElementType;
+    as?: React.ElementType;
+    [key: string]: any;
+  };
+};
+
+const CardContentResolver: RegistryEntry = {
+  type: 'CardContent',
+  resolve(spec: CardContentSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    const {
+      children,
+      sx,
+      className,
+      id,
+      component,
+      as,
+      ...rest
+    } = p;
+
+    const contentId = ensureNodeId('cardContent', id);
+    const resolvedComponent = component ?? as;
+
+    return (
+      <CardContent
+        sx={sx}
+        className={className}
+        id={contentId}
+        data-testid={p['data-testid']}
+        {...(resolvedComponent ? { component: resolvedComponent } : {})}
+        {...rest}
+      >
+        {children}
+      </CardContent>
+    );
+  },
+};
+
+export default CardContentResolver;

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CardContent from './CardContent';
+import Typography from '@mui/material/Typography';
+const meta: Meta<typeof CardContent> = {
+  title: 'Atoms/Organization/Card/CardContent',
+  component: CardContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardContent>;
+
+export const BasicContent: Story = {
+  render: () => (
+    <CardContent>
+      <Typography variant="body1">
+        This is the main content area inside a card. You can place any children here.
+      </Typography>
+    </CardContent>
+  ),
+  name: 'Basic CardContent',
+};
+
+export const WithPaddingAndText: Story = {
+  render: () => (
+    <CardContent sx={{ p: 4 }}>
+      <Typography variant="h6">Custom Padding</Typography>
+      <Typography variant="body2">
+        This CardContent component has extra padding applied via the `sx` prop.
+      </Typography>
+    </CardContent>
+  ),
+  name: 'CardContent with sx',
+};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import MuiCardContent from '@mui/material/CardContent';
+/**
+ * This.GUI — CardContent (atom)
+ * Thin wrapper around MUI’s CardContent component.
+ *
+ * - Preserves props and typing directly from MUI.
+ * - Allows styling via `sx`, polymorphism via `component`, and content via `children`.
+ */
+const CardContent = MuiCardContent;
+export type CardContentProps = React.ComponentProps<typeof CardContent>;
+(CardContent as any).displayName = 'Gui.CardContent';
+export default CardContent;

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import type { SxProps, Theme } from '@mui/material/styles';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+import CardHeader from './CardHeader';
+
+/**
+ * Declarative resolver for CardHeader
+ *
+ * Purpose:
+ * - Enables JSON-based rendering of card headers with title, subheader, and actions.
+ * - Supports polymorphism (`component` or `as`) and typical MUI props.
+ */
+export type CardHeaderSpec = {
+  type: 'CardHeader';
+  props?: {
+    title?: React.ReactNode;
+    subheader?: React.ReactNode;
+    action?: React.ReactNode;
+    avatar?: React.ReactNode;
+    component?: React.ElementType;
+    as?: React.ElementType;
+    sx?: SxProps<Theme>;
+    className?: string;
+    id?: string;
+    'data-testid'?: string;
+    [key: string]: any;
+  };
+};
+
+const CardHeaderResolver: RegistryEntry = {
+  type: 'CardHeader',
+  resolve(spec: CardHeaderSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    const {
+      id,
+      component,
+      as,
+      sx,
+      className,
+      title,
+      subheader,
+      action,
+      avatar,
+      ...rest
+    } = p;
+
+    const headerId = ensureNodeId('cardHeader', id);
+    const resolvedComponent = component ?? as;
+
+    return (
+      <CardHeader
+        title={title}
+        subheader={subheader}
+        action={action}
+        avatar={avatar}
+        sx={sx}
+        className={className}
+        id={headerId}
+        data-testid={p['data-testid']}
+        {...(resolvedComponent ? { component: resolvedComponent } : {})}
+        {...rest}
+      />
+    );
+  },
+};
+
+export default CardHeaderResolver;

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CardHeader from './CardHeader';
+import Avatar from '@mui/material/Avatar';
+import IconButton from '@mui/material/IconButton';
+import Icon from '@/gui/Theme/Icon/Icon';
+
+const meta: Meta<typeof CardHeader> = {
+  title: 'Atoms/Organization/Card/CardHeader',
+  component: CardHeader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof CardHeader>;
+
+export const BasicHeader: Story = {
+  render: () => (
+    <CardHeader
+      title="Card Title"
+      subheader="September 20, 2025"
+    />
+  ),
+  name: 'Basic Header',
+};
+
+export const WithAvatarAndAction: Story = {
+  render: () => (
+    <CardHeader
+      avatar={<Avatar aria-label="recipe">R</Avatar>}
+      action={
+        <IconButton aria-label="settings">
+          <Icon name="more_vert" />
+        </IconButton>
+      }
+      title="Shrimp and Chorizo Paella"
+      subheader="September 20, 2025"
+    />
+  ),
+  name: 'Header with Avatar and Action',
+};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import MuiCardHeader from '@mui/material/CardHeader';
+
+/**
+ * This.GUI — CardHeader (atom)
+ * Thin wrapper around MUI’s CardHeader that preserves props & typing.
+ * Useful for defining title, subheader, and action areas in cards with consistent API.
+ */
+const CardHeader = MuiCardHeader;
+export type CardHeaderProps = React.ComponentProps<typeof CardHeader>;
+(CardHeader as any).displayName = 'Gui.CardHeader';
+export default CardHeader;

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

@@ -0,0 +1,85 @@
+// src/gui/atoms/Collapse/Collapse.resolver.tsx
+import * as React from 'react';
+import Collapse from './Collapse';
+import type { RegistryEntry, ResolveCtx } from '@/registry/types';
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { TransitionProps } from '@mui/material/transitions';
+import { ensureNodeId } from '@/gui/utils/nodeID';
+
+/**
+ * Declarative resolver for Collapse
+ * ---------------------------------
+ * Fidelity
+ * - Forwards MUI props faithfully (in, orientation, collapsedSize, timeout, easing, unmountOnExit, etc.).
+ * - Supports polymorphism via `component` (and alias `as`).
+ * - Provides granular styling through `sx` on the root.
+ *
+ * Usage (declarative JSON):
+ * {
+ *   "type": "Collapse",
+ *   "props": {
+ *     "in": true,
+ *     "orientation": "vertical",
+ *     "sx": { "border": "1px dashed", "borderColor": "divider" }
+ *   }
+ * }
+ */
+export type CollapseSpec = {
+  type: 'Collapse';
+  props?: {
+    children?: React.ReactNode;
+
+    // Note: MUI Collapse's `component` must be a React component (not a string tag) due to Transition typing.
+    component?: React.ElementType<TransitionProps>;
+    as?: any; // alias of component
+
+    // Core MUI props (subset; others passthrough)
+    in?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    collapsedSize?: number | string;
+    timeout?: 'auto' | number | { appear?: number; enter?: number; exit?: number };
+    easing?: string | { enter?: string; exit?: string };
+    unmountOnExit?: boolean;
+    mountOnEnter?: boolean;
+    appear?: boolean;
+
+    // Styling
+    sx?: SxProps<Theme>;
+    className?: string;
+    id?: string;
+    'data-testid'?: string;
+
+    // Arbitrary passthrough
+    [key: string]: any;
+  };
+};
+
+const CollapseResolver: RegistryEntry = {
+  type: 'Collapse',
+  resolve(spec: CollapseSpec, _ctx?: ResolveCtx) {
+    const p = spec.props ?? {};
+    const { children, as: _as, component: _component, ...rest } = p;
+    // Collapse's `component` must be a React component (not a string tag), otherwise TS will error.
+    const rawComponent = _component ?? _as;
+    const component = (typeof rawComponent === 'string'
+      ? undefined
+      : (rawComponent as React.ElementType<TransitionProps>)) as React.ElementType<TransitionProps> | undefined;
+
+    // Guarantee a stable, prefixed id for editor tooling
+    const collapseId = ensureNodeId('collapse', p.id);
+    return (
+      <Collapse
+        {...(component ? { component: component as React.ElementType<TransitionProps> } : {})}
+        sx={p.sx}
+        className={p.className}
+        id={collapseId}
+        data-testid={p['data-testid']}
+        {...rest}
+      >
+        {children}
+      </Collapse>
+    );
+  },
+};
+
+export default CollapseResolver;

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

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Collapse from './Collapse';
+
+const meta: Meta<typeof Collapse> = {
+  title: 'Atoms/Content/Collapse',
+  component: Collapse,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+        <div style={{ padding: 16, minHeight: 220 }}>
+          <Story />
+        </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The **Collapse** atom is a thin wrapper around MUI's \`MuiCollapse\`, staying faithful to its API and polymorphism.
+
+In **declarative** mode (resolver), it forwards MUI props as-is and supports granular styling via \`sx\` on the root.
+
+---
+## React usage
+~~~jsx
+const [open, setOpen] = React.useState(true);
+
+<Collapse in={open}>
+  <div style={{ padding: 12, border: '1px solid var(--mui-palette-divider)', borderRadius: 8 }}>
+    Collapsible content
+  </div>
+</Collapse>
+~~~
+
+## Declarative JSON / Resolver
+~~~json
+{
+  "type": "Collapse",
+  "props": {
+    "in": true,
+    "orientation": "vertical",
+    "sx": { "border": "1px dashed", "borderColor": "divider", "p": 1 }
+  }
+}
+~~~
+        `,
+      },
+    },
+    controls: {
+      exclude: ['component', 'children', 'as', 'timeout', 'easing'],
+    },
+  },
+  argTypes: {
+    in: { control: 'boolean', description: 'Show/Hide content' },
+    orientation: { control: { type: 'radio' }, options: ['vertical', 'horizontal'] },
+    collapsedSize: { control: 'text', description: 'number or CSS size' },
+    unmountOnExit: { control: 'boolean' },
+    mountOnEnter: { control: 'boolean' },
+    appear: { control: 'boolean' },
+    sx: { control: 'object' },
+  },
+  args: {
+    in: true,
+    orientation: 'vertical',
+    collapsedSize: 0,
+    unmountOnExit: false,
+    mountOnEnter: false,
+    appear: false,
+    sx: {},
+    children: undefined,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapse>;
+
+const DemoBlock: React.FC<{ label?: string } & React.HTMLAttributes<HTMLDivElement>> = ({ label = 'Collapsible content', ...rest }) => (
+  <div
+    {...rest}
+    style={{
+      padding: 12,
+      border: '1px solid var(--mui-palette-divider)',
+      borderRadius: 8,
+      background: 'var(--mui-palette-background-paper)',
+      ...rest.style,
+    }}
+  >
+    {label}
+  </div>
+);
+
+// ======================= Stories =======================
+export const Playground: Story = {
+  render: (args) => <Collapse {...args}><DemoBlock /></Collapse>,
+};
+
+export const Horizontal: Story = {
+  args: { orientation: 'horizontal', in: true, collapsedSize: 0 },
+  render: (args) => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Collapse {...args}>
+        <DemoBlock label="Horizontal content" style={{ width: 240 }} />
+      </Collapse>
+      <span style={{ opacity: 0.7, fontSize: 12 }}>(Try toggling the \"in\" control)</span>
+    </div>
+  ),
+};
+
+export const WithSx: Story = {
+  args: { sx: { border: '1px dashed', borderColor: 'divider', p: 1 } },
+  render: (args) => (
+    <Collapse {...args}>
+      <DemoBlock label="Styled via sx on Collapse" />
+    </Collapse>
+  ),
+};
+
+export const UnmountOnExit: Story = {
+  args: { unmountOnExit: true, in: false },
+  render: (args) => (
+    <div>
+      <p style={{ margin: 0, opacity: 0.75 }}>Content is removed from the DOM when closed.</p>
+      <Collapse {...args}>
+        <DemoBlock label="Unmounts when closed" />
+      </Collapse>
+    </div>
+  ),
+};