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][material-ui] Add StackBlitz/CodeSandbox buttons to template cards #44253

Merged
merged 10 commits into from
Nov 5, 2024
Merged

[docs][material-ui] Add StackBlitz/CodeSandbox buttons to template cards #44253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b0c197f
Add StackBlitz/CodeSandbox buttons
zanivan Oct 29, 2024
946eea3
Remove wrong links
zanivan Oct 29, 2024
56c0729
Remove unused import
zanivan Oct 29, 2024
b2a5241
Merge branch 'master' of https://github.com/mui/material-ui into add-…
siriwatknp Oct 30, 2024
c9ca29a
add sandbox functionality
siriwatknp Oct 30, 2024
39c9f9f
set data-screenshot to ""
siriwatknp Oct 30, 2024
d1eb6af
Merge remote-tracking branch 'upstream/master' into add-buttons-templ…
zanivan Oct 30, 2024
b4c7249
Update dashboard screenshot
zanivan Oct 30, 2024
9dd8d27
Merge remote-tracking branch 'upstream/master' into add-buttons-templ…
zanivan Nov 1, 2024
8667997
Merge remote-tracking branch 'upstream/master' into add-buttons-templ…
zanivan Nov 5, 2024
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
2 changes: 1 addition & 1 deletion docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function AppNavbar() {
Dashboard
</Typography>
</Stack>
<ColorModeIconDropdown />
<ColorModeIconDropdown data-screenshot="" />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this for?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I’m not mistaken, it’s for the screenshot script work

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. I didn't found any other occurrence of data-screenshot="", only data-screenshot="toggle-mode" and data-screenshot="toggle-default-theme", that's why I was asking.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will need @siriwatknp to answer this then haha

Copy link
Member

@siriwatknp siriwatknp Nov 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to remove the data-screenshot from this button (in mobile) because there are two of them (desktop and mobile) on the page. Playwright was not happy with it.

<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
<MenuRoundedIcon />
</MenuButton>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default function AppNavbar() {
Dashboard
</Typography>
</Stack>
<ColorModeIconDropdown />
<ColorModeIconDropdown data-screenshot="" />
<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
<MenuRoundedIcon />
</MenuButton>
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/material-ui/getting-started/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import * as pageProps from 'docs/data/material/getting-started/templates/templates.md?muiMarkdown';

export default function Page() {
return <MarkdownDocs {...pageProps} disableToc disableAd />;
return <MarkdownDocs {...pageProps} disableAd />;
}
Binary file modified ...lic/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
267 changes: 173 additions & 94 deletions docs/src/modules/components/MaterialFreeTemplatesCollection.js
View file
Open in desktop
zanivan marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,19 @@ import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid2';
import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import SvgIcon from '@mui/material/SvgIcon';
import Visibility from '@mui/icons-material/Visibility';
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
import { useTranslate } from '@mui/docs/i18n';
import { pascalCase } from 'docs/src/modules/utils/helpers';
import sourceMaterialTemplates from 'docs/src/modules/material/sourceMaterialTemplates';
import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
import stackBlitz from 'docs/src/modules/sandbox/StackBlitz';

const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;

Expand Down Expand Up @@ -70,124 +76,197 @@ function layouts(translatation) {

export default function Templates() {
const translatation = useTranslate();

const materialTemplates = sourceMaterialTemplates();
return (
<Grid container spacing={2} sx={{ py: 2 }}>
{layouts(translatation).map((layout) => (
<Grid size={{ xs: 12, sm: 6 }} key={layout.title}>
<Card
variant="outlined"
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
borderColor: 'divider',
}}
>
<Box
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 4, mb: 4 }}>
{layouts(translatation).map((layout) => {
const templateId = layout.source.split('/').pop();
const templateName = pascalCase(templateId);
const item = materialTemplates.map.get(templateId);
return (
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} key={layout.title}>
<Typography component="h3" variant="h6" sx={{ fontWeight: 'semiBold' }}>
{layout.title}
</Typography>
<Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
{layout.description}
</Typography>
<Card
variant="outlined"
sx={{
position: 'relative',
'&:hover > .MuiCardMedia-root': {
filter: 'blur(4px)',
},
'&:hover > .MuiButtonBase-root': {
opacity: 1,
},
height: '100%',
display: 'flex',
flexDirection: 'column',
borderColor: 'divider',
}}
>
<CardMedia
component="img"
// The image source is generated from `pnpm template:screenshot material-ui`, do not modify the image manually.
image={`/static/screenshots${layout.href.replace(/\/$/, '')}.jpg`}
title={layout.title}
sx={(theme) => ({
aspectRatio: '16 / 9',
objectPosition: 'top',
transition: 'filter 0.3s',
...theme.applyStyles('dark', {
content: 'var(--src)',
}),
})}
style={{
'--src': layout.hasDarkMode
? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)`
: `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`,
}}
/>
<Button
variant="text"
endIcon={<OpenInNewRoundedIcon />}
component={Link}
href={layout.href}
data-ga-event-category="material-ui-template"
data-ga-event-label={layout.title}
data-ga-event-action="preview-img"
<Box
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
opacity: 0,
transition: 'opacity 0.5s ease',
backgroundColor: 'background.paper',
'&:hover': {
backgroundColor: 'background.default',
position: 'relative',
'&:hover > .MuiCardMedia-root': {
filter: 'blur(4px)',
},
'&:hover > .MuiButtonBase-root': {
opacity: 1,
},
}}
>
See live preview
</Button>
</Box>
<Box sx={{ p: 2, pt: 1.5, borderTop: '1px solid', borderColor: 'divider' }}>
<Typography
component="h3"
variant="body1"
gutterBottom
sx={{ fontWeight: 'semiBold' }}
>
{layout.title}
</Typography>
<Typography variant="body2" gutterBottom sx={{ color: 'text.secondary', mb: 2 }}>
{layout.description}
</Typography>
<CardMedia
component="img"
// The image source is generated from `pnpm template:screenshot material-ui`, do not modify the image manually.
image={`/static/screenshots${layout.href.replace(/\/$/, '')}.jpg`}
title={layout.title}
sx={(theme) => ({
aspectRatio: '16 / 9',
objectPosition: 'top',
transition: 'filter 0.3s',
...theme.applyStyles('dark', {
content: 'var(--src)',
}),
})}
style={{
'--src': layout.hasDarkMode
? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)`
: `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`,
}}
/>
<Button
variant="text"
endIcon={<OpenInNewRoundedIcon />}
component={Link}
href={layout.href}
data-ga-event-category="material-ui-template"
data-ga-event-label={layout.title}
data-ga-event-action="preview-img"
sx={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
opacity: 0,
transition: 'opacity 0.5s ease',
backgroundColor: 'background.paper',
'&:hover': {
backgroundColor: 'background.default',
},
}}
>
See live preview
</Button>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 1,
mt: 'auto',
justifyContent: 'space-between',
p: 2,
borderTop: '1px solid',
borderColor: 'divider',
}}
>
<Box
sx={{
display: 'flex',
alignItems: 'center',
gap: 1,
}}
>
<Tooltip title="Edit in StackBlitz">
<IconButton
color="primary"
size="small"
aria-label="StackBlitz playground"
data-ga-event-category="material-ui-template"
data-ga-event-label={templateId}
data-ga-event-action="stackblitz"
onClick={() =>
stackBlitz
.createMaterialTemplate({
...item,
files: { ...item.files, ...materialTemplates.sharedTheme?.files },
title: `${templateName} Template - Material UI`,
githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
process.env.LIB_VERSION
}/docs/data/material/templates/${templateId}/${templateName}.${
item.codeVariant === 'TS' ? 'tsx' : 'js'
}`,
})
.replaceContent((content) => {
if (typeof content === 'string') {
return content
.replace(/\.\.\/shared-theme\//g, './theme/')
.replace('./App', `./${templateName}`);
}
return content;
})
.openStackBlitz(`/${templateName}`)
}
>
<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="Edit in CodeSandbox">
<IconButton
color="primary"
size="small"
aria-label="CodeSandbox playground"
data-ga-event-category="material-ui-template"
data-ga-event-label={templateId}
data-ga-event-action="codesandbox"
onClick={() =>
codeSandbox
.createMaterialTemplate({
...item,
files: { ...item.files, ...materialTemplates.sharedTheme?.files },
title: `${templateName} Template - Material UI`,
githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
process.env.LIB_VERSION
}/docs/data/material/templates/${templateId}/${templateName}.${
item.codeVariant === 'TS' ? 'tsx' : 'js'
}`,
})
.replaceContent((content) => {
if (typeof content === 'string') {
return content
.replace(/\.\.\/shared-theme\//g, './theme/')
.replace('./App', `./${templateName}`);
}
return content;
})
.openSandbox(`/${templateName}`)
}
>
<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>
<Tooltip title="See source code">
<IconButton component="a" href={layout.source} color="primary" size="small">
<CodeRoundedIcon />
</IconButton>
</Tooltip>
</Box>
<Button
component="a"
href={layout.href}
size="small"
fullWidth
variant="outlined"
color="secondary"
color="primary"
startIcon={<Visibility sx={{ mr: 0.5 }} />}
data-ga-event-category="material-ui-template"
data-ga-event-label={layout.title}
data-ga-event-action="preview-img"
sx={{ alignSelf: 'self-start' }}
>
Live preview
</Button>
<Button
component="a"
href={layout.source}
size="small"
fullWidth
variant="outlined"
color="secondary"
startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
>
Source code
</Button>
</Box>
</Box>
</Card>
</Grid>
))}
</Grid>
</Card>
</Box>
);
})}
</Box>
);
}