@dxos/react-ui 0.8.2-main.36232bc → 0.8.2-main.4c6cf53

package/src/playground/Controls.stories.tsx

@@ -8,7 +8,7 @@ import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic }
 import React, { useState } from 'react';
 
 import { Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withVariants } from '../testing';
+import { withTheme, withSurfaceVariantsLayout } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -81,11 +81,11 @@ const DefaultStory = () => {
   );
 };
 
-export const Default = {};
-
 export default {
   title: 'ui/react-ui-core/Playground/Controls',
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
+
+export const Default = {};

package/src/playground/Custom.stories.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+import React from 'react';
+
+import { Button, IconButton, type ButtonProps, 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>
+      <div className='flex flex-col gap-6'>
+        {/* Large */}
+        <div className='grid grid-cols-3 gap-4'>
+          <div className='flex justify-center'>
+            <Button {...args} density='coarse'>
+              {children}
+            </Button>
+          </div>
+          <div className='flex justify-center'>
+            <IconButton {...args} label='Test' icon='ph--atom--regular' size={7} density='coarse' />
+          </div>
+          <div className='flex justify-center'>
+            <IconButton
+              {...args}
+              label='Test'
+              icon='ph--atom--regular'
+              iconOnly
+              size={7}
+              density='coarse'
+              classNames='px-1.5'
+            />
+          </div>
+        </div>
+
+        {/* Medium */}
+        <div className='grid grid-cols-3 gap-4'>
+          <div className='flex justify-center'>
+            <Button {...args} density='fine'>
+              {children}
+            </Button>
+          </div>
+          <div className='flex justify-center'>
+            <IconButton {...args} label='Test' icon='ph--atom--regular' size={5} density='fine' classNames='px-2' />
+          </div>
+          <div className='flex justify-center'>
+            <IconButton
+              {...args}
+              label='Test'
+              icon='ph--atom--regular'
+              iconOnly
+              size={5}
+              density='fine'
+              classNames='py-1 px-1.5'
+            />
+          </div>
+        </div>
+
+        {/* Small */}
+        <div className='grid grid-cols-3 gap-4'>
+          <div className='flex justify-center'>
+            <Button {...args} density='fine' classNames={'!h-[24px] !text-[14px] p-0 px-1.5 min-bs-0'}>
+              {children}
+            </Button>
+          </div>
+          <div className='flex justify-center'>
+            <IconButton
+              {...args}
+              label='Test'
+              icon='ph--atom--regular'
+              density='fine'
+              size={4}
+              classNames={'!h-[24px] !text-[14px] p-1 min-bs-0 gap-0.5'}
+            />
+          </div>
+          <div className='flex justify-center'>
+            <IconButton
+              {...args}
+              label='Test'
+              icon='ph--atom--regular'
+              iconOnly
+              density='fine'
+              size={4}
+              classNames={'!h-[24px] !text-[14px] p-1 min-bs-0'}
+            />
+          </div>
+        </div>
+
+        {/* TODO(burdon): Full variant with max width. */}
+        <div className='flex justify-center'>
+          <Button classNames='w-full max-w-[15rem] rounded' variant='default'>
+            Test
+          </Button>
+        </div>
+        <div className='flex justify-center'>
+          {/* TODO(burdon): Option to have button on RHS. Default size for icon should be 5 for this (medium) density. */}
+          <IconButton
+            classNames='w-full max-w-[15rem] rounded'
+            variant='primary'
+            icon='ph--arrows-clockwise--regular'
+            label='Test'
+            size={5}
+          />
+        </div>
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
+const meta: Meta<typeof Button> = {
+  title: 'ui/react-ui-core/Playground/Custom',
+  component: Button,
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: 'Test' },
+};

package/src/playground/Typography.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import { withTheme } from '../testing';
 
-const TypographyStory = () => {
+const DefaultStory = () => {
   return (
     <div className='mli-auto p-8 max-is-[60rem] space-b-4'>
       <h1 className='text-4xl font-medium'>
@@ -45,7 +45,7 @@ const TypographyStory = () => {
 
 export default {
   title: 'ui/react-ui-core/Playground/Typography',
-  render: TypographyStory,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/testing/decorators/index.ts

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

package/src/testing/decorators/withSurfaceVariantsLayout.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
+
+import { mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { type Density, type Elevation } from '@dxos/react-ui-types';
+
+type Config = {
+  elevations?: { elevation: Elevation; surface?: string }[];
+  densities?: Density[];
+};
+
+const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
+  <div className={mx('p-4 mlb-4 rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>
+    {children}
+  </div>
+);
+
+const Panel = ({
+  Story,
+  elevations,
+  densities,
+  className,
+}: { Story: ComponentType } & Config & { className?: string }) => (
+  <div className={mx('flex flex-col h-full p-4', className)}>
+    {elevations?.map(({ elevation, surface }) =>
+      densities?.map((density) => (
+        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+          <Story />
+        </Container>
+      )),
+    )}
+  </div>
+);
+
+export const withSurfaceVariantsLayout = ({
+  elevations = [
+    { elevation: 'base', surface: 'bg-baseSurface' },
+    { elevation: 'positioned', surface: 'bg-cardSurface' },
+    { elevation: 'dialog', surface: 'bg-modalSurface' },
+  ],
+  densities = ['coarse'],
+}: Config = {}): Decorator => {
+  return (Story) => (
+    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>
+      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />
+      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />
+    </div>
+  );
+};

package/dist/types/src/testing/decorators/withVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withVariants.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withVariants.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY,gCAOtB,MAAM,KAAQ,SAkBhB,CAAC"}

package/src/testing/decorators/withVariants.tsx

@@ -1,45 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { type Decorator } from '@storybook/react';
-import React from 'react';
-
-import { modalSurface, groupSurface, mx, surfaceShadow } 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: 'positioned', surface: groupSurface },
-    { elevation: 'dialog', 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, surfaceShadow({ elevation }))}>
-                  <Story />
-                </div>
-              </DensityProvider>
-            ))}
-          </div>
-        </ElevationProvider>
-      ))}
-    </div>
-  );
-};