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

docs/src/modules/sandbox/CodeSandbox.ts

@@ -4,6 +4,7 @@ import addHiddenInput from 'docs/src/modules/utils/addHiddenInput';
 import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
 import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
 import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
+import flattenRelativeImports from 'docs/src/modules/sandbox/FlattenRelativeImports';
 import { DemoData, CodeVariant, CodeStyling } from 'docs/src/modules/sandbox/types';
 
 function compress(object: any) {
@@ -45,8 +46,24 @@ function createReactApp(demoData: DemoData) {
       content: CRA.getRootIndex(demoData),
     },
     [`src/Demo.${ext}`]: {
-      content: demoData.raw,
+      content: flattenRelativeImports(
+        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,
+          // Remove the path and keep the filename
+          [`src/${curr.module.replace(/^.*[\\/]/g, '')}`]: {
+            content: curr.raw,
+          },
+        }),
+        {},
+      )),
     ...(demoData.codeVariant === 'TS' && {
       'tsconfig.json': {
         content: CRA.getTsconfig(),

docs/src/modules/sandbox/FlattenRelativeImports.ts

@@ -0,0 +1,10 @@
+export default function flattenRelativeImports(rawCode: string, modulePaths: string[] = []) {
+  let newCode = rawCode;
+  modulePaths.forEach((path: string) => {
+    const pathWithoutExtension = path.replace(/\.[a-z]*$/g, '');
+    // Move the relative import to the current directory
+    const newPath = `./${pathWithoutExtension.replace(/^.*[\\/]/g, '')}`;
+    newCode = newCode.replace(pathWithoutExtension, newPath);
+  });
+  return newCode;
+}

docs/src/modules/sandbox/StackBlitz.ts

@@ -3,6 +3,7 @@ import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
 import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
 import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
+import flattenRelativeImports from 'docs/src/modules/sandbox/FlattenRelativeImports';
 import { DemoData } from 'docs/src/modules/sandbox/types';
 
 function createReactApp(demoData: DemoData) {
@@ -12,7 +13,21 @@ function createReactApp(demoData: DemoData) {
   const files: Record<string, string> = {
     'index.html': CRA.getHtml(demoData),
     [`index.${ext}`]: CRA.getRootIndex(demoData),
-    [`Demo.${ext}`]: demoData.raw,
+    [`Demo.${ext}`]: flattenRelativeImports(
+      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,
+          // Remove the path and keep the filename
+          [`${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[];
 }