feat(storybook): don't use global provider but instead use mockstores

apps/web-graphpolaris/.storybook/preview.js

-import React from 'react';
-import { Provider } from 'react-redux';
-
-import { store } from '@graphpolaris/shared/data-access/store';
-import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
-
-export const decorators = [
-  (story) => (
-    <Provider store={store}>
-      <OurThemeProvider>{story()}</OurThemeProvider>
-    </Provider>
-  ),
-];

apps/web-graphpolaris/src/app/app.stories.tsx

 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { App } from './app';
+import { Provider } from 'react-redux';
+import { store } from '@graphpolaris/shared/data-access/store';
+import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
 
 export default {
   component: App,
   title: 'App',
+  decorators: [
+    // using the real store here
+    (story) => (
+      <Provider store={store}>
+        <OurThemeProvider>{story()}</OurThemeProvider>
+      </Provider>
+    ),
+  ],
 } as Meta;
 
 const Template: Story = (args) => <App {...args} />;

apps/web-graphpolaris/src/components/panels/panel.stories.tsx

 import React from 'react';
 import Panel from './panel';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { colorPaletteConfigSlice } from '@graphpolaris/shared/data-access/store';
+import { Provider } from 'react-redux';
+import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
 
 export default {
   /* 👇 The title prop is optional.
@@ -9,9 +13,22 @@ export default {
    */
   title: 'Panel',
   component: Panel,
-  decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
+  decorators: [
+    (story) => (
+      <Provider store={Mockstore}>
+        <OurThemeProvider>{story()}</OurThemeProvider>
+      </Provider>
+    ),
+  ],
 } as ComponentMeta<typeof Panel>;
 
+// A super-simple mock of a redux store
+const Mockstore = configureStore({
+  reducer: {
+    colorPaletteConfig: colorPaletteConfigSlice.reducer,
+  },
+});
+
 const Template: ComponentStory<typeof Panel> = (args) => <Panel {...args} />;
 
 export const Primary = Template.bind({});

apps/web-graphpolaris/src/components/schema/schema.stories.tsx

@@ -2,9 +2,11 @@ import { parseSchemaFromBackend } from '@graphpolaris/schema-usecases';
 import {
   SchemaFromBackend,
   schemaSlice,
+  colorPaletteConfigSlice,
   setSchema,
   store,
 } from '@graphpolaris/shared/data-access/store';
+import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
 import {
   movieSchema,
   northWindSchema,
@@ -25,19 +27,20 @@ export default {
   component: Schema,
   decorators: [
     (story) => (
-      <div style={{ padding: '3rem' }}>
-        <Provider store={Mockstore}>{story()}</Provider>
-      </div>
+      <Provider store={Mockstore}>
+        <OurThemeProvider>{story()}</OurThemeProvider>
+      </Provider>
     ),
   ],
 } as ComponentMeta<typeof Schema>;
 
 const Template: ComponentStory<typeof Schema> = (args) => <Schema {...args} />;
 
-// // A super-simple mock of a redux store
+// Mock the schema and palette store
 const Mockstore = configureStore({
   reducer: {
     schema: schemaSlice.reducer,
+    colorPaletteConfig: colorPaletteConfigSlice.reducer,
   },
 });
 

apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx

@@ -4,9 +4,14 @@ import { RawJSONVis } from './rawjsonvis';
 
 import {
   assignNewGraphQueryResult,
+  colorPaletteConfigSlice,
+  graphQueryResultSlice,
   resetGraphQueryResults,
   store,
 } from '@graphpolaris/shared/data-access/store';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
 
 export default {
   /* 👇 The title prop is optional.
@@ -15,8 +20,22 @@ export default {
    */
   title: 'RawJSONVIS',
   component: RawJSONVis,
+  decorators: [
+    (story) => (
+      <Provider store={Mockstore}>
+        <OurThemeProvider>{story()}</OurThemeProvider>
+      </Provider>
+    ),
+  ],
 } as ComponentMeta<typeof RawJSONVis>;
 
+const Mockstore = configureStore({
+  reducer: {
+    colorPaletteConfig: colorPaletteConfigSlice.reducer,
+    graphQueryResult: graphQueryResultSlice.reducer,
+  },
+});
+
 const Template: ComponentStory<typeof RawJSONVis> = (args) => (
   <RawJSONVis {...args} />
 );

apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.tsx

 import {
   changePrimary,
+  useAppDispatch,
   useGraphQueryResult,
 } from '@graphpolaris/shared/data-access/store';
 import { useTheme } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import ReactJSONView from 'react-json-view';
-import { useDispatch } from 'react-redux';
+
 import styles from './rawjsonvis.module.scss';
 
 /* eslint-disable-next-line */
@@ -15,7 +16,7 @@ export interface RawJSONVisProps {
 
 export const RawJSONVis = React.memo((props: RawJSONVisProps) => {
   const graphQueryResult = useGraphQueryResult();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const theme = useTheme();
   console.log('update rawjson');
 

apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx

+import {
+  colorPaletteConfigSlice,
+  graphQueryResultSlice,
+} from '@graphpolaris/shared/data-access/store';
+import { OurThemeProvider } from '@graphpolaris/shared/data-access/theme';
+import { configureStore } from '@reduxjs/toolkit';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Provider } from 'react-redux';
 
 import SemanticSubstrates from './semanticsubstrates';
 
@@ -10,11 +17,20 @@ export default {
   title: 'SemanticSubstrates',
   component: SemanticSubstrates,
   decorators: [
-    (story) => <div style={{ padding: '3rem' }}>{story()}</div>,
-    (story) => <div style={{ padding: '3rem' }}>{story()}</div>,
+    (story) => (
+      <Provider store={Mockstore}>
+        <OurThemeProvider>{story()}</OurThemeProvider>
+      </Provider>
+    ),
   ],
 } as ComponentMeta<typeof SemanticSubstrates>;
 
+const Mockstore = configureStore({
+  reducer: {
+    colorPaletteConfig: colorPaletteConfigSlice.reducer,
+    graphQueryResult: graphQueryResultSlice.reducer,
+  },
+});
 const Template: ComponentStory<typeof SemanticSubstrates> = (args) => (
   <SemanticSubstrates />
 );

apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx

 import { Theme, useTheme } from '@mui/material/styles';
 import Box from '@mui/system/Box';
-import { useDispatch } from 'react-redux';
 import {
   changeDataPointColors,
   changePrimary,
+  useAppDispatch,
 } from '@graphpolaris/shared/data-access/store';
 import styled from 'styled-components';
 import { Button } from '@mui/material';
@@ -15,7 +15,7 @@ const Div = styled.div`
 `;
 
 const SemanticSubstrates = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const theme = useTheme();
 
   return (

libs/shared/data-access/store/src/index.ts

@@ -18,6 +18,7 @@ export {
   changePrimary,
   changeDataPointColors,
   selectColorPaletteConfig,
+  colorPaletteConfigSlice,
 } from './lib/colorPaletteConfigSlice';
 
 // Exported types

libs/shared/data-access/store/src/lib/store.ts

 import { configureStore } from '@reduxjs/toolkit';
-import colorPaletteConfigSlice from './colorPaletteConfigSlice';
-import graphQueryResultSlice from './graphQueryResultSlice';
-import schemaSlice from './schemaSlice';
+import colorPaletteConfigSliceReducer from './colorPaletteConfigSlice';
+import graphQueryResultSliceReducer from './graphQueryResultSlice';
+import schemaSliceReducer from './schemaSlice';
 
 export const store = configureStore({
   reducer: {
-    graphQueryResult: graphQueryResultSlice,
-    schema: schemaSlice,
-    colorPaletteConfig: colorPaletteConfigSlice,
+    graphQueryResult: graphQueryResultSliceReducer,
+    schema: schemaSliceReducer,
+    colorPaletteConfig: colorPaletteConfigSliceReducer,
   },
 });