[docs] Fix Live edit copies (#43835)

Author: oliviertassinari

docs/src/modules/components/TemplateFrame.js

@@ -24,12 +24,7 @@ import PaletteIcon from '@mui/icons-material/PaletteOutlined';
 import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
 import stackBlitz from 'docs/src/modules/sandbox/StackBlitz';
 import sourceMaterialTemplates from 'docs/src/modules/material/sourceMaterialTemplates';
-
-function pascalCase(str) {
-  return str
-    .replace(/[^\w]+(.)/g, (_, chr) => chr.toUpperCase())
-    .replace(/^(.)/, (_, chr) => chr.toUpperCase());
-}
+import { pascalCase } from 'docs/src/modules/utils/helpers';
 
 const StyledAppBar = styled(AppBar)(({ theme }) => ({
   position: 'relative',
@@ -196,7 +191,7 @@ const brandingTheme = createTheme({
   ...getThemedComponents(),
 });
 
-function TemplateFrame({ children }) {
+export default function TemplateFrame({ children }) {
   const router = useRouter();
   const templateId = router.pathname.split('/').pop();
   const templateName = pascalCase(templateId);
@@ -262,17 +257,17 @@ function TemplateFrame({ children }) {
                     '& > *': { flexShrink: 0 },
                   }}
                 >
-                  <Tooltip title="Open Template via CodeSandbox">
+                  <Tooltip title="Edit in StackBlitz">
                     <IconButton
                       color="primary"
                       size="small"
                       disableTouchRipple
-                      aria-label="CodeSandbox playground"
+                      aria-label="StackBlitz playground"
                       data-ga-event-category="material-ui-template"
                       data-ga-event-label={templateId}
-                      data-ga-event-action="codesandbox"
+                      data-ga-event-action="stackblitz"
                       onClick={() =>
-                        codeSandbox
+                        stackBlitz
                           .createMaterialTemplate({
                             ...item,
                             files: { ...item.files, ...materialTemplates.sharedTheme?.files },
@@ -291,26 +286,26 @@ function TemplateFrame({ children }) {
                             }
                             return content;
                           })
-                          .openSandbox(`/${templateName}`)
+                          .openStackBlitz(`/${templateName}`)
                       }
                       sx={{ alignSelf: 'center', borderRadius: 1 }}
                     >
-                      <SvgIcon viewBox="0 0 1080 1080">
-                        <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
+                      <SvgIcon viewBox="0 0 19 28">
+                        <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
                       </SvgIcon>
                     </IconButton>
                   </Tooltip>
-                  <Tooltip title="Open Template via StackBlitz">
+                  <Tooltip title="Edit in CodeSandbox">
                     <IconButton
                       color="primary"
                       size="small"
                       disableTouchRipple
-                      aria-label="StackBlitz playground"
+                      aria-label="CodeSandbox playground"
                       data-ga-event-category="material-ui-template"
                       data-ga-event-label={templateId}
-                      data-ga-event-action="stackblitz"
+                      data-ga-event-action="codesandbox"
                       onClick={() =>
-                        stackBlitz
+                        codeSandbox
                           .createMaterialTemplate({
                             ...item,
                             files: { ...item.files, ...materialTemplates.sharedTheme?.files },
@@ -329,12 +324,12 @@ function TemplateFrame({ children }) {
                             }
                             return content;
                           })
-                          .openStackBlitz(`/${templateName}`)
+                          .openSandbox(`/${templateName}`)
                       }
                       sx={{ alignSelf: 'center', borderRadius: 1 }}
                     >
-                      <SvgIcon viewBox="0 0 19 28">
-                        <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
+                      <SvgIcon viewBox="0 0 1080 1080">
+                        <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
                       </SvgIcon>
                     </IconButton>
                   </Tooltip>
@@ -358,5 +353,3 @@ function TemplateFrame({ children }) {
     </ThemeProvider>
   );
 }
-
-export default TemplateFrame;

docs/src/modules/utils/helpers.ts

@@ -3,7 +3,7 @@ import camelCase from 'lodash/camelCase';
 import { LANGUAGES } from 'docs/config';
 import { Translate } from '@mui/docs/i18n';
 
-function pascalCase(str: string) {
+export function pascalCase(str: string) {
   return upperFirst(camelCase(str));
 }