Feature/as library usage

.github/workflows/release.yml

@@ -0,0 +1,31 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "v[0-9]+.[0-9]+.[0-9]+*"
+
+jobs:
+  release_core_on_npm:
+    name: "Build and release core"
+    runs-on: "ubuntu-latest"
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: yarn --silent
+
+      - name: Bundle styles and fonts
+        run: |
+          yarn prod
+          mkdir lib
+          cp -r dist/css lib/styles
+          cp -r dist/fonts lib/fonts
+
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          access: 'public'

.gitignore

@@ -67,3 +67,4 @@ jspm_packages/
 /fonts
 /dist
 /docs
+/lib

configs/tailwind.config.js

@@ -1,5 +1,3 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-
 module.exports = {
   purge: [
     './src/components/**/*.tsx',
@@ -9,24 +7,14 @@ module.exports = {
     './src/lib/styles/**/*.ts',
     './public/**/*.html',
   ],
-  important: true,
   darkMode: false, // or 'media' or 'class'
   theme: {
-    fontFamily: {
-      sans: [
-        'IBM Plex Sans',
-        ...defaultTheme.fontFamily.sans,
-      ],
-      serif: [
-        'IBM Plex Serif',
-        ...defaultTheme.fontFamily.serif,
-      ],
-      mono: [
-        'IBM Plex Mono',
-        ...defaultTheme.fontFamily.mono,
-      ],
-    },
     extend: {
+      fontFamily: {
+        sans: ['IBM Plex Sans'],
+        serif: ['IBM Plex Serif'],
+        mono: ['IBM Plex Mono'],
+      },
       colors: {
         malibu: {
           500: '#61dafb',

package.json

@@ -2,7 +2,10 @@
   "name": "@data-story-org/gui",
   "description": "![tests](https://github.com/ajthinking/data-story/workflows/tests/badge.svg) ![version](https://img.shields.io/packagist/v/ajthinking/data-story?color=blue) ![proofofconcept](https://img.shields.io/badge/proof%20of%20concept-gold)",
   "version": "0.0.19",
-  "main": "src/index.ts",
+  "main": "lib/cjs/src/index.js",
+  "module": "lib/esm/src/index.js",
+  "types": "lib/types/src/index.d.ts",
+  "files": ["lib/**/*"],
   "directories": {
     "doc": "docs",
     "test": "tests"
@@ -25,7 +28,7 @@
   "homepage": "https://github.com/ajthinking/data-story#readme",
   "scripts": {
     "format": "prettier --write \"./**/*.(js|ts|jsx|tsx|json|md|css|less|scss)\" --ignore-path ./configs/.prettierignore",
-    "lint": "eslint src --ext .js,.ts -c ./configs/.eslintrc",
+    "lint": "eslint src --ext .js,.ts,.tsx -c ./configs/.eslintrc",
     "lint:fix": "npm run lint -- --fix",
     "lint:quiet:fix": "npm run lint:fix -- --quiet",
     "dev": "npm run development",
@@ -37,15 +40,16 @@
     "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js",
     "test": "jest --testPathIgnorePatterns=.*e2e.test.* -c tests/jest.config.js",
     "test:e2e": "jest --passWithNoTests --detectOpenHandles -c tests/jest.e2e.config.js",
-    "github-pages:deploy": "gh-pages -d public"
+    "github-pages:deploy": "gh-pages -d public",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+    "build:esm": "tsc --outDir lib/esm",
+    "build": "npm run build:esm && npm run build:cjs",
+    "prepublishOnly": "npm test && && npm test:e2e && npm run lint:quiet:fix && npm run build"
   },
   "dependencies": {
     "@data-story-org/core": "latest",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@fontsource/ibm-plex-mono": "^4.5.1",
-    "@fontsource/ibm-plex-sans": "^4.5.1",
-    "@fontsource/ibm-plex-serif": "^4.5.0",
     "@projectstorm/react-diagrams": "^6.6.1",
     "axios": "^0.21",
     "dagre": "^0.8.5",
@@ -56,27 +60,28 @@
     "mobx-react-lite": "^3.2.0",
     "pathfinding": "^0.4.18",
     "paths-js": "^0.4.11",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-fade-in": "^2.0.1",
     "react-hotkeys-hook": "^3.4.0",
     "react-modal": "^3.12.1",
     "react-spinners": "^0.11.0",
     "react-syntax-highlighter": "^15.4.4",
     "react-toastify": "^7.0.4",
-    "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^2.2.15",
-    "typescript": "^4.2.2"
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "peerDependencies": {
+    "@data-story-org/core": "latest",
+    "mobx": "^6.0.4",
+    "mobx-react-lite": "^3.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "laravel-mix": "^6.0.28",
-    "cross-env": "^7.0",
-    "babel-loader": "^8.2.2",
-    "ts-loader": "^9.2.5",
-    "autoprefixer": "^10.0.2",
-    "resolve-url-loader": "^4.0.0",
-    "sass": "^1.38.1",
-    "sass-loader": "^12.1.0",
+    "typescript": "^4.2.2",
+    "tailwindcss": "^2.2.15",
+    "@fontsource/ibm-plex-mono": "^4.5.1",
+    "@fontsource/ibm-plex-sans": "^4.5.1",
+    "@fontsource/ibm-plex-serif": "^4.5.0",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@babel/plugin-proposal-decorators": "^7.12.1",
     "@babel/plugin-transform-modules-commonjs": "^7.13.8",
     "@babel/plugin-transform-runtime": "^7.15.0",
@@ -92,20 +97,31 @@
     "@types/node": "^16.6.1",
     "@types/puppeteer": "^5.4.4",
     "@types/react": "^17.0.17",
+    "@types/react-dom": "^17.0.9",
     "@types/react-syntax-highlighter": "^13.5.2",
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
+    "autoprefixer": "^10.0.2",
     "babel-jest": "^27.0.6",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0",
     "eslint": "^7.32.0",
     "eslint-plugin-jest": "^24.3.6",
     "eslint-plugin-react": "^7.24.0",
     "gh-pages": "^3.2.3",
     "jest": "^27.0.6",
     "jest-cli": "^27.0.6",
     "jest-puppeteer": "^5.0.4",
+    "laravel-mix": "^6.0.28",
     "prettier": "^2.4.1",
     "puppeteer": "^10.2.0",
-    "ts-jest": "^27.0.4"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.38.1",
+    "sass-loader": "^12.1.0",
+    "ts-jest": "^27.0.4",
+    "ts-loader": "^9.2.5"
   },
   "prettier": {
     "printWidth": 60,

public/index.html

@@ -4,22 +4,19 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>DataStory</title>
-				<link rel="icon" type="image/png" href="./favicon-32x32.png">
+        <link rel="icon" type="image/png" href="./favicon-32x32.png">
         <link href="css/app.css" rel="stylesheet">
     </head>
     <body class="bg-gray-700">
         <script>
-						let params = (new URL(window.location)).searchParams
+            let params = (new URL(window.location)).searchParams
 
             window.config = {
-                appName: 'DataStory',
-                appDesc: 'proof of concept',
-								client: params.get('client') ?? 'LocalClient',
-								server: params.get('server'),
+                client: params.get('client') ?? 'LocalClient',
+                server: params.get('server'),
             }
         </script>
         <div id="app"></div>
-        <script type="text/javascript" src="js/index.js"></script>
-        <script src="https://kit.fontawesome.com/f9f7777401.js" crossorigin="anonymous"></script>
+        <script type="text/javascript" src="js/render.js"></script>
     </body>
 </html>

public/js/index.js.LICENSE.txt → public/js/render.js.LICENSE.txt

@@ -25,10 +25,12 @@ object-assign
 /*!
  * The buffer module from node.js, for the browser.
  *
- * @author   Feross Aboukhadijeh <https://feross.org>
+ * @author   Feross Aboukhadijeh <http://feross.org>
  * @license  MIT
  */
 
+/*! (c) 2020 Andrea Giammarchi */
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 

readme.md

@@ -10,6 +10,26 @@ _Visual programming | Process design | Workflows | ETL | Data manipulation_
 
 [Demo](https://data-story-org.github.io/gui)
 
+## Installation and usage in react app
+
+```sh
+yarn add @data-story-org/gui
+```
+
+```js
+import { DataStory } from '@data-story-org/gui';
+import '@data-story-org/gui/lib/styles/app.css';
+
+const someComponent = () => {
+  return <DataStory />;
+};
+```
+
+> :warning: **Using React.StrictMode with data-story-org/gui in development mode will provoke a lot of useless errors**
+> see [projectstorm/react-diagrams#598](https://github.com/projectstorm/react-diagrams/issues/598#issuecomment-635924991)
+
+> as temporally fix you can either disable React.StrictMode or enable it only for production builds
+
 ## Development
 
 See [contributing](contributing.md) for setuping seamless development environment for core and gui.

src/components/controls/AddNodeControl.tsx

@@ -23,10 +23,6 @@ const customStyles = {
   },
 };
 
-// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
-if (process.env.NODE_ENV !== 'test')
-  ReactModal.setAppElement('#app');
-
 interface Props {
   store: Store;
 }

src/components/controls/OpenControl.tsx

@@ -43,6 +43,7 @@ export const OpenControl: FC<Props> = observer(
           isOpen={isOpen}
           onRequestClose={closeModal}
           style={modalStyle}
+          closeTimeoutMS={250}
         >
           <OpenModal
             store={store}

src/components/controls/SaveControl.tsx

@@ -42,6 +42,7 @@ export const SaveControl: FC<Props> = observer(
           isOpen={isOpen}
           onRequestClose={closeModal}
           style={modalStyle}
+          closeTimeoutMS={250}
         >
           <SaveModal
             store={store}

src/components/fields/BaseFieldHeader.tsx

@@ -17,7 +17,7 @@ export const BaseFieldHeader: FC<Props> = ({
     <span className={baseFieldTitleStyle}>
       <div className="">
         <span className="text-indigo-500">{name}</span>
-        <span className="italic font-semibold">
+        <span className="italic font-semibold text-gray-900">
           {description ? ` (${description})` : ''}
         </span>
       </div>

src/components/pages/Workbench/Diagram.tsx

@@ -2,7 +2,7 @@ import React, { FC, useRef } from 'react';
 import { CanvasWidget } from '@projectstorm/react-canvas-core';
 import { observer } from 'mobx-react-lite';
 import { Store } from '../../../lib/store';
-const style = 'fullsize bg-gray-600';
+const style = 'fullsize bg-gray-600 flex-1';
 
 interface Props {
   store: Store;
@@ -13,7 +13,7 @@ export const Diagram: FC<Props> = observer(({ store }) => {
   store.diagram.refresh;
 
   return (
-    <div id="app-diagram">
+    <div id="app-diagram" className="flex">
       <CanvasWidget
         ref={diagramRef}
         engine={store.diagram.engine}

src/components/pages/index.ts

@@ -6,7 +6,7 @@ import { Tokens } from './Tokens';
 import { Workbench } from './Workbench';
 import { Page } from '../../lib/types';
 
-export const pages = {
+const pages = {
   Inspector,
   DiagramJson,
   Log,

src/components/widgets/DataStory/StoryActions.tsx

@@ -28,7 +28,7 @@ export const DataStoryWidgetActions: FC<Props> = observer(
               onEdit();
             }}
           >
-            <i className="fa fa-pencil-square"></i>
+            <i className="fas fa-pen-square"></i>
           </span>
 
           <span

src/index.tsx

@@ -1,11 +1,22 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { FC } from 'react';
 import { App } from './sections/App';
 import { RootStore, StoreProvider } from './lib/store/';
+import ReactModal from 'react-modal';
 
-ReactDOM.render(
-  <StoreProvider store={RootStore}>
-    <App />
-  </StoreProvider>,
-  document.getElementById('app'),
-);
+interface DataStoryConfig {
+  appElement?: string | HTMLElement;
+}
+
+export const DataStory: FC<DataStoryConfig> = ({
+  appElement = 'body',
+}) => {
+  // Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
+  if (process.env.NODE_ENV !== 'test')
+    ReactModal.setAppElement(appElement);
+
+  return (
+    <StoreProvider store={RootStore}>
+      <App />
+    </StoreProvider>
+  );
+};

src/lib/diagram/models/NodeModel.ts

@@ -1,7 +1,10 @@
 import { NodeModel as DefaultNodeModel } from '@projectstorm/react-diagrams';
 import { BasePositionModelOptions } from '@projectstorm/react-canvas-core';
 import { PortModel } from './PortModel';
-import { UID, pickBy } from '@data-story-org/core/utils';
+import {
+  UID,
+  pickBy,
+} from '@data-story-org/core/lib/src/utils';
 import { NodeParameter } from '@data-story-org/core';
 import { SerializedNodeModel } from '../../types';
 import { ReactNode } from 'react';

src/lib/store/RootStore.ts

@@ -8,14 +8,8 @@ import {
   SerializedReactDiagram,
 } from '../types';
 import { DiagramEngine } from '@projectstorm/react-diagrams';
-import {
-  DiagramModel,
-  NodeModel,
-} from '../diagram';
-import {
-  Story,
-  demos,
-} from '@data-story-org/core';
+import { DiagramModel, NodeModel } from '../diagram';
+import { Story, demos } from '@data-story-org/core';
 
 interface Metadata {
   running: boolean;