fix: adds and structures storybook tests for visualizations and pills

Adds further tests and improves the structure in the storybook sidebar.

.storybook/main.js

 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========================');
+}

apps/web-graphpolaris/.storybook/tsconfig.json

@@ -15,6 +15,4 @@
     "../**/*.spec.tsx",
     "../**/*.spec.jsx"
   ]
-  // ,
-  // "include": ["../src/**/*", "*.js"]
 }

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) => (

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
+};

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>;

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>;

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) => (

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) => (

libs/shared/data-access/theme/src/lib/graphPolarisThemeProvider.spec.tsx

+// 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
+  //   );
+  // });
+});

libs/shared/data-access/theme/src/lib/mockTheme.tsx

+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>;
+}

libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.stories.tsx

+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>
+//   ),
+// ];

libs/shared/ui/pills/src/customFlowPills/entitypill/entitypill.tsx

-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>
   );
 });

libs/shared/ui/pills/src/customFlowPills/entitypill/test.stories.tsx

+// 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>
+);