@dxos/react-ui 0.8.4-main.fffef41 → 0.8.4-staging.ac66bdf99f

package/src/testing/decorators/withLayout.tsx

@@ -3,52 +3,73 @@
 //
 
 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 = 'default' | 'fullscreen' | 'centered' | '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 = 'default', 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)}>
+  default: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('p-4', classNames)}>
       {children}
     </div>
   ),
 
-  column: ({ children, classNames }: ContainerProps) => (
-    <div role='none' className='fixed inset-0 flex justify-center overflow-hidden bg-deckSurface'>
-      <div role='none' className={mx('flex flex-col is-[40rem] bg-baseSurface', classNames)}>
+  fullscreen: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>
+      {children}
+    </div>
+  ),
+
+  centered: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div role='none' className={mx('flex flex-col bg-base-surface', classNames)}>
+        {children}
+      </div>
+    </div>
+  ),
+
+  column: ({ classNames, children }: ContainerProps) => (
+    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div role='none' className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>
         {children}
       </div>
     </div>

package/src/testing/decorators/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('p-4 rounded-sm', surface, surfaceShadow({ elevation }))}>{children}</div>
 );
 
 const Panel = ({
@@ -22,30 +22,27 @@ const Panel = ({
   elevations,
   densities,
   className,
-}: { Story: ComponentType } & Config & { className?: string }) => (
-  <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}>
-          <Story />
-        </Container>
-      )),
-    )}
-  </div>
-);
+}: { Story: ComponentType } & Config & { className?: string }) => {
+  return (
+    <div className={mx('flex flex-col h-full p-8 gap-8', className)}>
+      {elevations?.map(({ elevation, surface }) =>
+        densities?.map((density) => (
+          <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+            <Story />
+          </Container>
+        )),
+      )}
+    </div>
+  );
+};
 
 export const withLayoutVariants = ({
   elevations = [
-    { elevation: 'base', surface: 'bg-baseSurface' },
-    { elevation: 'positioned', surface: 'bg-cardSurface' },
-    { elevation: 'dialog', surface: 'bg-modalSurface' },
+    { elevation: 'dialog', surface: 'bg-modal-surface' },
+    { elevation: 'positioned', surface: 'bg-card-surface' },
+    { elevation: 'base', surface: 'bg-base-surface' },
   ],
   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>
-  );
+  return (Story) => <Panel Story={Story} elevations={elevations} densities={densities} />;
 };

package/src/testing/decorators/withTheme.tsx

@@ -3,29 +3,35 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { memo } from 'react';
+import React 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 { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components';
 
 /**
- * Adds theme decorator (add to preview.ts)
+ * Adds theme decorator.
  */
-export const withTheme: Decorator = (Story, context) => {
-  const {
-    globals: { theme },
-    parameters: { translations },
-  } = context;
+export const withTheme =
+  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
+  (Story, context) => {
+    const {
+      globals: { theme },
+      parameters: { translations },
+    } = context;
 
-  // Prevent re-rendering of the story.
-  const MemoizedStory = memo(Story);
-
-  return (
-    <ThemeProvider tx={defaultTx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
-      <Tooltip.Provider>
-        <MemoizedStory />
-      </Tooltip.Provider>
-    </ThemeProvider>
-  );
-};
+    return (
+      <ThemeProvider
+        tx={tx}
+        themeMode={theme as ThemeMode}
+        resourceExtensions={translations}
+        noCache={noCache}
+        platform={platform}
+      >
+        <Tooltip.Provider>
+          <Story />
+        </Tooltip.Provider>
+      </ThemeProvider>
+    );
+  };

package/src/testing/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './decorators';
+
+export * from './Loading';

package/src/translations.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+export const translationKey = '@dxos/react-ui';
+
+export const translations = [
+  {
+    'en-US': {
+      [translationKey]: {
+        'toolbar-menu.label': 'Action menu',
+        'toolbar-drag-handle.label': 'Drag to rearrange',
+        'toolbar-close.label': 'Close',
+      },
+    },
+  },
+] as const satisfies Resource[];

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';

package/src/util/usePx.ts

@@ -17,6 +17,7 @@ export const usePx = (rem: number): number => {
     if (typeof document !== 'undefined') {
       return getDocumentElementFontSize();
     }
+
     return 16; // Default fallback for SSR
   });