handle theme

jdeniau · Feb 23, 2024 · 1e97c9c · 1e97c9c
1 parent a1345a7
commit 1e97c9c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 38 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
+import { useGlobals, useParameter } from '@storybook/manager-api';
 import { ThemeContextProvider, testables } from '../src/Contexts';
 import { MemoryRouter } from 'react-router';
-import { DEFAULT_THEME } from '../src/theme';
+import { DEFAULT_THEME, THEME_LIST, getSetting } from '../src/theme';
 
 const { ConfigurationContext } = testables;
 
@@ -16,30 +17,74 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    backgrounds: {
+      disable: true,
+    },
+  },
+
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'Visual Studio', //DEFAULT_THEME.name,
+      toolbar: {
+        // The label to show for this toolbar item
+        title: 'Theme',
+        icon: 'circlehollow',
+        // Array of plain string values or MenuItem shape (see below)
+        items: Object.keys(THEME_LIST),
+        // Change title based on selected value
+        dynamicTitle: true,
+      },
+    },
   },
   decorators: [
     (Story) => (
       <MemoryRouter>
         <Story />
       </MemoryRouter>
     ),
-    (Story) => (
-      <ConfigurationContext.Provider
-        value={{
-          configuration: {
-            version: 1,
-            theme: 'Visual Studio',
-            connections: {},
-          },
-          addConnectionToConfig: (connection) => {
-            action('addConnectionToConfig')(connection);
-          },
-        }}
-      >
-        <ThemeContextProvider>
-          <Story />
-        </ThemeContextProvider>
-      </ConfigurationContext.Provider>
+    (Story, { globals: { theme } }) => {
+      // const themeName = useParameter('backgrounds');
+
+      // console.log('themeName', themeName);
+
+      return (
+        <ConfigurationContext.Provider
+          // weirdly needed to force storybook to re-render
+          key={theme}
+          value={{
+            configuration: {
+              version: 1,
+              theme,
+              connections: {},
+            },
+            addConnectionToConfig: (connection) => {
+              action('addConnectionToConfig')(connection);
+            },
+          }}
+        >
+          <ThemeContextProvider>
+            <Story />
+          </ThemeContextProvider>
+        </ConfigurationContext.Provider>
+      );
+    },
+    // force storybook background to be the same as the theme
+    (Story, { globals: { theme } }) => (
+      <>
+        <style>
+          {`
+.sb-show-main {
+  background:  ${getSetting(
+    // @ts-expect-error theme is a keyof THEME_LIST
+    THEME_LIST[theme],
+    'background'
+  )} !important;
+  transition: background 0s;
+}`}
+        </style>
+        <Story />
+      </>
     ),
   ],
 };

diff --git a/src/Contexts.tsx b/src/Contexts.tsx
@@ -1,5 +1,5 @@
 import { createContext, useContext, useEffect, useState } from 'react';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import { Configuration } from './configuration/type';
 import {
@@ -65,6 +65,15 @@ export function useTheme() {
   return useContext(ThemeContext);
 }
 
+const LayoutDiv = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: ${(props) => getSetting(props.theme, 'background')};
+  color: ${(props) => getSetting(props.theme, 'foreground')};
+`;
+
 export function ThemeContextProvider({
   children,
 }: {
@@ -106,7 +115,7 @@ export function ThemeContextProvider({
             },
           }}
         >
-          {children}
+          <LayoutDiv>{children}</LayoutDiv>
         </ConfigProvider>
       </ThemeContext.Provider>
     </ThemeProvider>

diff --git a/src/routes/root.tsx b/src/routes/root.tsx
@@ -9,14 +9,6 @@ import { getSetting } from '../theme';
 import Debug from '../component/Debug';
 import ThemeSelector from '../component/ThemeSelector';
 
-const LayoutDiv = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: ${(props) => getSetting(props.theme, 'background')};
-  color: ${(props) => getSetting(props.theme, 'foreground')};
-`;
 const HeaderDiv = styled.header`
   display: flex;
   justify-content: space-between;
@@ -29,17 +21,15 @@ export default function Root() {
     <ConfigurationContextProvider>
       <ThemeContextProvider>
         <ConnectionStack>
-          <LayoutDiv>
-            <Debug />
+          <Debug />
 
-            <HeaderDiv>
-              <h2>Welcome to Tiana Tables !</h2>
-              <div>
-                Theme: <ThemeSelector />
-              </div>
-            </HeaderDiv>
-            <Outlet />
-          </LayoutDiv>
+          <HeaderDiv>
+            <h2>Welcome to Tiana Tables !</h2>
+            <div>
+              Theme: <ThemeSelector />
+            </div>
+          </HeaderDiv>
+          <Outlet />
         </ConnectionStack>
       </ThemeContextProvider>
     </ConfigurationContextProvider>