Initial commit

Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com>
Co-Authored-By: Johan  <4934465+joolsus@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>

packages/noodl-editor/docs/sidebar.md

@@ -0,0 +1,75 @@
+# Create a Sidebar HOWTO
+
+## Creating a sidebar
+
+```tsx
+import React, { useState } from 'react';
+import { ReactView } from '../../../../shared/ReactView';
+
+import { UndoQueue } from '@noodl-models/undo-queue-model';
+
+import { PrimaryButton } from '@noodl-core-ui/inputs/PrimaryButton';
+import { Container, ContainerDirection } from '@noodl-core-ui/layout/Container';
+
+function UndoQueuePanel({}) {
+  const [queue, setQueue] = useState([]);
+
+  function refresh() {
+    const undoQueue: TSFixme[] = UndoQueue.instance.queue;
+    setQueue([...undoQueue]);
+  }
+
+  return (
+    <>
+      <Container hasXSpacing hasYSpacing>
+        <PrimaryButton label="Refresh" onClick={refresh} isGrowing />
+      </Container>
+      <Container hasXSpacing hasYSpacing direction={ContainerDirection.Vertical}>
+        {queue.map((item, index) => (
+          <PrimaryButton key={index} label={item.label} isGrowing />
+        ))}
+      </Container>
+    </>
+  );
+}
+
+// NOTE: Once Frames component is rewritten to React we don't need to have the
+//       ReactView here.
+export class UndoQueuePanelView extends ReactView<{}> {
+  constructor(args) {
+    super({});
+  }
+
+  protected renderReact(props: {}): JSX.Element {
+    return UndoQueuePanel({});
+  }
+}
+```
+
+## Register the Sidebar
+
+```ts
+SidebarModel.instance.register({
+  hidden: false,
+  id: 'undo-queue',
+  name: 'Undo Queue',
+  order: 10,
+  icon: 'sidebar-toolbar-components-icon',
+  panel: (args) => new UndoQueuePanelView()
+});
+```
+
+## Special Sidebar for a Node
+
+Define the sidebar panel you want the node to have in the node definition.
+This will open that sidebar panel when the node is selected.
+
+```ts
+{
+  panels: [
+    {
+      name: "PortEditor",
+    }
+  ],
+}
+```