Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Fix Live edit copies #43835

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+17 −24
Open

[docs] Fix Live edit copies #43835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 16 additions & 23 deletions docs/src/modules/components/TemplateFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 },
Expand All @@ -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 },
Expand All @@ -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>
Expand All @@ -358,5 +353,3 @@ function TemplateFrame({ children }) {
</ThemeProvider>
);
}

export default TemplateFrame;
2 changes: 1 addition & 1 deletion docs/src/modules/utils/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

Expand Down
Loading