From a4e31a7239104a59a80e4b8c37b63c2d04346373 Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 2 Oct 2023 17:41:33 +0200
Subject: [PATCH] docs: correct extends link annotation

---
 docs/component-docs-plugin/generatePageMDX.js |  7 ++-
 docs/src/components/ExtendsLink.tsx           | 48 +++++++++++++++++++
 docs/src/components/PropTable.tsx             | 35 --------------
 3 files changed, 53 insertions(+), 37 deletions(-)
 create mode 100644 docs/src/components/ExtendsLink.tsx

diff --git a/docs/component-docs-plugin/generatePageMDX.js b/docs/component-docs-plugin/generatePageMDX.js
index fe46e99638..0722cdc966 100644
--- a/docs/component-docs-plugin/generatePageMDX.js
+++ b/docs/component-docs-plugin/generatePageMDX.js
@@ -122,14 +122,16 @@ function generatePropsTable(data, link) {
 </div>
   
   <PropTable componentLink="${link}" prop="${prop}" />
-
-  ---
   `;
     })
     .join('');
 
   return `
   ## Props
+  <ExtendsLink componentLink="${link}" />
+
+  ---
+  
   ${props}
   `;
 }
@@ -157,6 +159,7 @@ title: ${doc.title}
 ---
 
 import PropTable from '@site/src/components/PropTable.tsx';
+import ExtendsLink from '@site/src/components/ExtendsLink.tsx';
 import ThemeColorsTable from '@site/src/components/ThemeColorsTable.tsx';
 import ScreenshotTabs from '@site/src/components/ScreenshotTabs.tsx';
 
diff --git a/docs/src/components/ExtendsLink.tsx b/docs/src/components/ExtendsLink.tsx
new file mode 100644
index 0000000000..0ac8398325
--- /dev/null
+++ b/docs/src/components/ExtendsLink.tsx
@@ -0,0 +1,48 @@
+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,
+}: {
+  componentLink: 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}>
+      <i>Extends: </i>
+      <a key={prop.name} href={prop.link}>
+        <code>
+          ...
+          {prop.name}
+        </code>
+      </a>
+    </div>
+  ));
+}
diff --git a/docs/src/components/PropTable.tsx b/docs/src/components/PropTable.tsx
index a87a2aaa0f..35f5069433 100644
--- a/docs/src/components/PropTable.tsx
+++ b/docs/src/components/PropTable.tsx
@@ -17,8 +17,6 @@ const typeDefinitions = {
   'StyleProp<TextStyle>': 'https://reactnative.dev/docs/text-style-props',
 };
 
-const ANNOTATION_EXTENDS = '@extends';
-
 const renderBadge = (annotation: string) => {
   const [annotType, ...annotLabel] = annotation.split(' ');
 
@@ -26,38 +24,6 @@ const renderBadge = (annotation: string) => {
   return `<span class="badge badge-${annotType.replace('@', '')} ">${annotLabel.join(' ')}</span>`;
 };
 
-const renderExtendsLink = (description: string) => {
-  const extendsAttributes: { name: string; link?: string }[] = [];
-  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) => (
-    <a key={prop.name} href={prop.link}>
-      <code>
-        ...
-        {prop.name}
-      </code>
-    </a>
-  ));
-};
-
 export default function PropTable({
   componentLink,
   prop,
@@ -132,7 +98,6 @@ export default function PropTable({
           </div>
         );
       })}
-      {renderExtendsLink(doc.description)}
     </div>
   );
 }