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] Improve Joy template UX #33159

Merged
merged 4 commits into from
Jun 17, 2022
Merged

[docs] Improve Joy template UX #33159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e6d18b
make the image clickable
siriwatknp Jun 15, 2022
03ee7e9
use asset module
siriwatknp Jun 15, 2022
8b739d3
add data-ga
siriwatknp Jun 15, 2022
7c6b64e
Update docs/data/joy/getting-started/templates/TemplateCollection.js
siriwatknp Jun 16, 2022
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
17 changes: 16 additions & 1 deletion 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,6 +6,7 @@ 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 Link from '@mui/joy/Link';
import List from '@mui/joy/List';
import ListDivider from '@mui/joy/ListDivider';
import Button from '@mui/joy/Button';
Expand All @@ -16,7 +17,7 @@ import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
import extractTemplates from 'docs/src/modules/utils/extractTemplates';

const cache = {};
const req = require.context('!raw-loader!./', true, /^\.\/[^/]+\/.*\.(js|tsx)$/);
const req = require.context('./?raw', true, /^\.\/[^/]+\/.*\.(js|tsx)$/);
req.keys().forEach((key) => {
cache[key] = req(key);
});
Expand Down Expand Up @@ -154,6 +155,20 @@ export default function TemplateCollection() {
transition: '0.3s',
}}
/>
<NextLink
href={`/joy-ui/getting-started/templates/${name}/`}
passHref
>
{/* 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>
Expand Down
10 changes: 10 additions & 0 deletions docs/next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,10 @@ module.exports = {
];
}

config.module.rules.forEach((r) => {
r.resourceQuery = { not: [/raw/] };
});

return {
...config,
plugins,
Expand Down Expand Up @@ -123,6 +127,7 @@ module.exports = {
// transpile 3rd party packages with dependencies in this repository
{
test: /\.(js|mjs|jsx)$/,
resourceQuery: { not: [/raw/] },
include:
/node_modules(\/|\\)(notistack|@mui(\/|\\)x-data-grid|@mui(\/|\\)x-data-grid-pro|@mui(\/|\\)x-license-pro|@mui(\/|\\)x-data-grid-generator|@mui(\/|\\)x-date-pickers-pro|@mui(\/|\\)x-date-pickers)/,
use: {
Expand Down Expand Up @@ -160,10 +165,15 @@ module.exports = {
// required to transpile ../packages/
{
test: /\.(js|mjs|tsx|ts)$/,
resourceQuery: { not: [/raw/] },
include: [workspaceRoot],
exclude: /(node_modules|mui-icons-material)/,
use: options.defaultLoaders.babel,
},
{
resourceQuery: /raw/,
type: 'asset/source',
},
]),
},
};
Expand Down
61 changes: 15 additions & 46 deletions docs/src/modules/utils/extractTemplates.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,21 @@ import extractTemplates from './extractTemplates';
describe('extractTemplates', () => {
it('get correct templates', () => {
const result = extractTemplates({
'./email/App.tsx': {
default: '',
},
'./team/App.tsx': {
default: '',
},
'./files/App.tsx': {
default: '',
},
'./email/App.tsx': '',
'./team/App.tsx': '',
'./files/App.tsx': '',
});
expect(Object.keys(result)).to.deep.equal(['email', 'team', 'files']);
});

it('extract correct template files', () => {
const result = extractTemplates({
'./email/App.tsx': {
default: '',
},
'./email/components/Layout.tsx': {
default: '',
},
'./email/components/MailContent.tsx': {
default: '',
},
'./email/components/Mails.tsx': {
default: '',
},
'./email/components/Navigation.tsx': {
default: '',
},
'./email/theme.tsx': {
default: '',
},
'./email/App.tsx': '',
'./email/components/Layout.tsx': '',
'./email/components/MailContent.tsx': '',
'./email/components/Mails.tsx': '',
'./email/components/Navigation.tsx': '',
'./email/theme.tsx': '',
});
expect(result.email.files).to.deep.equal({
'App.tsx': '',
Expand All @@ -50,25 +32,12 @@ describe('extractTemplates', () => {

it('extract code variant', () => {
const result = extractTemplates({
'./email/App.js': {
default: '',
},
'./email/components/Layout.js': {
default: '',
},
'./email/components/MailContent.js': {
default: '',
},
'./email/components/Mails.js': {
default: '',
},
'./email/components/Navigation.js': {
default: '',
},
'./email/theme.tsx': {
// this is tsx
default: '',
},
'./email/App.js': '',
'./email/components/Layout.js': '',
'./email/components/MailContent.js': '',
'./email/components/Mails.js': '',
'./email/components/Navigation.js': '',
'./email/theme.tsx': '',
});
expect(result.email.codeVariant).to.equal('TS');
});
Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/utils/extractTemplates.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default function extractTemplates(record: Record<string, { default: string }>) {
export default function extractTemplates(record: Record<string, string>) {
const result: Record<string, { files: Record<string, string>; codeVariant: 'JS' | 'TS' }> = {};
Object.entries(record).forEach((data) => {
const match = /\/(?<name>[^/]+)\/(?<filePath>.*)/.exec(data[0]);
Expand All @@ -12,7 +12,7 @@ export default function extractTemplates(record: Record<string, { default: strin
if (filePath.match(/\.(ts|tsx)$/)) {
result[name].codeVariant = 'TS';
}
result[name].files[filePath] = data[1].default;
result[name].files[filePath] = data[1];
}
}
});
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,6 @@
"prettier": "^2.6.2",
"process": "^0.11.10",
"prop-types": "^15.8.1",
"raw-loader": "4.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.3.0",
Expand Down
10 changes: 1 addition & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13083,14 +13083,6 @@ raw-body@2.5.1:
iconv-lite "0.4.24"
unpipe "1.0.0"

raw-loader@4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
dependencies:
loader-utils "^2.0.0"
schema-utils "^3.0.0"

rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
version "1.2.8"
resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
Expand Down Expand Up @@ -14142,7 +14134,7 @@ schema-utils@^2.6.5:
ajv "^6.12.4"
ajv-keywords "^3.5.2"

schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
schema-utils@^3.1.0, schema-utils@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
Expand Down