feat(playground): support components to be rendered flexible

Closes #292

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

@@ -12,6 +12,7 @@ import { PlaygroundRoot } from './components/PlaygroundRoot';
  *  schema: any,
  *  data: any,
  *  editor?: { inlinePropertiesPanel: Boolean }
+ *  actions?: { display: Boolean }
  * } } FormPlaygroundOptions
  */
 
@@ -36,7 +37,9 @@ export default function Playground(options) {
 
   container.classList.add('fjs-pgl-parent');
 
-  parent.appendChild(container);
+  if (parent) {
+    parent.appendChild(container);
+  }
 
   const handleDrop = fileDrop('Drop a form file', function(files) {
     const file = files[0];
@@ -93,4 +96,28 @@ export default function Playground(options) {
   this.destroy = function() {
     this.emit('destroy');
   };
+
+  this.attachEditorContainer = function(node) {
+    return ref && ref.attachEditorContainer(node);
+  };
+
+  this.attachPreviewContainer = function(node) {
+    return ref && ref.attachFormContainer(node);
+  };
+
+  this.attachDataContainer = function(node) {
+    return ref && ref.attachDataContainer(node);
+  };
+
+  this.attachResultContainer = function(node) {
+    return ref && ref.attachResultContainer(node);
+  };
+
+  this.attachPaletteContainer = function(node) {
+    return ref && ref.attachPaletteContainer(node);
+  };
+
+  this.attachPropertiesPanelContainer = function(node) {
+    return ref && ref.attachPropertiesPanelContainer(node);
+  };
 }

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

@@ -21,10 +21,15 @@ import './PlaygroundRoot.css';
 export function PlaygroundRoot(props) {
 
   const {
+    actions: actionsConfig = {},
     editor: editorConfig = {},
     emit
   } = props;
 
+  const {
+    display: displayActions = true
+  } = actionsConfig;
+
   const {
     inlinePropertiesPanel = true
   } = editorConfig;
@@ -36,10 +41,12 @@ export function PlaygroundRoot(props) {
   const resultContainerRef = useRef();
   const propertiesPanelContainerRef = useRef();
 
+  const paletteRef = useRef();
   const formEditorRef = useRef();
   const formRef = useRef();
   const dataEditorRef = useRef();
   const resultViewRef = useRef();
+  const propertiesPanelRef = useRef();
 
   const [ showEmbed, setShowEmbed ] = useState(false);
 
@@ -54,6 +61,12 @@ export function PlaygroundRoot(props) {
   // pipe to playground API
   useEffect(() => {
     props.onInit({
+      attachDataContainer: (node) => dataEditorRef.current.attachTo(node),
+      attachEditorContainer: (node) => formEditorRef.current.attachTo(node),
+      attachFormContainer: (node) => formRef.current.attachTo(node),
+      attachPaletteContainer: (node) => paletteRef.current.attachTo(node),
+      attachPropertiesPanelContainer: (node) => propertiesPanelRef.current.attachTo(node),
+      attachResultContainer: (node) => resultViewRef.current.attachTo(node),
       get: (name, strict) => formEditorRef.current.get(name, strict),
       setSchema: setInitialSchema
     });
@@ -86,6 +99,9 @@ export function PlaygroundRoot(props) {
       }
     });
 
+    paletteRef.current = formEditor.get('palette');
+    propertiesPanelRef.current = formEditor.get('propertiesPanel');
+
     formEditor.on('changed', () => {
       setSchema(formEditor.getSchema());
     });
@@ -175,19 +191,26 @@ export function PlaygroundRoot(props) {
       <div class="fjs-pgl-main">
 
         <Section name="Form Definition">
-          <Section.HeaderItem>
-            <button
-              class="fjs-pgl-button"
-              title="Download form definition"
-              onClick={ handleDownload }
-            >Download</button>
-          </Section.HeaderItem>
-          <Section.HeaderItem>
-            <button
-              class="fjs-pgl-button"
-              onClick={ showEmbedModal }
-            >Embed</button>
-          </Section.HeaderItem>
+
+          {
+            displayActions && <Section.HeaderItem>
+              <button
+                class="fjs-pgl-button"
+                title="Download form definition"
+                onClick={ handleDownload }
+              >Download</button>
+            </Section.HeaderItem>
+          }
+
+          {
+            displayActions && <Section.HeaderItem>
+              <button
+                class="fjs-pgl-button"
+                onClick={ showEmbedModal }
+              >Embed</button>
+            </Section.HeaderItem>
+          }
+
           <div ref={ editorContainerRef } class="fjs-pgl-form-container"></div>
         </Section>
         <Section name="Form Preview">

packages/form-js-playground/test/spec/Playground.spec.js

@@ -3,7 +3,9 @@ import 'preact/debug';
 import { act } from '@testing-library/preact/pure';
 
 import {
-  query as domQuery
+  domify,
+  query as domQuery,
+  queryAll as domQueryAll
 } from 'min-dom';
 
 import {
@@ -39,6 +41,7 @@ describe('playground', function() {
   !singleStart && afterEach(function() {
     if (playground) {
       playground.destroy();
+      playground = null;
     }
   });
 
@@ -90,6 +93,75 @@ describe('playground', function() {
   });
 
 
+  it('should NOT attach to empty parent', async function() {
+
+    // given
+    const data = {
+      creditor: 'foo'
+    };
+
+    // when
+    await act(() => {
+      new Playground({
+        schema,
+        data
+      });
+    });
+
+    const playgroundContainer = domQuery('.fjs-pgl-root', container);
+
+    // then
+    expect(domQuery('.fjs-properties-panel', playgroundContainer)).to.not.exist;
+  });
+
+
+  it('should render actions', async function() {
+
+    // given
+    const data = {
+      creditor: 'foo'
+    };
+
+    // when
+    await act(() => {
+      playground = new Playground({
+        container,
+        schema,
+        data
+      });
+    });
+
+    const actions = domQueryAll('.fjs-pgl-button', container);
+
+    // then
+    expect(actions.length).to.eql(2);
+  });
+
+
+  it('should NOT render actions', async function() {
+
+    // given
+    const data = {
+      creditor: 'foo'
+    };
+
+    // when
+    await act(() => {
+      playground = new Playground({
+        container,
+        schema,
+        data,
+        actions: { display: false }
+      });
+    });
+
+    const actions = domQueryAll('.fjs-pgl-button', container);
+
+    // then
+    expect(actions.length).to.eql(0);
+  });
+
+
   it('should render properties panel (inline)', async function() {
 
     // given
@@ -207,4 +279,81 @@ describe('playground', function() {
     expect(spy).to.have.been.called;
   });
 
+
+  describe('attach components', function() {
+
+    it('should attach editor', async function() {
+
+      // given
+      const editorParent = domify('<div class="editor"></div>');
+      document.body.appendChild(editorParent);
+
+      const data = {
+        creditor: 'foo'
+      };
+
+      await act(() => {
+        playground = new Playground({
+          container,
+          schema,
+          data
+        });
+      });
+
+      // when
+      await act(() => {
+        playground.attachEditorContainer(editorParent);
+      });
+
+      const editorContainer = domQuery('.fjs-form-editor', editorParent);
+
+      // then
+      expect(editorContainer).to.exist;
+    });
+
+
+    it('should attach preview');
+
+
+    it('should attach data');
+
+
+    it('should attach result');
+
+
+    it('should attach palette');
+
+
+    it('should attach properties panel');
+
+
+    it('complex', async function() {
+
+      // given
+      const editorParent = domify('<div class="editor"></div>');
+      document.body.appendChild(editorParent);
+
+      const data = {
+        creditor: 'foo'
+      };
+
+      let playground;
+      await act(() => {
+        playground = new Playground({
+          schema,
+          data,
+          editor: { inlinePropertiesPanel: false }
+        });
+      });
+
+      // when
+      await act(() => {
+        playground.attachEditorContainer(editorParent);
+      });
+
+      debugger;
+    });
+
+  });
+
 });