@bpmn-io/form-js-playground 0.7.2 → 0.8.0

package/package.json

@@ -1,13 +1,17 @@
 {
   "name": "@bpmn-io/form-js-playground",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "A form-js playground",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs"
     },
-    "./dist/assets/form-js-playground.css": "./dist/assets/form-js-playground.css"
+    "./dist/assets/form-js-playground.css": "./dist/assets/form-js-playground.css",
+    "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
@@ -15,11 +19,17 @@
   "main": "dist/index.cjs",
   "module": "dist/index.es.js",
   "umd:main": "dist/form-playground.umd.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
-    "all": "run-s test build",
-    "build": "rollup -c",
+    "all": "run-s lint test build",
+    "build": "run-p bundle generate-types",
+    "bundle": "rollup -c --failAfterWarnings",
+    "bundle:watch": "rollup -c -w",
     "start": "SINGLE_START=basic npm run dev",
     "dev": "npm test -- --auto-watch --no-single-run",
+    "lint": "run-s lint:*",
+    "lint:eslint": "eslint .",
+    "generate-types": "tsc --allowJs --skipLibCheck --declaration --emitDeclarationOnly --outDir dist/types src/index.js",
     "test": "karma start",
     "prepublishOnly": "npm run build"
   },
@@ -34,10 +44,13 @@
     "url": "https://github.com/bpmn-io"
   },
   "dependencies": {
-    "@bpmn-io/form-js": "^0.7.2",
-    "@codemirror/basic-setup": "^0.18.2",
-    "@codemirror/lang-json": "^0.18.0",
-    "@codemirror/state": "^0.18.7",
+    "@bpmn-io/form-js-editor": "^0.8.0",
+    "@bpmn-io/form-js-viewer": "^0.8.0",
+    "@codemirror/lang-json": "^6.0.0",
+    "@codemirror/state": "^6.1.1",
+    "@codemirror/view": "^6.2.0",
+    "classnames": "^2.3.1",
+    "codemirror": "^6.0.1",
     "downloadjs": "^1.4.7",
     "file-drops": "^0.4.0",
     "mitt": "^3.0.0",
@@ -48,8 +61,10 @@
   ],
   "devDependencies": {
     "css-loader": "^6.3.0",
+    "min-dash": "^3.8.1",
+    "min-dom": "^3.2.1",
     "rollup-plugin-css-only": "^3.1.0",
     "style-loader": "^3.3.0"
   },
-  "gitHead": "46631f707eea5537cbeb81aa05423fd9be71a3c0"
+  "gitHead": "0d9bff2b98491fb96944135e78106cbf807c580a"
 }

package/karma.conf.js

@@ -1,100 +0,0 @@
-const coverage = process.env.COVERAGE;
-
-// configures browsers to run test against
-// any of [ 'ChromeHeadless', 'Chrome', 'Firefox', 'IE', 'PhantomJS' ]
-const browsers = (process.env.TEST_BROWSERS || 'ChromeHeadless').split(',');
-
-const singleStart = process.env.SINGLE_START;
-
-// use puppeteer provided Chrome for testing
-process.env.CHROME_BIN = require('puppeteer').executablePath();
-
-const suite = coverage ? 'test/coverageBundle.js' : 'test/testBundle.js';
-
-module.exports = function(karma) {
-
-  const config = {
-
-    frameworks: [
-      'webpack',
-      'mocha',
-      'sinon-chai'
-    ],
-
-    files: [
-      suite
-    ],
-
-    preprocessors: {
-      [ suite ]: [ 'webpack', 'env' ]
-    },
-
-    reporters: [ 'progress' ].concat(coverage ? 'coverage' : []),
-
-    coverageReporter: {
-      reporters: [
-        { type: 'lcov', subdir: '.' }
-      ]
-    },
-
-    browsers,
-
-    singleRun: true,
-    autoWatch: false,
-
-    webpack: {
-      mode: 'development',
-      resolve: {
-        modules: [
-          'node_modules',
-          __dirname
-        ]
-      },
-      module: {
-        rules: [
-          {
-            test: /\.css$/i,
-            use: [
-              'style-loader',
-              'css-loader'
-            ]
-          },
-          {
-            test: /\.m?js$/,
-            exclude: /node_modules/,
-            use: {
-              loader: 'babel-loader',
-              options: {
-                plugins: [
-                  [ '@babel/plugin-transform-react-jsx', {
-                    'importSource': 'preact',
-                    'runtime': 'automatic'
-                  } ]
-                ]
-              }
-            }
-          }
-        ].concat(coverage ?
-          {
-            test: /\.js$/,
-            use: {
-              loader: 'istanbul-instrumenter-loader',
-              options: { esModules: true }
-            },
-            enforce: 'post',
-            include: /src\.*/,
-            exclude: /node_modules/
-          } : []
-        )
-      },
-      devtool: 'eval-source-map'
-    }
-  };
-
-  if (singleStart) {
-    config.browsers = [].concat(config.browsers, 'Debug');
-    config.envPreprocessor = [].concat(config.envPreprocessor || [], 'SINGLE_START');
-  }
-
-  karma.set(config);
-};

package/rollup.config.js

@@ -1,60 +0,0 @@
-import css from 'rollup-plugin-css-only';
-
-import babel from '@rollup/plugin-babel';
-
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-
-import pkg from './package.json';
-
-function pgl(plugins=[]) {
-  return [
-    babel({
-      babelHelpers: 'bundled',
-      plugins: [
-        [ '@babel/plugin-transform-react-jsx', {
-          'importSource': 'preact',
-          'runtime': 'automatic'
-        } ]
-      ]
-    }),
-    css({
-      output: 'assets/form-js-playground.css'
-    }),
-    ...plugins
-  ];
-
-}
-
-export default [
-  {
-    input: 'src/index.js',
-    output: [
-      {
-        sourcemap: true,
-        format: 'commonjs',
-        file: pkg.main
-      },
-      {
-        sourcemap: true,
-        format: 'esm',
-        file: pkg.module
-      }
-    ],
-    plugins: pgl()
-  },
-  {
-    input: 'src/index.js',
-    output: [
-      {
-        format: 'umd',
-        file: pkg['umd:main'],
-        name: 'FormPlayground'
-      }
-    ],
-    plugins: pgl([
-      resolve(),
-      commonjs()
-    ])
-  }
-];

package/src/FileDrop.css

@@ -1,33 +0,0 @@
-/**
- * file-drop.css
- */
-.drop-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  padding: 50px;
-
-  background: rgba(255, 255, 255, .9);
-
-  z-index: 1000;
-}
-
-.drop-overlay .box {
-  text-align: center;
-  border: dashed 4px #CCC;
-  height: 100%;
-  width: 100%;
-  display: table;
-}
-
-.drop-overlay .label {
-  font-size: 26px;
-  color: #888;
-  margin: auto;
-
-  display: table-cell;
-  vertical-align: middle;
-}

package/src/JSONView.js

@@ -1,78 +0,0 @@
-import mitt from 'mitt';
-
-import { basicSetup, EditorView } from '@codemirror/basic-setup';
-import { EditorState, Compartment } from '@codemirror/state';
-import { json } from '@codemirror/lang-json';
-
-
-export default function JSONEditor(options = {}) {
-
-  const emitter = mitt();
-
-  const {
-    readonly = false
-  } = options;
-
-  let language = new Compartment().of(json());
-  let tabSize = new Compartment().of(EditorState.tabSize.of(2));
-
-  function createState(doc, extensions=[]) {
-    return EditorState.create({
-      doc,
-      extensions: [
-        basicSetup,
-        language,
-        tabSize,
-        ...extensions
-      ]
-    });
-  }
-
-  function createView(readonly) {
-
-    const updateListener = EditorView.updateListener.of(update => {
-      if (update.docChanged) {
-        emitter.emit('changed', {
-          value: update.view.state.doc.toString()
-        });
-      }
-    });
-
-    const editable = EditorView.editable.of(!readonly);
-
-    const view = new EditorView({
-      state: createState('', [ updateListener, editable ])
-    });
-
-    view.setValue = function(value) {
-      this.setState(createState(value, [ updateListener, editable ]));
-    };
-
-    return view;
-  }
-
-  const view = createView(readonly);
-
-  this.setValue = function(value) {
-    view.setValue(value);
-  };
-
-  this.getValue = function() {
-    return view.state.doc.toString();
-  };
-
-  this.on = emitter.on;
-  this.off = emitter.off;
-
-  this.attachTo = function(container) {
-    container.appendChild(view.dom);
-  };
-
-  this.destroy = function() {
-    if (view.dom.parentNode) {
-      view.dom.parentNode.removeChild(view.dom);
-    }
-
-    view.destroy();
-  };
-}

package/src/Playground.css

@@ -1,158 +0,0 @@
-.fjs-pgl-root {
-  --color-light-gray: #EEE;
-  --color-default-gray: #AAA;
-  --color-dark-gray: #999;
-  --font-family: 'IBM Plex Sans', sans-serif;
-}
-
-.fjs-pgl-root {
-  width: 100%;
-  height: 100%;
-
-  position: relative;
-
-  font-family: var(--font-family);
-}
-
-.fjs-pgl-main {
-  width: 100%;
-  height: 100%;
-
-  display: grid;
-  grid-template-columns: 65% 35%;
-  grid-template-rows: 70% 30%;
-}
-
-/**
- * Section
- */
-.fjs-pgl-section {
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
-}
-
-.fjs-pgl-section:nth-child(1),
-.fjs-pgl-section:nth-child(2) {
-  border-bottom: double 3px var(--color-dark-gray);
-}
-
-.fjs-pgl-section:nth-child(1),
-.fjs-pgl-section:nth-child(3) {
-  border-right: double 3px var(--color-dark-gray);
-}
-
-.fjs-pgl-section .header {
-  background: var(--color-light-gray);
-  font-size: 1rem;
-  margin: 0;
-  line-height: 2em;
-  padding: 0 .5em;
-  border-bottom: solid 1px var(--color-default-gray);
-}
-
-.fjs-pgl-section .header-items {
-  float: right;
-}
-
-.fjs-pgl-section .body {
-  flex: 1;
-  overflow: hidden;
-}
-
-.fjs-pgl-modal {
-  z-index: 5;
-}
-
-.fjs-pgl-modal .fjs-pgl-modal-backdrop {
-  background: rgba(0 0 0 / .5);
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 5;
-}
-
-.fjs-pgl-modal-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  max-width: 100%;
-  width: 500px;
-  overflow-y: auto;
-  max-height: 80%;
-  transform: translate(-40%, -50%);
-  z-index: 5;
-
-  font-size: 14px;
-
-  padding: 20px;
-
-  background: white;
-}
-
-.fjs-pgl-modal-content textarea {
-  width: 100%;
-  height: 300px;
-  overflow: auto;
-}
-
-.fjs-pgl-modal-footer {
-  margin-top: 20px;
-
-  text-align: right;
-}
-
-.fjs-pgl-form-container {
-  height: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.fjs-pgl-text-container {
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border: none;
-  border-radius: 0;
-}
-
-.fjs-pgl-text-container > .cm-editor {
-  font-size: .9em;
-  height: 100%;
-}
-
-.fjs-pgl-form-container > .fjs-container {
-  overflow: auto;
-}
-
-.fjs-pgl-button {
-
-  color: var(--color-text);
-  background-color: #fff;
-
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 3px;
-  border-color: var(--color-lighter-gray);
-
-  font-family: var(--font-family);
-}
-
-.fjs-pgl-button-default {
-  padding: 7px 10px;
-}
-
-.fjs-pgl-button:hover {
-  background-color: var(--color-light-gray);
-}
-
-.fjs-pgl-button + .fjs-pgl-button {
-  margin-left: 1em;
-}
-
-.fjs-pgl-parent {
-  width: 100%;
-  height: 100%;
-}