feat(website): add support for type parameter documentation (#8237)

This commit is contained in:
Suneet Tipirneni
2022-07-06 11:37:33 -04:00
committed by GitHub
parent 8198da5cd0
commit 34531c45e3
14 changed files with 145 additions and 12 deletions

View File

@@ -1,6 +1,8 @@
import { VscSymbolClass, VscSymbolMethod, VscSymbolEnum, VscSymbolInterface, VscSymbolVariable } from 'react-icons/vsc';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { TypeParamTable } from './TypeParamTable';
import type { TypeParameterData } from '~/util/parse.server';
export interface DocContainerProps {
name: string;
@@ -8,6 +10,7 @@ export interface DocContainerProps {
excerpt: string;
summary?: string | null;
children?: JSX.Element;
typeParams?: TypeParameterData[];
}
const symbolClass = 'mr-2';
@@ -20,7 +23,7 @@ const icons = {
TypeAlias: <VscSymbolVariable color="blue" className={symbolClass} />,
};
export function DocContainer({ name, kind, excerpt, summary, children }: DocContainerProps) {
export function DocContainer({ name, kind, excerpt, summary, typeParams, children }: DocContainerProps) {
return (
<div className="px-10">
<h1 style={{ fontFamily: 'JetBrains Mono' }} className="flex items-csenter content-center">
@@ -31,6 +34,12 @@ export function DocContainer({ name, kind, excerpt, summary, children }: DocCont
<SyntaxHighlighter language="typescript" style={vs} codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}>
{excerpt}
</SyntaxHighlighter>
{typeParams?.length ? (
<>
<h3>Type Parameters</h3>
<TypeParamTable data={typeParams} />
</>
) : null}
<h3>Summary</h3>
<p>{summary ?? 'No summary provided.'}</p>
{children}

View File

@@ -0,0 +1,39 @@
import type { TypeParameterData } from '~/util/parse.server';
import { constructHyperlinkedText } from '~/util/util';
export interface TableProps {
data: TypeParameterData[];
}
export function TypeParamTable({ data }: TableProps) {
return (
<div className="p-10 border border-gray-200 solid rounded-md">
<table className="w-full text-sm text-left text-black-500 dark:text-gray-400">
<thead>
<tr>
<th>Name</th>
<th>Constraint</th>
<th>Optional</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{data.map((parameter) => (
<tr key={parameter.name} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th className="py-4 font-normal text-gray-900 dark:text-white whitespace-nowrap">{parameter.name}</th>
<th>
<code>{constructHyperlinkedText(parameter.constraintTokens)}</code>
</th>
<th>{parameter.optional ? 'Yes' : 'No'}</th>
<th>
<code>{constructHyperlinkedText(parameter.defaultTokens)}</code>
</th>
<th>None</th>
</tr>
))}
</tbody>
</table>
</div>
);
}

View File

@@ -9,7 +9,13 @@ export interface ClassProps {
export function Class({ data }: ClassProps) {
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameters}
>
<>
{data.properties.length ? <PropertyList data={data.properties} /> : null}
{data.methods.length ? <MethodList data={data.methods} /> : null}

View File

@@ -8,7 +8,13 @@ export interface FunctionProps {
export function Function({ data }: FunctionProps) {
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameters}
>
<ParameterTable data={data.parameters} />
</DocContainer>
);

View File

@@ -9,7 +9,13 @@ export interface InterfaceProps {
export function Interface({ data }: InterfaceProps) {
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameters}
>
<>
{data.properties.length ? <PropertyList data={data.properties} /> : null}
{data.methods.length ? <MethodList data={data.methods} /> : null}

View File

@@ -7,7 +7,13 @@ export interface TypeAliasProps {
export function TypeAlias({ data }: TypeAliasProps) {
return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<DocContainer
name={data.name}
kind={data.kind}
excerpt={data.excerpt}
summary={data.summary}
typeParams={data.typeParameters}
>
<div>WIP</div>
</DocContainer>
);