feat(playground): make it possible to render own properties panel

Closes #286

Author: Niklas Kiefer

packages/form-js-playground/package-lock.json

@@ -41,6 +41,7 @@
     "@codemirror/basic-setup": "^0.18.2",
     "@codemirror/lang-json": "^0.18.0",
     "@codemirror/state": "^0.18.7",
+    "classnames": "^2.3.1",
     "downloadjs": "^1.4.7",
     "file-drops": "^0.4.0",
     "mitt": "^3.0.0",
@@ -51,6 +52,7 @@
   ],
   "devDependencies": {
     "css-loader": "^6.3.0",
+    "min-dom": "^3.2.1",
     "rollup-plugin-css-only": "^3.1.0",
     "style-loader": "^3.3.0"
   }

packages/form-js-playground/package.json

@@ -52,7 +52,8 @@ export default [
       'preact/jsx-runtime',
       '@codemirror/basic-setup',
       '@codemirror/state',
-      '@codemirror/lang-json'
+      '@codemirror/lang-json',
+      'classnames'
     ]
   },
   {

packages/form-js-playground/rollup.config.js

@@ -6,13 +6,25 @@ import mitt from 'mitt';
 
 import { PlaygroundRoot } from './components/PlaygroundRoot';
 
-
+/**
+ * @typedef { {
+ *  container: Element,
+ *  schema: any,
+ *  data: any,
+ *  propertiesPanel?: { inline: Boolean }
+ * } } FormPlaygroundOptions
+ */
+
+/**
+ * @param {FormPlaygroundOptions} options
+ */
 export default function Playground(options) {
 
   const {
     container: parent,
     schema,
-    data
+    data,
+    propertiesPanel = {}
   } = options;
 
   const emitter = mitt();
@@ -45,6 +57,7 @@ export default function Playground(options) {
     <PlaygroundRoot
       schema={ schema }
       data={ data }
+      propertiesPanel={ propertiesPanel }
       onStateChanged={ (_state) => state = _state }
       onInit={ _ref => ref = _ref }
     />,

packages/form-js-playground/src/Playground.js

@@ -8,6 +8,8 @@
   --color-palette-container-background: var(--color-grey-225-10-97);
   --color-palette-container-border: var(--color-grey-225-10-80);
 
+  --color-properties-container-background: var(--color-white);
+
   --color-text: var(--color-grey-225-10-15);
 
   --font-family: 'IBM Plex Sans', sans-serif;
@@ -28,10 +30,14 @@
   height: 100%;
 
   display: grid;
-  grid-template-columns: 65% 35%;
+  grid-template-columns: 50% 50%;
   grid-template-rows: 70% 30%;
 }
 
+.fjs-pgl-inline-panel .fjs-pgl-main {
+  grid-template-columns: 65% 35%;
+}
+
 /**
  * Palette
  */
@@ -59,6 +65,22 @@
   margin: 0;
 }
 
+/**
+ * Properties Panel
+ */
+.fjs-pgl-properties-container {
+  position: relative;
+  display: flex;
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--color-properties-container-background);
+  --properties-panel-width: 200px;
+}
+
+.fjs-pgl-properties-container .bio-properties-panel {
+  --font-family: var(--font-family);
+}
+
 /**
  * Section
  */

packages/form-js-playground/src/components/PlaygroundRoot.css

@@ -2,6 +2,8 @@ import { useRef, useEffect, useState, useCallback } from 'preact/hooks';
 
 import download from 'downloadjs';
 
+import classNames from 'classnames';
+
 import {
   Form,
   FormEditor
@@ -18,11 +20,20 @@ import './PlaygroundRoot.css';
 
 export function PlaygroundRoot(props) {
 
+  const {
+    propertiesPanel = {}
+  } = props;
+
+  const {
+    inline: inlinePropertiesPanel = true
+  } = propertiesPanel;
+
   const paletteContainerRef = useRef();
   const editorContainerRef = useRef();
   const formContainerRef = useRef();
   const dataContainerRef = useRef();
   const resultContainerRef = useRef();
+  const propertiesPanelRef = useRef();
 
   const formEditorRef = useRef();
   const formRef = useRef();
@@ -66,6 +77,9 @@ export function PlaygroundRoot(props) {
       },
       palette: {
         parent: paletteContainerRef.current
+      },
+      propertiesPanel: {
+        parent: !inlinePropertiesPanel && propertiesPanelRef.current
       }
     });
 
@@ -141,7 +155,10 @@ export function PlaygroundRoot(props) {
   }, []);
 
   return (
-    <div class="fjs-container fjs-pgl-root">
+    <div class={ classNames(
+      'fjs-container',
+      'fjs-pgl-root',
+      { 'fjs-pgl-inline-panel': inlinePropertiesPanel }) }>
       <div class="fjs-pgl-modals">
         { showEmbed ? <EmbedModal schema={ schema } data={ data } onClose={ hideEmbedModal } /> : null }
       </div>
@@ -174,6 +191,7 @@ export function PlaygroundRoot(props) {
           <div ref={ resultContainerRef } class="fjs-pgl-text-container"></div>
         </Section>
       </div>
+      <div class="fjs-pgl-properties-container" ref={ propertiesPanelRef } />
     </div>
   );
 }