@dxos/react-ui 0.3.9-main.f8fc6b9 → 0.3.9-next.35264cb

package/src/playground/Controls.stories.tsx

@@ -9,6 +9,7 @@ import React, { useState } from 'react';
 
 import { createScenarios } from './helpers';
 import { Input, Select, Toggle, Toolbar } from '../components';
+import { withTheme } from '../testing';
 
 const Story = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -83,6 +84,8 @@ const Story = () => {
 
 export default {
   component: Story,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/playground/Surfaces.stories.tsx

@@ -17,6 +17,8 @@ import {
   inputSurface,
 } from '@dxos/react-ui-theme';
 
+import { withTheme } from '../testing';
+
 const Surface = ({
   children,
   level,
@@ -57,6 +59,8 @@ const SurfacesStory = () => {
 
 export default {
   component: SurfacesStory,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/testing/decorators/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './with-theme';

package/src/testing/decorators/with-theme.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import { useEffect, createElement } from 'react';
+
+import { defaultTx } from '@dxos/react-ui-theme';
+
+import { ThemeProvider } from '../../components';
+
+export const withTheme: Decorator = (StoryFn, context) => {
+  const theme = context?.parameters?.theme || context?.globals?.theme;
+  useEffect(() => {
+    document.documentElement.classList[theme === 'dark' ? 'add' : 'remove']('dark');
+  }, [theme]);
+
+  return createElement(ThemeProvider, {
+    children: createElement(StoryFn),
+    tx: defaultTx,
+  });
+};

package/src/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './decorators';