Live code editor for UI docs (#2351)

* Docausaurus code live editor test

* Docusaurus sandpack test

* Fix setup

* Delete files

* Fixes

* Complete work

* Fix config

* Fix config

---------

Co-authored-by: bosiraphael <[email protected]>

Author: charlesBochet

docs/docs/contributor/frontend/ui-components/forms/_category_.json renamed to docs/docs/contributor/frontend/ui-components/display/_category_.json

@@ -1,6 +1,6 @@
 {
-  "label": "Forms",
-  "position": 2,
+  "label": "Display",
+  "position": 0,
   "collapsible": true,
   "collapsed": true,
   "customProps": {

docs/docs/contributor/frontend/ui-components/display/checkmark.mdx

@@ -0,0 +1,16 @@
+---
+title: Checkmark
+sidebar_position: 1
+---
+
+import { SandpackEditor} from '@site/src/ui/SandpackEditor'
+
+<SandpackEditor
+  componentPath='@/ui/Checkmark/components/Checkmark'
+  componentCode={`import { Checkmark } from "@/ui/Checkmark/components/Checkmark";
+
+export const MyComponent = () => {
+ return <Checkmark />;
+}
+`} 
+/>

docs/docs/contributor/frontend/ui-components/forms/button.mdx

@@ -2,6 +2,3 @@
 title: Overview
 sidebar_position: 0
 ---
-import DocCardList from '@theme/DocCardList';
-
-<DocCardList />

docs/docs/contributor/frontend/ui-components/ui-components.mdx

@@ -2,8 +2,10 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+import { themes } from 'prism-react-renderer';
+
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

docs/docusaurus.config.js

@@ -15,22 +15,24 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
-    "@mdx-js/react": "^1.6.22",
+    "@codesandbox/sandpack-react": "^2.9.0",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
     "graphiql": "^2.4.7",
     "graphql": "^16.6.0",
     "iframe-resizer-react": "^1.1.0",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.9.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^4.7.4"
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/tsconfig": "3.0.0",
+    "raw-loader": "^4.0.2",
+    "typescript": "~5.2.2"
   },
   "overrides": {
     "trim": "^0.0.3",

docs/package.json

@@ -289,4 +289,4 @@ a.table-of-contents__link:hover{
 
 .hidden {
 display: none !important;
-}
+}

docs/src/css/custom.css

@@ -0,0 +1,68 @@
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
+import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
+
+export const SandpackEditor = ({ componentPath, componentCode}) => {
+  return (
+    <SandpackProvider
+      files={{
+        "/index.js": {
+          hidden: true,
+          code: `
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(
+ <StrictMode>
+   <App />
+ </StrictMode>
+);`,
+        },
+        "/App.tsx": {
+          hidden: true,
+          code: `import { ThemeProvider } from "${componentPath}";
+import { MyComponent } from "./MyComponent.tsx";
+
+export default function App() {
+return (<ThemeProvider>
+ <MyComponent />
+</ThemeProvider>);
+};`,
+        },
+        "/MyComponent.tsx": {
+          code: componentCode,
+        },
+        [`/node_modules/${componentPath}/package.json`]: {
+          hidden: true,
+          code: JSON.stringify({
+            name: componentPath,
+            main: "./index.js",
+          }),
+        },
+        [`/node_modules/${componentPath}/index.js`]: {
+          hidden: true,
+          code: uiModule,
+        },
+      }}
+      customSetup={{
+        entry: "/index.js",
+        dependencies: {
+          react: "latest",
+          "react-dom": "latest",
+          "react-scripts": "^5.0.0",
+        },
+      }}
+    >
+     <SandpackLayout>
+        <SandpackCodeEditor
+          style={{ minWidth: "100%", height: "auto" }}
+        />
+        <SandpackPreview 
+          style={{ minWidth: "100%", height: "auto" }}
+        />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};