docs: add extends prop to the props list

docs/component-docs-plugin/generatePageMDX.js

@@ -86,7 +86,7 @@ function generateScreenshots(componentName, screenshotData) {
   `;
 }
 
-function generatePropsTable(data, link) {
+function generatePropsTable(data, link, extendsAttributes) {
   const ANNOTATION_OPTIONAL = '@optional';
   const ANNOTATION_INTERNAL = '@internal';
 
@@ -128,14 +128,44 @@ function generatePropsTable(data, link) {
 
   return `
   ## Props
-  <ExtendsLink componentLink="${link}" />
+  ${
+    extendsAttributes.length === 0
+      ? `<span />`
+      : `### ${extendsAttributes?.[0]?.name}`
+  }
+  ${extendsAttributes
+    .map((attr) => {
+      return `<ExtendsLink name="${attr.name}" link="${attr.link}" />`;
+    })
+    .join('')}
 
-  ---
-  
   ${props}
   `;
 }
 
+function generateExtendsAttributes(doc) {
+  const ANNOTATION_EXTENDS = '@extends';
+
+  const extendsAttributes = [];
+  doc?.description
+    .split('\n')
+    .filter((line) => {
+      if (line.startsWith(ANNOTATION_EXTENDS)) {
+        const parts = line.split(' ').slice(1);
+        const link = parts.pop();
+        extendsAttributes.push({
+          name: parts.join(' '),
+          link,
+        });
+        return false;
+      }
+      return true;
+    })
+    .join('\n');
+
+  return extendsAttributes;
+}
+
 function generatePageMDX(doc, link) {
   const summaryRegex = /([\s\S]*?)## Usage/;
 
@@ -153,6 +183,8 @@ function generatePageMDX(doc, link) {
   const themeColorsData = JSON.stringify(customFields.themeColors[doc.title]);
   const screenshotData = JSON.stringify(customFields.screenshots[doc.title]);
 
+  const extendsAttributes = generateExtendsAttributes(doc);
+
   const mdx = `
 ---
 title: ${doc.title}
@@ -169,7 +201,7 @@ ${generateScreenshots(doc.title, screenshotData)}
 
 ${usage}
 
-${generatePropsTable(doc.data.props, link)}
+${generatePropsTable(doc.data.props, link, extendsAttributes)}
 
 ${generateMoreExamples(doc.title)}
 

docs/src/components/ExtendsLink.tsx

@@ -1,48 +1,21 @@
 import React from 'react';
 
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved
-import useDoc from '@site/component-docs-plugin/useDocs';
-
-const ANNOTATION_EXTENDS = '@extends';
-
 export default function ExtendsLink({
-  componentLink,
+  name,
+  link,
 }: {
-  componentLink: string;
+  name: string;
+  link?: string;
 }) {
-  const doc = useDoc(componentLink);
-
-  const extendsAttributes: { name: string; link?: string }[] = [];
-  doc?.description
-    .split('\n')
-    .filter((line: string) => {
-      if (line.startsWith(ANNOTATION_EXTENDS)) {
-        const parts = line.split(' ').slice(1);
-        const link = parts.pop();
-        extendsAttributes.push({
-          name: parts.join(' '),
-          link,
-        });
-        return false;
-      }
-      return true;
-    })
-    .join('\n');
-
-  if (extendsAttributes.length === 0) {
-    return null;
-  }
-
-  return extendsAttributes.map((prop) => (
-    <div key={prop.name}>
+  return (
+    <div key={name} className="extends">
       <i>Extends: </i>
-      <a key={prop.name} href={prop.link}>
+      <a key={name} href={link}>
         <code>
           ...
-          {prop.name}
+          {name}
         </code>
       </a>
     </div>
-  ));
+  );
 }

docs/src/css/custom.css

@@ -526,3 +526,9 @@ a .badge .badge-text {
     grid-template-columns: repeat(2, 1fr);
   }
 }
+
+/* ExtendsLink.tsx */
+
+.extends {
+  margin-bottom: 20px;
+}