@dxos/react-ui 0.3.9-main.604ae36 → 0.3.9-main.622f05b

package/src/components/Main/Main.stories.tsx

@@ -7,6 +7,7 @@ import '@dxosTheme';
 import React from 'react';
 
 import { Main, useSidebars } from './Main';
+import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
 type StoryMainArgs = {};
@@ -44,7 +45,12 @@ const StoryMain = (_args: StoryMainArgs) => {
   );
 };
 
-export default { component: StoryMain };
+export default {
+  title: 'DXOS UI/Main',
+  component: StoryMain,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
 
 export const Default = {
   args: {},

package/src/components/Message/Message.stories.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { type MessageValence } from '@dxos/react-ui-types';
 
 import { Message } from './Message';
+import { withTheme } from '../../testing';
 
 type StoryMessageProps = {
   valence: MessageValence;
@@ -27,7 +28,10 @@ const StoryMessage = ({ valence, title, body }: StoryMessageProps) => (
 );
 
 export default {
+  title: 'DXOS UI/Message',
   component: StoryMessage,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/components/Popover/Popover.stories.tsx

@@ -8,6 +8,7 @@ import { faker } from '@faker-js/faker';
 import React, { type PropsWithChildren, type ReactNode } from 'react';
 
 import { Popover } from './Popover';
+import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
 faker.seed(1234);
@@ -27,7 +28,10 @@ const StorybookPopover = ({ openTrigger, children }: PropsWithChildren<{ openTri
 };
 
 export default {
+  title: 'DXOS UI/Popover',
   component: StorybookPopover,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -10,6 +10,7 @@ import React, { type PropsWithChildren } from 'react';
 import { groupSurface, surfaceElevation } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';
+import { withTheme } from '../../testing';
 
 faker.seed(1234);
 
@@ -33,7 +34,10 @@ const StorybookScrollArea = ({ children }: PropsWithChildren<{}>) => {
 };
 
 export default {
+  title: 'DXOS UI/Scroll area',
   component: StorybookScrollArea,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/components/Select/Select.stories.tsx

@@ -10,6 +10,7 @@ import React, { type FC, type PropsWithChildren, useState } from 'react';
 import { type Density } from '@dxos/react-ui-types';
 
 import { Select } from './Select';
+import { withTheme } from '../../testing';
 import { DensityProvider } from '../DensityProvider';
 
 faker.seed(1234);
@@ -58,7 +59,10 @@ const StorybookSelect = ({ items = [] }: PropsWithChildren<{ items: ItemProps[]
 };
 
 export default {
+  title: 'DXOS UI/Select',
   component: createDensityTest(StorybookSelect),
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/components/Status/Status.stories.tsx

@@ -7,10 +7,14 @@ import '@dxosTheme';
 import React from 'react';
 
 import { Status } from './Status';
+import { withTheme } from '../../testing';
 
 export default {
+  title: 'DXOS UI/Status',
   component: Status,
   actions: { argTypesRegex: '^on.*' },
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Normal = (props: any) => {

package/src/components/Tag/Tag.stories.tsx

@@ -5,9 +5,13 @@
 import '@dxosTheme';
 
 import { Tag } from './Tag';
+import { withTheme } from '../../testing';
 
 export default {
+  title: 'DXOS UI/Tag',
   component: Tag,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
   argTypes: {
     palette: {
       control: 'select',

package/src/components/Toast/Toast.stories.tsx

@@ -7,6 +7,7 @@ import '@dxosTheme';
 import React, { type ReactNode, useState } from 'react';
 
 import { Toast } from './Toast';
+import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
@@ -44,7 +45,10 @@ const StorybookToast = (props: StorybookToastProps) => {
 };
 
 export default {
+  title: 'DXOS UI/Toast',
   component: StorybookToast,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -8,6 +8,7 @@ import { ArrowClockwise, Bug, FileJs, FileTs, TextB, TextItalic, TextUnderline }
 import React from 'react';
 
 import { Toolbar } from './Toolbar';
+import { withTheme } from '../../testing';
 import { Toggle } from '../Buttons';
 import { Select } from '../Select';
 
@@ -69,7 +70,10 @@ const StorybookToolbar = (props: StorybookToolbarProps) => {
 };
 
 export default {
+  title: 'DXOS UI/Toolbar',
   component: StorybookToolbar,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -7,6 +7,7 @@ import '@dxosTheme';
 import React from 'react';
 
 import { Tooltip } from './Tooltip';
+import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
 type StoryTooltipProps = {
@@ -28,7 +29,10 @@ const StoryTooltip = ({ content }: StoryTooltipProps) => (
 );
 
 export default {
+  title: 'DXOS UI/Tooltip',
   component: StoryTooltip,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
 };
 
 export const Default = {

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);
@@ -82,7 +83,10 @@ const Story = () => {
 };
 
 export default {
+  title: 'DXOS UI/Scenarios/Controls',
   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,
@@ -56,7 +58,10 @@ const SurfacesStory = () => {
 };
 
 export default {
+  title: 'DXOS UI/Scenarios/Surfaces',
   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';