chore: changes to migrate to gatsby-plugin-mdx v5

Includes: * misc gatsby GraphQL syntax updates * fix markdown syntax issues ('<' and '{' now require escaping) * convert gatsby-config to ESM * add 'rehype-mdx-code-props' plugin to get live code blocks working * fix: "Do not define components during render" warning caused by PropsTable component that's only used in one place (duplicate props tables from "data view" page). Fixed by removing the duplicate tables. * set Content-Security-Policy header so playground works again
openedx · Jan 22, 2025 · a313329 · a313329
1 parent 916fbc0
commit a313329
Show file tree

Hide file tree

Showing 20 changed files with 281 additions and 255 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -802,8 +802,8 @@ The following subcomponents have been added / reworked:
 
 * fix: update image sizing according to figma design
 
-Co-authored-by: vlasovmichael <mykhailo.vlasov@raccoongang.com>
-Co-authored-by: vzadorozhnii <vladyslav.zadorozhnii@raccoongang.com>
+Co-authored-by: vlasovmichael \<mykhailo.vlasov@raccoongang.com\>
+Co-authored-by: vzadorozhnii \<vladyslav.zadorozhnii@raccoongang.com\>
 
 
 

diff --git a/netlify.toml b/netlify.toml
@@ -4,3 +4,7 @@
   environment = { SEGMENT_KEY = "", NODE_VERSION = "18.16.0" }
 [functions]
   directory = "www/netlify/functions"
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Content-Security-Policy = "frame-ancestors *;"
diff --git a/src/DataTable/dataviews.mdx b/src/DataTable/dataviews.mdx
@@ -110,16 +110,11 @@ It displays the data provided by the `DataTableContext` as an html table.
 </DataTable>
 ```
 
-<PropsTable displayName="Table" content='The DataTable.Table component expects to receive a react-table instance from the DataTableContext.' />
-
 ## Table Subcomponents
 
 Subcomponents of `DataTable.Table` can be used independently of the main component. They are designed for use with a `react-table` instance.
 
-<PropsTable displayName="TableRow" />
-<PropsTable displayName="TableCell" />
-<PropsTable displayName="TableHeaderCell" />
-<PropsTable displayName="TableHeaderRow" />
+See the available props of `<TableRow>`, `<TableCell>`, `<TableHeaderCell>`, and `<TableHeaderRow>` below.
 
 ## CardView and alternate table components
 
@@ -337,8 +332,6 @@ a responsive grid of cards.
 The `CardComponent` prop on `CardView` represents a table row, and will receive the row that `react-table`
 provides as props.
 
-<PropsTable displayName="CardView" />
-
 ```jsx
 const MiyazakiCard = ({ className, original  }) => {
   const { title, director, release_date } = original;

diff --git a/src/Dropzone/README.md b/src/Dropzone/README.md
@@ -15,9 +15,9 @@ The `Dropzone` allows users to upload files via drag and drop, or by clicking th
 
 You will also need to provide upload logic yourself via `onProcessUpload` prop which accepts function that should take care of uploading the file to the backend (i.e. send HTTP request). 
 This function accepts an object with following content as its only argument:
-- {object} fileData - Metadata about the uploaded file.
-- {object} requestConfig - Config to pass to `axios` call (this is required to display progress bar and hande cancel action).
-- {function} handleError - Function to communicate to `Dropzone` that file upload resulted in failure, expects `Error` object as its only argument.
+- \{object\} fileData - Metadata about the uploaded file.
+- \{object\} requestConfig - Config to pass to `axios` call (this is required to display progress bar and hande cancel action).
+- \{function\} handleError - Function to communicate to `Dropzone` that file upload resulted in failure, expects `Error` object as its only argument.
 
 Each example below implements such a function.
 

diff --git a/www/gatsby-config.js → www/gatsby-config.mjs b/www/gatsby-config.js → www/gatsby-config.mjs
@@ -1,8 +1,12 @@
-require('dotenv').config({
-  path: `.env.${process.env.NODE_ENV}`,
-});
-const rehypeSlugPlugin = require('rehype-slug');
-const rehypeAutolinkHeadingsPlugin = require('rehype-autolink-headings');
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import dotenv from 'dotenv';
+dotenv.config({ path: `.env.${process.env.NODE_ENV}` });
+import rehypeSlugPlugin from 'rehype-slug';
+import rehypeAutolinkHeadingsPlugin from 'rehype-autolink-headings';
+import rehypeMdxCodeProps from 'rehype-mdx-code-props';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const segmentPlugin = {
   resolve: 'gatsby-plugin-segment-js',
@@ -31,10 +35,13 @@ const plugins = [
           namedExport: false,
         },
       },
+      sassOptions: {
+        silenceDeprecations: ['abs-percent', 'color-functions', 'import', 'mixed-decls', 'global-builtin'],
+      },
     },
   },
   'gatsby-plugin-react-helmet',
-  'gatsby-plugin-typescript',
+  'gatsby-plugin-mdx-source-name',
   {
     resolve: 'gatsby-plugin-manifest',
     options: {
@@ -53,6 +60,20 @@ const plugins = [
       ignore: ['**/*.d.ts'],
     },
   },
+  {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      path: `${__dirname}/src/pages`,
+      name: 'pages',
+    },
+  },
+  {
+    resolve: 'gatsby-source-filesystem',
+    options: {
+      path: `${__dirname}/src/page-fragments`,
+      name: 'page-fragments',
+    },
+  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
@@ -67,40 +88,35 @@ const plugins = [
     resolve: 'gatsby-plugin-mdx',
     options: {
       extensions: ['.mdx', '.md'],
-      defaultLayouts: {
-        components: require.resolve(
-          './src/templates/component-page-template.tsx',
-        ),
-        default: require.resolve(
-          './src/templates/default-mdx-page-template.tsx',
-        ),
-      },
-      rehypePlugins: [
-        rehypeSlugPlugin,
-        [
-          rehypeAutolinkHeadingsPlugin,
-          {
-            behavior: 'append',
-            content: {
-              type: 'element',
-              tagName: 'span',
-              properties: {
-                className: 'pgn-doc__anchor',
+      mdxOptions: {
+        rehypePlugins: [
+          rehypeSlugPlugin,
+          [rehypeMdxCodeProps, { tagName: 'code' }],
+          [
+            rehypeAutolinkHeadingsPlugin,
+            {
+              behavior: 'append',
+              content: {
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  className: 'pgn-doc__anchor',
+                },
+                children: [
+                  { type: 'text', value: '#' },
+                ],
               },
-              children: [
-                { type: 'text', value: '#' },
-              ],
             },
-          },
+          ],
         ],
-      ],
+      },
     },
   },
   {
     resolve: 'gatsby-plugin-page-creator',
     options: {
       path: `${__dirname}/src/pages`,
-      ignore: ['insights.tsx'],
+      ignore: ['insights.tsx', '**/*.(md|mdx)'],
     },
   },
 ];
@@ -113,7 +129,7 @@ if (process.env && process.env.FEATURE_ENABLE_AXE) {
   plugins.push(axePlugin);
 }
 
-module.exports = {
+export default {
   siteMetadata: {
     title: 'Paragon Design System',
     description: 'Technical documentation for the Paragon Design System.',
@@ -122,4 +138,7 @@ module.exports = {
   // Match the location of the site on github pages if no path prefix is specified
   pathPrefix: process.env.PATH_PREFIX || '',
   plugins,
+  flags: {
+    FAST_DEV: true,
+  },
 };
diff --git a/www/src/components/CodeBlock.tsx b/www/src/components/CodeBlock.tsx
@@ -8,7 +8,6 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import axios from 'axios';
 import classNames from 'classnames';
@@ -121,8 +120,8 @@ export interface ICodeBlock {
 
 function CodeBlock({
   children,
-  className,
-  live,
+  className = '',
+  live = false,
 }: ICodeBlock) {
   const intl = useIntl();
   const language: any = className ? className.replace(/language-/, '') : 'jsx';
@@ -136,6 +135,11 @@ function CodeBlock({
     setShowToast(true);
   };
 
+  if (className === '' && typeof children === 'string' && !children.includes('\n')) {
+    // This is an `inline code` node. Don't use syntax highlighting.
+    return <code>{children}</code>;
+  }
+
   if (live) {
     return (
       <div className="pgn-doc__code-block">
@@ -205,15 +209,4 @@ function CodeBlock({
   );
 }
 
-CodeBlock.propTypes = {
-  children: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  live: PropTypes.bool,
-};
-
-CodeBlock.defaultProps = {
-  live: false,
-  className: '',
-};
-
 export default CodeBlock;
diff --git a/www/src/components/ComponentsList.tsx b/www/src/components/ComponentsList.tsx
@@ -11,8 +11,9 @@ const componentsQuery = graphql`
           internal: { owner: { nin: "gatsby-transformer-react-docgen" } }
         }
         frontmatter: { type: {} }
+        fields: { source: { eq: "components" } }
       }
-      sort: { fields: frontmatter___title }
+      sort: { frontmatter: {title: ASC} }
     ) {
       all: nodes {
         ...ComponentPage

diff --git a/www/src/components/LinkedHeading.tsx b/www/src/components/LinkedHeading.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 export interface ILinkedHeading {
   h: string,
@@ -13,7 +12,7 @@ function LinkedHeading({
   h,
   children,
   id,
-}: ILinkedHeading) {
+}: ILinkedHeading & JSX.IntrinsicElements['h2']): JSX.Element {
   const H = `h${h}` as HeadingTag;
 
   return (
@@ -23,10 +22,4 @@ function LinkedHeading({
   );
 }
 
-LinkedHeading.propTypes = {
-  h: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-};
-
 export default LinkedHeading;
diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx
@@ -35,15 +35,15 @@ const menuQuery = graphql`
         }
         frontmatter: { type: {} }
       }
-      sort: { fields: frontmatter___title }
+      sort: { frontmatter: {title: ASC} }
     ) {
-      categories: group(field: frontmatter___categories) {
+      categories: group(field: {frontmatter: {categories: SELECT}}) {
         nodes {
           ...ComponentPage
         }
         fieldValue
       }
-      types: group(field: frontmatter___type) {
+      types: group(field: {frontmatter: {type: SELECT}}) {
         nodes {
           ...ComponentPage
         }

diff --git a/www/src/components/PropsTable.tsx b/www/src/components/PropsTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MDXRenderer } from 'gatsby-plugin-mdx';
+import Markdown from 'react-markdown';
 import { Badge, Card, Hyperlink } from '~paragon-react';
 import PropType from './PropType';
 
@@ -56,10 +56,8 @@ export interface IProp {
   required?: boolean,
   defaultValue: {},
   description: {
-    childMdx: {
-      body: string,
-    },
-  },
+    text: string;
+  };
 }
 
 function Prop({
@@ -80,7 +78,7 @@ function Prop({
         </div>
         <div className="x-small">
           {description ? (
-            <MDXRenderer>{description.childMdx.body}</MDXRenderer>
+            <Markdown>{description.text}</Markdown>
           ) : null}
         </div>
 
@@ -96,9 +94,7 @@ Prop.propTypes = {
   required: PropTypes.bool,
   defaultValue: PropTypes.shape({}),
   description: PropTypes.shape({
-    childMdx: PropTypes.shape({
-      body: PropTypes.string,
-    }),
+    text: PropTypes.string,
   }),
 };
 Prop.defaultProps = {

diff --git a/www/src/pages/foundations/css-utilities.mdx → .../page-fragments/css-utilities-content.mdx b/www/src/pages/foundations/css-utilities.mdx → .../page-fragments/css-utilities-content.mdx
@@ -2,10 +2,9 @@
 title: CSS Utilities
 ---
 
-import { graphql } from 'gatsby';
 import { Table } from '~paragon-react';
-import getCssSelectors from '../../utils/getCssSelectors.ts';
-import CSSUtilitiesTable from '../../components/CSSUtilitiesTable';
+import getCssSelectors from '../utils/getCssSelectors.ts';
+import CSSUtilitiesTable from '../components/CSSUtilitiesTable';
 
 
 # CSS Utilities
@@ -42,17 +41,3 @@ import CSSUtilitiesTable from '../../components/CSSUtilitiesTable';
     { selector: 'w-xl-auto', declarations: ['@media(min-width: 1200px) { width: auto !important; }']},
   ])}
 />
-
-export const pageQuery = graphql`
-{
-  utilities: allCssUtilityClasses(
-    filter: {isUtility: {eq: true}},
-    sort: {fields: selector, order: ASC}
-  ) {
-    nodes {
-      selector
-      declarations
-    }
-  }
-}
-`;