@dxos/react-ui 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/src/playground/Custom.stories.tsx

@@ -2,23 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { Button, type ButtonProps, IconButton, 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>
@@ -41,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>
@@ -54,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
@@ -62,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>
@@ -72,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>
@@ -101,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>
@@ -125,7 +112,9 @@ const meta = {
   component: Button,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { layout: 'centered' },
+  parameters: {
+    layout: 'centered',
+  },
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/playground/Typography.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -48,7 +46,6 @@ const meta = {
   title: 'ui/react-ui-core/Playground/Typography',
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/testing/decorators/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './withLayout';
+export * from './withLayoutVariants';
 export * from './withTheme';
-export * from './withSurfaceVariantsLayout';

package/src/testing/decorators/withLayout.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type FC, type PropsWithChildren } from 'react';
+
+import { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ContainerProps = ThemedClassName<PropsWithChildren>;
+
+export type ContainerType = 'default' | 'column';
+
+export type WithLayoutProps =
+  | FC<ContainerProps>
+  | { classNames?: ClassNameValue; container?: ContainerType; scroll?: boolean };
+
+/**
+ * Adds layout container.
+ */
+export const withLayout =
+  (props: WithLayoutProps): Decorator =>
+  (Story) => {
+    if (typeof props === 'function') {
+      const Container = props;
+      return (
+        <Container>
+          <Story />
+        </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)}>
+      {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)}>
+        {children}
+      </div>
+    </div>
+  ),
+};

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

@@ -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

@@ -0,0 +1,31 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { memo } from 'react';
+
+import { defaultTx } from '@dxos/react-ui-theme';
+
+import { type ThemeMode, ThemeProvider, Tooltip } from '../../components';
+
+/**
+ * Adds theme decorator (add to preview.ts)
+ */
+export const withTheme: 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>
+  );
+};

package/src/util/domino.ts

@@ -0,0 +1,53 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue } from '@dxos/react-ui-types';
+
+/**
+ * Super lightweight chainable DOM builder.
+ */
+export class Domino<T extends HTMLElement> {
+  static of<K extends keyof HTMLElementTagNameMap>(tag: K): Domino<HTMLElementTagNameMap[K]> {
+    return new Domino<HTMLElementTagNameMap[K]>(tag);
+  }
+
+  private readonly _el: T;
+  constructor(tag: keyof HTMLElementTagNameMap) {
+    this._el = document.createElement(tag) as T;
+  }
+  classNames(...classNames: ClassNameValue[]): this {
+    this._el.className = mx(classNames);
+    return this;
+  }
+  text(value: string): this {
+    this._el.textContent = value;
+    return this;
+  }
+  data(key: string, value: string): this {
+    this._el.dataset[key] = value;
+    return this;
+  }
+  attributes(attr: Record<string, string | undefined>): this {
+    Object.entries(attr)
+      .filter(([_, value]) => value !== undefined)
+      .map(([key, value]) => this._el.setAttribute(key, value!));
+    return this;
+  }
+  style(styles: Partial<CSSStyleDeclaration>): this {
+    Object.assign(this._el.style, styles);
+    return this;
+  }
+  children<C extends HTMLElement>(...children: Domino<C>[]): this {
+    children.forEach((child) => this._el.appendChild(child.build()));
+    return this;
+  }
+  on(event: string, handler: (e: Event) => void): this {
+    this._el.addEventListener(event, handler);
+    return this;
+  }
+  build(): T {
+    return this._el;
+  }
+}

package/src/util/index.ts

@@ -2,5 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './domino';
 export * from './hasIosKeyboard';
 export type * from './ThemedClassName';
+export * from './usePx';

package/src/util/usePx.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const getDocumentElementFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+/**
+ * React hook that converts rem values to pixels and updates when the root font size changes.
+ *
+ * @param rem The rem value to convert to pixels
+ * @returns The current pixel value equivalent of the rem input
+ */
+export const usePx = (rem: number): number => {
+  const [fontSize, setFontSize] = useState(() => {
+    if (typeof document !== 'undefined') {
+      return getDocumentElementFontSize();
+    }
+    return 16; // Default fallback for SSR
+  });
+
+  const updateFontSize = useCallback(() => {
+    setFontSize(getDocumentElementFontSize());
+  }, []);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    // Create a ResizeObserver to watch for font size changes on the document element
+    const resizeObserver = new ResizeObserver(updateFontSize);
+    resizeObserver.observe(document.documentElement);
+
+    // Also listen for viewport changes that might affect font size
+    const mediaQueryList = window.matchMedia('all');
+    const handleMediaChange = () => {
+      updateFontSize();
+    };
+
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener('change', handleMediaChange);
+    } else {
+      // Fallback for older browsers
+      mediaQueryList.addListener(handleMediaChange);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener('change', handleMediaChange);
+      } else {
+        // Fallback for older browsers
+        mediaQueryList.removeListener(handleMediaChange);
+      }
+    };
+  }, []);
+
+  return useMemo(() => rem * fontSize, [fontSize]);
+};