feat(website): add extends clauses, enum members and automatic -types links (#8270)

* feat(website): add extends clauses, enum members and automatic -types links

* chore: remove vscode settings

* refactor: remove util file
This commit is contained in:
Suneet Tipirneni
2022-07-12 16:42:32 -04:00
committed by GitHub
parent 787654816d
commit 1ed605eaa4
21 changed files with 234 additions and 119 deletions

View File

@@ -1,28 +1,32 @@
import type { ReactNode } from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vs } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { Separator } from './Seperator';
import { HyperlinkedText } from './HyperlinkedText';
import { Section } from './Section';
import { TypeParamTable } from './TypeParamTable';
import { generateIcon } from '~/util/icon';
import type { TypeParameterData } from '~/util/parse.server';
import type { TokenDocumentation, TypeParameterData } from '~/util/parse.server';
export interface DocContainerProps {
name: string;
kind: string;
excerpt: string;
summary?: string | null;
children?: JSX.Element | JSX.Element[];
children?: ReactNode;
extendsTokens?: TokenDocumentation[] | null;
typeParams?: TypeParameterData[];
}
export function DocContainer({ name, kind, excerpt, summary, typeParams, children }: DocContainerProps) {
export function DocContainer({ name, kind, excerpt, summary, typeParams, children, extendsTokens }: DocContainerProps) {
return (
<>
<div className="bg-white border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-5">
<h1 className="font-mono break-all m-0">
<div className="bg-white border-b-solid border-gray border-width-0.5 sticky top-0 px-10 py-2">
<h2 className="font-mono break-all m-0">
{generateIcon(kind, 'mr-2')}
{name}
</h1>
</h2>
</div>
<div className="p-10">
<div>
<SyntaxHighlighter
@@ -35,15 +39,21 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
{excerpt}
</SyntaxHighlighter>
</div>
<h2>Summary</h2>
<p className="color-slate-500">{summary ?? 'No summary provided.'}</p>
<Separator />
{extendsTokens?.length ? (
<div className="flex flex-row items-center">
<h2 className="mr-5">Extends</h2>
<p className="font-mono">
<HyperlinkedText tokens={extendsTokens} />
</p>
</div>
) : null}
<Section title="Summary">
<p className="color-slate-500">{summary ?? 'No summary provided.'}</p>
</Section>
{typeParams?.length ? (
<>
<h2>Type Parameters</h2>
<Section title="Type Parameters">
<TypeParamTable data={typeParams} className="mb-5 p-3" />
<Separator />
</>
</Section>
) : null}
<div>{children}</div>
</div>