@dxos/react-ui 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/components/Dialog/Dialog.stories.tsx

@@ -5,34 +5,94 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { random } from '@dxos/random';
+
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
+import { Input } from '../Input';
+import { ScrollArea } from '../ScrollArea';
+import { Dialog, type DialogContentProps } from './Dialog';
 
-import { Dialog } from './Dialog';
+type DefaultStoryProps = Pick<DialogContentProps, 'size'> &
+  Partial<{
+    title: string;
+    description: string;
+    openTrigger: string;
+    closeTrigger: string;
+    blockAlign: 'start' | 'center';
+  }>;
 
-type StoryProps = Partial<{
-  title: string;
-  description: string;
-  body: string;
-  closeTrigger: string;
-  openTrigger: string;
-  blockAlign: 'center' | 'start';
-}>;
+/**
+ * Standard Dialog with non-scrolling content in Dialog.Body.
+ * Dialog.Body propagates the Column grid via subgrid. Children auto-center via --dx-col.
+ */
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
+  return (
+    <Dialog.Root defaultOpen modal>
+      <Dialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </Dialog.Trigger>
+      <Dialog.Overlay blockAlign={blockAlign}>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.ActionIconButton action='close' />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Body>
+            <Dialog.Description>{description}</Dialog.Description>
+            <Input.Root>
+              <Input.Label>Value</Input.Label>
+              <Input.TextInput placeholder='Enter value' />
+            </Input.Root>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
 
-const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => {
+/**
+ * Dialog with a ScrollArea child inside Dialog.Body.
+ * The ScrollArea breaks out of Body's gutter padding via `--gutter`
+ * and applies its own asymmetric padding (accounting for scrollbar width).
+ */
+const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: DefaultStoryProps) => {
   return (
-    <Dialog.Root defaultOpen>
+    <Dialog.Root defaultOpen modal>
       <Dialog.Trigger asChild>
         <Button>{openTrigger}</Button>
       </Dialog.Trigger>
       <Dialog.Overlay blockAlign={blockAlign}>
-        <Dialog.Content>
-          <Dialog.Title>{title}</Dialog.Title>
-          <Dialog.Description>{description}</Dialog.Description>
-          <p className='mbs-2 mbe-4'>{body}</p>
-          <Dialog.Close asChild>
-            <Button variant='primary'>{closeTrigger}</Button>
-          </Dialog.Close>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.ActionIconButton action='close' />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Body>
+            <ScrollArea.Root orientation='vertical' padding thin>
+              <ScrollArea.Viewport>
+                <Dialog.Description>{description}</Dialog.Description>
+              </ScrollArea.Viewport>
+            </ScrollArea.Root>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
         </Dialog.Content>
       </Dialog.Overlay>
     </Dialog.Root>
@@ -40,15 +100,10 @@ const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blo
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Dialog',
+  title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    chromatic: {
-      disableSnapshot: false,
-    },
-  },
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -58,10 +113,65 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     title: 'Dialog title',
+    description: random.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'start',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(2),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'lg',
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(2),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'xl',
+  },
+};
+
+export const Scrolling: Story = {
+  render: ScrollingStory,
+  args: {
+    title: 'Dialog title',
+    description: random.lorem.paragraph(20),
     openTrigger: 'Open Dialog',
-    description: 'Dialog description',
-    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    closeTrigger: 'Close trigger',
+    closeTrigger: 'Close',
     blockAlign: 'center',
+    size: 'md',
   },
 };

package/src/components/Dialog/Dialog.theme.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { withColumn } from '../Column/withColumn';
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeMap: Record<DialogSize, string> = {
+  sm: 'md:max-w-[24rem]',
+  md: 'md:max-w-[32rem]!',
+  lg: 'md:max-w-[40rem]!',
+  xl: 'md:max-w-[60rem]!',
+};
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+  size?: DialogSize;
+};
+
+const overlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
+
+const content: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size = 'md' }, ...etc) => {
+  return mx(
+    '@container',
+    'dx-dialog__content dx-focus-ring dx-modal-surface py-4',
+    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    sizeMap[size],
+    ...etc,
+  );
+};
+
+const header: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
+
+const body: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
+
+const actionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__actionbar flex items-center pt-4 gap-2', withColumn.center(), ...etc);
+
+const title: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__description', 'text-description', srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay,
+  content,
+  header,
+  body,
+  actionbar: actionBar,
+  title,
+  description,
+};

package/src/components/Dialog/Dialog.tsx

@@ -3,148 +3,298 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import {
-  DialogClose as DialogClosePrimitive,
-  type DialogCloseProps as DialogClosePrimitiveProps,
-  DialogContent as DialogContentPrimitive,
-  type DialogContentProps as DialogContentPrimitiveProps,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  Root as DialogRootPrimitive,
-  type DialogProps as DialogRootPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-} from '@radix-ui/react-dialog';
-import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, {
+  type ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  forwardRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { osTranslations } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
+import { type ThemedClassName, composableProps, slottable } from '../../util';
+import { IconButton } from '../Button';
+import { Column } from '../Column';
+
+//
+// Root
+//
 
-type DialogRootProps = DialogRootPrimitiveProps;
+type DialogRootProps = DialogPrimitive.DialogProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <DialogRootPrimitive {...props} />
+    <DialogPrimitive.Root
+      // NOTE: Radix warning unless set to undefined.
+      // https://www.radix-ui.com/primitives/docs/components/dialog#description
+      aria-describedby={undefined}
+      {...props}
+    />
   </ElevationProvider>
 );
 
-type DialogTriggerProps = DialogTriggerPrimitiveProps;
+DialogRoot.displayName = 'Dialog.Root';
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
-
-type DialogPortalProps = DialogPortalPrimitiveProps;
+//
+// Trigger
+//
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
+//
+// Portal
+//
 
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const DialogPortal = DialogPrimitive.Portal;
 
-type DialogCloseProps = DialogClosePrimitiveProps;
+//
+// Overlay
+//
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+const DIALOG_OVERLAY_NAME = 'Dialog.Overlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
-const DIALOG_CONTENT_NAME = 'DialogContent';
+
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   DIALOG_OVERLAY_NAME,
   {},
 );
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
+type DialogOverlayProps = ThemedClassName<
+  DialogPrimitive.DialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
 
     return (
-      <DialogOverlayPrimitive
+      <DialogPrimitive.Overlay
         {...props}
-        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
-        ref={forwardedRef}
         data-block-align={blockAlign}
+        className={tx('dialog.overlay', {}, classNames)}
+        ref={forwardedRef}
       >
         <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-      </DialogOverlayPrimitive>
+      </DialogPrimitive.Overlay>
     );
   },
 );
 
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
-type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
+//
+// Content
+//
+
+const DIALOG_CONTENT_NAME = 'Dialog.Content';
+
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
+  size?: DialogSize;
+  inOverlayLayout?: boolean;
+};
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  ({ classNames, children, size = 'md', inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
-      <DialogContentPrimitive
+      <DialogPrimitive.Content
+        {...props}
         // NOTE: Radix warning unless set to undefined.
         // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
-        {...props}
         className={tx(
           'dialog.content',
-          'dialog',
-          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
+          {
+            size,
+            inOverlayLayout: propsInOverlayLayout || inOverlayLayout,
+          },
           classNames,
         )}
         ref={forwardedRef}
       >
-        {children}
-      </DialogContentPrimitive>
+        <Column.Root classNames='dx-expander' gutter='sm'>
+          {children}
+        </Column.Root>
+      </DialogPrimitive.Content>
     );
   },
 );
 
 DialogContent.displayName = DIALOG_CONTENT_NAME;
 
+//
+// Header
+//
+
+type DialogHeaderProps = SlottableProps;
+
+const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.header', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+DialogHeader.displayName = 'Dialog.Header';
+
+//
+// ActionIconButton
+//
+
+type DialogActionIconButtonAction = 'close' | 'delete';
+
+type DialogActionIconButtonProps = { action: DialogActionIconButtonAction; label?: string };
+
+const DIALOG_ACTION_ICONS: Record<DialogActionIconButtonAction, string> = {
+  close: 'ph--x--regular',
+  delete: 'ph--trash--regular',
+};
+
+const DIALOG_ACTION_LABEL_KEYS: Record<DialogActionIconButtonAction, string> = {
+  // Preserves the legacy `close-dialog.label` translation key for backward compat.
+  close: 'close-dialog.label',
+  delete: 'toolbar-delete.label',
+};
+
+const DialogActionIconButton = forwardRef<HTMLButtonElement, DialogActionIconButtonProps>(
+  ({ action, label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(osTranslations);
+    return (
+      <IconButton
+        {...props}
+        label={label ?? t(DIALOG_ACTION_LABEL_KEYS[action])}
+        icon={DIALOG_ACTION_ICONS[action]}
+        iconOnly
+        size={4}
+        variant='ghost'
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+DialogActionIconButton.displayName = 'Dialog.ActionIconButton';
+
+//
+// Body
+//
+
+type DialogBodyProps = SlottableProps;
+
+const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.body', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+DialogBody.displayName = 'Dialog.Body';
+
+//
+// Title
+//
+
+type DialogTitleProps = ThemedClassName<DialogPrimitive.DialogTitleProps> & { srOnly?: boolean };
+
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+    );
+  },
+);
+
+DialogTitle.displayName = 'Dialog.Title';
+
+//
+// Description
+//
+
+type DialogDescriptionProps = ThemedClassName<DialogPrimitive.DialogDescriptionProps> & { srOnly?: boolean };
+
+const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogPrimitive.Description
+        {...props}
+        className={tx('dialog.description', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+DialogDescription.displayName = 'Dialog.Description';
+
+//
+// ActionBar
+//
+
+type DialogActionBarProps = SlottableProps;
+
+const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className: classNames, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+DialogActionBar.displayName = 'Dialog.ActionBar';
+
+//
+// Close
+//
+
+type DialogCloseProps = DialogPrimitive.DialogCloseProps;
+
+const DialogClose = DialogPrimitive.Close;
+
+//
+// Dialog
+//
+
 export const Dialog = {
   Root: DialogRoot,
   Trigger: DialogTrigger,
   Portal: DialogPortal,
   Overlay: DialogOverlay,
   Content: DialogContent,
+  Header: DialogHeader,
+  Body: DialogBody,
   Title: DialogTitle,
   Description: DialogDescription,
+  ActionBar: DialogActionBar,
   Close: DialogClose,
+  ActionIconButton: DialogActionIconButton,
 };
 
 export type {
@@ -153,7 +303,12 @@ export type {
   DialogPortalProps,
   DialogOverlayProps,
   DialogContentProps,
+  DialogHeaderProps,
+  DialogBodyProps,
   DialogTitleProps,
   DialogDescriptionProps,
+  DialogActionBarProps,
   DialogCloseProps,
+  DialogActionIconButtonAction,
+  DialogActionIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.stories.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { ErrorBoundary } from '@dxos/react-error-boundary';
+
+import { withLayout, withTheme } from '../../testing';
+import { ErrorFallback } from './ErrorFallback';
+import { ThrowError } from './ThrowError';
+
+const DefaultStory = () => {
+  return (
+    <ErrorBoundary name='story' FallbackComponent={ErrorFallback}>
+      <ThrowError />
+    </ErrorBoundary>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/components/ErrorFallback',
+  component: ErrorFallback,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+  play: async () => {
+    // This story intentionally renders an ErrorBoundary fallback; clear the smoke-test error flag.
+    (window as any).__ERROR_BOUNDARY_ERRORS__ = [];
+  },
+};
+
+export const StringError: Story = {
+  render: () => <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />,
+};