@dxos/react-ui 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/components/Dialog/AlertDialog.tsx

@@ -0,0 +1,255 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { createContext } from '@radix-ui/react-context';
+import React, {
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
+
+import { type DialogSize } from '@dxos/ui-theme';
+
+import { useThemeContext } from '../../hooks';
+import { Column } from '../../primitives';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+//
+// Root
+//
+
+type AlertDialogRootProps = AlertDialogPrimitive.AlertDialogProps;
+
+const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
+  <ElevationProvider elevation='dialog'>
+    <AlertDialogPrimitive.Root {...props} />
+  </ElevationProvider>
+);
+
+//
+// Trigger
+//
+
+type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
+
+const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogPrimitive.Trigger;
+
+//
+// Portal
+//
+
+type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
+
+const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPrimitive.Portal;
+
+//
+// Cancel
+//
+
+type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
+
+const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogPrimitive.Cancel;
+
+//
+// Action
+//
+
+type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
+
+const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogPrimitive.Action;
+
+//
+// Title
+//
+
+type AlertDialogTitleProps = ThemedClassName<AlertDialogPrimitive.AlertDialogTitleProps> & { srOnly?: boolean };
+
+const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  AlertDialogTitleProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+  );
+});
+
+//
+// Description
+//
+
+type AlertDialogDescriptionProps = ThemedClassName<AlertDialogPrimitive.AlertDialogDescriptionProps> & {
+  srOnly?: boolean;
+};
+
+const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
+  HTMLParagraphElement,
+  AlertDialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Description
+      {...props}
+      className={tx('dialog.description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+
+//
+// Context
+//
+
+const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
+const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
+const ALERT_DIALOG_BODY_NAME = 'AlertDialogBody';
+const ALERT_DIALOG_ACTIONBAR_NAME = 'AlertDialogActionBar';
+
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
+  ALERT_DIALOG_OVERLAY_NAME,
+  {
+    inOverlayLayout: false,
+  },
+);
+
+//
+// Overlay
+//
+
+type AlertDialogOverlayProps = ThemedClassName<AlertDialogPrimitive.AlertDialogOverlayProps> & {
+  blockAlign?: 'center' | 'start' | 'end';
+};
+
+const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogOverlayProps
+>(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Overlay
+      {...props}
+      data-block-align={blockAlign}
+      className={tx(
+        'dialog.overlay',
+        {},
+        classNames,
+        // TODO(burdon): Move to dialog.ts.
+        'data-[h-align=start]:justify-center',
+        'data-[h-align=start]:items-start',
+        'data-[h-align=center]:place-content-center',
+      )}
+      ref={forwardedRef}
+    >
+      <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
+    </AlertDialogPrimitive.Overlay>
+  );
+});
+
+AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
+
+//
+// Content
+//
+
+type AlertDialogContentProps = ThemedClassName<AlertDialogPrimitive.AlertDialogContentProps> & { size?: DialogSize };
+
+const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogContentProps
+>(({ classNames, children, size = 'md', ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
+  return (
+    <AlertDialogPrimitive.Content
+      {...props}
+      className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
+      ref={forwardedRef}
+    >
+      <Column.Root>{children}</Column.Root>
+    </AlertDialogPrimitive.Content>
+  );
+});
+
+AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
+
+//
+// Body
+//
+
+type AlertDialogBodyProps = PropsWithChildren;
+
+const AlertDialogBody: ForwardRefExoticComponent<AlertDialogBodyProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogBodyProps
+>(({ children, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <Column.Segment asChild>
+      <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
+        {children}
+      </div>
+    </Column.Segment>
+  );
+});
+
+AlertDialogBody.displayName = ALERT_DIALOG_BODY_NAME;
+
+//
+// ActionBar
+//
+
+type AlertDialogActionBarProps = ThemedClassName<PropsWithChildren>;
+
+const AlertDialogActionBar: ForwardRefExoticComponent<AlertDialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <Column.Segment asChild>
+      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </div>
+    </Column.Segment>
+  );
+});
+
+AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
+
+//
+// AlertDialog
+//
+
+export const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: AlertDialogTrigger,
+  Portal: AlertDialogPortal,
+  Overlay: AlertDialogOverlay,
+  Content: AlertDialogContent,
+  Body: AlertDialogBody,
+  Title: AlertDialogTitle,
+  Description: AlertDialogDescription,
+  ActionBar: AlertDialogActionBar,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction,
+};
+
+export type {
+  AlertDialogRootProps,
+  AlertDialogTriggerProps,
+  AlertDialogPortalProps,
+  AlertDialogOverlayProps,
+  AlertDialogContentProps,
+  AlertDialogBodyProps,
+  AlertDialogTitleProps,
+  AlertDialogDescriptionProps,
+  AlertDialogActionBarProps,
+  AlertDialogCancelProps,
+  AlertDialogActionProps,
+};

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

@@ -0,0 +1,122 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+
+import { withTheme } from '../../testing';
+import { Button } from '../Button';
+import { Input } from '../Input';
+
+import { Dialog, type DialogContentProps } from './Dialog';
+
+type StoryProps = Pick<DialogContentProps, 'size'> &
+  Partial<{
+    title: string;
+    description: string;
+    openTrigger: string;
+    closeTrigger: string;
+    blockAlign: 'start' | 'center';
+  }>;
+
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
+  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.CloseIconButton />
+              </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 meta = {
+  title: 'ui/react-ui-core/components/Dialog',
+  component: Dialog as any,
+  render: DefaultStory,
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'start',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(1),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'lg',
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'xl',
+  },
+};

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,275 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { createContext } from '@radix-ui/react-context';
+import React, {
+  type ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { type DialogSize, osTranslations } from '@dxos/ui-theme';
+
+import { useThemeContext } from '../../hooks';
+import { Column } from '../../primitives';
+import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
+import { ElevationProvider } from '../ElevationProvider';
+
+//
+// Root
+//
+
+type DialogRootProps = DialogPrimitive.DialogProps;
+
+const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
+  <ElevationProvider elevation='dialog'>
+    <DialogPrimitive.Root {...props} />
+  </ElevationProvider>
+);
+
+//
+// Trigger
+//
+
+type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
+
+const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Trigger;
+
+//
+// Portal
+//
+
+type DialogPortalProps = DialogPrimitive.DialogPortalProps;
+
+const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPrimitive.Portal;
+
+//
+// Overlay
+//
+
+const DIALOG_OVERLAY_NAME = 'DialogOverlay';
+
+type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
+  DIALOG_OVERLAY_NAME,
+  {},
+);
+
+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 (
+      <DialogPrimitive.Overlay
+        {...props}
+        data-block-align={blockAlign}
+        className={tx('dialog.overlay', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
+      </DialogPrimitive.Overlay>
+    );
+  },
+);
+
+DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
+
+//
+// Content
+//
+
+const DIALOG_CONTENT_NAME = 'DialogContent';
+
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
+  size?: DialogSize;
+  inOverlayLayout?: boolean;
+};
+
+const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ classNames, children, size = 'md', inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+
+    return (
+      <DialogPrimitive.Content
+        {...props}
+        // NOTE: Radix warning unless set to undefined.
+        // https://www.radix-ui.com/primitives/docs/components/dialog#description
+        aria-describedby={undefined}
+        className={tx('dialog.content', { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size }, classNames)}
+        ref={forwardedRef}
+      >
+        <Column.Root gutter='md'>{children}</Column.Root>
+      </DialogPrimitive.Content>
+    );
+  },
+);
+
+DialogContent.displayName = DIALOG_CONTENT_NAME;
+
+//
+// Header
+//
+
+type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean };
+
+const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Column.Segment asChild>
+        <div role='heading' {...props} className={tx('dialog.header', { srOnly }, [classNames])} ref={forwardedRef} />
+      </Column.Segment>
+    );
+  },
+);
+
+//
+// CloseIconButton
+//
+
+type DialogCloseIconButtonProps = { label?: string };
+
+const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButtonProps>(
+  ({ label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(osTranslations);
+    return (
+      <IconButton
+        {...props}
+        label={label ?? t('close dialog label')}
+        icon='ph--x--regular'
+        iconOnly
+        size={4}
+        density='fine'
+        variant='ghost'
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Body
+//
+
+type DialogBodyProps = PropsWithChildren;
+
+const DialogBody: ForwardRefExoticComponent<DialogBodyProps> = forwardRef<HTMLDivElement, DialogBodyProps>(
+  ({ children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Column.Segment asChild>
+        <div role='none' {...props} className={tx('dialog.body')} ref={forwardedRef}>
+          {children}
+        </div>
+      </Column.Segment>
+    );
+  },
+);
+
+//
+// Title
+//
+
+type DialogTitleProps = ThemedClassName<DialogPrimitive.DialogTitleProps> & { srOnly?: boolean };
+
+const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+    );
+  },
+);
+
+//
+// Description
+//
+
+type DialogDescriptionProps = ThemedClassName<DialogPrimitive.DialogDescriptionProps> & { srOnly?: boolean };
+
+const DialogDescription: ForwardRefExoticComponent<DialogDescriptionProps> = forwardRef<
+  HTMLParagraphElement,
+  DialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <DialogPrimitive.Description
+      {...props}
+      className={tx('dialog.description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// ActionBar
+//
+
+type DialogActionBarProps = ThemedClassName<PropsWithChildren>;
+
+const DialogActionBar: ForwardRefExoticComponent<DialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  DialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <Column.Segment asChild>
+      <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </div>
+    </Column.Segment>
+  );
+});
+
+//
+// Close
+//
+
+type DialogCloseProps = DialogPrimitive.DialogCloseProps;
+
+const DialogClose: FunctionComponent<DialogCloseProps> = 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,
+  CloseIconButton: DialogCloseIconButton,
+};
+
+export type {
+  DialogRootProps,
+  DialogTriggerProps,
+  DialogPortalProps,
+  DialogOverlayProps,
+  DialogContentProps,
+  DialogHeaderProps,
+  DialogBodyProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogActionBarProps,
+  DialogCloseProps,
+};

package/src/components/ElevationProvider/ElevationProvider.tsx

@@ -2,9 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, createContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
 export interface ElevationContextValue {
   elevation?: Elevation;

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

@@ -0,0 +1,50 @@
+//
+// 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 BasicStory = () => {
+  return (
+    <ErrorBoundary name='story' FallbackComponent={ErrorFallback}>
+      <ThrowError />
+    </ErrorBoundary>
+  );
+};
+
+const StringErrorStory = () => {
+  return <ErrorFallback error='This is a string error message' data={{ context: 'story' }} />;
+};
+
+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: BasicStory,
+  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: StringErrorStory,
+};