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

package/src/components/Card/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Card';

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useCallback, useContext, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 export type ClipboardContextValue = {
   textValue: string;

package/src/components/Clipboard/CopyButton.tsx

@@ -4,23 +4,24 @@
 
 import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
-import { useClipboard } from './ClipboardProvider';
-import { Button, type ButtonProps, IconButton } from '../Buttons';
+import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
+import { useClipboard } from './ClipboardProvider';
+
 export type CopyButtonProps = ButtonProps &
   Pick<IconProps, 'size'> & {
     value: string;
   };
 
-const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
+const inactiveLabelStyles = 'invisible h-px -mb-px overflow-hidden';
 
 export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButtonProps) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   return (
@@ -31,11 +32,11 @@ export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButton
       data-testid='copy-invitation'
     >
       <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy label')}</span>
+        <span className='px-1'>{t('copy label')}</span>
         <Icon icon='ph--copy--regular' size={size} />
       </div>
       <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
-        <span className='pli-1'>{t('copy success label')}</span>
+        <span className='px-1'>{t('copy success label')}</span>
         <Icon icon='ph--check--regular' size={size} />
       </div>
     </Button>
@@ -54,7 +55,7 @@ export const CopyButtonIconOnly = ({
   variant,
   ...props
 }: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));

package/src/components/DensityProvider/DensityProvider.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 Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 export interface DensityContextValue {
   density?: Density;

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

@@ -0,0 +1,69 @@
+//
+// 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 { AlertDialog } from './AlertDialog';
+
+type StoryProps = Partial<{
+  title: string;
+  description: string;
+  openTrigger: string;
+  cancelTrigger: string;
+  actionTrigger: string;
+}>;
+
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
+  return (
+    <AlertDialog.Root defaultOpen>
+      <AlertDialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Overlay>
+        <AlertDialog.Content>
+          <AlertDialog.Body>
+            <AlertDialog.Title>{title}</AlertDialog.Title>
+            <AlertDialog.Description>{description}</AlertDialog.Description>
+          </AlertDialog.Body>
+          <AlertDialog.ActionBar>
+            <div className='grow' />
+            <AlertDialog.Cancel asChild>
+              <Button>{cancelTrigger}</Button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <Button variant='primary'>{actionTrigger}</Button>
+            </AlertDialog.Action>
+          </AlertDialog.ActionBar>
+        </AlertDialog.Content>
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/AlertDialog',
+  component: AlertDialog.Root as any,
+  render: DefaultStory as any,
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: faker.lorem.sentence(3),
+    description: faker.lorem.paragraph(1),
+    openTrigger: 'Open AlertDialog',
+    cancelTrigger: 'Cancel',
+    actionTrigger: 'Action',
+  },
+};

package/src/components/{Dialogs → Dialog}/AlertDialog.tsx

@@ -3,32 +3,44 @@
 //
 
 import {
-  type AlertDialogProps as AlertDialogRootPrimitiveProps,
-  Root as AlertDialogRootPrimitive,
-  AlertDialogTrigger as AlertDialogTriggerPrimitive,
-  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive,
-  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-  AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive,
-  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
   AlertDialogAction as AlertDialogActionPrimitive,
   type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
   AlertDialogCancel as AlertDialogCancelPrimitive,
   type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
   AlertDialogContent as AlertDialogContentPrimitive,
   type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
+  AlertDialogDescription as AlertDialogDescriptionPrimitive,
+  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
+  AlertDialogOverlay as AlertDialogOverlayPrimitive,
+  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
+  AlertDialogPortal as AlertDialogPortalPrimitive,
+  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
+  Root as AlertDialogRootPrimitive,
+  type AlertDialogProps as AlertDialogRootPrimitiveProps,
+  AlertDialogTitle as AlertDialogTitlePrimitive,
+  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
+  AlertDialogTrigger as AlertDialogTriggerPrimitive,
+  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
 } from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } from 'react';
+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 = AlertDialogRootPrimitiveProps;
 
 const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
@@ -37,22 +49,42 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+//
+// Trigger
+//
+
 type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
 
 const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogTriggerPrimitive;
 
+//
+// Portal
+//
+
 type AlertDialogPortalProps = AlertDialogPortalPrimitiveProps;
 
 const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPortalPrimitive;
 
+//
+// Cancel
+//
+
 type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
 
 const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogCancelPrimitive;
 
+//
+// Action
+//
+
 type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
 
 const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogActionPrimitive;
 
+//
+// Title
+//
+
 type AlertDialogTitleProps = ThemedClassName<AlertDialogTitlePrimitiveProps> & { srOnly?: boolean };
 
 const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
@@ -61,14 +93,14 @@ const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwa
 >(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <AlertDialogTitlePrimitive
-      {...props}
-      className={tx('dialog.title', 'dialog--alert__title', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
+    <AlertDialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
   );
 });
 
+//
+// Description
+//
+
 type AlertDialogDescriptionProps = ThemedClassName<AlertDialogDescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
@@ -79,15 +111,23 @@ const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> =
   return (
     <AlertDialogDescriptionPrimitive
       {...props}
-      className={tx('dialog.description', 'dialog--alert__description', { srOnly }, classNames)}
+      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,
   {
@@ -95,6 +135,10 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   },
 );
 
+//
+// Overlay
+//
+
 type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
   blockAlign?: 'center' | 'start' | 'end';
 };
@@ -107,17 +151,17 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
   return (
     <AlertDialogOverlayPrimitive
       {...props}
+      data-block-align={blockAlign}
       className={tx(
         'dialog.overlay',
-        'dialog--alert__overlay',
         {},
         classNames,
-        'data-[block-align=start]:justify-center',
-        'data-[block-align=start]:items-start',
-        'data-[block-align=center]:place-content-center',
+        // 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}
-      data-block-align={blockAlign}
     >
       <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
     </AlertDialogOverlayPrimitive>
@@ -126,35 +170,89 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
 
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 
-type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps>;
+//
+// Content
+//
+
+type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps> & { size?: DialogSize };
 
 const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
   HTMLDivElement,
   AlertDialogContentProps
->(({ classNames, children, ...props }, forwardedRef) => {
+>(({ classNames, children, size = 'md', ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
   return (
     <AlertDialogContentPrimitive
       {...props}
-      className={tx('dialog.content', 'dialog--alert', { inOverlayLayout }, classNames)}
+      className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
       ref={forwardedRef}
     >
-      {children}
+      <Column.Root>{children}</Column.Root>
     </AlertDialogContentPrimitive>
   );
 });
 
 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,
 };
@@ -165,8 +263,10 @@ export type {
   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',
+  },
+};