fix: "Do not define components during render", remove duplicate props…

… tables from "data view" page

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;

www/src/templates/component-page-template.tsx

@@ -46,8 +46,15 @@ export interface IPageTemplate {
   children: React.ReactNode,
 }
 
-export type ShortCodesTypes = {
-  displayName: string,
+const customMdxComponents = {
+  h2: (props: JSX.IntrinsicElements['h2']) => <LinkedHeading h="2" {...props} />,
+  h3: (props: JSX.IntrinsicElements['h3']) => <LinkedHeading h="3" {...props} />,
+  h4: (props: JSX.IntrinsicElements['h4']) => <LinkedHeading h="4" {...props} />,
+  h5: (props: JSX.IntrinsicElements['h5']) => <LinkedHeading h="5" {...props} />,
+  h6: (props: JSX.IntrinsicElements['h6']) => <LinkedHeading h="6" {...props} />,
+  pre: (props: JSX.IntrinsicElements['pre']) => <div {...props as any} />,
+  code: CodeBlock,
+  Link,
 };
 
 export default function PageTemplate({
@@ -67,27 +74,6 @@ export default function PageTemplate({
       return acc;
     }, {});
 
-  const shortcodes = React.useMemo(() => {
-    function PropsTable({ displayName, ...props }: ShortCodesTypes) { // eslint-disable-line react/prop-types
-      if (components[displayName]) {
-        return <GenericPropsTable {...components[displayName]} {...props} />;
-      }
-      return null;
-    }
-    // Provide common components here
-    return {
-      h2: (props: JSX.IntrinsicElements['h2']) => <LinkedHeading h="2" {...props} />,
-      h3: (props: JSX.IntrinsicElements['h3']) => <LinkedHeading h="3" {...props} />,
-      h4: (props: JSX.IntrinsicElements['h4']) => <LinkedHeading h="4" {...props} />,
-      h5: (props: JSX.IntrinsicElements['h5']) => <LinkedHeading h="5" {...props} />,
-      h6: (props: JSX.IntrinsicElements['h6']) => <LinkedHeading h="6" {...props} />,
-      pre: (props: JSX.IntrinsicElements['pre']) => <div {...props as any} />,
-      code: CodeBlock,
-      Link,
-      PropsTable,
-    };
-  }, [components]);
-
   const scssVariablesTitle = 'Theme Variables (SCSS)';
   const scssVariablesUrl = 'theme-variables-scss';
 
@@ -157,7 +143,7 @@ export default function PageTemplate({
             <LeaveFeedback />
           </Stack>
         </Stack>
-        <MDXProvider components={shortcodes}>
+        <MDXProvider components={customMdxComponents}>
           {children}
         </MDXProvider>
         {scssVariables && (