@dxos/react-ui 0.6.13 → 0.6.14-main.2b6a0f3

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -44,8 +44,9 @@ const StorybookAvatarGroup = () => {
 };
 
 export default {
-  title: 'react-ui/Avatar Group',
-  component: StorybookAvatarGroup,
+  title: 'ui/react-ui-core/AvatarGroup',
+  component: AvatarGroup,
+  render: StorybookAvatarGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -39,8 +39,9 @@ const StorybookBreadcrumb = () => {
 };
 
 export default {
-  title: 'react-ui/Breadcrumb',
-  component: StorybookBreadcrumb,
+  title: 'ui/react-ui-core/Breadcrumb',
+  component: Breadcrumb,
+  render: StorybookBreadcrumb,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -5,67 +5,17 @@
 import '@dxos-theme';
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import React, { type PropsWithChildren } from 'react';
-
-import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
-import { withTheme } from '../../testing';
-import { DensityProvider } from '../DensityProvider';
-import { ElevationProvider } from '../ElevationProvider';
+import { withVariants, withTheme } from '../../testing';
 
-export default {
-  title: 'react-ui/Button',
-  component: Button,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-const Container = ({ children }: PropsWithChildren<{}>) => (
-  <>
-    <div role='group' className={mx('flex flex-col gap-4 mbe-4 p-4')}>
-      <ElevationProvider elevation='base'>
-        <div className='flex gap-4'>{children}</div>
-        <DensityProvider density='fine'>
-          <div className='flex gap-4'>{children}</div>
-        </DensityProvider>
-      </ElevationProvider>
-    </div>
-    <div
-      role='group'
-      className={mx('flex flex-col gap-4 mbe-4 p-4 rounded-lg', groupSurface, surfaceElevation({ elevation: 'group' }))}
-    >
-      <ElevationProvider elevation='group'>
-        <div className='flex gap-4'>{children}</div>
-        <DensityProvider density='fine'>
-          <div className='flex gap-4'>{children}</div>
-        </DensityProvider>
-      </ElevationProvider>
-    </div>
-    <div
-      role='group'
-      className={mx(
-        'flex flex-col gap-4 mbe-4 p-4 rounded-lg',
-        modalSurface,
-        surfaceElevation({ elevation: 'chrome' }),
-      )}
-    >
-      <ElevationProvider elevation='chrome'>
-        <div className='flex gap-4'>{children}</div>
-        <DensityProvider density='fine'>
-          <div className='flex gap-4'>{children}</div>
-        </DensityProvider>
-      </ElevationProvider>
-    </div>
-  </>
-);
-
-export const Default = {
-  render: ({ children, ...args }: Omit<ButtonProps, 'ref'>) => (
-    <Container>
+const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
+  return (
+    <div>
       <Button {...args}>{children}</Button>
       <Button {...args} disabled>
-        Disabled
+        {children}
       </Button>
       {(args.variant === 'default' || args.variant === 'primary') && (
         <ButtonGroup>
@@ -77,15 +27,36 @@ export const Default = {
           </Button>
         </ButtonGroup>
       )}
-    </Container>
-  ),
-  args: { children: 'Hello', disabled: false, variant: 'default' },
+    </div>
+  );
 };
 
-export const Primary = { ...Default, args: { variant: 'primary', children: 'Hello' } };
+const defaults = { children: 'Test' };
 
-export const Destructive = { ...Default, args: { variant: 'destructive', children: 'Delete' } };
+export const Default = {
+  args: { ...defaults, variant: 'default' },
+};
+
+export const Primary = {
+  args: { ...defaults, variant: 'primary' },
+};
 
-export const Outline = { ...Default, args: { variant: 'outline', children: 'Hello' } };
+export const Destructive = {
+  args: { ...defaults, variant: 'destructive' },
+};
+
+export const Outline = {
+  args: { ...defaults, variant: 'outline' },
+};
 
-export const Ghost = { ...Default, args: { variant: 'ghost', children: 'Hello' } };
+export const Ghost = {
+  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/Toggle.stories.tsx

@@ -21,8 +21,9 @@ const StorybookToggle = (props: StorybookToggleProps) => {
 };
 
 export default {
-  title: 'react-ui/Toggle button',
-  component: StorybookToggle,
+  title: 'ui/react-ui-core/Toggle',
+  component: Toggle,
+  render: StorybookToggle,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -29,8 +29,9 @@ const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
 };
 
 export default {
-  title: 'react-ui/Toggle button group',
-  component: StorybookToggleGroup,
+  title: 'ui/react-ui-core/ToggleGroup',
+  component: ToggleGroup,
+  render: StorybookToggleGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/DensityProvider/DensityProvider.tsx

@@ -14,7 +14,7 @@ export type DensityProviderProps = PropsWithChildren<{
   density?: Density;
 }>;
 
-export const DensityContext = createContext<DensityContextValue>({ density: 'coarse' });
+export const DensityContext = createContext<DensityContextValue>({ density: 'fine' });
 
 export const DensityProvider = ({ density, children }: DensityProviderProps) => (
   <DensityContext.Provider value={{ density }}>{children}</DensityContext.Provider>

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

@@ -54,8 +54,9 @@ const StorybookAlertDialog = ({
 };
 
 export default {
-  title: 'react-ui/Dialog (alert)',
-  component: StorybookAlertDialog,
+  title: 'ui/react-ui-core/AlertDialog',
+  component: AlertDialog,
+  render: StorybookAlertDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -40,8 +40,9 @@ const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger,
 };
 
 export default {
-  title: 'react-ui/Dialog',
-  component: StorybookDialog,
+  title: 'ui/react-ui-core/Dialog',
+  component: Dialog,
+  render: StorybookDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -72,9 +72,10 @@ const StoryInput = (props: StoryInputProps) => {
 };
 
 export default {
-  title: 'react-ui/Input',
-  component: StoryInput,
-  // TODO(thure): Refactor
+  title: 'ui/react-ui-core/Input',
+  component: Input,
+  render: StoryInput,
+  // TODO(thure): Refactor.
   argTypes: {
     label: { control: 'text' },
     description: { control: 'text' },

package/src/components/Link/Link.stories.tsx

@@ -8,7 +8,7 @@ import { Link } from './Link';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'react-ui/Link',
+  title: 'ui/react-ui-core/Link',
   component: Link,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

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

@@ -9,7 +9,7 @@ import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
-import React, { type FC, type ReactNode, useState } from 'react';
+import React, { type ReactNode, useState } from 'react';
 
 import {
   getSize,
@@ -20,12 +20,12 @@ import {
   surfaceElevation,
 } from '@dxos/react-ui-theme';
 
-import { List, ListItem, type ListProps, type ListScopedProps } from './List';
+import { List, ListItem, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'react-ui/List',
-  component: List as FC<ListProps>,
+  title: 'ui/react-ui-core/List',
+  component: List,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -56,8 +56,9 @@ const StorybookTree = ({ data }: StorybookTreeProps) => {
 };
 
 export default {
-  title: 'react-ui/Tree',
-  component: StorybookTree,
+  title: 'ui/react-ui-core/Tree',
+  component: Tree,
+  render: StorybookTree,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -1,6 +1,7 @@
 //
 // Copyright 2024 DXOS.org
 //
+
 import React from 'react';
 
 import { faker } from '@dxos/random';
@@ -119,7 +120,7 @@ function* visitor(node: StorybookNode, isOpen?: (node: StorybookNode) => boolean
 
 const flattenedContent = Array.from(visitor(content, () => true));
 
-const StorybookTreegrid = () => {
+const DefaultStory = () => {
   return (
     <Tg.Root gridTemplateColumns='1fr'>
       {flattenedContent.map(({ node, parentOf, path }) => {
@@ -140,10 +141,11 @@ const StorybookTreegrid = () => {
   );
 };
 
+export const Default = {};
+
 export default {
-  title: 'react-ui/Treegrid',
-  component: StorybookTreegrid,
+  title: 'ui/react-ui-core/Treegrid',
+  component: Tg.Root,
+  render: DefaultStory,
   decorators: [withTheme],
 };
-
-export const Treegrid = () => <StorybookTreegrid />;

package/src/components/Main/Main.stories.tsx

@@ -46,8 +46,9 @@ const StoryMain = (_args: StoryMainArgs) => {
 };
 
 export default {
-  title: 'react-ui/Main',
-  component: StoryMain,
+  title: 'ui/react-ui-core/Main',
+  component: Main.Root,
+  render: StoryMain,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Menus/ContextMenu.stories.tsx

@@ -92,8 +92,9 @@ const StorybookContextMenu = () => {
 };
 
 export default {
-  title: 'react-ui/Context menu',
-  component: StorybookContextMenu,
+  title: 'ui/react-ui-core/ContextMenu',
+  component: ContextMenu,
+  render: StorybookContextMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -92,8 +92,9 @@ const StorybookDropdownMenu = () => {
 };
 
 export default {
-  title: 'react-ui/Dropdown menu',
-  component: StorybookDropdownMenu,
+  title: 'ui/react-ui-core/DropdownMenu',
+  component: DropdownMenu,
+  render: StorybookDropdownMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Message/Message.stories.tsx

@@ -28,8 +28,9 @@ const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
 );
 
 export default {
-  title: 'react-ui/Message',
-  component: StoryMessage,
+  title: 'ui/react-ui-core/Message',
+  component: Message,
+  render: StoryMessage,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Popover/Popover.stories.tsx

@@ -29,8 +29,9 @@ const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTri
 };
 
 export default {
-  title: 'react-ui/Popover',
-  component: StorybookPopover,
+  title: 'ui/react-ui-core/Popover',
+  component: Popover,
+  render: StorybookPopover,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -34,8 +34,9 @@ const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
 };
 
 export default {
-  title: 'react-ui/Scroll area',
-  component: StorybookScrollArea,
+  title: 'ui/react-ui-core/Scroll area',
+  component: ScrollArea,
+  render: StorybookScrollArea,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Select/Select.stories.tsx

@@ -4,38 +4,21 @@
 
 import '@dxos-theme';
 
-import React, { type FC, type PropsWithChildren, useState } from 'react';
+import { type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { type Density } from '@dxos/react-ui-types';
 
 import { Select } from './Select';
-import { withTheme } from '../../testing';
-import { DensityProvider } from '../DensityProvider';
+import { withVariants, withTheme } from '../../testing';
 
 faker.seed(1234);
 
-// TODO(burdon): Factor out density test.
-const createDensityTest =
-  (Component: FC<any>) =>
-  ({ ...props }) => {
-    const densities: Density[] = ['coarse', 'fine'];
-    return (
-      <div className='grid grid-cols-2'>
-        {densities.map((density) => (
-          <div key={density}>
-            <DensityProvider density={density}>
-              <Component {...props} />
-            </DensityProvider>
-          </div>
-        ))}
-      </div>
-    );
-  };
-
 type ItemProps = { id: string; text: string };
 
-const StorybookSelect = ({ items = [] }: PropsWithChildren<{ items: ItemProps[] }>) => {
+type StoryProps = { items: ItemProps[] };
+
+const DefaultStory = ({ items = [] }: StoryProps) => {
   const [value, setValue] = useState<string>();
   return (
     <Select.Root value={value} onValueChange={setValue}>
@@ -58,15 +41,15 @@ const StorybookSelect = ({ items = [] }: PropsWithChildren<{ items: ItemProps[]
   );
 };
 
-export default {
-  title: 'react-ui/Select',
-  component: createDensityTest(StorybookSelect),
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-export const Default = {
+export const Default: StoryObj<StoryProps> = {
   args: {
     items: Array.from({ length: 16 }).map((_, i) => ({ id: `item-${i}`, text: faker.lorem.word() })),
   },
 };
+
+export default {
+  title: 'ui/react-ui-core/Select',
+  render: DefaultStory,
+  decorators: [withVariants(), withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};

package/src/components/Select/Select.tsx

@@ -2,13 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretDown, CaretUp, Check } from '@phosphor-icons/react';
+import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Buttons';
+import { Icon } from '../Icon';
 
 type SelectRootProps = SelectPrimitive.SelectProps;
 
@@ -39,11 +40,9 @@ const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonPro
       <SelectPrimitive.Trigger asChild ref={forwardedRef}>
         <Button {...props}>
           <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
+          <span className='w-1 flex-1' />
           <SelectPrimitive.Icon asChild>
-            <>
-              <span className='w-1' />
-              <CaretDown className={tx('select.triggerIcon', 'select__trigger__icon', {})} weight='bold' />
-            </>
+            <CaretDown className={tx('select.triggerIcon', 'select__trigger__icon', {})} weight='bold' />
           </SelectPrimitive.Icon>
         </Button>
       </SelectPrimitive.Trigger>
@@ -60,6 +59,7 @@ const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
       <SelectPrimitive.Content
         {...props}
         className={tx('select.content', 'select__content', {}, classNames)}
+        position='popper'
         ref={forwardedRef}
       >
         {children}
@@ -138,13 +138,13 @@ type SelectOptionProps = SelectItemProps;
 
 const SelectOption = forwardRef<HTMLDivElement, SelectItemProps>(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-
   return (
     <SelectPrimitive.Item {...props} className={tx('select.item', 'option', {}, classNames)} ref={forwardedRef}>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator className={tx('select.itemIndicator', 'option__indicator', {})}>
-        <Check weight='bold' />
-      </SelectPrimitive.ItemIndicator>
+      <span className='grow w-1' />
+      {/* <SelectPrimitive.ItemIndicator className={tx('select.itemIndicator', 'option__indicator', {})}> */}
+      <Icon icon='ph--check--regular' />
+      {/* </SelectPrimitive.ItemIndicator> */}
     </SelectPrimitive.Item>
   );
 });
@@ -174,7 +174,6 @@ type SelectArrowProps = ThemedClassName<SelectPrimitive.SelectArrowProps>;
 
 const SelectArrow = forwardRef<SVGSVGElement, SelectArrowProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-
   return (
     <SelectPrimitive.Arrow
       {...props}

package/src/components/Status/Status.stories.tsx

@@ -10,9 +10,8 @@ import { Status } from './Status';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'react-ui/Status',
+  title: 'ui/react-ui-core/Status',
   component: Status,
-  actions: { argTypesRegex: '^on.*' },
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -8,7 +8,7 @@ import { Tag } from './Tag';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'react-ui/Tag',
+  title: 'ui/react-ui-core/Tag',
   component: Tag,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -14,33 +14,24 @@ import { ElevationProvider } from '../ElevationProvider';
 
 export type ThemeMode = 'light' | 'dark';
 
-export interface ThemeContextValue {
+export type ThemeContextValue = {
   tx: ThemeFunction<any>;
   themeMode: ThemeMode;
   hasIosKeyboard: boolean;
-}
+};
+
+/**
+ * @internal
+ */
+export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
 export type ThemeProviderProps = Omit<TranslationsProviderProps, 'children'> &
   Partial<ThemeContextValue> &
   PropsWithChildren<{
-    rootElevation?: Elevation;
     rootDensity?: Density;
+    rootElevation?: Elevation;
   }>;
 
-export const ThemeContext = createContext<ThemeContextValue>({
-  tx: (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
-  themeMode: 'dark',
-  hasIosKeyboard: false,
-});
-
-const handleInputModalityChange = (isUsingKeyboard: boolean) => {
-  if (isUsingKeyboard) {
-    document.body.setAttribute('data-is-keyboard', 'true');
-  } else {
-    document.body.removeAttribute('data-is-keyboard');
-  }
-};
-
 export const ThemeProvider = ({
   children,
   fallback = null,
@@ -48,8 +39,8 @@ export const ThemeProvider = ({
   appNs,
   tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
   themeMode = 'dark',
+  rootDensity = 'fine',
   rootElevation = 'base',
-  rootDensity = 'coarse',
 }: ThemeProviderProps) => {
   useEffect(() => {
     if (document.defaultView) {
@@ -75,3 +66,11 @@ export const ThemeProvider = ({
     </ThemeContext.Provider>
   );
 };
+
+const handleInputModalityChange = (isUsingKeyboard: boolean) => {
+  if (isUsingKeyboard) {
+    document.body.setAttribute('data-is-keyboard', 'true');
+  } else {
+    document.body.removeAttribute('data-is-keyboard');
+  }
+};

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

@@ -45,8 +45,9 @@ const StorybookToast = (props: StorybookToastProps) => {
 };
 
 export default {
-  title: 'react-ui/Toast',
-  component: StorybookToast,
+  title: 'ui/react-ui-core/Toast',
+  component: Toast,
+  render: StorybookToast,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Toast/Toast.tsx

@@ -24,7 +24,6 @@ import React, { type ComponentPropsWithRef, forwardRef, type FunctionComponent }
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
 
 type ToastProviderProps = ToastProviderPrimitiveProps;
@@ -46,9 +45,7 @@ const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, child
   const { tx } = useThemeContext();
   return (
     <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
-      <ElevationProvider elevation='chrome'>
-        <DensityProvider density='fine'>{children}</DensityProvider>
-      </ElevationProvider>
+      <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
     </ToastRootPrimitive>
   );
 });

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

@@ -70,8 +70,9 @@ const StorybookToolbar = (props: StorybookToolbarProps) => {
 };
 
 export default {
-  title: 'react-ui/Toolbar',
-  component: StorybookToolbar,
+  title: 'ui/react-ui-core/Toolbar',
+  component: Toolbar,
+  render: StorybookToolbar,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };