@dxos/react-ui 0.8.4-main.406dc2a → 0.8.4-main.59c2e9b

package/src/playground/Custom.stories.tsx

@@ -30,7 +30,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               iconOnly
               size={7}
               density='coarse'
-              classNames='px-1.5'
+              classNames='pli-1.5'
             />
           </div>
         </div>
@@ -43,7 +43,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--atom--regular' size={5} density='fine' classNames='px-2' />
+            <IconButton {...args} label='Test' icon='ph--atom--regular' density='fine' classNames='pli-2' />
           </div>
           <div className='flex justify-center'>
             <IconButton
@@ -51,9 +51,8 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               label='Test'
               icon='ph--atom--regular'
               iconOnly
-              size={5}
               density='fine'
-              classNames='py-1 px-1.5'
+              classNames='plb-1 pli-1.5'
             />
           </div>
         </div>
@@ -61,7 +60,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
         {/* 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'}>
+            <Button {...args} density='fine' classNames={'!h-[24px] !text-[14px] p-0 pli-1.5 min-bs-0'}>
               {children}
             </Button>
           </div>
@@ -90,18 +89,17 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
 
         {/* TODO(burdon): Full variant with max width. */}
         <div className='flex justify-center'>
-          <Button classNames='w-full max-w-[15rem] rounded' variant='default'>
+          <Button classNames='is-full max-is-[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'
+            classNames='is-full max-is-[15rem] rounded'
             variant='primary'
             icon='ph--arrows-clockwise--regular'
             label='Test'
-            size={5}
           />
         </div>
       </div>

package/src/testing/decorators/index.ts

@@ -3,5 +3,5 @@
 //
 
 export * from './withLayout';
-export * from './withSurfaceVariantsLayout';
+export * from './withLayoutVariants';
 export * from './withTheme';

package/src/testing/decorators/withLayout.tsx

@@ -3,45 +3,52 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { type FC, type PropsWithChildren } from 'react';
+import React, { type FC, type PropsWithChildren, memo } from 'react';
 
 import { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export type ContainerProps = ThemedClassName<PropsWithChildren>;
 
-export type ContainerType = 'default' | 'column';
+export type ContainerType = 'fullscreen' | 'column';
 
 export type WithLayoutProps =
   | FC<ContainerProps>
-  | { classNames?: ClassNameValue; container?: ContainerType; scroll?: boolean };
+  | {
+      classNames?: ClassNameValue;
+      layout?: ContainerType;
+      scroll?: boolean;
+    };
 
 /**
  * Adds layout container.
  */
 export const withLayout =
-  (props: WithLayoutProps): Decorator =>
+  (props: WithLayoutProps = {}): Decorator =>
   (Story) => {
+    // Prevent re-rendering of the story.
+    const MemoizedStory = memo(Story);
     if (typeof props === 'function') {
       const Container = props;
       return (
         <Container>
-          <Story />
+          <MemoizedStory />
+        </Container>
+      );
+    } else {
+      const { layout = 'fullscreen', classNames, scroll } = props;
+      const Container = layouts[layout] ?? layouts.fullscreen;
+      return (
+        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>
+          <MemoizedStory />
         </Container>
       );
     }
-
-    const Container = layouts[(props as any).container as ContainerType] ?? layouts.default;
-    return (
-      <Container classNames={mx(props.classNames, props.scroll ? 'overflow-y-auto' : 'overflow-hidden')}>
-        <Story />
-      </Container>
-    );
   };
 
 const layouts: Record<ContainerType, FC<ContainerProps>> = {
-  default: ({ children, classNames }: ContainerProps) => (
-    <div role='none' className={mx(classNames)}>
+  fullscreen: ({ children, classNames }: ContainerProps) => (
+    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-deckSurface', classNames)}>
       {children}
     </div>
   ),

package/src/testing/decorators/{withSurfaceVariantsLayout.tsx → withLayoutVariants.tsx}

@@ -5,8 +5,8 @@
 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';
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+import { type Density, type Elevation } from '@dxos/ui-types';
 
 type Config = {
   elevations?: { elevation: Elevation; surface?: string }[];
@@ -14,7 +14,7 @@ type Config = {
 };
 
 const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
-  <div className={mx('rounded-md border border-separator p-2', surface, surfaceShadow({ elevation }))}>{children}</div>
+  <div className={mx('rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>{children}</div>
 );
 
 const Panel = ({
@@ -23,7 +23,7 @@ const Panel = ({
   densities,
   className,
 }: { Story: ComponentType } & Config & { className?: string }) => (
-  <div className={mx('flex flex-col h-full p-4 gap-4', className)}>
+  <div className={mx('flex flex-col bs-full p-4 gap-4', className)}>
     {elevations?.map(({ elevation, surface }) =>
       densities?.map((density) => (
         <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
@@ -34,7 +34,7 @@ const Panel = ({
   </div>
 );
 
-export const withSurfaceVariantsLayout = ({
+export const withLayoutVariants = ({
   elevations = [
     { elevation: 'base', surface: 'bg-baseSurface' },
     { elevation: 'positioned', surface: 'bg-cardSurface' },

package/src/testing/decorators/withTheme.tsx

@@ -5,9 +5,10 @@
 import { type Decorator } from '@storybook/react';
 import React, { memo } from 'react';
 
-import { defaultTx } from '@dxos/react-ui-theme';
+import { defaultTx } from '@dxos/ui-theme';
+import { type ThemeMode } from '@dxos/ui-types';
 
-import { type ThemeMode, ThemeProvider, Tooltip } from '../../components';
+import { ThemeProvider, Tooltip } from '../../components';
 
 /**
  * Adds theme decorator (add to preview.ts)

package/src/util/index.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './domino';
+export type { ThemedClassName } from '@dxos/ui-types';
+
 export * from './hasIosKeyboard';
-export type * from './ThemedClassName';
 export * from './usePx';