[docs-infra] Improve export into sandbox package.json (#46044)

Author: oliviertassinari

docs/src/modules/sandbox/CodeSandbox.test.js

@@ -29,6 +29,7 @@ describe('CodeSandbox', () => {
     expect(result.files).to.deep.equal({
       'package.json': {
         content: {
+          private: true,
           description:
             'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.js',
           dependencies: {
@@ -120,6 +121,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
     expect(result.files).to.deep.equal({
       'package.json': {
         content: {
+          private: true,
           description:
             'https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.tsx',
           dependencies: {
@@ -136,7 +138,6 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
             '@types/react': 'latest',
             '@types/react-dom': 'latest',
           },
-          main: 'index.tsx',
           scripts: {
             build: 'react-scripts build',
             eject: 'react-scripts eject',

docs/src/modules/sandbox/CodeSandbox.ts

@@ -80,6 +80,7 @@ function createReactApp(demoData: DemoData) {
 
   files['package.json'] = {
     content: {
+      private: true,
       description,
       dependencies,
       devDependencies,
@@ -89,9 +90,6 @@ function createReactApp(demoData: DemoData) {
         test: 'react-scripts test',
         eject: 'react-scripts eject',
       },
-      ...(demoData.codeVariant === 'TS' && {
-        main: 'index.tsx',
-      }),
     },
   };
 
@@ -174,6 +172,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
 
   files['package.json'] = {
     content: {
+      private: true,
       description,
       dependencies,
       devDependencies,
@@ -183,9 +182,6 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
         test: 'react-scripts test',
         eject: 'react-scripts eject',
       },
-      ...(templateData.codeVariant === 'TS' && {
-        main: 'index.tsx',
-      }),
     },
   };
 
@@ -262,6 +258,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
 
   files['package.json'] = {
     content: {
+      private: true,
       description,
       dependencies,
       devDependencies,
@@ -271,9 +268,6 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
         test: 'react-scripts test',
         eject: 'react-scripts eject',
       },
-      ...(templateData.codeVariant === 'TS' && {
-        main: 'index.tsx',
-      }),
     },
   };
 

docs/src/modules/sandbox/StackBlitz.test.js

@@ -56,8 +56,8 @@ describe('StackBlitz', () => {
   </body>
 </html>`,
         'package.json': `{
-  "name": "mui-demo",
   "private": true,
+  "description": "https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.js",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -166,8 +166,8 @@ export default defineConfig({
   </body>
 </html>`,
         'package.json': `{
-  "name": "mui-demo",
   "private": true,
+  "description": "https://github.com/mui/material-ui/blob/v5.7.0/docs/data/material/components/buttons/BasicButtons.tsx",
   "type": "module",
   "scripts": {
     "dev": "vite",

docs/src/modules/sandbox/StackBlitz.ts

@@ -47,8 +47,9 @@ function openStackBlitz({
  */
 function createViteFiles(
   demoData: DemoData,
-  dependencies: Record<string, string> = {},
-  devDependencies: Record<string, string> = {},
+  dependencies: Record<string, string>,
+  devDependencies: Record<string, string>,
+  description: string,
 ): Record<string, string> {
   const ext = getFileExtension(demoData.codeVariant);
   return {
@@ -64,8 +65,8 @@ export default defineConfig({
     'index.html': CRA.getHtml({ ...demoData, main: `/src/index.${ext}` }),
     'package.json': JSON.stringify(
       {
-        name: 'mui-demo',
         private: true,
+        description,
         type: 'module',
         scripts: {
           dev: 'vite',
@@ -115,7 +116,7 @@ export default defineConfig({
 }
 
 /**
- * Create a Material Template for StackBlitz using the SDK and Vite
+ * Create a Material Template for StackBlitz using the SDK and Vite.
  */
 function createJoyTemplate(templateData: {
   title: string;
@@ -139,7 +140,7 @@ function createJoyTemplate(templateData: {
   });
 
   // Create base Vite files with dependencies
-  const viteFiles = createViteFiles(demoData, dependencies, devDependencies);
+  const viteFiles = createViteFiles(demoData, dependencies, devDependencies, description);
 
   // Restructure template files to be under src/
   const templateSourceFiles = templateData.files
@@ -183,7 +184,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
       });
       return this;
     },
-    openStackBlitz: (initialFile: string = `src/App`) => {
+    openStackBlitz: (initialFile: string = 'src/App') => {
       openStackBlitz({
         title,
         description,
@@ -194,7 +195,7 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
   };
 }
 /**
- * Create a Material Template for StackBlitz using the SDK and Vite
+ * Create a Material Template for StackBlitz using the SDK and Vite.
  */
 function createMaterialTemplate(templateData: {
   title: string;
@@ -218,7 +219,7 @@ function createMaterialTemplate(templateData: {
   });
 
   // Create base Vite files with dependencies
-  const viteFiles = createViteFiles(demoData, dependencies, devDependencies);
+  const viteFiles = createViteFiles(demoData, dependencies, devDependencies, description);
 
   // Restructure template files to be under src/
   const templateSourceFiles = templateData.files
@@ -260,7 +261,7 @@ ReactDOM.createRoot(document.getElementById('root')${templateData.codeVariant ==
       });
       return this;
     },
-    openStackBlitz: (initialFile: string = `src/App`) => {
+    openStackBlitz: (initialFile: string = 'src/App') => {
       openStackBlitz({
         title,
         description,
@@ -272,8 +273,8 @@ ReactDOM.createRoot(document.getElementById('root')${templateData.codeVariant ==
 }
 
 /**
- * Create a React App for StackBlitz using the SDK and Vite
- * This maintains similar structure to the original createReactApp but uses Vite
+ * Create a React App for StackBlitz using the SDK and Vite.
+ * This maintains similar structure to the original createReactApp but uses Vite.
  */
 function createReactApp(demoData: DemoData) {
   const ext = getFileExtension(demoData.codeVariant);
@@ -285,7 +286,7 @@ function createReactApp(demoData: DemoData) {
     devDeps: VITE_DEV_DEPENDENCIES,
   });
 
-  const viteFiles = createViteFiles(demoData, dependencies, devDependencies);
+  const viteFiles = createViteFiles(demoData, dependencies, devDependencies, description);
 
   const demoFiles: Record<string, string> = {
     [`src/Demo.${ext}`]: flattenRelativeImports(demoData.raw),