Added following improvements to the live playground:

- Added Syntax highlighting - Updated the Editor to use light theme - Added Default code to the Editor and removed the example code snippet
bigbinary · Oct 7, 2024 · 3ee9f33 · 3ee9f33
1 parent 3449fc3
commit 3ee9f33
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 36 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,3 +1,5 @@
+import MonacoWebpackPlugin from "monaco-editor-webpack-plugin";
+
 const path = require("path");
 const { mergeDeepLeft } = require("ramda");
 
@@ -32,6 +34,13 @@ module.exports = {
       "@bigbinary/neetoui": path.resolve(__dirname, "..", "src"),
     };
 
+    config.plugins = [
+      ...config.plugins,
+      new MonacoWebpackPlugin({
+        languages: ["javascript"],
+      }),
+    ];
+
     return config;
   },
 

diff --git a/package.json b/package.json
@@ -148,6 +148,7 @@
     "linkifyjs": "4.1.2",
     "lint-staged": "11.0.0",
     "monaco-editor": "^0.50.0",
+    "monaco-editor-webpack-plugin": "^7.1.0",
     "postcss": "^8.4.17",
     "postcss-import": "^15.0.0",
     "postcss-loader": "^7.0.1",

diff --git a/stories/Introduction/LivePlayground.stories.jsx b/stories/Introduction/LivePlayground.stories.jsx
@@ -8,23 +8,15 @@ import * as components from "components";
 import * as FormikComponents from "formikcomponents";
 import * as hooks from "hooks";
 
+import { DEFAULT_PLAYGROUND_CODE } from "./constants";
+
 import LivePlaygroundDocs from "!raw-loader!./LivePlaygroundDocs/LivePlaygroundUsage.mdx";
 
 const LivePlayground = () => {
-  const [code, setCode] = useState("\n");
+  const [code, setCode] = useState(DEFAULT_PLAYGROUND_CODE);
 
   return (
     <div className="flex h-full flex-col">
-      <div className="w-full flex-grow">
-        <MonacoEditor
-          height="300px"
-          language="jsx"
-          theme="vs-dark"
-          value={code}
-          onChange={setCode}
-        />
-      </div>
-      <h3 className="p-4">Preview</h3>
       <div
         className="min-h-96 m-4 mt-0 flex-grow overflow-y-auto border-2 p-4"
         style={{ minHeight: "300px" }}
@@ -36,6 +28,14 @@ const LivePlayground = () => {
           <LivePreview />
         </LiveProvider>
       </div>
+      <div className="w-full flex-grow">
+        <MonacoEditor
+          height="300px"
+          language="javascript"
+          value={code}
+          onChange={setCode}
+        />
+      </div>
     </div>
   );
 };

diff --git a/stories/Introduction/LivePlaygroundDocs/LivePlaygroundUsage.mdx b/stories/Introduction/LivePlaygroundDocs/LivePlaygroundUsage.mdx
@@ -10,27 +10,3 @@ To use Formik components, please use them from the FormikComponents namespace:
 </FormikComponents.Form>`
 
 Additionally, React is also set in the scope. To use hooks, you can call them as `React.useState`:
-
-`() => {
-  const [isOpen, setIsOpen] = React.useState(false)
-  return (<div>
-    <Button label="Open pane" onClick={() => setIsOpen(true)} />
-    <Pane
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-    >
-      <Pane.Header>
-        <Typography style="h2" weight="semibold">
-          Typography
-        </Typography>
-      </Pane.Header>
-      <Pane.Body>
-        <Typography style="body2">
-          Somewhere out in space live the Herculoids! Zok, the laser-ray
-          dragon!
-        </Typography>
-      </Pane.Body>
-    </Pane>
-  </div>)
-}
-`
diff --git a/stories/Introduction/constants.js b/stories/Introduction/constants.js
@@ -0,0 +1,24 @@
+export const DEFAULT_PLAYGROUND_CODE = `() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (<div>
+    <Button label="Open pane" onClick={() => setIsOpen(true)} />
+    <Pane
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+    >
+      <Pane.Header>
+        <Typography style="h2" weight="semibold">
+          Typography
+        </Typography>
+      </Pane.Header>
+      <Pane.Body>
+        <Typography style="body2">
+          Somewhere out in space live the Herculoids! Zok, the laser-ray
+          dragon!
+        </Typography>
+      </Pane.Body>
+    </Pane>
+  </div>)
+}
+`;
diff --git a/yarn.lock b/yarn.lock
@@ -10888,7 +10888,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^2.0.0, loader-utils@^2.0.4:
+loader-utils@^2.0.0, loader-utils@^2.0.2, loader-utils@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -11265,6 +11265,13 @@ modern-normalize@^1.1.0:
   resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
   integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
 
+monaco-editor-webpack-plugin@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.1.0.tgz#16f265c2b5dbb5fe08681b6b3b7d00d3c5b2ee97"
+  integrity sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==
+  dependencies:
+    loader-utils "^2.0.2"
+
 monaco-editor@^0.50.0:
   version "0.50.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.50.0.tgz#44e62b124c8aed224e1d310bbbe6ffd6d5122413"