diff --git a/.storybook/main.js b/.storybook/main.js
index 1492ac61f6fd000a73c9f0d5995e3cfa7074c06c..7ea37db6d3a850ab3f1d94223bb9dcefe37b664e 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 6751843669d1281b6e9ac7c10ce61128e57b663c..5a96b7a33c312784ae2c9381a0cdbfc439e83250 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 b406d60b5879ace0bfe90fa43b1a151fd83198f8..2de5deb8795590c12bdd020c65687f5d72e3e4b4 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 e274a158598f35c3a8f7de90134b67414f977eb6..01e070c34b6fc7f427ef2c558e738bab10d9d1b5 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 fb22505b674ca26e9acb79192fb100fa11c3c159..1d688b93798fbb0aeeb50d159547128c96204da1 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 795a79aba58096b8ee5beb94af287ec7fadaab51..866d8b316ab2fd9711e5c95db2ea64e6466baab5 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 3b10ca2d12d79022af4ed24afd69c60c3235f4e0..a5c7561eb920505ebf17db4217495016a707cf83 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 944011b532a61cef8159459e8922b79f496dbb5c..8ffade3001311a731d9041c5a154d5bd78d1232c 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 0000000000000000000000000000000000000000..66c2e4c384d4a5079ab54cda0772757e078a73a4
--- /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 0000000000000000000000000000000000000000..fccc611d7f80317eab5d898853171fb4e2404459
--- /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 0000000000000000000000000000000000000000..1ece902308aec3688acd3edd7086ffa89b87b821
--- /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 c6ce0d86fb4bb3ccab962cb1f63f22def34728fe..29bd77d043e8b63c00ce46588efbf910e121bdcf 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 0000000000000000000000000000000000000000..cff92b119bc74df2e4ba2b488f2e4705fe1b77e3
--- /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>
+);