@dxos/react-ui 0.6.13 → 0.6.14-main.7bd9c89

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/Playground/Controls',
+  render: DefaultStory,
+  decorators: [withVariants(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
-
-export const Default = {
-  render: createScenarios(Story),
-};

package/src/playground/Surfaces.stories.tsx

@@ -61,7 +61,7 @@ const SurfacesStory = () => {
 };
 
 export default {
-  title: 'react-ui/Scenarios/Surfaces',
+  title: 'ui/react-ui/Playground/Surfaces',
   component: SurfacesStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

package/src/playground/Typography.stories.tsx

@@ -44,7 +44,7 @@ const TypographyStory = () => {
 };
 
 export default {
-  title: 'react-ui/Scenarios/Typography',
+  title: 'ui/react-ui/Playground/Typography',
   component: 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>
-    );
-  };