@dxos/react-ui 0.8.2-main.f081794 → 0.8.2-main.fbd8ed0

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

@@ -5,6 +5,7 @@
 import '@dxos-theme';
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
@@ -31,32 +32,36 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const defaults = { children: 'Test' };
+const meta: Meta<typeof Button> = {
+  title: 'ui/react-ui-core/Button',
+  component: Button,
+  render: DefaultStory,
+  decorators: [withVariants(), withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+const defaults: Story['args'] = { children: 'Test' };
+
+export const Default: Story = {
   args: { ...defaults, variant: 'default' },
 };
 
-export const Primary = {
+export const Primary: Story = {
   args: { ...defaults, variant: 'primary' },
 };
 
-export const Destructive = {
+export const Destructive: Story = {
   args: { ...defaults, variant: 'destructive' },
 };
 
-export const Outline = {
+export const Outline: Story = {
   args: { ...defaults, variant: 'outline' },
 };
 
-export const Ghost = {
+export const Ghost: Story = {
   args: { ...defaults, variant: 'ghost' },
 };
-
-export default {
-  title: 'ui/react-ui-core/Button',
-  component: Button,
-  decorators: [withVariants(), withTheme],
-  render: DefaultStory,
-  parameters: { chromatic: { disableSnapshot: false } },
-};

package/src/components/Buttons/IconButton.stories.tsx

@@ -6,22 +6,18 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { IconButton } from './IconButton';
+import { IconButton, type IconButtonProps } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 
-type StorybookIconButtonProps = {
-  iconOnly?: boolean;
-};
-
-const StorybookIconButton = (props: StorybookIconButtonProps) => {
+const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
       <div className='mbe-4'>
-        <IconButton label='Bold' icon='ph--text-b--bold' {...props} />
+        <IconButton {...props} />
       </div>
       <div className='mbe-4'>
-        <IconButton iconOnly label='Bold' icon='ph--text-b--bold' {...props} />
+        <IconButton iconOnly {...props} />
       </div>
     </Tooltip.Provider>
   );
@@ -30,11 +26,14 @@ const StorybookIconButton = (props: StorybookIconButtonProps) => {
 export default {
   title: 'ui/react-ui-core/IconButton',
   component: IconButton,
-  render: StorybookIconButton,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {
-  args: {},
+  args: {
+    label: 'Bold',
+    icon: 'ph--text-b--regular',
+  },
 };

package/src/components/Buttons/IconButton.tsx

@@ -2,60 +2,35 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, type ReactNode, type MutableRefObject, useState } from 'react';
+import React, { forwardRef, type MutableRefObject } 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 TooltipContentProps } from '../Tooltip';
+import { Tooltip, type TooltipSide } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
-    label: NonNullable<ReactNode>;
+    label: string;
     iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
-    // TODO(burdon): Create slots abstraction?
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
-    tooltipZIndex?: string;
-    tooltipSide?: TooltipContentProps['side'];
+    tooltipSide?: TooltipSide;
     suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    { noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props },
-    forwardedRef,
-  ) => {
-    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  ({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
-    const content = (
-      <Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
-        {props.label}
-        <Tooltip.Arrow />
-      </Tooltip.Content>
-    );
     return (
-      <Tooltip.Root
-        open={triggerTooltipOpen}
-        onOpenChange={(nextOpen) => {
-          if (suppressNextTooltip?.current) {
-            setTriggerTooltipOpen(false);
-            suppressNextTooltip.current = false;
-          } else {
-            setTriggerTooltipOpen(nextOpen);
-          }
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <LabelledIconButton {...props} ref={forwardedRef} />
-        </Tooltip.Trigger>
-        {tooltipPortal ? <Tooltip.Portal>{content}</Tooltip.Portal> : content}
-      </Tooltip.Root>
+      <Tooltip.Trigger asChild content={props.label} side={tooltipSide} suppressNextTooltip={suppressNextTooltip}>
+        <LabelledIconButton {...props} ref={forwardedRef} />
+      </Tooltip.Trigger>
     );
   },
 );

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

@@ -12,7 +12,7 @@ import { withTheme } from '../../testing';
 
 type StorybookToggleProps = {};
 
-const StorybookToggle = (props: StorybookToggleProps) => {
+const DefaultStory = (props: StorybookToggleProps) => {
   return (
     <Toggle {...props}>
       <TextB />
@@ -23,7 +23,7 @@ const StorybookToggle = (props: StorybookToggleProps) => {
 export default {
   title: 'ui/react-ui-core/Toggle',
   component: Toggle,
-  render: StorybookToggle,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Buttons/ToggleGroup.stories.tsx

@@ -10,12 +10,8 @@ import React from 'react';
 import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
 
-type StorybookToggleGroupProps = {
-  type: ToggleGroupProps['type'];
-};
-
-// TODO(burdon): ToggleGroup.Item.
-const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
+// TODO(burdon): Create Radix-style Root, Item, etc?
+const DefaultStory = (props: ToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
@@ -31,7 +27,7 @@ const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
 export default {
   title: 'ui/react-ui-core/ToggleGroup',
   component: ToggleGroup,
-  render: StorybookToggleGroup,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Clipboard/CopyButton.tsx

@@ -3,15 +3,15 @@
 //
 
 import { type IconProps } from '@phosphor-icons/react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
 import { useClipboard } from './ClipboardProvider';
-import { Button, type ButtonProps } from '../Buttons';
+import { Button, type ButtonProps, IconButton } from '../Buttons';
 import { Icon } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
-import { Tooltip } from '../Tooltip';
+import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
 export type CopyButtonProps = ButtonProps & {
   value: string;
@@ -48,31 +48,29 @@ type CopyButtonIconOnlyProps = CopyButtonProps & {
   label?: string;
 };
 
-export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonIconOnlyProps) => {
+export const CopyButtonIconOnly = ({
+  __scopeTooltip,
+  value,
+  classNames,
+  iconProps,
+  variant,
+  ...props
+}: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
   const { t } = useTranslation('os');
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t('copy success label') : props.label ?? t('copy label');
-  const [open, setOpen] = useState(false);
+  const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
-    <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' sideOffset={12}>
-          <span>{label}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-      <Tooltip.Trigger
-        aria-label={label}
-        {...props}
-        onClick={() => setTextValue(value).then(() => setOpen(true))}
-        data-testid='copy-invitation'
-        asChild
-      >
-        <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
-          <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
-        </Button>
-      </Tooltip.Trigger>
-    </Tooltip.Root>
+    <IconButton
+      iconOnly
+      label={label!}
+      icon='ph--copy--regular'
+      size={5}
+      variant={variant}
+      classNames={['inline-flex flex-col justify-center', classNames]}
+      onClick={() => setTextValue(value).then(onOpen)}
+      data-testid='copy-invitation'
+    />
   );
 };

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

@@ -11,23 +11,16 @@ import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 import { Toolbar } from '../Toolbar';
 
-type StorybookAlertDialogProps = Partial<{
+type DefaultStoryProps = Partial<{
   title: string;
   description: string;
   body: string;
-  cancelTrigger: string; // TODO(burdon): Why trigger?
+  cancelTrigger: string;
   actionTrigger: string;
   openTrigger: string;
 }>;
 
-const StorybookAlertDialog = ({
-  title,
-  openTrigger,
-  description,
-  body,
-  cancelTrigger,
-  actionTrigger,
-}: StorybookAlertDialogProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -56,7 +49,7 @@ const StorybookAlertDialog = ({
 export default {
   title: 'ui/react-ui-core/AlertDialog',
   component: AlertDialog,
-  render: StorybookAlertDialog,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -10,7 +10,7 @@ import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type StorybookDialogProps = Partial<{
+type DefaultStoryProps = Partial<{
   title: string;
   description: string;
   body: string;
@@ -19,7 +19,7 @@ type StorybookDialogProps = Partial<{
   blockAlign: 'center' | 'start';
 }>;
 
-const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StorybookDialogProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: DefaultStoryProps) => {
   return (
     <Dialog.Root defaultOpen>
       <Dialog.Trigger asChild>
@@ -42,7 +42,7 @@ const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger,
 export default {
   title: 'ui/react-ui-core/Dialog',
   component: Dialog,
-  render: StorybookDialog,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -81,11 +81,12 @@ const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 const DIALOG_CONTENT_NAME = 'DialogContent';
-const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false,
-});
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
+  DIALOG_OVERLAY_NAME,
+  {},
+);
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
+type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps & { blockAlign?: 'center' | 'start' | 'end' }>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -115,6 +116,8 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
 
     return (
       <DialogContentPrimitive
+        // NOTE: Radix warning unless set to undefined.
+        // https://www.radix-ui.com/primitives/docs/components/dialog#description
         aria-describedby={undefined}
         {...props}
         className={tx(

package/src/components/Input/Input.stories.tsx

@@ -4,28 +4,44 @@
 
 import '@dxos-theme';
 
+import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { baseSurface, modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
-import { Input } from './Input';
+import {
+  type CheckboxProps,
+  Input,
+  type PinInputProps,
+  type SwitchProps,
+  type TextInputProps,
+  type TextAreaProps,
+} from './Input';
 import { withTheme } from '../../testing';
 
-type StoryInputProps = Partial<{
+type VariantMap = {
+  text: TextInputProps;
+  pin: PinInputProps;
+  textarea: TextAreaProps;
+  checkbox: CheckboxProps;
+  switch: SwitchProps;
+};
+
+type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
+
+type BaseProps = Partial<{
+  kind: keyof VariantMap;
   label: string;
-  placeholder: string;
-  disabled: boolean;
-  description: string;
   labelVisuallyHidden: boolean;
+  description: string;
   descriptionVisuallyHidden: boolean;
-  type: 'default' | 'pin' | 'textarea' | 'checkbox' | 'switch';
-  validationMessage: string;
   validationValence: MessageValence;
+  validationMessage: string;
 }>;
 
-const StoryInputContent = ({
-  type = 'default',
+const Wrapper = ({
+  kind,
   label,
   description,
   labelVisuallyHidden,
@@ -33,15 +49,17 @@ const StoryInputContent = ({
   validationValence,
   validationMessage,
   ...props
-}: StoryInputProps) => {
+}: BaseProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
-      {type === 'pin' && <Input.PinInput {...props} />}
-      {type === 'textarea' && <Input.TextArea {...props} />}
-      {type === 'checkbox' && <Input.Checkbox {...props} />}
-      {type === 'switch' && <Input.Switch {...props} />}
-      {type === 'default' && <Input.TextInput {...props} />}
+
+      {kind === 'text' && <Input.TextInput {...props} />}
+      {kind === 'pin' && <Input.PinInput {...props} />}
+      {kind === 'textarea' && <Input.TextArea {...props} />}
+      {kind === 'checkbox' && <Input.Checkbox {...props} />}
+      {kind === 'switch' && <Input.Switch {...props} />}
+
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
         {validationMessage && (
           <>
@@ -54,47 +72,37 @@ const StoryInputContent = ({
   );
 };
 
-const StoryInput = (props: StoryInputProps) => {
-  // TODO(thure): Implement
+const DefaultStory = (props: BaseProps) => {
   return (
     <div className='space-b-4'>
       <div className={mx(baseSurface, 'p-4')}>
-        <StoryInputContent {...props} />
+        <Wrapper {...props} />
       </div>
       <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
-        <StoryInputContent {...props} />
+        <Wrapper {...props} />
       </div>
       <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'dialog' }))}>
-        <StoryInputContent {...props} />
+        <Wrapper {...props} />
       </div>
     </div>
   );
 };
 
-export default {
+const meta: Meta<BaseProps> = {
   title: 'ui/react-ui-core/Input',
-  component: Input,
-  render: StoryInput,
-  // TODO(thure): Refactor.
-  argTypes: {
-    label: { control: 'text' },
-    description: { control: 'text' },
-    validationMessage: { control: 'text' },
-    validationValence: {
-      control: 'select',
-      options: ['success', 'info', 'warning', 'error'],
-    },
-    type: {
-      control: 'select',
-      options: ['default', 'textarea', 'pin'],
-    },
-  },
+  component: Input.Root,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 
-export const Default = {
+export default meta;
+
+type Story = StoryObj<BaseProps & Variant>;
+
+export const Default: Story = {
   args: {
+    kind: 'text',
     label: 'Hello',
     placeholder: 'This is an input',
     disabled: false,
@@ -103,12 +111,12 @@ export const Default = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
-    length: 6,
   },
 };
 
-export const DensityFine = {
+export const DensityFine: Story = {
   args: {
+    kind: 'text',
     label: 'This is an Input with a density value of ‘fine’',
     placeholder: 'This is a density:fine input',
     disabled: false,
@@ -117,13 +125,13 @@ export const DensityFine = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
-    length: 6,
     density: 'fine',
   },
 };
 
-export const Subdued = {
+export const Subdued: Story = {
   args: {
+    kind: 'text',
     label: 'Hello',
     placeholder: 'This is a subdued input',
     disabled: false,
@@ -132,37 +140,40 @@ export const Subdued = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
-    length: 6,
     variant: 'subdued',
   },
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   args: {
+    kind: 'text',
     label: 'Disabled',
     placeholder: 'This is a disabled input',
     disabled: true,
   },
 };
 
-export const LabelVisuallyHidden = {
+export const LabelVisuallyHidden: Story = {
   args: {
+    kind: 'text',
     label: 'The label is for screen readers',
     labelVisuallyHidden: true,
     placeholder: 'The label for this input exists but is only read by screen readers',
   },
 };
 
-export const InputWithDescription = {
+export const InputWithDescription: Story = {
   args: {
+    kind: 'text',
     label: 'Described input',
     placeholder: 'This input has an accessible description',
     description: 'This helper text is accessibly associated with the input.',
   },
 };
 
-export const InputWithErrorAndDescription = {
+export const InputWithErrorAndDescription: Story = {
   args: {
+    kind: 'text',
     label: 'Described invalid input',
     placeholder: 'This input has both an accessible description and a validation error',
     description: 'This description is identified separately in the accessibility tree.',
@@ -171,8 +182,9 @@ export const InputWithErrorAndDescription = {
   },
 };
 
-export const InputWithValidationAndDescription = {
+export const InputWithValidationAndDescription: Story = {
   args: {
+    kind: 'text',
     label: 'Described input with validation message',
     placeholder: 'This input is styled to express a validation valence',
     description: 'This description is extra.',
@@ -181,39 +193,38 @@ export const InputWithValidationAndDescription = {
   },
 };
 
-export const TextArea = {
+export const TextArea: Story = {
   args: {
+    kind: 'textarea',
     label: 'This input is a text area input',
-    type: 'textarea',
     description: 'Type a long paragraph',
     placeholder: 'Lorem ipsum dolor sit amet',
   },
 };
 
-export const PinInput = {
+export const PinInput: Story = {
   args: {
+    kind: 'pin',
     label: 'This input is a PIN-style input',
-    type: 'pin',
     length: 6,
     description: 'Type in secret you received',
     placeholder: '••••••',
   },
 };
 
-export const Checkbox = {
+export const Checkbox: Story = {
   args: {
+    kind: 'checkbox',
     label: 'This is a checkbox',
-    type: 'checkbox',
     description: 'It’s checked, indeterminate, or unchecked',
     size: 5,
-    weight: 'bold',
   },
 };
 
 export const Switch = {
   args: {
+    kind: 'switch',
     label: 'This is a switch',
-    type: 'switch',
     description: 'It’s either off... or on.',
   },
 };

package/src/components/Input/Input.tsx

@@ -342,6 +342,7 @@ export const Input = {
 export type {
   InputVariant,
   InputRootProps,
+  InputSharedProps,
   PinInputProps,
   TextInputProps,
   TextAreaProps,

package/src/components/Lists/Tree.stories.tsx

@@ -51,14 +51,14 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
   );
 };
 
-const StorybookTree = ({ data }: StorybookTreeProps) => {
+const DefaultStory = ({ data }: StorybookTreeProps) => {
   return <StorybookTreeItem data={data} />;
 };
 
 export default {
   title: 'ui/react-ui-core/Tree',
   component: Tree,
-  render: StorybookTree,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };