[docs] Fix CodeSandbox & StackBlitz generation

[siriwatknp]

Preview: https://deploy-preview-32726--material-ui.netlify.app/material-ui/react-button/#basic-button

Issues

• [BUG] StackBlitz does not work on the production. Also, the demo.tsx does not show on the editor. Proof: https://mui.com/material-ui/react-button/ This bug is gone in v5.8.0 because we have moved the private classnames to mui-utils
  
• The templates generated is not compatible with Joy UI

   // index.js
   import * as React from 'react';
   import ReactDOM from 'react-dom/client';
   import { StyledEngineProvider } from '@mui/material/styles';
   import Demo from './demo';
   
   ReactDOM.createRoot(document.querySelector("#root")).render(
     <StyledEngineProvider injectFirst> // Joy needs CssVarsProvider instead
       <Demo />
     </StyledEngineProvider>
   );

• The code is not extensible. (We need to be able to configure the template based on the product)

Refactoring

Here is how it worked before:

There is only 1 function, the getDemoConfig() which call other functions and so on. If we want to adjust the dependencies, we have to pass the props from the top down to the bottom. This is quite hard to adapt and write tests.

Here is the refactored version:

• The sandbox modules split into CodeSandbox and StackBlitz to provide flexibility and composition of other APIs. Both of them contain the method createReactApp that use the CreateReactApp module to generate templates between products.

  In the future, if we want to generate NextJS template, this will be very easy.

• The dependencies module handles the extraction from the file and assign version based on the config.

Fix

• ✅ StackBlitz bug is fixed.
• ✅ Joy UI is working on both CodeSandbox & StackBlitz.
• ✅ MUI Base is working on both CodeSandbox & StackBlitz

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against cb3d6ce

[mnajdova]

Overall looks good, I've left few comments. Let's also address Olivier's feedback.

[siriwatknp]

Overall looks good, I've left few comments. Let's also address Olivier's feedback.

All fixed!