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

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>
-    );
-  };