re-integrate storbybook + avoid windows.xxx in components

.storybook/config.tsx → .storybook/config.tsx.bak

@@ -2,6 +2,7 @@ import { configure, addParameters, addDecorator } from '@storybook/react';
 import { makeDecorator } from '@storybook/addons';
 import { themes } from '@storybook/theming';
 import styled, { ThemeProvider } from 'styled-components';
+import 'bootstrap/dist/css/bootstrap.min.css';
 import { DEFAULT_THEME, getSetting } from '../src/theme';
 
 // automatically import all files ending in *.stories.tsx

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,92 @@
+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, THEME_LIST, getSetting } from '../src/theme';
+
+const { ConfigurationContext } = testables;
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      disable: true,
+    },
+  },
+
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 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, { 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 />
+      </>
+    ),
+  ],
+};
+
+export default preview;

package.json

@@ -12,7 +12,9 @@
     "lint": "yarn lint:eslint && yarn lint:types",
     "lint:eslint": "eslint --quiet .",
     "lint:types": "tsc --noEmit",
-    "test": "vitest"
+    "test": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": {
@@ -39,6 +41,14 @@
     "@electron-forge/maker-zip": "^7.2.0",
     "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
     "@electron-forge/plugin-vite": "^7.2.0",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/test": "^7.6.17",
     "@types/mysql": "^2.15.25",
     "@types/node": "^20.11.19",
     "@types/react": "^18.2.57",
@@ -49,8 +59,10 @@
     "electron-devtools-installer": "^3.2.0",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-storybook": "^0.8.0",
     "mysql2": "^3.9.1",
     "react-router-dom": "^6.22.1",
+    "storybook": "^7.6.17",
     "ts-node": "^10.9.2",
     "typescript": "~5.3.3",
     "vitest": "^1.3.1"

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 {
@@ -9,6 +9,7 @@ import {
   isDarkTheme,
   THEME_LIST,
 } from './theme';
+import { ConnectionObject } from './component/Connection/types';
 
 export interface ConnectToFunc {
   (params: object): void;
@@ -27,20 +28,24 @@ export const ConnectionContext = createContext<ConnexionContextProps>({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   setCurrentConnectionName: () => {},
 });
+ConnectionContext.displayName = 'ConnectionContext';
 
 export interface SetDatabaseFunc {
   (theme: string): void;
 }
 interface DatabaseContextProps {
   database: string | null;
   setDatabase: SetDatabaseFunc;
+  executeQuery: (query: string) => Promise<unknown>;
 }
 
 export const DatabaseContext = createContext<DatabaseContextProps>({
   database: null,
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   setDatabase: () => {},
+  executeQuery: () => Promise.resolve(),
 });
+DatabaseContext.displayName = 'DatabaseContext';
 
 interface ChangeThemeFunc {
   (theme: string): void;
@@ -54,18 +59,28 @@ const ThemeContext = createContext<ThemeContextProps>({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   changeTheme: () => {},
 });
+ThemeContext.displayName = 'ThemeContext';
 
 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,
 }: {
   children: React.ReactNode;
 }): React.ReactElement {
-  const config = useConfiguration();
-  const [themeName, setThemeName] = useState(config.theme);
+  const { configuration } = useConfiguration();
+  const [themeName, setThemeName] = useState(configuration.theme);
 
   const changeTheme = (newTheme: string) => {
     window.config.changeTheme(newTheme);
@@ -100,14 +115,22 @@ export function ThemeContextProvider({
             },
           }}
         >
-          {children}
+          <LayoutDiv>{children}</LayoutDiv>
         </ConfigProvider>
       </ThemeContext.Provider>
     </ThemeProvider>
   );
 }
 
-const ConfigurationContext = createContext<null | Configuration>(null);
+type ConfigurationContextType = {
+  configuration: Configuration;
+  addConnectionToConfig: (connection: ConnectionObject) => void;
+};
+
+const ConfigurationContext = createContext<null | ConfigurationContextType>(
+  null
+);
+ConfigurationContext.displayName = 'ConfigurationContext';
 
 export function ConfigurationContextProvider({
   children,
@@ -131,14 +154,21 @@ export function ConfigurationContextProvider({
     return null;
   }
 
+  const value: ConfigurationContextType = {
+    configuration,
+    addConnectionToConfig: (connection: ConnectionObject) => {
+      window.config.addConnectionToConfig(connection);
+    },
+  };
+
   return (
-    <ConfigurationContext.Provider value={configuration}>
+    <ConfigurationContext.Provider value={value}>
       {children}
     </ConfigurationContext.Provider>
   );
 }
 
-export function useConfiguration(): Configuration {
+export function useConfiguration(): ConfigurationContextType {
   const value = useContext(ConfigurationContext);
 
   if (!value) {
@@ -149,3 +179,7 @@ export function useConfiguration(): Configuration {
 
   return value;
 }
+
+export const testables = {
+  ConfigurationContext,
+};