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

[Joy] Add sign-in side template #36019

Merged
merged 11 commits into from
Feb 3, 2023
Merged

[Joy] Add sign-in side template #36019

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cc347f3
Fix layout
siriwatknp Jan 31, 2023
797e437
add author
siriwatknp Jan 31, 2023
ca6ac69
finish sign-in template
siriwatknp Jan 31, 2023
c6ebdbd
update screenshots
siriwatknp Jan 31, 2023
4232a07
switch between images
siriwatknp Feb 1, 2023
f8aacaf
add handle form submit
siriwatknp Feb 1, 2023
e50579e
take screenshots
siriwatknp Feb 1, 2023
37fd223
add .ts extension
siriwatknp Feb 1, 2023
7d830be
adjust UI
siriwatknp Feb 1, 2023
0b9fe92
fix from code review
siriwatknp Feb 1, 2023
cde7b43
add transition variable
siriwatknp Feb 2, 2023
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
271 changes: 163 additions & 108 deletions docs/data/joy/getting-started/templates/TemplateCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ import { useTheme } from '@mui/joy/styles';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import Card from '@mui/joy/Card';
import Chip from '@mui/joy/Chip';
import Link from '@mui/joy/Link';
import List from '@mui/joy/List';
import ListDivider from '@mui/joy/ListDivider';
import Button from '@mui/joy/Button';
import IconButton from '@mui/joy/IconButton';
import Typography from '@mui/joy/Typography';
import SvgIcon from '@mui/joy/SvgIcon';
import Visibility from '@mui/icons-material/Visibility';
import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
import extractTemplates from 'docs/src/modules/utils/extractTemplates';

const cache = {};
const req = require.context('./?raw', true, /^\.\/[^/]+\/.*\.(js|tsx)$/);
const req = require.context('./?raw', true, /^\.\/[^/]+\/.*\.(js|tsx|ts)$/);
req.keys().forEach((key) => {
cache[key] = req(key);
});
Expand All @@ -44,135 +44,190 @@ function addHiddenInput(form, name, value) {
* - The name of the folder will be used as the url and title
*/

/**
* @typedef {Object} Author
* @property {string} name name of the author
* @property {string} github github username
*/

/**
* @type {Object.<string, Author | undefined>}
*/
const AUTHORS = {
team: {
name: 'MUI',
link: 'https://twitter.com/MUI_hq',
},
files: {
name: 'MUI',
link: 'https://twitter.com/MUI_hq',
},
email: {
name: 'MUI',
link: 'https://twitter.com/MUI_hq',
},
'sign-in-side': {
name: 'MUI',
link: 'https://twitter.com/MUI_hq',
},
};

export default function TemplateCollection() {
const newTemplates = ['sign-in-side']; // Stay at the top of the page with `new` badge
const templates = extractTemplates(cache);
const theme = useTheme();
const names = [
...newTemplates,
...Object.keys(templates).filter((name) => !newTemplates.includes(name)),
];
return (
<List
sx={{
px: { xs: 2, sm: 0 },
flexGrow: 1,
gap: 4,
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
}}
>
{Object.keys(templates).map((name, index) => {
{names.map((name) => {
const item = templates[name];
const author = AUTHORS[name];
return (
<React.Fragment key={name}>
{index !== 0 && <ListDivider />}
<Card
component="li"
key={name}
sx={{
bgcolor: 'initial',
boxShadow: 'none',
p: 0,
}}
<Card
component="li"
key={name}
sx={{
bgcolor: 'initial',
boxShadow: 'none',
p: 0,
}}
>
<Typography
component="h3"
fontSize="xl"
fontWeight="xl"
startDecorator={
newTemplates.includes(name) ? (
<Chip
size="sm"
color="success"
variant="outlined"
sx={{ bgcolor: 'success.softBg', borderRadius: 'xs' }}
>
New
</Chip>
) : null
}
slotProps={{ endDecorator: { sx: { ml: 'auto' } } }}
sx={{ mb: 1 }}
>
{startCase(name)}
</Typography>

<AspectRatio ratio="2" variant="outlined">
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
gap: 1,
alignItems: 'center',
justifyContent: 'space-between',
mb: 2,
'& > *': {
minWidth: `clamp(0px, (400px - 100%) * 999 , 100%)`,
},
background: `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${name}${
theme.palette.mode === 'dark' ? '-dark' : ''
}.jpg)`,
transition: '0.3s',
}}
/>
<NextLink
href={`/joy-ui/getting-started/templates/${name}/`}
passHref
legacyBehavior
>
<Typography component="h3" fontSize="xl" fontWeight="xl">
{startCase(name)}
</Typography>
<NextLink
href={`/joy-ui/getting-started/templates/${name}/`}
passHref
legacyBehavior
>
<Button
component="a"
variant="outlined"
color="neutral"
size="sm"
data-ga-event-category="joy-template"
data-ga-event-label={name}
data-ga-event-action="preview"
startDecorator={<Visibility />}
sx={{ ml: 'auto' }}
>
Live demo
</Button>
</NextLink>
<Button
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
tabIndex={-1}
overlay
aria-hidden
data-ga-event-category="joy-template"
data-ga-event-label={name}
data-ga-event-action="preview-img"
/>
</NextLink>
</AspectRatio>
<Box
sx={{
py: 1,
gap: 1,
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<NextLink
href={`/joy-ui/getting-started/templates/${name}/`}
passHref
legacyBehavior
>
<IconButton
component="a"
variant="outlined"
color="neutral"
size="sm"
aria-label="See live preview"
data-ga-event-category="joy-template"
data-ga-event-label={name}
data-ga-event-action="codesandbox"
onClick={() => {
const { files } = codeSandbox.createJoyTemplate({
...item,
title: `${startCase(name)} Template - Joy UI`,
githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
process.env.LIB_VERSION
}/docs/data/joy/templates/${name}/App.${
item.codeVariant === 'TS' ? 'tsx' : 'js'
}`,
});
const parameters = compress({ files });

// ref: https://codesandbox.io/docs/api/#define-api
const form = document.createElement('form');
form.method = 'POST';
form.target = '_blank';
form.action = 'https://codesandbox.io/api/v1/sandboxes/define';
addHiddenInput(form, 'parameters', parameters);
addHiddenInput(
form,
'query',
item.codeVariant === 'TS' ? 'file=/App.tsx' : 'file=/App.js',
);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}}
startDecorator={
<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>
}
>
CodeSandbox
</Button>
</Box>
<AspectRatio ratio="2" variant="outlined">
<Box
sx={{
background: `center/cover no-repeat url(/static/screenshots/joy-ui/getting-started/templates/${name}${
theme.palette.mode === 'dark' ? '-dark' : ''
}.jpg)`,
transition: '0.3s',
}}
/>
<NextLink
href={`/joy-ui/getting-started/templates/${name}/`}
passHref
data-ga-event-action="preview"
>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
tabIndex={-1}
overlay
aria-hidden
data-ga-event-category="joy-template"
data-ga-event-label={name}
data-ga-event-action="preview-img"
/>
</NextLink>
</AspectRatio>
</Card>
</React.Fragment>
<Visibility />
</IconButton>
</NextLink>
<IconButton
variant="outlined"
color="neutral"
size="sm"
aria-label="Code sandbox playground"
data-ga-event-category="joy-template"
data-ga-event-label={name}
data-ga-event-action="codesandbox"
onClick={() => {
const { files } = codeSandbox.createJoyTemplate({
...item,
title: `${startCase(name)} Template - Joy UI`,
githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
process.env.LIB_VERSION
}/docs/data/joy/templates/${name}/App.${
item.codeVariant === 'TS' ? 'tsx' : 'js'
}`,
});
const parameters = compress({ files });

// ref: https://codesandbox.io/docs/api/#define-api
const form = document.createElement('form');
form.method = 'POST';
form.target = '_blank';
form.action = 'https://codesandbox.io/api/v1/sandboxes/define';
addHiddenInput(form, 'parameters', parameters);
addHiddenInput(
form,
'query',
item.codeVariant === 'TS' ? 'file=/App.tsx' : 'file=/App.js',
);
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
}}
>
<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>

{author && (
<Typography level="body2" fontWeight="md" sx={{ ml: 'auto', pr: 1 }}>
Created by{' '}
<Link href={author.link} target="_blank" rel="noopener noreferrer">
<b>{author.name}</b>
</Link>
</Typography>
)}
</Box>
</Card>
);
})}
</List>
Expand Down
Loading