@dxos/react-ui 0.8.4-main.67995b8 → 0.8.4-main.70d3990

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]);
+};