feat(website): show descriptions for @typeParam blocks (#8523)

packages/website/src/components/DocContainer.tsx

@@ -1,6 +1,6 @@
 import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
-import type { ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -11,9 +11,10 @@ import { TypeParamTable } from './TypeParamTable';
 import { TSDoc } from './tsdoc/TSDoc';
 import type { DocClass } from '~/DocModel/DocClass';
 import type { DocItem } from '~/DocModel/DocItem';
+import type { TypeParameterData } from '~/DocModel/TypeParameterMixin';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
 import { generateIcon } from '~/util/icon';
-import type { TokenDocumentation, TypeParameterData } from '~/util/parse.server';
+import type { TokenDocumentation } from '~/util/parse.server';
 
 export interface DocContainerProps {
 	name: string;
@@ -84,10 +85,10 @@ export function DocContainer({
 						</Title>
 						<Text sx={{ wordBreak: 'break-all' }} className="font-mono">
 							{implementsTokens.map((token, idx) => (
-								<>
+								<Fragment key={idx}>
 									<HyperlinkedText tokens={token} />
 									{idx < implementsTokens.length - 1 ? ', ' : ''}
-								</>
+								</Fragment>
 							))}
 						</Text>
 					</Group>

packages/website/src/components/MethodList.tsx

@@ -1,4 +1,5 @@
 import { Divider, Stack } from '@mantine/core';
+import { Fragment } from 'react';
 import { MethodItem } from './MethodItem';
 import type { DocMethod } from '~/DocModel/DocMethod';
 import type { DocMethodSignature } from '~/DocModel/DocMethodSignature';
@@ -11,13 +12,12 @@ export function MethodList({
 	return (
 		<Stack>
 			{data.map((method) => (
-				<>
-					<MethodItem
-						key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
-						data={method}
-					/>
+				<Fragment
+					key={`${method.name}${method.overloadIndex && method.overloadIndex > 1 ? `:${method.overloadIndex}` : ''}`}
+				>
+					<MethodItem data={method} />
 					<Divider className="bg-gray-100" size="md" />
-				</>
+				</Fragment>
 			))}
 		</Stack>
 	);

packages/website/src/components/TypeParamTable.tsx

@@ -1,7 +1,8 @@
-import { Box } from '@mantine/core';
+import { Box, ScrollArea } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Table } from './Table';
-import type { TypeParameterData } from '~/util/parse.server';
+import { TSDoc } from './tsdoc/TSDoc';
+import type { TypeParameterData } from '~/DocModel/TypeParameterMixin';
 
 export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 	const rows = data.map((typeParam) => ({
@@ -9,22 +10,24 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 		Constraints: <HyperlinkedText tokens={typeParam.constraintTokens} />,
 		Optional: typeParam.optional ? 'Yes' : 'No',
 		Default: <HyperlinkedText tokens={typeParam.defaultTokens} />,
-		Description: 'None',
+		Description: typeParam.commentBlock ? <TSDoc node={typeParam.commentBlock} /> : 'None',
 	}));
 
 	const rowElements = {
-		Name: 'font-mono',
-		Constraints: 'font-mono',
-		Default: 'font-mono',
+		Name: 'font-mono whitespace-nowrap',
+		Constraints: 'font-mono whitespace-pre break-normal',
+		Default: 'font-mono whitespace-pre break-normal',
 	};
 
 	return (
 		<Box sx={{ overflowX: 'auto' }}>
-			<Table
-				columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
-				rows={rows}
-				columnStyles={rowElements}
-			/>
+			<ScrollArea type="auto">
+				<Table
+					columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
+					rows={rows}
+					columnStyles={rowElements}
+				/>
+			</ScrollArea>
 		</Box>
 	);
 }

packages/website/src/components/tsdoc/BlockComment.tsx

@@ -52,6 +52,7 @@ export function BlockComment({ children, tagName, index }: BlockCommentProps): J
 			return <DeprecatedBlock>{children}</DeprecatedBlock>;
 		case StandardTags.remarks.tagNameWithUpperCase:
 			return <RemarksBlock>{children}</RemarksBlock>;
+		case StandardTags.typeParam.tagNameWithUpperCase:
 		case StandardTags.param.tagNameWithUpperCase:
 			return <Text>{children}</Text>;
 		default: // TODO: Support more blocks in the future.

packages/website/src/components/tsdoc/TSDoc.tsx

@@ -1,7 +1,7 @@
 import { Anchor, Box, Code, Text } from '@mantine/core';
 import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
 import Link from 'next/link';
-import type { ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { BlockComment } from './BlockComment';
@@ -32,7 +32,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 					</Text>
 				);
 			case DocNodeKind.SoftBreak:
-				return <></>;
+				return <Fragment key={idx} />;
 			case DocNodeKind.LinkTag: {
 				const { codeDestination, urlDestination, text } = node as DocLinkTagJSON;