@dxos/react-ui 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/{Buttons → Button}/IconButton.tsx

@@ -4,28 +4,38 @@
 
 import React, { forwardRef } from 'react';
 
-import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
 import { Tooltip, type TooltipSide } from '../Tooltip';
 
+import { Button, type ButtonProps } from './Button';
+
 type IconButtonProps = Omit<ButtonProps, 'children'> &
-  Pick<IconProps, 'icon' | 'size'> & {
+  Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
-    iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
+    iconOnly?: boolean;
+    iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
-    tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
   };
 
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
+  props.iconOnly ? (
+    <IconOnlyButton {...props} ref={forwardedRef} />
+  ) : (
+    <LabelledIconButton {...props} ref={forwardedRef} />
+  ),
+);
+
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
+
     return (
       <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
@@ -34,27 +44,24 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
+// TODO(burdon): Inherit size from container/density.
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  (
+    { size = 5, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>
-        <Icon icon={icon} size={size} classNames={iconClassNames} />
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
+        {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
+        {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },
 );
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
-  props.iconOnly ? (
-    <IconOnlyButton {...props} ref={forwardedRef} />
-  ) : (
-    <LabelledIconButton {...props} ref={forwardedRef} />
-  ),
-);
-
 export { IconButton };
 
 export type { IconButtonProps };

package/src/components/Button/Toggle.stories.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+
+import { Toggle, type ToggleProps } from './Toggle';
+
+const DefaultStory = (props: ToggleProps) => {
+  return (
+    <Toggle {...props}>
+      <Icon icon='ph--text-b--regular' />
+    </Toggle>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/Toggle',
+  component: Toggle,
+  render: DefaultStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/{Buttons → Button}/ToggleGroup.stories.tsx

@@ -2,37 +2,40 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { TextB, TextItalic } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
+
+import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 
 // TODO(burdon): Create Radix-style Root, Item, etc?
 const DefaultStory = (props: ToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
-        <TextB />
+        <Icon icon='ph--text-b--regular' />
       </ToggleGroupItem>
       <ToggleGroupItem value='texti'>
-        <TextItalic />
+        <Icon icon='ph--text-italic--regular' />
       </ToggleGroupItem>
     </ToggleGroup>
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/ToggleGroup',
+const meta = {
+  title: 'ui/react-ui-core/components/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     type: 'single',
   },

package/src/components/{Buttons → Button}/ToggleGroup.tsx

@@ -3,15 +3,16 @@
 //
 
 import {
+  ToggleGroupItem as ToggleGroupItemPrimitive,
+  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
+  type ToggleGroupMultipleProps,
   ToggleGroup as ToggleGroupPrimitive,
   type ToggleGroupSingleProps,
-  type ToggleGroupMultipleProps,
-  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
-  ToggleGroupItem as ToggleGroupItemPrimitive,
 } from '@radix-ui/react-toggle-group';
 import React, { forwardRef } from 'react';
 
 import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
+import { IconButton, type IconButtonProps } from './IconButton';
 
 type ToggleGroupProps = Omit<ToggleGroupSingleProps, 'className'> | Omit<ToggleGroupMultipleProps, 'className'>;
 
@@ -37,5 +38,17 @@ const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   },
 );
 
-export { ToggleGroup, ToggleGroupItem };
+type ToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
+
+const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemProps>(
+  ({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupItemPrimitive {...props} asChild>
+        <IconButton {...{ variant, elevation, density, classNames, label, icon, size }} ref={forwardedRef} />
+      </ToggleGroupItemPrimitive>
+    );
+  },
+);
+
+export { ToggleGroup, ToggleGroupItem, ToggleGroupIconItem };
 export type { ToggleGroupProps, ToggleGroupItemProps };

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

@@ -2,26 +2,26 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps } from '@phosphor-icons/react';
 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 { Icon } from '../Icon';
+import { Button, type ButtonProps, IconButton } from '../Button';
+import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
-export type CopyButtonProps = ButtonProps & {
-  value: string;
-  iconProps?: IconProps;
-};
+import { useClipboard } from './ClipboardProvider';
+
+export type CopyButtonProps = ButtonProps &
+  Pick<IconProps, 'size'> & {
+    value: string;
+  };
 
 const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
 
-export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButtonProps) => {
-  const { t } = useTranslation('os');
+export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButtonProps) => {
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   return (
@@ -33,12 +33,11 @@ export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButto
     >
       <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
         <span className='pli-1'>{t('copy label')}</span>
-        {/* TODO(wittjosiah): Why do these need as any? */}
-        <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
+        <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>
-        <Icon icon='ph--check--regular' size={5 as any} {...iconProps} />
+        <Icon icon='ph--check--regular' size={size} />
       </div>
     </Button>
   );
@@ -52,21 +51,21 @@ export const CopyButtonIconOnly = ({
   __scopeTooltip,
   value,
   classNames,
-  iconProps,
+  size,
   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');
+  const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));
   const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
     <IconButton
       iconOnly
       label={label!}
       icon='ph--copy--regular'
-      size={5}
+      size={size}
       variant={variant}
       classNames={['inline-flex flex-col justify-center', classNames]}
       onClick={() => setTextValue(value).then(onOpen)}

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/{Dialogs → Dialog}/AlertDialog.stories.tsx

@@ -2,25 +2,25 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { AlertDialog } from './AlertDialog';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 import { Toolbar } from '../Toolbar';
 
+import { AlertDialog } from './AlertDialog';
+
 type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
+  openTrigger: string;
   cancelTrigger: string;
   actionTrigger: string;
-  openTrigger: string;
 }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: StoryProps) => {
+const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -46,15 +46,18 @@ const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, ac
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/AlertDialog',
-  component: AlertDialog,
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+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 = {
+export const Default: Story = {
   args: {
     title: 'AlertDialog title',
     openTrigger: 'Open AlertDialog',

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

@@ -3,27 +3,27 @@
 //
 
 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, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -61,11 +61,7 @@ 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} />
   );
 });
 
@@ -79,7 +75,7 @@ const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> =
   return (
     <AlertDialogDescriptionPrimitive
       {...props}
-      className={tx('dialog.description', 'dialog--alert__description', { srOnly }, classNames)}
+      className={tx('dialog.description', { srOnly }, classNames)}
       ref={forwardedRef}
     />
   );
@@ -109,7 +105,6 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
       {...props}
       className={tx(
         'dialog.overlay',
-        'dialog--alert__overlay',
         {},
         classNames,
         'data-[block-align=start]:justify-center',
@@ -137,7 +132,7 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
   return (
     <AlertDialogContentPrimitive
       {...props}
-      className={tx('dialog.content', 'dialog--alert', { inOverlayLayout }, classNames)}
+      className={tx('dialog.content', { inOverlayLayout }, classNames)}
       ref={forwardedRef}
     >
       {children}

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

@@ -0,0 +1,101 @@
+//
+// 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 { Dialog, type DialogContentProps } from './Dialog';
+
+type StoryProps = Pick<DialogContentProps, 'size'> &
+  Partial<{
+    title: string;
+    description: string;
+    openTrigger: string;
+    closeTrigger: string;
+    blockAlign: 'center' | 'start';
+  }>;
+
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
+  return (
+    <Dialog.Root defaultOpen>
+      <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>
+          </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()],
+  parameters: {
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    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',
+  },
+};