@dxos/react-ui 0.6.13 → 0.6.14-main.1366248

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}
@@ -102,9 +102,22 @@ const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButton
   },
 );
 
-type SelectViewportProps = SelectPrimitive.SelectViewportProps;
+type SelectViewportProps = ThemedClassName<SelectPrimitive.SelectViewportProps>;
 
-const SelectViewport = SelectPrimitive.Viewport;
+const SelectViewport = forwardRef<HTMLDivElement, SelectViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SelectPrimitive.SelectViewport
+        {...props}
+        className={tx('select.viewport', 'select__viewport', {}, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </SelectPrimitive.SelectViewport>
+    );
+  },
+);
 
 type SelectItemProps = ThemedClassName<SelectPrimitive.SelectItemProps>;
 
@@ -138,13 +151,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 +187,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 } },
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -7,7 +7,15 @@ import React, { forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps } from '../Buttons';
+import {
+  Button,
+  ButtonGroup,
+  type ButtonGroupProps,
+  type ButtonProps,
+  Toggle,
+  type ToggleGroupItemProps,
+  type ToggleProps,
+} from '../Buttons';
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';
 
@@ -32,6 +40,16 @@ const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props,
   );
 });
 
+type ToolbarToggleProps = ToggleProps;
+
+const ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>((props, forwardedRef) => {
+  return (
+    <ToolbarPrimitive.Button asChild>
+      <Toggle {...props} ref={forwardedRef} />
+    </ToolbarPrimitive.Button>
+  );
+});
+
 type ToolbarLinkProps = LinkProps;
 
 const ToolbarLink = forwardRef<HTMLAnchorElement, ToolbarLinkProps>((props, forwardedRef) => {
@@ -84,6 +102,7 @@ export const Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
   Link: ToolbarLink,
+  Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup,
   ToggleGroupItem: ToolbarToggleGroupItem,
   Separator: ToolbarSeparator,
@@ -93,6 +112,7 @@ export type {
   ToolbarRootProps,
   ToolbarButtonProps,
   ToolbarLinkProps,
+  ToolbarToggleProps,
   ToolbarToggleGroupProps,
   ToolbarToggleGroupItemProps,
   ToolbarSeparatorProps,

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

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

package/src/hooks/useThemeContext.ts

@@ -4,6 +4,8 @@
 
 import { useContext } from 'react';
 
+import { raise } from '@dxos/debug';
+
 import { ThemeContext } from '../components';
 
-export const useThemeContext = () => useContext(ThemeContext);
+export const useThemeContext = () => useContext(ThemeContext) ?? raise(new Error('Missing ThemeContext'));

package/src/playground/Controls.stories.tsx

@@ -7,11 +7,10 @@ import '@dxos-theme';
 import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic } from '@phosphor-icons/react';
 import React, { useState } from 'react';
 
-import { createScenarios } from './helpers';
 import { Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme } from '../testing';
+import { withTheme, withVariants } from '../testing';
 
-const Story = () => {
+const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
   const [select, setSelect] = useState<string>();
 
@@ -82,13 +81,11 @@ const Story = () => {
   );
 };
 
+export const Default = {};
+
 export default {
-  title: 'react-ui/Scenarios/Controls',
-  component: Story,
-  decorators: [withTheme],
+  title: 'ui/react-ui-core/Playground/Controls',
+  render: DefaultStory,
+  decorators: [withVariants(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
-
-export const Default = {
-  render: createScenarios(Story),
-};

package/src/playground/Surfaces.stories.tsx

@@ -47,7 +47,7 @@ const Surface = ({ children, level }: PropsWithChildren & { level: SurfaceLevel
   );
 };
 
-const SurfacesStory = () => {
+const SurfaceStory = () => {
   return (
     <div className='bg-cubes p-10 m-0'>
       <Surface level='fixed' />
@@ -61,8 +61,9 @@ const SurfacesStory = () => {
 };
 
 export default {
-  title: 'react-ui/Scenarios/Surfaces',
-  component: SurfacesStory,
+  title: 'ui/react-ui-core/Playground/Surfaces',
+  component: Surface,
+  render: SurfaceStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/playground/Typography.stories.tsx

@@ -44,8 +44,8 @@ const TypographyStory = () => {
 };
 
 export default {
-  title: 'react-ui/Scenarios/Typography',
-  component: TypographyStory,
+  title: 'ui/react-ui-core/Playground/Typography',
+  render: TypographyStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/testing/decorators/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './withTheme';
+export * from './withVariants';

package/src/testing/decorators/withVariants.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Decorator } from '@storybook/react';
+import React from 'react';
+
+import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { type Density, type Elevation } from '@dxos/react-ui-types';
+
+import { DensityProvider, ElevationProvider } from '../../components';
+
+type Config = {
+  elevations?: { elevation: Elevation; surface?: string }[];
+  densities?: Density[];
+};
+
+export const withVariants = ({
+  elevations = [
+    { elevation: 'base' },
+    { elevation: 'group', surface: groupSurface },
+    { elevation: 'chrome', surface: modalSurface },
+  ],
+  densities = ['coarse', 'fine'],
+}: Config = {}): Decorator => {
+  return (Story) => (
+    <div className='flex flex-col gap-8'>
+      {elevations.map(({ elevation, surface }) => (
+        <ElevationProvider key={elevation} elevation={elevation}>
+          <div className='flex flex-col gap-8'>
+            {densities.map((density) => (
+              <DensityProvider key={density} density={density}>
+                <div className={mx('p-4 rounded-lg', surface, surfaceElevation({ elevation }))}>
+                  <Story />
+                </div>
+              </DensityProvider>
+            ))}
+          </div>
+        </ElevationProvider>
+      ))}
+    </div>
+  );
+};

package/dist/types/src/playground/helpers.d.ts

@@ -1,6 +0,0 @@
-import '@dxos-theme';
-import React, { type FunctionComponent } from 'react';
-export declare const createScenarios: (Component: FunctionComponent<any>) => ({ ...props }: {
-    [x: string]: any;
-}) => React.JSX.Element;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/types/src/playground/helpers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/playground/helpers.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOtD,eAAO,MAAM,eAAe,cACd,iBAAiB,CAAC,GAAG,CAAC;;uBAiBjC,CAAC"}

package/src/playground/helpers.tsx

@@ -1,32 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { type FunctionComponent } from 'react';
-
-import { type Density } from '@dxos/react-ui-types';
-
-import { DensityProvider, ElevationProvider } from '../components';
-
-// TODO(burdon): Grid: density, variant (context?), elevation.
-export const createScenarios =
-  (Component: FunctionComponent<any>) =>
-  ({ ...props }) => {
-    const densities: Density[] = ['coarse', 'fine'];
-    return (
-      <div className='flex flex-col space-y-8'>
-        {densities.map((density) => (
-          <div key={density}>
-            <ElevationProvider elevation='chrome'>
-              <DensityProvider density={density}>
-                <label className='p-2 text-xs'>{density}</label>
-                <Component {...props} />
-              </DensityProvider>
-            </ElevationProvider>
-          </div>
-        ))}
-      </div>
-    );
-  };