chore(web): add theming support for components in storybook

web/.storybook/main.ts

@@ -5,11 +5,7 @@ import { mergeConfig } from "vite";
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|ts|tsx|mdx)"],
-  addons: [
-    {
-      name: "@storybook/addon-essentials",
-    },
-  ],
+  addons: ["@storybook/addon-essentials", "@storybook/addon-styling"],
   framework: "@storybook/react-vite",
   core: {
     builder: "@storybook/builder-vite",

web/.storybook/preview.tsx

@@ -6,12 +6,14 @@ import {
   ApolloLink,
   Observable,
 } from "@apollo/client";
+import { ThemeProvider } from "@emotion/react";
+import { withThemeFromJSXProvider } from "@storybook/addon-styling";
 import type { Preview } from "@storybook/react";
-import React, { ReactElement } from "react";
+import React from "react";
 
 import { Provider as DndProvider } from "../src/classic/util/use-dnd";
 import { Provider as I18nProvider } from "../src/services/i18n";
-import { Provider as ThemeProvider } from "../src/services/theme";
+import { GlobalStyles, darkTheme, lightTheme } from "../src/services/theme";
 
 // apollo client that does nothing
 const mockClient = new ApolloClient({
@@ -26,20 +28,37 @@ const mockClient = new ApolloClient({
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      values: [
+        { name: "Light", value: "lightGrey" },
+        { name: "Dark", value: "ash" },
+      ],
+    },
     layout: "fullscreen",
     controls: { expanded: true },
     actions: { argTypesRegex: "^on.*" },
   },
   decorators: [
-    (storyFn: () => ReactElement) => (
-      <ApolloProvider client={mockClient}>
-        <ThemeProvider>
+    withThemeFromJSXProvider({
+      themes: {
+        light: lightTheme,
+        dark: darkTheme,
+      },
+      defaultTheme: "dark",
+      Provider: ThemeProvider,
+      GlobalStyles,
+    }),
+    Story => {
+      return (
+        <ApolloProvider client={mockClient}>
           <I18nProvider>
-            <DndProvider>{storyFn()}</DndProvider>
+            <DndProvider>
+              <Story />
+            </DndProvider>
           </I18nProvider>
-        </ThemeProvider>
-      </ApolloProvider>
-    ),
+        </ApolloProvider>
+      );
+    },
   ],
 };
 

web/package.json

@@ -41,6 +41,7 @@
         "@playwright/test": "1.33.0",
         "@rollup/plugin-yaml": "4.1.0",
         "@storybook/addon-essentials": "7.0.18",
+        "@storybook/addon-styling": "1.0.8",
         "@storybook/addons": "7.0.18",
         "@storybook/builder-vite": "7.0.18",
         "@storybook/manager-api": "7.0.18",
@@ -175,4 +176,4 @@
         "use-file-input": "1.0.0",
         "uuid": "9.0.0"
     }
-}
+}

web/src/classic/components/atoms/Modal/index.stories.tsx

@@ -0,0 +1,50 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import Button from "../Button";
+import Text from "../Text";
+
+import Modal from ".";
+
+const meta: Meta<typeof Modal> = {
+  component: Modal,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+const ModalContent: React.FC = () => {
+  return (
+    <Text size="m">
+      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
+      classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a
+      Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
+      words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in
+      classical literature, discovered the undoubtable source.
+    </Text>
+  );
+};
+
+export const Small: Story = {
+  render: () => (
+    <Modal size="sm" isVisible={true} title="Small modal" button1={<Button text="Confirm" />}>
+      <ModalContent />
+    </Modal>
+  ),
+};
+
+export const Medium: Story = {
+  render: () => (
+    <Modal size="md" isVisible={true} title="Medium modal" button1={<Button text="Confirm" />}>
+      <ModalContent />
+    </Modal>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Modal size="lg" isVisible={true} title="Large modal" button1={<Button text="Confirm" />}>
+      <ModalContent />
+    </Modal>
+  ),
+};

web/src/services/theme/index.ts

@@ -9,3 +9,6 @@ export { default as Provider } from "./provider";
 export { default as PublishedAppProvider } from "./publishedAppProvider";
 export { usePublishTheme, publishTheme, mask, type SceneThemeOptions } from "./publishTheme";
 export type { PublishTheme } from "./publishTheme";
+export { default as GlobalStyles } from "./globalstyle";
+export { default as lightTheme } from "./lightheme";
+export { default as darkTheme } from "./darkTheme";