@dxos/react-ui 0.8.4-main.67995b8 → 0.8.4-main.6fa680abb7

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -3,17 +3,16 @@
 //
 
 import { createKeyborg } from 'keyborg';
-import React, { createContext, type PropsWithChildren, useEffect, useMemo } from 'react';
+import React, { type PropsWithChildren, createContext, useEffect, useMemo } from 'react';
 
-import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
+import { type Density, type Elevation, type ThemeFunction, type ThemeMode } from '@dxos/ui-types';
 
-import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
 
-export type ThemeMode = 'dark' | 'light';
+import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 
 export type ThemeContextValue = {
   tx: ThemeFunction<any>;
@@ -21,6 +20,7 @@ export type ThemeContextValue = {
   hasIosKeyboard: boolean;
   safeAreaPadding?: SafeAreaPadding;
   noCache?: boolean;
+  platform?: 'mobile' | 'desktop';
 };
 
 /**
@@ -40,7 +40,7 @@ export const ThemeProvider = ({
   fallback = null,
   resourceExtensions,
   appNs,
-  tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
+  tx = (_path, _styleProps, ..._options) => undefined,
   themeMode = 'dark',
   rootDensity = 'fine',
   ...rest
@@ -78,8 +78,8 @@ export const ThemeProvider = ({
 
 const handleInputModalityChange = (isUsingKeyboard: boolean) => {
   if (isUsingKeyboard) {
-    document.body.setAttribute('data-is-keyboard', 'true');
+    document.body.setAttribute('data-w-keyboard', 'true');
   } else {
-    document.body.removeAttribute('data-is-keyboard');
+    document.body.removeAttribute('data-w-keyboard');
   }
 };

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -2,30 +2,15 @@
 // Copyright 2022 DXOS.org
 //
 
-import { enUS as dtLocaleEnUs, type Locale } from 'date-fns/locale';
-import i18Next, { type TFunction, type Resource } from 'i18next';
-import React, { type ReactNode, useEffect, createContext, useState, Suspense, useContext } from 'react';
+import { type Locale, enUS as dtLocaleEnUs } from 'date-fns/locale';
+import i18Next, { type Resource } from 'i18next';
+import React, { type ReactNode, Suspense, createContext, useContext, useEffect, useState } from 'react';
 import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
 
 const initialLng = 'en-US';
 const initialNs = 'dxos-common';
 const initialDtLocale = dtLocaleEnUs;
 
-// TODO(thure): `Parameters<TFunction>` causes typechecking issues because `TFunction` has so many signatures.
-export type Label = string | [string, { ns: string; count?: number; defaultValue?: string }];
-
-export const isLabel = (o: any): o is Label =>
-  typeof o === 'string' ||
-  (Array.isArray(o) &&
-    o.length === 2 &&
-    typeof o[0] === 'string' &&
-    !!o[1] &&
-    typeof o[1] === 'object' &&
-    'ns' in o[1] &&
-    typeof o[1].ns === 'string');
-
-export const toLocalizedString = (label: Label, t: TFunction) => (Array.isArray(label) ? t(...label) : label);
-
 export const resources = {
   [initialLng]: {
     [initialNs]: {

package/src/components/ThemeProvider/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './ThemeProvider';
-export { type Label, isLabel, toLocalizedString, useTranslation } from './TranslationsProvider';
+export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types';
 
-// TODO(burdon): Use `@internal` with barrel exports (rather than picking individual exports?)
+export * from './ThemeProvider';
+export { useTranslation } from './TranslationsProvider';

package/src/components/Toast/Toast.stories.tsx

@@ -2,13 +2,13 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useState } from 'react';
 
-import { Toast } from './Toast';
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
+
+import { Toast } from './Toast';
 
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
@@ -44,15 +44,18 @@ const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTr
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Toast',
-  component: Toast,
+const meta = {
+  title: 'ui/react-ui-core/components/Toast',
+  component: Toast as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     openTrigger: 'Open toast',
     title: 'This is a toast',

package/src/components/Toast/Toast.tsx

@@ -5,22 +5,22 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import {
+  ToastAction as ToastActionPrimitive,
+  type ToastActionProps as ToastActionPrimitiveProps,
+  ToastClose as ToastClosePrimitive,
+  type ToastCloseProps as ToastClosePrimitiveProps,
+  ToastDescription as ToastDescriptionPrimitive,
+  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
   ToastProvider as ToastProviderPrimitive,
   type ToastProviderProps as ToastProviderPrimitiveProps,
-  ToastViewport as ToastViewportPrimitive,
-  type ToastViewportProps as ToastViewportPrimitiveProps,
   Root as ToastRootPrimitive,
   type ToastProps as ToastRootPrimitiveProps,
   ToastTitle as ToastTitlePrimitive,
   type ToastTitleProps as ToastTitlePrimitiveProps,
-  ToastDescription as ToastDescriptionPrimitive,
-  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
-  ToastAction as ToastActionPrimitive,
-  type ToastActionProps as ToastActionPrimitiveProps,
-  ToastClose as ToastClosePrimitive,
-  type ToastCloseProps as ToastClosePrimitiveProps,
+  ToastViewport as ToastViewportPrimitive,
+  type ToastViewportProps as ToastViewportPrimitiveProps,
 } from '@radix-ui/react-toast';
-import React, { type ComponentPropsWithRef, forwardRef, type FunctionComponent } from 'react';
+import React, { type ComponentPropsWithRef, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -34,9 +34,7 @@ type ToastViewportProps = ThemedClassName<ToastViewportPrimitiveProps>;
 
 const ToastViewport = forwardRef<HTMLOListElement, ToastViewportProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return (
-    <ToastViewportPrimitive className={tx('toast.viewport', 'toast-viewport', {}, classNames)} ref={forwardedRef} />
-  );
+  return <ToastViewportPrimitive className={tx('toast.viewport', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ToastRootProps = ThemedClassName<ToastRootPrimitiveProps>;
@@ -44,7 +42,7 @@ type ToastRootProps = ThemedClassName<ToastRootPrimitiveProps>;
 const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
+    <ToastRootPrimitive {...props} className={tx('toast.root', {}, classNames)} ref={forwardedRef}>
       <ElevationProvider elevation='toast'>{children}</ElevationProvider>
     </ToastRootPrimitive>
   );
@@ -54,8 +52,8 @@ type ToastBodyProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div
 
 const ToastBody = forwardRef<HTMLDivElement, ToastBodyProps>(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root = asChild ? Slot : Primitive.div;
-  return <Root {...props} className={tx('toast.body', 'toast__body', {}, classNames)} ref={forwardedRef} />;
+  const Comp = asChild ? Slot : Primitive.div;
+  return <Comp {...props} className={tx('toast.body', {}, classNames)} ref={forwardedRef} />;
 });
 
 type ToastTitleProps = ThemedClassName<ToastTitlePrimitiveProps>;
@@ -63,8 +61,8 @@ type ToastTitleProps = ThemedClassName<ToastTitlePrimitiveProps>;
 const ToastTitle = forwardRef<HTMLHeadingElement, ToastTitleProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : ToastTitlePrimitive;
-    return <Root {...props} className={tx('toast.title', 'toast__title', {}, classNames)} ref={forwardedRef} />;
+    const Comp = asChild ? Slot : ToastTitlePrimitive;
+    return <Comp {...props} className={tx('toast.title', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -73,10 +71,8 @@ type ToastDescriptionProps = ThemedClassName<ToastDescriptionPrimitiveProps>;
 const ToastDescription = forwardRef<HTMLParagraphElement, ToastDescriptionProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : ToastDescriptionPrimitive;
-    return (
-      <Root {...props} className={tx('toast.description', 'toast__description', {}, classNames)} ref={forwardedRef} />
-    );
+    const Comp = asChild ? Slot : ToastDescriptionPrimitive;
+    return <Comp {...props} className={tx('toast.description', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -85,8 +81,8 @@ type ToastActionsProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.
 const ToastActions = forwardRef<HTMLDivElement, ToastActionsProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    return <Root {...props} className={tx('toast.actions', 'toast__actions', {}, classNames)} ref={forwardedRef} />;
+    const Comp = asChild ? Slot : Primitive.div;
+    return <Comp {...props} className={tx('toast.actions', {}, classNames)} ref={forwardedRef} />;
   },
 );
 

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -2,16 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Toolbar } from './Toolbar';
 import { withTheme } from '../../testing';
-import { Toggle } from '../Buttons';
+import { Toggle } from '../Button';
 import { Icon } from '../Icon';
 import { Select } from '../Select';
 
+import { Toolbar } from './Toolbar';
+
 type StorybookToolbarProps = {};
 
 const DefaultStory = (props: StorybookToolbarProps) => {
@@ -29,6 +29,7 @@ const DefaultStory = (props: StorybookToolbarProps) => {
               <Select.Option value={'b'}>B</Select.Option>
               <Select.Option value={'c'}>C</Select.Option>
             </Select.Viewport>
+            <Select.Arrow />
           </Select.Content>
         </Select.Portal>
       </Select.Root>
@@ -62,21 +63,22 @@ const DefaultStory = (props: StorybookToolbarProps) => {
       </Toolbar.Button>
       <Toolbar.Separator />
       <Toolbar.Button>Test</Toolbar.Button>
-      <Toolbar.Button>
-        <Icon icon='ph--arrow-clockwise--regular' />
-      </Toolbar.Button>
+      <Toolbar.IconButton icon='ph--arrow-clockwise--regular' label='Refresh' iconOnly />
     </Toolbar.Root>
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Toolbar',
-  component: Toolbar,
+const meta = {
+  title: 'ui/react-ui-core/components/Toolbar',
+  component: Toolbar as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -2,43 +2,96 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
 import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-import React, { forwardRef } from 'react';
+import React, { Fragment, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { composableProps, type ToolbarStyleProps } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { translationKey } from '../../translations';
 import { type ThemedClassName } from '../../util';
 import {
   Button,
   ButtonGroup,
   type ButtonGroupProps,
   type ButtonProps,
+  IconButton,
+  type IconButtonProps,
   Toggle,
   type ToggleGroupItemProps,
   type ToggleProps,
-  IconButton,
-  type IconButtonProps,
-} from '../Buttons';
+} from '../Button';
 import { Link, type LinkProps } from '../Link';
+import { DropdownMenu } from '../Menu';
 import { Separator, type SeparatorProps } from '../Separator';
 
-type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps> & { layoutManaged?: boolean };
+//
+// Root
+//
 
+type ToolbarRootProps = ThemedClassName<
+  ToolbarPrimitive.ToolbarProps &
+    ToolbarStyleProps & {
+      textBlockWidth?: boolean;
+    }
+>;
+
+// TODO(burdon): Implement asChild property.
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
-  ({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
+  (
+    { children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, orientation, ...props },
+    forwardedRef,
+  ) => {
+    const { className, dir: _, ...rest } = composableProps(props);
     const { tx } = useThemeContext();
+    const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
+    const innerRootProps = textBlockWidthProp
+      ? {
+          role: 'none',
+          className: tx('toolbar.inner', { layoutManaged }, className),
+        }
+      : {};
+
     return (
       <ToolbarPrimitive.Root
-        {...props}
-        className={tx('toolbar.root', 'toolbar', { layoutManaged }, classNames)}
+        {...rest}
+        orientation={orientation}
+        data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}
+        className={tx('toolbar.root', { density, disabled, layoutManaged }, className)}
         ref={forwardedRef}
       >
-        {children}
+        <InnerRoot {...innerRootProps}>{children}</InnerRoot>
       </ToolbarPrimitive.Root>
     );
   },
 );
 
+//
+// Text
+//
+
+type ToolbarTextProps = SlottableProps<HTMLDivElement>;
+
+const ToolbarText = forwardRef<HTMLDivElement, ToolbarTextProps>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('toolbar.text', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+//
+// Button
+//
+
 type ToolbarButtonProps = ButtonProps;
 
 const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props, forwardedRef) => {
@@ -49,12 +102,16 @@ const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props,
   );
 });
 
+//
+// IconButton
+//
+
 type ToolbarIconButtonProps = IconButtonProps;
 
 const ToolbarIconButton = forwardRef<HTMLButtonElement, ToolbarIconButtonProps>((props, forwardedRef) => {
   return (
     <ToolbarPrimitive.Button asChild>
-      <IconButton {...props} ref={forwardedRef} />
+      <IconButton {...props} noTooltip ref={forwardedRef} />
     </ToolbarPrimitive.Button>
   );
 });
@@ -69,6 +126,10 @@ const ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>((props,
   );
 });
 
+//
+// Link
+//
+
 type ToolbarLinkProps = LinkProps;
 
 const ToolbarLink = forwardRef<HTMLAnchorElement, ToolbarLinkProps>((props, forwardedRef) => {
@@ -85,6 +146,10 @@ type ToolbarToggleGroupProps = (
 ) &
   ButtonGroupProps;
 
+//
+// ToggleGroup
+//
+
 const ToolbarToggleGroup = forwardRef<HTMLDivElement, ToolbarToggleGroupProps>(
   ({ classNames, children, elevation, ...props }, forwardedRef) => {
     return (
@@ -113,16 +178,31 @@ const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGr
   ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
     return (
       <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
-        <IconButton {...{ variant, density, elevation, classNames, icon, label, iconOnly }} ref={forwardedRef} />
+        <IconButton
+          {...{
+            variant,
+            density,
+            elevation,
+            classNames,
+            icon,
+            label,
+            iconOnly,
+          }}
+          ref={forwardedRef}
+        />
       </ToolbarPrimitive.ToolbarToggleItem>
     );
   },
 );
 
+//
+// Separator
+//
+
 type ToolbarSeparatorProps = SeparatorProps & { variant?: 'gap' | 'line' };
 
 const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
-  ({ variant = 'line', ...props }, forwardedRef) => {
+  ({ variant = 'gap', ...props }, forwardedRef) => {
     return variant === 'line' ? (
       <ToolbarPrimitive.Separator asChild>
         <Separator {...props} ref={forwardedRef} />
@@ -133,8 +213,109 @@ const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
   },
 );
 
+//
+// DragHandle
+//
+
+type ToolbarDragHandleProps = { testId?: string; label?: string };
+
+const ToolbarDragHandle = forwardRef<HTMLButtonElement, ToolbarDragHandleProps>(
+  ({ testId = 'drag-handle', label }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <ToolbarIconButton
+        data-testid={testId}
+        noTooltip
+        iconOnly
+        icon='ph--dots-six-vertical--regular'
+        variant='ghost'
+        label={label ?? t('toolbar drag handle label')}
+        classNames='cursor-pointer'
+        size={5}
+        disabled={!forwardedRef}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// CloseIconButton
+//
+
+type ToolbarCloseIconButtonProps = { onClick?: () => void; label?: string };
+
+const ToolbarCloseIconButton = forwardRef<HTMLButtonElement, ToolbarCloseIconButtonProps>(
+  ({ onClick, label }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <ToolbarIconButton
+        iconOnly
+        icon='ph--x--regular'
+        variant='ghost'
+        label={label ?? t('toolbar close label')}
+        classNames='cursor-pointer'
+        size={5}
+        onClick={onClick}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Menu
+//
+
+type ToolbarMenuItem<T extends any | void = void> = {
+  label: string;
+  onClick: (context: T) => void;
+};
+
+type ToolbarMenuProps<T extends any | void = void> = {
+  context?: T;
+  items?: ToolbarMenuItem<T>[];
+};
+
+// TODO(burdon): Make slottable.
+const ToolbarMenu = <T extends any | void = void>({ context, items }: ToolbarMenuProps<T>) => {
+  const { t } = useTranslation(translationKey);
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger disabled={!items?.length} asChild>
+        <ToolbarIconButton
+          iconOnly
+          variant='ghost'
+          icon='ph--dots-three-vertical--regular'
+          label={t('toolbar menu label')}
+        />
+      </DropdownMenu.Trigger>
+      {(items?.length ?? 0) > 0 && (
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content>
+            <DropdownMenu.Viewport>
+              {items?.map(({ label, onClick: onSelect }, index) => (
+                <DropdownMenu.Item key={index} onSelect={() => onSelect(context as T)}>
+                  {label}
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Viewport>
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      )}
+    </DropdownMenu.Root>
+  );
+};
+
+//
+// Toolbar
+//
+
 export const Toolbar = {
   Root: ToolbarRoot,
+  Text: ToolbarText,
   Button: ToolbarButton,
   IconButton: ToolbarIconButton,
   Link: ToolbarLink,
@@ -143,10 +324,14 @@ export const Toolbar = {
   ToggleGroupItem: ToolbarToggleGroupItem,
   ToggleGroupIconItem: ToolbarToggleGroupIconItem,
   Separator: ToolbarSeparator,
+  DragHandle: ToolbarDragHandle,
+  CloseIconButton: ToolbarCloseIconButton,
+  Menu: ToolbarMenu,
 };
 
 export type {
   ToolbarRootProps,
+  ToolbarTextProps,
   ToolbarButtonProps,
   ToolbarIconButtonProps,
   ToolbarLinkProps,
@@ -155,4 +340,8 @@ export type {
   ToolbarToggleGroupItemProps,
   ToolbarToggleGroupIconItemProps,
   ToolbarSeparatorProps,
+  ToolbarDragHandleProps,
+  ToolbarCloseIconButtonProps,
+  ToolbarMenuItem,
+  ToolbarMenuProps,
 };