From 5106cca048ffeb2c8463c838433d98858b4935ac Mon Sep 17 00:00:00 2001
From: Michael Behrisch <m.behrisch@uu.nl>
Date: Tue, 10 May 2022 20:29:05 +0200
Subject: [PATCH] fix: :bug: adds and structures storybook tests for
visualizations and pills
Adds further tests and improves the structure in the storybook sidebar.
---
.storybook/main.js | 30 ++++++---
.../web-graphpolaris/.storybook/tsconfig.json | 2 -
.../querybuilder/querybuilder.stories.tsx | 1 +
.../src/components/schema/schema.stories.tsx | 8 +--
.../nodelink/nodelinkvis.stories.tsx | 2 +-
.../paohvis/paohvis.stories.tsx | 2 +-
.../rawjsonvis/rawjsonvis.stories.tsx | 2 +-
.../semanticsubstrates.stories.tsx | 2 +-
.../lib/graphPolarisThemeProvider.spec.tsx | 36 +++++++++++
.../data-access/theme/src/lib/mockTheme.tsx | 25 ++++++++
.../entitypill/entitypill.stories.tsx | 61 +++++++++++++++++++
.../customFlowPills/entitypill/entitypill.tsx | 54 +++++++++-------
.../entitypill/test.stories.tsx | 19 ++++++
13 files changed, 203 insertions(+), 41 deletions(-)
create mode 100644 libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.spec.tsx
create mode 100644 libs/shared/data-access/theme/src/lib/mockTheme.tsx
create mode 100644 libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.stories.tsx
create mode 100644 libs/shared/ui/pills/src/customFlowPills/entitypill/test.stories.tsx
diff --git a/.storybook/main.js b/.storybook/main.js
index 1492ac61f..7ea37db6d 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,11 +1,27 @@
module.exports = {
- stories: [],
+ stories: [
+ // '../../../libs/**/*.stories.@(tsx|md)',
+ {
+ // 👇 The directory field sets the directory your stories
+ directory: '../../../libs/shared/ui/pills/src/customFlowPills/entitypill',
+ // 👇 The titlePrefix field will generate automatic titles for your stories
+ titlePrefix: 'SharedUIComponents',
+ // 👇 Storybook will load all files that contain the stories extension
+ files: '*.stories.*',
+ },
+ ],
+ // async (list) => [...list, ...findStories()],
addons: ['@storybook/addon-essentials'],
// uncomment the property below if you want to apply some webpack config globally
- // webpackFinal: async (config, { configType }) => {
- // // Make whatever fine-grained changes you need that should apply to all storybook configs
-
- // // Return the altered config
- // return config;
- // },
+ webpackFinal: async (config, { configType }) => {
+ // Make whatever fine-grained changes you need that should apply to all storybook configs
+ // console.log('current main.js config', config);
+ // Return the altered config
+ return config;
+ },
};
+
+function findStories() {
+ // your custom logic returns a list of files
+ console.log('findStories========================');
+}
diff --git a/apps/web-graphpolaris/.storybook/tsconfig.json b/apps/web-graphpolaris/.storybook/tsconfig.json
index 675184366..5a96b7a33 100644
--- a/apps/web-graphpolaris/.storybook/tsconfig.json
+++ b/apps/web-graphpolaris/.storybook/tsconfig.json
@@ -15,6 +15,4 @@
"../**/*.spec.tsx",
"../**/*.spec.jsx"
]
- // ,
- // "include": ["../src/**/*", "*.js"]
}
diff --git a/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx
index b406d60b5..2de5deb87 100644
--- a/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx
+++ b/apps/web-graphpolaris/src/components/querybuilder/querybuilder.stories.tsx
@@ -14,6 +14,7 @@ import { addPill, handles } from '@graphpolaris/querybuilder/usecases';
export default {
component: QueryBuilder,
+ title: 'Panels/QueryBuilder',
} as ComponentMeta<typeof QueryBuilder>;
const Template: ComponentStory<typeof QueryBuilder> = (args) => (
diff --git a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
index e274a1585..01e070c34 100644
--- a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
+++ b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
@@ -27,7 +27,8 @@ export default {
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
- title: 'Schema',
+ title: 'Panels/Schema',
+
component: Schema,
decorators: [
(story) => (
@@ -179,8 +180,6 @@ TestWithMockTwitterSchema.play = async () => {
dispatch(setSchema(schema.export()));
};
-
-
export const TestWithMockSimpleSchema = Template.bind({});
TestWithMockSimpleSchema.play = async () => {
@@ -191,7 +190,6 @@ TestWithMockSimpleSchema.play = async () => {
dispatch(setSchema(schema.export()));
};
-
export const TestWithMockMovieSchema = Template.bind({});
TestWithMockMovieSchema.play = async () => {
@@ -200,4 +198,4 @@ TestWithMockMovieSchema.play = async () => {
const schema = movieSchema;
console.info('dispatch movieSchema schema', schema.order);
dispatch(setSchema(schema.export()));
-};
\ No newline at end of file
+};
diff --git a/apps/web-graphpolaris/src/components/visualisations/nodelink/nodelinkvis.stories.tsx b/apps/web-graphpolaris/src/components/visualisations/nodelink/nodelinkvis.stories.tsx
index fb22505b6..1d688b937 100644
--- a/apps/web-graphpolaris/src/components/visualisations/nodelink/nodelinkvis.stories.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/nodelink/nodelinkvis.stories.tsx
@@ -7,7 +7,7 @@ export default {
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
- title: 'NodeLink',
+ title: 'Components/Visualizations/NodeLink',
component: NodeLink,
decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
} as ComponentMeta<typeof NodeLink>;
diff --git a/apps/web-graphpolaris/src/components/visualisations/paohvis/paohvis.stories.tsx b/apps/web-graphpolaris/src/components/visualisations/paohvis/paohvis.stories.tsx
index 795a79aba..866d8b316 100644
--- a/apps/web-graphpolaris/src/components/visualisations/paohvis/paohvis.stories.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/paohvis/paohvis.stories.tsx
@@ -7,7 +7,7 @@ export default {
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
- title: 'PaohVis',
+ title: 'Components/Visualizations/PaohVis',
component: PaohVis,
decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
} as ComponentMeta<typeof PaohVis>;
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 3b10ca2d1..a5c7561eb 100644
--- a/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/rawjsonvis/rawjsonvis.stories.tsx
@@ -18,7 +18,7 @@ export default {
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
- title: 'RawJSONVIS',
+ title: 'Components/Visualizations/RawJSONVIS',
component: RawJSONVis,
decorators: [
(story) => (
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 944011b53..8ffade300 100644
--- a/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
+++ b/apps/web-graphpolaris/src/components/visualisations/semanticsubstrates/semanticsubstrates.stories.tsx
@@ -14,7 +14,7 @@ export default {
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
- title: 'SemanticSubstrates',
+ title: 'Components/Visualizations/SemanticSubstrates',
component: SemanticSubstrates,
decorators: [
(story) => (
diff --git a/libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.spec.tsx b/libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.spec.tsx
new file mode 100644
index 000000000..66c2e4c38
--- /dev/null
+++ b/libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.spec.tsx
@@ -0,0 +1,36 @@
+// import Button from '@mui/material/Button';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { MockTheme, MockThemeGraphPolaris } from './mockTheme';
+
+describe('<MockTheme GraphPolarisThemeProvider>', () => {
+ // TODO: This test should be implemented and running, but I get import issues in the mono-repo with jest (MIB)
+ // https://emotion.sh/docs/@emotion/jest
+
+
+ it('renders without crashing', () => {
+ });
+ // it('passes smoke test no config of mocktheme', () => {
+ // const div = document.createElement('div');
+
+ // ReactDOM.render(
+ // <MockTheme>
+ // <Button variant="text">Text</Button>
+ // </MockTheme>,
+ // div
+ // );
+ // });
+
+
+
+ // it('passes smoke test config GraphPolaris', () => {
+ // const div = document.createElement('div');
+
+ // ReactDOM.render(
+ // <MockThemeGraphPolaris>
+ // <Button variant="text">Text</Button>
+ // </MockThemeGraphPolaris>,
+ // div
+ // );
+ // });
+});
diff --git a/libs/shared/data-access/theme/src/lib/mockTheme.tsx b/libs/shared/data-access/theme/src/lib/mockTheme.tsx
new file mode 100644
index 000000000..fccc611d7
--- /dev/null
+++ b/libs/shared/data-access/theme/src/lib/mockTheme.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+export function MockTheme({ children }: any) {
+ const theme = React.useMemo(
+ () =>
+ // Map our color palette config (stored in redux) to the mui 5 format
+ createTheme({}),
+ []
+ );
+
+ return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+
+export function MockThemeGraphPolaris({ children }: any) {
+ const theme = React.useMemo(
+ () =>
+ // Map our color palette config (stored in redux) to the mui 5 format
+ createTheme({}),
+ []
+ );
+
+ return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
diff --git a/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.stories.tsx b/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.stories.tsx
new file mode 100644
index 000000000..1ece90230
--- /dev/null
+++ b/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.stories.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import EntityRFPill from './entitypill';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import { GraphPolarisThemeProvider } from '@graphpolaris/shared/data-access/theme';
+
+import {
+ colorPaletteConfigSlice,
+ querybuilderSlice,
+ schemaSlice,
+} from '@graphpolaris/shared/data-access/store';
+
+// import createTheme from '@mui/system/createTheme';
+// import { ThemeProvider } from '@mui/material';
+// const theme = createTheme({});
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Components/Pills/EntityRFPill',
+ component: EntityRFPill,
+ decorators: [
+ (story) => (
+ <Provider store={Mockstore}>
+ <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
+ </Provider>
+ ),
+ ],
+} as ComponentMeta<typeof EntityRFPill>;
+
+// A super-simple mock of a redux store
+const Mockstore = configureStore({
+ reducer: {
+ colorPaletteConfig: colorPaletteConfigSlice.reducer,
+ querybuilder: querybuilderSlice.reducer,
+ // schema: schemaSlice.reducer,
+ },
+});
+
+const Template: ComponentStory<typeof EntityRFPill> = (args) => (
+ <EntityRFPill {...args} />
+);
+// const Template = (args: any) => <EntityRFPill {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+ data: {
+ name: 'TestEntity',
+ },
+};
+
+// Default.decorators = [
+// (story) => (
+// <Provider store={Mockstore}>
+// <GraphPolarisThemeProvider>{story()}</GraphPolarisThemeProvider>
+// </Provider>
+// ),
+// ];
diff --git a/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.tsx b/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.tsx
index c6ce0d86f..29bd77d04 100644
--- a/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.tsx
+++ b/libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.tsx
@@ -1,27 +1,27 @@
-import { handles } from '@graphpolaris/querybuilder/usecases';
+// import { handles } from '@graphpolaris/querybuilder/usecases';
import { useTheme } from '@mui/material';
import React, { useEffect } from 'react';
import { FlowElement, Handle, Position } from 'react-flow-renderer';
import styles from './entitypill.module.scss';
import cn from 'classnames';
-// export const Handless = {
-// entity: {
-// attributes: 'attributesHandle',
-// relations: 'relationsHandle',
-// },
-// };
+export const Handless = {
+ entity: {
+ attributes: 'attributesHandle',
+ relations: 'relationsHandle',
+ },
+};
-// /** Links need handles to what they are connected to (and which side) */
-// export enum Handles {
-// RelationLeft = 'leftEntityHandle', //target
-// RelationRight = 'rightEntityHandle', //target
-// ToAttributeHandle = 'attributesHandle', //target
-// ToRelation = 'relationsHandle', //source
-// Attribute = 'AttributeHandle', //source
-// ReceiveFunction = 'receiveFunctionHandle', //target
-// FunctionBase = 'functionHandle_', // + name from FunctionTypes args //source
-// }
+/** Links need handles to what they are connected to (and which side) */
+export enum Handles {
+ RelationLeft = 'leftEntityHandle', //target
+ RelationRight = 'rightEntityHandle', //target
+ ToAttributeHandle = 'attributesHandle', //target
+ ToRelation = 'relationsHandle', //source
+ Attribute = 'AttributeHandle', //source
+ ReceiveFunction = 'receiveFunctionHandle', //target
+ FunctionBase = 'functionHandle_', // + name from FunctionTypes args //source
+}
/**
* Component to render an entity flow element
@@ -41,22 +41,30 @@ export const EntityRFPill = React.memo(({ data }: { data: any }) => {
color: theme.palette.queryBuilder.text,
}}
>
- <Handle
+ {/* <Handle
id={handles.entity.relation}
type="source"
position={Position.Bottom}
className={styles['handleLeft']}
style={data?.isConnected ? { backgroundColor: '#2e2e2e' } : {}}
- />
+ /> */}
{/* <Handle
- id={Handles.ToAttributeHandle}
- type="target"
- position={Position.Bottom}
- className={styles.handleBottom}
+ id={Handles.ToAttributeHandle}
+ type="target"
+ position={Position.Bottom}
+ className={styles.handleBottom}
/> */}
+ <Handle
+ type="target"
+ position={Position.Left}
+ isValidConnection={(connection) => connection.source === 'some-id'}
+ onConnect={(params) => console.log('handle onConnect', params)}
+ style={{ background: '#fff' }}
+ />
<div className={styles['contentWrapper']}>
<span title={data.name}>{data.name}</span>
</div>
+ FooBar
</div>
);
});
diff --git a/libs/shared/ui/pills/src/customFlowPills/entitypill/test.stories.tsx b/libs/shared/ui/pills/src/customFlowPills/entitypill/test.stories.tsx
new file mode 100644
index 000000000..cff92b119
--- /dev/null
+++ b/libs/shared/ui/pills/src/customFlowPills/entitypill/test.stories.tsx
@@ -0,0 +1,19 @@
+// Button.stories.ts|tsx
+
+import React from 'react';
+
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Button from '@mui/material/Button';
+
+export default {
+ /* 👇 The title prop is optional.
+ * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
+ title: 'Shared Component Loading Works',
+ component: Button,
+} as ComponentMeta<typeof Button>;
+
+export const Primary: ComponentStory<typeof Button> = () => (
+ <Button>Component Loading works</Button>
+);
--
GitLab