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/docs/contributor/frontend/ui-components/display/checkmark.mdx

@@ -6,11 +6,13 @@ sidebar_position: 1
 import { SandpackEditor} from '@site/src/ui/SandpackEditor'
 
 <SandpackEditor
-  componentPath='@/ui/Checkmark/components/Checkmark'
+  availableComponentPaths={['@/ui/Checkmark/components/Checkmark', '@/ui/Button/components/Button']}
   componentCode={`import { Checkmark } from "@/ui/Checkmark/components/Checkmark";
-
+import { Button } from "@/ui/Button/components/Button";
 export const MyComponent = () => {
- return <Checkmark />;
+ return <><Checkmark /><Button title="New task"
+          variant={'secondary'}
+          onClick={() => console.log('click')}/></>
 }
 `} 
 />

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`]: {
+        ...fakePackagesJson,
-          hidden: true,
+        ...fakeIndexesJs,
-          code: JSON.stringify({
-            name: componentPath,
-            main: "./index.js",
-          }),
-        },
-        [`/node_modules/${componentPath}/index.js`]: {
-          hidden: true,
-          code: uiModule,
-        },
       }}
       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"
         },
       }}
     >

docs/src/ui/generated/index.d.ts

@@ -1,5 +1,6 @@
+export { ThemeProvider } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 declare const lightTheme: {
     accent: {
@@ -276,16 +277,40 @@ declare const lightTheme: {
     lastLayerZIndex: number;
 };
 type ThemeType = typeof lightTheme;
+declare const darkTheme: ThemeType;
 
 type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
 declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
 
-declare const ThemeProvider: ({ children }: {
+type IconComponent = FunctionComponent<{
-    children: any;
+    color?: string;
-}) => react_jsx_runtime.JSX.Element;
+    size?: number;
+    stroke?: number;
+}>;
+
+type ButtonSize = 'medium' | 'small';
+type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonAccent = 'default' | 'blue' | 'danger';
+type ButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    title?: string;
+    fullWidth?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    position?: ButtonPosition;
+    accent?: ButtonAccent;
+    soon?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
 declare module '@emotion/react' {
     interface Theme extends ThemeType {
     }
 }
 
-export { Checkmark, CheckmarkProps, ThemeProvider };
+export { Button, ButtonAccent, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkmark, CheckmarkProps, darkTheme, lightTheme };

front/tsup.config.js

@@ -9,6 +9,5 @@ export default defineConfig([
     dts: true,
     clean: true,
     outDir: "../docs/src/ui/generated",
-    noExternal: ['@emotion/react', '@emotion/styled', '@tabler/icons-react', 'hex-rgb']
   },
 ]);

front/tsup.ui.index.tsx

@@ -1,12 +1,8 @@
-import { ThemeProvider as EmotionThemProvider } from '@emotion/react';
+import {  ThemeType } from './src/modules/ui/theme/constants/theme';
 
-import { lightTheme, ThemeType } from './src/modules/ui/theme/constants/theme';
+export {ThemeProvider} from '@emotion/react';
 
-export const ThemeProvider = ({ children }: { children: any }) => {
+export {lightTheme, darkTheme} from './src/modules/ui/theme/constants/theme';
-  return (
-    <EmotionThemProvider theme={lightTheme}>{children}</EmotionThemProvider>
-  );
-};
 
 declare module '@emotion/react' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -14,3 +10,4 @@ declare module '@emotion/react' {
 }
 
 export * from './src/modules/ui/display/checkmark/components/Checkmark';
+export * from './src/modules/ui/input/button/components/Button';