Adding the possibility to add multiple ui components in the live code editor in the docs (#2381)

* working

* forgot docs folder

* modify according to comments

docs/src/ui/SandpackEditor.js

@@ -1,7 +1,27 @@
 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}) => {
+export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
+  const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
+    acc[`/node_modules/${componentPath}/package.json`] = {
+      hidden: false,
+      code: JSON.stringify({
+        name: componentPath,
+        main: "./index.js",
+      }),
+    };
+    return acc;
+  }, {});
+
+  const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
+    acc[`/node_modules/${componentPath}/index.js`] = {
+      hidden: false,
+      code: uiModule,
+    };
+    return acc;
+  }
+  , {});
+
   return (
     <SandpackProvider
       files={{
@@ -22,11 +42,14 @@ root.render(
         },
         "/App.tsx": {
           hidden: true,
-          code: `import { ThemeProvider } from "${componentPath}";
+          code: `import { ThemeProvider } from "@emotion/react";
+import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
 import { MyComponent } from "./MyComponent.tsx";
 
+console.log("lightTheme", lightTheme);
+
 export default function App() {
-return (<ThemeProvider>
+return (<ThemeProvider theme={lightTheme}>
  <MyComponent />
 </ThemeProvider>);
 };`,
@@ -34,17 +57,8 @@ return (<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,
-        },
+        ...fakePackagesJson,
+        ...fakeIndexesJs,
       }}
       customSetup={{
         entry: "/index.js",
@@ -52,6 +66,10 @@ return (<ThemeProvider>
           react: "latest",
           "react-dom": "latest",
           "react-scripts": "^5.0.0",
+          "@emotion/react": "^11.10.6",
+          '@emotion/styled': "latest",
+          '@tabler/icons-react': "latest",
+          'hex-rgb': "latest"
         },
       }}
     >