feat(website): show inherited members (#8526)

* feat(website): show inherited members

* fix: use passHref

packages/website/src/components/CodeListing.tsx

@@ -1,8 +1,10 @@
 import { Badge, Group, Stack, Title } from '@mantine/core';
 import type { ReactNode } from 'react';
 import { HyperlinkedText } from './HyperlinkedText';
+import { InheritanceText } from './InheritanceText';
 import { TSDoc } from './tsdoc/TSDoc';
 import type { DocItem } from '~/DocModel/DocItem';
+import type { InheritanceData } from '~/DocModel/DocMethod';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
 import type { TokenDocumentation } from '~/util/parse.server';
 
@@ -21,6 +23,7 @@ export function CodeListing({
 	children,
 	comment,
 	deprecation,
+	inheritanceData,
 }: {
 	name: string;
 	separator?: CodeListingSeparatorType;
@@ -31,6 +34,7 @@ export function CodeListing({
 	comment?: AnyDocNodeJSON | null;
 	children?: ReactNode;
 	deprecation?: AnyDocNodeJSON | null;
+	inheritanceData?: InheritanceData | null;
 }) {
 	return (
 		<Stack spacing="xs" key={name}>
@@ -56,6 +60,7 @@ export function CodeListing({
 					{deprecation ? <TSDoc node={deprecation} /> : null}
 					{summary && <TSDoc node={summary} />}
 					{comment && <TSDoc node={comment} />}
+					{inheritanceData ? <InheritanceText data={inheritanceData} /> : null}
 					{children}
 				</Stack>
 			</Group>

packages/website/src/components/InheritanceText.tsx

@@ -0,0 +1,16 @@
+import { Anchor, Text } from '@mantine/core';
+import Link from 'next/link';
+import type { InheritanceData } from '~/DocModel/DocMethod';
+
+export function InheritanceText({ data }: { data: InheritanceData }) {
+	return (
+		<Text className="font-semibold">
+			{'Inherited from '}
+			<Link href={data.path} passHref>
+				<Anchor component="a" className="font-mono">
+					{data.parentName}
+				</Anchor>
+			</Link>
+		</Text>
+	);
+}

packages/website/src/components/MethodItem.tsx

@@ -1,5 +1,6 @@
 import { Badge, Group, Stack, Title } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
+import { InheritanceText } from './InheritanceText';
 import { ParameterTable } from './ParameterTable';
 import { TSDoc } from './tsdoc/TSDoc';
 import type { DocMethod } from '~/DocModel/DocMethod';
@@ -20,7 +21,6 @@ function getShorthandName(data: MethodResolvable) {
 
 export function MethodItem({ data }: { data: MethodResolvable }) {
 	const method = data as ReturnType<DocMethod['toJSON']>;
-
 	return (
 		<Stack
 			id={`${data.name}${data.overloadIndex && data.overloadIndex > 1 ? `:${data.overloadIndex}` : ''}`}
@@ -54,6 +54,7 @@ export function MethodItem({ data }: { data: MethodResolvable }) {
 					{data.remarks ? <TSDoc node={data.remarks} /> : null}
 					{data.comment ? <TSDoc node={data.comment} /> : null}
 					{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
+					{data.inheritanceData ? <InheritanceText data={data.inheritanceData} /> : null}
 				</Stack>
 			</Group>
 		</Stack>

packages/website/src/components/PropertyList.tsx

@@ -15,6 +15,7 @@ export function PropertyList({ data }: { data: ReturnType<DocProperty['toJSON']>
 					summary={prop.summary}
 					comment={prop.comment}
 					deprecation={prop.deprecated}
+					inheritanceData={prop.inheritanceData}
 				/>
 			))}
 		</Stack>