@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.a4bbb77

package/src/components/Tag/Tag.stories.tsx

@@ -1,25 +1,22 @@
 //
 // Copyright 2022 DXOS.org
 //
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { hues } from '@dxos/react-ui-theme';
-import '@dxos-theme';
 import { type ChromaticPalette, type MessageValence } from '@dxos/react-ui-types';
 
-import { Tag } from './Tag';
 import { withTheme } from '../../testing';
 
+import { Tag } from './Tag';
+
 const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...hues] as (ChromaticPalette | MessageValence)[];
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Tag',
   component: Tag,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-} as const;
-
-export const Default = {
   render: () => (
     <div role='grid' className='grid grid-cols-5 gap-2 max-is-screen-md'>
       {palettes.map((palette) => (
@@ -29,4 +26,16 @@ export const Default = {
       ))}
     </div>
   ),
-};
+  decorators: [withTheme],
+  parameters: {
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -3,16 +3,17 @@
 //
 
 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 { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
 
+import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
+
 export type ThemeMode = 'dark' | 'light';
 
 export type ThemeContextValue = {

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -2,9 +2,9 @@
 // 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, type TFunction } 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';

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

@@ -2,14 +2,14 @@
 // 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 { Toast } from './Toast';
+
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
@@ -44,15 +44,18 @@ const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTr
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Toast',
-  component: Toast,
+  component: Toast as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} 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';

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

@@ -2,16 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { ArrowClockwise, Bug, FileJs, FileTs, TextB, TextItalic, TextUnderline } from '@phosphor-icons/react';
+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 { 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>
@@ -37,46 +38,49 @@ const DefaultStory = (props: StorybookToolbarProps) => {
       {/* TODO(burdon): Icon sizes should adapt to density. */}
       <Toolbar.ToggleGroup type='multiple'>
         <Toolbar.ToggleGroupItem value='a'>
-          <TextB />
+          <Icon icon='ph--text-b--regular' />
         </Toolbar.ToggleGroupItem>
         <Toolbar.ToggleGroupItem value='b'>
-          <TextItalic />
+          <Icon icon='ph--text-italic--regular' />
         </Toolbar.ToggleGroupItem>
         <Toolbar.ToggleGroupItem value='c'>
-          <TextUnderline />
+          <Icon icon='ph--text-underline--regular' />
         </Toolbar.ToggleGroupItem>
       </Toolbar.ToggleGroup>
       {/* TODO(burdon): Highlight isn't shown. */}
       <Toolbar.ToggleGroup type='single' defaultValue='a'>
         <Toolbar.ToggleGroupItem value='a'>
-          <FileTs />
+          <Icon icon='ph--file-ts--regular' />
         </Toolbar.ToggleGroupItem>
         <Toolbar.ToggleGroupItem value='b'>
-          <FileJs />
+          <Icon icon='ph--file-js--regular' />
         </Toolbar.ToggleGroupItem>
       </Toolbar.ToggleGroup>
       <Toolbar.Button asChild>
         <Toggle>
-          <Bug />
+          <Icon icon='ph--bug--regular' />
         </Toggle>
       </Toolbar.Button>
       <Toolbar.Separator />
       <Toolbar.Button>Test</Toolbar.Button>
       <Toolbar.Button>
-        <ArrowClockwise />
+        <Icon icon='ph--arrow-clockwise--regular' />
       </Toolbar.Button>
     </Toolbar.Root>
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Toolbar',
-  component: Toolbar,
+  component: Toolbar as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} 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

@@ -13,11 +13,11 @@ import {
   ButtonGroup,
   type ButtonGroupProps,
   type ButtonProps,
+  IconButton,
+  type IconButtonProps,
   Toggle,
   type ToggleGroupItemProps,
   type ToggleProps,
-  IconButton,
-  type IconButtonProps,
 } from '../Buttons';
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';
@@ -30,6 +30,7 @@ const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
     return (
       <ToolbarPrimitive.Root
         {...props}
+        data-arrow-keys={props.orientation === 'vertical' ? 'up down' : 'left right'}
         className={tx('toolbar.root', 'toolbar', { layoutManaged }, classNames)}
         ref={forwardedRef}
       >

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,15 +2,16 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Tooltip } from './Tooltip';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Tooltip } from './Tooltip';
+
 type StoryProps = {
   tooltips: { label: string; content: string }[];
   defaultOpen?: boolean;
@@ -28,15 +29,18 @@ const DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => (
   </Tooltip.Provider>
 );
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Tooltip',
-  component: Tooltip,
+  component: Tooltip as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     tooltips: [
       {
@@ -50,9 +54,9 @@ export const Default = {
   },
 };
 
-export const DefaultOpen = {
+export const DefaultOpen: Story = {
   args: {
-    defaultOption: true,
+    defaultOpen: true,
     tooltips: [
       {
         label: 'Tooltip trigger',
@@ -65,9 +69,9 @@ export const DefaultOpen = {
   },
 };
 
-export const StressTest = {
+export const StressTest: Story = {
   args: {
-    defaultOption: true,
+    defaultOpen: true,
     tooltips: faker.helpers.multiple(
       () => ({
         label: faker.lorem.words(2),

package/src/components/Tooltip/Tooltip.tsx

@@ -11,7 +11,7 @@ import type { Scope } from '@radix-ui/react-context';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { useId } from '@radix-ui/react-id';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { createPopperScope, type PopperAnchorProps } from '@radix-ui/react-popper';
+import { type PopperAnchorProps, createPopperScope } from '@radix-ui/react-popper';
 import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Presence } from '@radix-ui/react-presence';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -23,10 +23,11 @@ import React, {
   type ComponentPropsWithoutRef,
   type ElementRef,
   type FC,
-  type SyntheticEvent,
-  forwardRef,
   type MutableRefObject,
   type ReactNode,
+  type RefObject,
+  type SyntheticEvent,
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,
@@ -218,7 +219,7 @@ const TooltipProvider: FC<TooltipProviderProps> = (props: TooltipScopedProps<Too
           {content}
           <TooltipArrow className={tx('tooltip.arrow', 'tooltip__arrow')} />
         </TooltipContent>
-        <TooltipVirtualTrigger virtualRef={triggerRef} />
+        <TooltipVirtualTrigger virtualRef={triggerRef as RefObject<HTMLButtonElement>} />
         {children}
       </TooltipContextProvider>
     </PopperPrimitive.Root>

package/src/hooks/useSafeArea.ts

@@ -20,6 +20,7 @@ export const useSafeArea = (): SafeAreaPadding => {
       left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left')),
     });
   }, []);
+
   useResize(handleResize);
   return padding;
 };

package/src/hooks/useSafeCollisionPadding.ts

@@ -21,7 +21,7 @@ const safePadding = (
 ) => {
   return (
     (propIsNumber(safePadding[side]) ? safePadding[side] : 0) +
-    (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0)
+    (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? (propsPadding[side] ?? 0) : 0)
   );
 };
 

package/src/hooks/useVisualViewport.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useCallback, type useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import { useResize } from '@dxos/react-hooks';
 
-export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
+export const useVisualViewport = (deps?: Parameters<typeof useResize>[1]) => {
   const [width, setWidth] = useState<number | null>(null);
   const [height, setHeight] = useState<number | null>(null);
 
@@ -17,7 +17,7 @@ export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
     }
   }, []);
 
-  useResize(handleResize);
+  useResize(handleResize, deps);
 
   return { width, height };
 };

package/src/playground/Controls.stories.tsx

@@ -2,13 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic } from '@phosphor-icons/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withSurfaceVariantsLayout } from '../testing';
+import { Icon, Input, Select, Toggle, Toolbar } from '../components';
+import { withTheme } from '../testing';
+import { withSurfaceVariantsLayout } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -29,6 +28,7 @@ const DefaultStory = () => {
                 <Select.Option value={'b'}>B</Select.Option>
                 <Select.Option value={'c'}>C</Select.Option>
               </Select.Viewport>
+              <Select.Arrow />
             </Select.Content>
           </Select.Portal>
         </Select.Root>
@@ -37,27 +37,27 @@ const DefaultStory = () => {
         {/* TODO(burdon): Icon sizes should adapt to density. */}
         <Toolbar.ToggleGroup type='multiple'>
           <Toolbar.ToggleGroupItem value='a'>
-            <TextB />
+            <Icon icon='ph--text-b--regular' />
           </Toolbar.ToggleGroupItem>
           <Toolbar.ToggleGroupItem value='b'>
-            <TextItalic />
+            <Icon icon='ph--text-italic--regular' />
           </Toolbar.ToggleGroupItem>
           <Toolbar.ToggleGroupItem value='c'>
-            <TextUnderline />
+            <Icon icon='ph--text-underline--regular' />
           </Toolbar.ToggleGroupItem>
         </Toolbar.ToggleGroup>
         {/* TODO(burdon): Highlight isn't shown. */}
         <Toolbar.ToggleGroup type='single' defaultValue='a'>
           <Toolbar.ToggleGroupItem value='a'>
-            <FileTs />
+            <Icon icon='ph--file-ts--regular' />
           </Toolbar.ToggleGroupItem>
           <Toolbar.ToggleGroupItem value='b'>
-            <FileJs />
+            <Icon icon='ph--file-js--regular' />
           </Toolbar.ToggleGroupItem>
         </Toolbar.ToggleGroup>
         <Toolbar.Button asChild>
           <Toggle>
-            <Bug />
+            <Icon icon='ph--bug--regular' />
           </Toggle>
         </Toolbar.Button>
         {/* TODO(burdon): Should not be 'is-full' by default. */}
@@ -71,7 +71,7 @@ const DefaultStory = () => {
         </Input.Root>
         <Toolbar.Button>Test</Toolbar.Button>
         <Toolbar.Button>
-          <ArrowClockwise />
+          <Icon icon='ph--arrow-clockwise--regular' />
         </Toolbar.Button>
       </Toolbar.Root>
       <Input.Root>
@@ -81,11 +81,14 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Playground/Controls',
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme, withSurfaceVariantsLayout()],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};

package/src/playground/Custom.stories.tsx

@@ -2,23 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Button, IconButton, type ButtonProps, Tooltip } from '../components';
+import { Button, type ButtonProps, IconButton, Tooltip } from '../components';
 import { withTheme } from '../testing';
 
-// TODO(burdon): Change density to 3 or 4 sizes: (large, medium, small; or 22, 28, 32, 40)
-// TODO(burdon): IconButton should be square if no text.
-// TODO(burdon): IconButton icon should be auto-sized based on density.
-
-// TODO(burdon): Remove custom padding from all Buttons.
-
-// TODO(burdon): Forms w/ labels.
-// TODO(burdon): Card preview with sections.
-
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
     <Tooltip.Provider>
@@ -120,13 +109,15 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const meta: Meta<typeof Button> = {
+const meta = {
   title: 'ui/react-ui-core/Playground/Custom',
   component: Button,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { layout: 'centered' },
-};
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/playground/Typography.stories.tsx

@@ -2,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../testing';
@@ -43,13 +42,16 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Playground/Typography',
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/testing/decorators/withTheme.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { memo } from 'react';
+
+import { defaultTx } from '@dxos/react-ui-theme';
+
+import { type ThemeMode, ThemeProvider, Tooltip } from '../../components';
+
+/**
+ * Adds theme decorator (add to preview.ts)
+ */
+export const withTheme: Decorator = (Story, context) => {
+  const {
+    globals: { theme },
+    parameters: { translations },
+  } = context;
+
+  // Prevent re-rendering of the story.
+  const MemoizedStory = memo(Story);
+
+  return (
+    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
+      <Tooltip.Provider>
+        <MemoizedStory />
+      </Tooltip.Provider>
+    </ThemeProvider>
+  );
+};

package/src/util/domino.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+/**
+ * Super lightweight chainable DOM builder.
+ */
+export class Domino<T extends HTMLElement> {
+  static of<K extends keyof HTMLElementTagNameMap>(tag: K): Domino<HTMLElementTagNameMap[K]> {
+    return new Domino<HTMLElementTagNameMap[K]>(tag);
+  }
+
+  private readonly _el: T;
+  constructor(tag: keyof HTMLElementTagNameMap) {
+    this._el = document.createElement(tag) as T;
+  }
+  classNames(...classNames: ClassNameValue[]): this {
+    this._el.className = mx(classNames);
+    return this;
+  }
+  text(value: string): this {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key: string, value: string): this {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  style(styles: Partial<CSSStyleDeclaration>): this {
+    Object.assign(this._el.style, styles);
+    return this;
+  }
+  attr<K extends keyof T>(key: K, value: T[K]): this {
+    (this._el as any)[key] = value;
+    return this;
+  }
+  children<C extends HTMLElement>(...children: Domino<C>[]): this {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event: string, handler: (e: Event) => void): this {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build(): T {
+    return this._el;
+  }
+}

package/src/util/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './domino';
 export * from './hasIosKeyboard';
-export * from './ThemedClassName';
+export type * from './ThemedClassName';