feat: added basic panel structure

.storybook/main.js

+module.exports = {
+  stories: [],
+  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;
+  // },
+};

.storybook/tsconfig.json

+{
+  "extends": "../tsconfig.base.json",
+  "exclude": [
+    "../**/*.spec.js",
+    "../**/*.test.js",
+    "../**/*.spec.ts",
+    "../**/*.test.ts",
+    "../**/*.spec.tsx",
+    "../**/*.test.tsx",
+    "../**/*.spec.jsx",
+    "../**/*.test.jsx"
+  ],
+  "include": ["../**/*"]
+}

apps/graphpolaris-e2e/src/integration/app/app.spec.ts

+describe('graphpolaris: App component', () => {
+  beforeEach(() => cy.visit('/iframe.html?id=app--primary'));
+    
+    it('should render the component', () => {
+      cy.get('h1').should('contain', 'Welcome to App!');
+    });
+});

apps/graphpolaris/.storybook/main.js

+const rootMain = require('../../../.storybook/main');
+
+module.exports = {
+  ...rootMain,
+
+  core: {...rootMain.core, builder: 'webpack5' },
+
+  stories: [
+    ...rootMain.stories,
+    '../src/app/**/*.stories.mdx',
+    '../src/app/**/*.stories.@(js|jsx|ts|tsx)',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],
+  webpackFinal: async(config, { configType }) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.js
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType });
+    }
+
+    // add your own webpack tweaks if needed
+
+    return config;
+  },
+};
\ No newline at end of file

apps/graphpolaris/.storybook/tsconfig.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": ""
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/styled-jsx.d.ts",
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.spec.js",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": ["../src/**/*", "*.js"]
+}

apps/graphpolaris/project.json

@@ -73,6 +73,37 @@
       "options": {
         "commitMessageFormat": "chore(${projectName}): release version ${version}"
       }
+    },
+    "storybook": {
+      "executor": "@nrwl/storybook:storybook",
+      "options": {
+        "uiFramework": "@storybook/react",
+        "port": 4400,
+        "config": {
+          "configFolder": "apps/graphpolaris/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nrwl/storybook:build",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "uiFramework": "@storybook/react",
+        "outputPath": "dist/storybook/graphpolaris",
+        "config": {
+          "configFolder": "apps/graphpolaris/.storybook"
+        }
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
     }
   },
   "tags": []

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

+import { Story, Meta } from '@storybook/react';
+import { App } from './app';
+
+export default {
+  component: App,
+  title: 'App',
+} as Meta;
+
+const Template: Story = (args) => <App {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {};

apps/graphpolaris/src/app/app.tsx

@@ -5,9 +5,9 @@ import {
   useGraphQueryResult,
 } from '@graphpolaris/shared/data-access/store';
 import React, { useEffect } from 'react';
-import styles from './app.module.scss';
 import ReactJSONView from 'react-json-view';
-import NxWelcome from './nx-welcome';
+import GridLayout from 'react-grid-layout';
+import TestComponent from '../components/TestComponent';
 
 const RawJSONVis = React.memo(() => {
   const graphQueryResult = useGraphQueryResult();
@@ -45,35 +45,71 @@ const RawJSONVis = React.memo(() => {
 export function App() {
   const dispatch = useAppDispatch();
 
+  // return (
+  //   <>
+  //     <div>
+  //       <button
+  //         onClick={() =>
+  //           dispatch(
+  //             assignNewGraphQueryResult({
+  //               nodes: [
+  //                 { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
+  //               ],
+  //               links: [],
+  //             })
+  //           )
+  //         }
+  //       >
+  //         Load in mock result
+  //       </button>
+  //       <button
+  //         onClick={() =>
+  //           dispatch(assignNewGraphQueryResult({ nodes: [], links: [] }))
+  //         }
+  //       >
+  //         Remove mock result
+  //       </button>
+  //     </div>
+  //     <RawJSONVis />
+  //     <div />
+  //   </>
+  // );
+
   return (
-    <>
-      <div>
-        <button
-          onClick={() =>
-            dispatch(
-              assignNewGraphQueryResult({
-                nodes: [
-                  { id: 'agent/007', attributes: { name: 'Daniel Craig' } },
-                ],
-                links: [],
-              })
-            )
-          }
-        >
-          Load in mock result
-        </button>
-        <button
-          onClick={() =>
-            dispatch(assignNewGraphQueryResult({ nodes: [], links: [] }))
-          }
-        >
-          Remove mock result
-        </button>
+    <GridLayout
+      className="layout"
+      cols={10}
+      rowHeight={30}
+      width={window.innerWidth}
+    >
+      <div
+        key="schema-panel"
+        data-grid={{ x: 0, y: 0, w: 3, h: 30, maxW: 5, isDraggable: false }}
+      >
+        <TestComponent content="Schema Panel" color="red"></TestComponent>
+      </div>
+      <div
+        key="query-panel"
+        data-grid={{ x: 3, y: 20, w: 5, h: 10, maxH: 20, isDraggable: false }}
+      >
+        <TestComponent content="Query Panel" color="blue"></TestComponent>
+      </div>
+      <div
+        key="visualisation-panel"
+        data-grid={{ x: 3, y: 0, w: 7, h: 20, isDraggable: false }}
+      >
+        <TestComponent
+          content="Visualisation Panel"
+          color="green"
+        ></TestComponent>
+      </div>
+      <div
+        key="history-panel"
+        data-grid={{ x: 8, y: 20, w: 2, h: 10, isDraggable: false }}
+      >
+        <TestComponent content="History Panel" color="purple"></TestComponent>
       </div>
-      <RawJSONVis />
-      <NxWelcome title="graphpolaris" />
-      <div />
-    </>
+    </GridLayout>
   );
 }
 

apps/graphpolaris/src/components/TestComponent.stories.tsx

+import React from 'react';
+import TestComponent from './TestComponent';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+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: 'TestComponent',
+  component: TestComponent,
+  decorators: [(story) => <div style={{ padding: '3rem' }}>{story()}</div>],
+} as ComponentMeta<typeof TestComponent>;
+
+const Template: ComponentStory<typeof TestComponent> = (args) => (
+  <TestComponent {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  content: 'Testing header #1',
+};
+
+export const Secondary = Template.bind({});
+
+Secondary.args = {
+  content: 'Testing header number twoooo',
+};

apps/graphpolaris/src/components/TestComponent.tsx

+import styled from 'styled-components';
+interface Props {
+  content: string;
+  color: string;
+}
+
+const Wrapper = styled.div<{ color: string }>`
+  background-color: ${(props) => props.color};
+  font: 'Arial';
+
+  height: 100%;
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+`;
+
+const Content = styled.div`
+  padding: 1em;
+  background-color: white;
+  border-radius: 8px;
+`;
+
+const TestComponent = (props: Props) => {
+  return (
+    <Wrapper color={props.color}>
+      <Content>
+        <h1>{props.content}</h1>
+      </Content>
+    </Wrapper>
+  );
+};
+
+export default TestComponent;

apps/graphpolaris/src/index.html

 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>Graphpolaris</title>
-    <base href="/" />
-
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Graphpolaris</title>
+  <base href="/" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
\ No newline at end of file

apps/graphpolaris/src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+
+.react-grid-layout {
+  position: relative;
+  transition: height 200ms ease;
+}
+
+.react-grid-item {
+  transition: all 200ms ease;
+  transition-property: left, top;
+}
+
+.react-grid-item.cssTransforms {
+  transition-property: transform;
+}
+
+.react-grid-item.resizing {
+  z-index: 1;
+  will-change: width, height;
+}
+
+.react-grid-item.react-draggable-dragging {
+  transition: none;
+  z-index: 3;
+  will-change: transform;
+}
+
+.react-grid-item.react-grid-placeholder {
+  background: red;
+  opacity: 0.2;
+  transition-duration: 100ms;
+  z-index: 2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.react-grid-item>.react-resizable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  bottom: 0;
+  right: 0;
+  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+  background-position: bottom right;
+  padding: 0 3px 3px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: se-resize;
+}
\ No newline at end of file

apps/graphpolaris/tsconfig.app.json

@@ -16,7 +16,11 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx"
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

apps/graphpolaris/tsconfig.json

@@ -20,6 +20,9 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./.storybook/tsconfig.json"
     }
   ]
 }

nx.json

@@ -17,7 +17,13 @@
     "default": {
       "runner": "@nrwl/workspace/tasks-runners/default",
       "options": {
-        "cacheableOperations": ["build", "lint", "test", "e2e"]
+        "cacheableOperations": [
+          "build",
+          "lint",
+          "test",
+          "e2e",
+          "build-storybook"
+        ]
       }
     }
   },

package.json

@@ -11,15 +11,21 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.7.1",
+    "@types/react-grid-layout": "^1.3.0",
+    "@types/styled-components": "^5.1.21",
     "core-js": "^3.6.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-grid-layout": "^1.3.3",
     "react-json-view": "^1.21.3",
     "react-redux": "^7.2.6",
     "regenerator-runtime": "0.13.7",
+    "styled-components": "^5.3.3",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
+    "@babel/core": "7.12.13",
+    "@babel/preset-typescript": "7.12.13",
     "@commitlint/cli": "^16.0.1",
     "@commitlint/config-angular": "^16.0.0",
     "@jscutlery/semver": "^2.18.0",
@@ -29,9 +35,15 @@
     "@nrwl/jest": "13.7.1",
     "@nrwl/linter": "13.7.1",
     "@nrwl/react": "13.7.1",
+    "@nrwl/storybook": "^13.7.3",
     "@nrwl/tao": "13.7.1",
     "@nrwl/web": "13.7.1",
     "@nrwl/workspace": "13.7.1",
+    "@storybook/addon-essentials": "~6.4.12",
+    "@storybook/builder-webpack5": "~6.4.12",
+    "@storybook/manager-webpack5": "~6.4.12",
+    "@storybook/react": "~6.4.12",
+    "@svgr/webpack": "^5.4.0",
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@types/jest": "27.0.2",
@@ -41,6 +53,7 @@
     "@typescript-eslint/eslint-plugin": "~5.10.0",
     "@typescript-eslint/parser": "~5.10.0",
     "babel-jest": "27.2.3",
+    "babel-loader": "8.1.0",
     "cypress": "^9.1.0",
     "eslint": "~8.7.0",
     "eslint-config-prettier": "8.1.0",
@@ -54,6 +67,7 @@
     "prettier": "^2.5.1",
     "react-test-renderer": "17.0.2",
     "ts-jest": "27.0.5",
-    "typescript": "~4.5.2"
+    "typescript": "~4.5.2",
+    "url-loader": "^3.0.0"
   }
 }