Live FEEL tutorial component (#486)

* build(docs): update package-lock to v2

The new package-lock version contains more details and is more explicit.
Before updating packages with npm it makes sense to update this.

* deps(docs): bump docusaurus to 2.0.1

* deps(docs): update to fix webpack

See:
- facebook/docusaurus#5778
- TypeStrong/ts-node#1645

* deps(docs): install axios for http requests

With almost 100k GH stars, this is one of the most commonly used HTTP
libraries for nodejs.

* deps(docs): install use-editable

This library allows us to build an editable React component.

* feat(docs): add tutorial-test page

Adds a test page (MDX) called `tutorial-test.mdx` to develop the
LiveFeel and Editor components.

* docs: add tutorial test page to sidebar

* make it easy to play around with the new editor

Co-authored-by: Philipp Ossler <philipp.ossler@gmail.com>

docs/docs/tutorial/tutorial-playground.mdx

@@ -0,0 +1,10 @@
+---
+id: tutorial-playground
+title: Tutorial Playground
+---
+
+import LiveFeel from '@site/src/components/LiveFeel'
+
+This is an example of the SimpleFeel React component.
+
+<LiveFeel />

docs/package.json

@@ -15,9 +15,11 @@
     "@docusaurus/core": "2.0.1",
     "@docusaurus/preset-classic": "2.0.1",
     "@mdx-js/react": "^1.6.21",
+    "axios": "^0.27.2",
     "clsx": "^1.1.1",
     "react": "^16.8.4",
-    "react-dom": "^16.8.4"
+    "react-dom": "^16.8.4",
+    "use-editable": "^2.3.3"
   },
   "browserslist": {
     "production": [

docs/sidebars.js

@@ -58,6 +58,7 @@ module.exports = {
         'tutorial/tutorial-1-1',
         'tutorial/tutorial-1-2'
     ]},
+    'tutorial/tutorial-playground',
    ],
   "Changelog": [
       'changelog/changelog'

docs/src/components/Editor.js

@@ -0,0 +1,38 @@
+import React, { useState, useRef, useCallback } from "react";
+import { useEditable } from "use-editable";
+import Highlight, { defaultProps } from "prism-react-renderer";
+
+const Editor = ({ children, onChange }) => {
+  const editorRef = useRef(null);
+  const [content, setContent] = useState(children);
+
+  const onEditableChange = useCallback((text) => {
+    // there is a new line at the end of text
+    const textWithoutNewLine = text.slice(0, -1);
+    setContent(textWithoutNewLine);
+    onChange(textWithoutNewLine);
+  }, []);
+
+  useEditable(editorRef, onEditableChange, { indentation: 2 });
+
+  return (
+    <Highlight {...defaultProps} code={content} language="js">
+      {({ className, style, tokens, getTokenProps }) => (
+        <pre className={className} style={style} ref={editorRef}>
+          {tokens.map((line, i) => (
+            <React.Fragment key={i}>
+              {line
+                .filter((token) => !token.empty)
+                .map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              {"\n"}
+            </React.Fragment>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  );
+};
+
+export default Editor;

docs/src/components/LiveFeel.js

@@ -0,0 +1,50 @@
+import React from "react";
+import axios from "axios";
+import Editor from "@site/src/components/Editor";
+
+const LiveFeel = () => {
+  const [expression, setExpression] = React.useState("3 + x");
+  const [context, setContext] = React.useState(
+    JSON.stringify({ x: 5 }, null, 2)
+  );
+  const [result, setResult] = React.useState("");
+
+  function evaluate() {
+    axios
+      .post(
+        "http://34.138.73.115/process/start",
+        {
+          expression: expression,
+          context: JSON.parse(context),
+          metadata: {
+            user: "foo",
+          },
+        },
+        {
+          headers: {
+            accept: "*/*",
+            "content-type": "application/json",
+          },
+        }
+      )
+      .then((response) => {
+        setResult(JSON.stringify(response.data));
+      });
+  }
+
+  return (
+    <div>
+      <h2>Expression</h2>
+      <Editor onChange={setExpression}>{expression}</Editor>
+
+      <h2>Context</h2>
+      <Editor onChange={setContext}>{context}</Editor>
+
+      <button onClick={evaluate}>Evaluate</button>
+
+      <h2>{result}</h2>
+    </div>
+  );
+};
+
+export default LiveFeel;