[docs-infra][Do not merge] Fix broken sandboxes with relative module imports

docs/data/material/components/autocomplete/ComboBox.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import top100Films from './top100Films';
+import top100Films from '../../top100Films';
 
 export default function ComboBox() {
   return (

docs/data/material/components/autocomplete/ComboBox.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete from '@mui/material/Autocomplete';
-import top100Films from './top100Films';
+import top100Films from '../../top100Films';
 
 export default function ComboBox() {
   return (

docs/src/modules/sandbox/CodeSandbox.ts

@@ -33,6 +33,15 @@ function openSandbox({ files, codeVariant, initialFile }: any) {
   document.body.removeChild(form);
 }
 
+function replaceRelativeImports(rawCode: string, relativeModulesPaths: string[] = []) {
+  let newCode = rawCode;
+  relativeModulesPaths.forEach((path: string) => {
+    const pathWithoutExtension = path.replace(/\.[a-z]*$/g, '');
+    const newPath = `./${pathWithoutExtension.replace(/^.*[\\/]/g, '')}`;
+    newCode = newCode.replace(pathWithoutExtension, newPath);
+  });
+  return newCode;
+}
 function createReactApp(demoData: DemoData) {
   const ext = getFileExtension(demoData.codeVariant);
   const { title, githubLocation: description } = demoData;
@@ -45,8 +54,24 @@ function createReactApp(demoData: DemoData) {
       content: CRA.getRootIndex(demoData),
     },
     [`src/Demo.${ext}`]: {
-      content: demoData.raw,
+      content: replaceRelativeImports(
+        demoData.raw,
+        demoData.relativeModules?.map((file) => file.module!),
+      ),
     },
+    // Spread the relative modules
+    ...(demoData.relativeModules &&
+      // Transform the relative modules array into an object
+      demoData.relativeModules.reduce(
+        (acc, curr) => ({
+          ...acc,
+          // Only keep the filename from the module path
+          [`src/${curr.module.replace(/^.*[\\/]/g, '')}`]: {
+            content: curr.raw,
+          },
+        }),
+        {},
+      )),
     ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': {
         content: CRA.getTsconfig(),

docs/src/modules/sandbox/StackBlitz.ts

@@ -13,6 +13,17 @@ function createReactApp(demoData: DemoData) {
     'index.html': CRA.getHtml(demoData),
     [`index.${ext}`]: CRA.getRootIndex(demoData),
     [`Demo.${ext}`]: demoData.raw,
+    // Spread the relative modules
+    ...(demoData.relativeModules &&
+      // Transform the relative modules array into an object
+      demoData.relativeModules.reduce(
+        (acc, curr) => ({
+          ...acc,
+          // Remove the `./` from the module path
+          [`${curr.module.replace(/.\//g, '')}`]: curr.raw,
+        }),
+        {},
+      )),
     ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': CRA.getTsconfig(),
     }),

docs/src/modules/sandbox/types.ts

@@ -2,6 +2,11 @@ import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl'
 
 export type CodeStyling = 'Tailwind' | 'MUI System';
 export type CodeVariant = 'TS' | 'JS';
+
+type RelativeModule = {
+  module: string;
+  raw: string;
+};
 export interface DemoData {
   title: string;
   language: string;
@@ -10,4 +15,5 @@ export interface DemoData {
   githubLocation: string;
   productId?: Exclude<MuiProductId, 'null'>;
   codeStyling: CodeStyling;
+  relativeModules?: RelativeModule[];
 }