[docs] Improve Joy template UX (#33159)

mui · Jun 17, 2022 · 043a096 · 043a096
1 parent de420be
commit 043a096
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 59 deletions.
diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -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';
@@ -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);
 });
@@ -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>

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -93,6 +93,10 @@ module.exports = {
       ];
     }
 
+    config.module.rules.forEach((r) => {
+      r.resourceQuery = { not: [/raw/] };
+    });
+
     return {
       ...config,
       plugins,
@@ -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: {
@@ -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',
+          },
         ]),
       },
     };

diff --git a/docs/src/modules/utils/extractTemplates.test.js b/docs/src/modules/utils/extractTemplates.test.js
@@ -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': '',
@@ -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');
   });

diff --git a/docs/src/modules/utils/extractTemplates.ts b/docs/src/modules/utils/extractTemplates.ts
@@ -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]);
@@ -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];
       }
     }
   });

diff --git a/package.json b/package.json
@@ -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",

diff --git a/yarn.lock b/yarn.lock
@@ -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"
@@ -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==