From 82b6fe25efc27d5cc70f34999289d61d5b58f619 Mon Sep 17 00:00:00 2001
From: Sivan Duijn <sivanduijn@gmail.com>
Date: Fri, 18 Feb 2022 22:36:51 +0100
Subject: [PATCH] feat(storybook): don't use global provider but instead use
mockstores
---
apps/web-graphpolaris/.storybook/preview.js | 13 ------------
apps/web-graphpolaris/src/app/app.stories.tsx | 11 ++++++++++
.../src/components/panels/panel.stories.tsx | 19 +++++++++++++++++-
.../src/components/schema/schema.stories.tsx | 11 ++++++----
.../rawjsonvis/rawjsonvis.stories.tsx | 19 ++++++++++++++++++
.../visualisations/rawjsonvis/rawjsonvis.tsx | 5 +++--
.../semanticsubstrates.stories.tsx | 20 +++++++++++++++++--
.../semanticsubstrates/semanticsubstrates.tsx | 4 ++--
libs/shared/data-access/store/src/index.ts | 1 +
.../shared/data-access/store/src/lib/store.ts | 12 +++++------
10 files changed, 85 insertions(+), 30 deletions(-)
delete mode 100644 apps/web-graphpolaris/.storybook/preview.js
diff --git a/apps/web-graphpolaris/.storybook/preview.js b/apps/web-graphpolaris/.storybook/preview.js
deleted file mode 100644
index d8d60524d..000000000
--- a/apps/web-graphpolaris/.storybook/preview.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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>
- ),
-];
diff --git a/apps/web-graphpolaris/src/app/app.stories.tsx b/apps/web-graphpolaris/src/app/app.stories.tsx
index 45f910919..8f5be4783 100644
--- a/apps/web-graphpolaris/src/app/app.stories.tsx
+++ b/apps/web-graphpolaris/src/app/app.stories.tsx
@@ -1,10 +1,21 @@
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} />;
diff --git a/apps/web-graphpolaris/src/components/panels/panel.stories.tsx b/apps/web-graphpolaris/src/components/panels/panel.stories.tsx
index a172d8f1f..8fc51fb4c 100644
--- a/apps/web-graphpolaris/src/components/panels/panel.stories.tsx
+++ b/apps/web-graphpolaris/src/components/panels/panel.stories.tsx
@@ -1,6 +1,10 @@
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({});
diff --git a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
index ff0ae9713..7af9a1a17 100644
--- a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
+++ b/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,
},
});
diff --git a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx b/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx
index d6d196e34..53ae69c92 100644
--- a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx
+++ b/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} />
);
diff --git a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.tsx b/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.tsx
index 4ec6bdd50..85c5d46c0 100644
--- a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.tsx
@@ -1,11 +1,12 @@
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');
diff --git a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
index ad8826f1c..e1f82267f 100644
--- a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
@@ -1,4 +1,11 @@
+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 />
);
diff --git a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx
index fa2db166d..def471a0a 100644
--- a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.tsx
@@ -1,9 +1,9 @@
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 (
diff --git a/libs/shared/data-access/store/src/index.ts b/libs/shared/data-access/store/src/index.ts
index 125019fc2..ed570e978 100644
--- a/libs/shared/data-access/store/src/index.ts
+++ b/libs/shared/data-access/store/src/index.ts
@@ -18,6 +18,7 @@ export {
changePrimary,
changeDataPointColors,
selectColorPaletteConfig,
+ colorPaletteConfigSlice,
} from './lib/colorPaletteConfigSlice';
// Exported types
diff --git a/libs/shared/data-access/store/src/lib/store.ts b/libs/shared/data-access/store/src/lib/store.ts
index 7198337bd..ca71bb46f 100644
--- a/libs/shared/data-access/store/src/lib/store.ts
+++ b/libs/shared/data-access/store/src/lib/store.ts
@@ -1,13 +1,13 @@
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,
},
});
--
GitLab