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 <raphael.bosi@gmail.com>
2023-11-03 23:09:20 +01:00
parent 1ed4965a95
commit e70ef58f97
18 changed files with 4311 additions and 1670 deletions
--- a/docs/src/ui/SandpackEditor.js
+++ b/docs/src/ui/SandpackEditor.js
@ -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>
+  );
+};