feat: add website documentation early mvp (#8183)

Co-authored-by: iCrawl <buechler.noel@outlook.com>

packages/website/src/components/DocContainer.tsx

@@ -0,0 +1,39 @@
+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';
+
+export interface DocContainerProps {
+	name: string;
+	kind: string;
+	excerpt: string;
+	summary?: string | null;
+	children?: JSX.Element;
+}
+
+const symbolClass = 'mr-2';
+const icons = {
+	Class: <VscSymbolClass color="blue" className={symbolClass} />,
+	Method: <VscSymbolMethod className={symbolClass} />,
+	Function: <VscSymbolMethod color="purple" className={symbolClass} />,
+	Enum: <VscSymbolEnum className={symbolClass} />,
+	Interface: <VscSymbolInterface color="blue" className={symbolClass} />,
+	TypeAlias: <VscSymbolVariable color="blue" className={symbolClass} />,
+};
+
+export function DocContainer({ name, kind, excerpt, summary, children }: DocContainerProps) {
+	return (
+		<div className="px-10">
+			<h1 style={{ fontFamily: 'JetBrains Mono' }} className="flex items-csenter content-center">
+				{icons[kind as keyof typeof icons]}
+				{name}
+			</h1>
+			<h3>Code declaration:</h3>
+			<SyntaxHighlighter language="typescript" style={vs} codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}>
+				{excerpt}
+			</SyntaxHighlighter>
+			<h3>Summary</h3>
+			<p>{summary ?? 'No summary provided.'}</p>
+			{children}
+		</div>
+	);
+}

packages/website/src/components/MethodList.tsx

@@ -0,0 +1,19 @@
+import type { DocMethod } from '~/DocModel/DocMethod';
+import type { DocMethodSignature } from '~/DocModel/DocMethodSignature';
+
+export interface MethodListProps {
+	data: (ReturnType<DocMethod['toJSON']> | ReturnType<DocMethodSignature['toJSON']>)[];
+}
+
+export function MethodList({ data }: MethodListProps) {
+	return (
+		<div>
+			<h3>Methods</h3>
+			<ul>
+				{data.map((method) => (
+					<li key={method.name}>{method.name}</li>
+				))}
+			</ul>
+		</div>
+	);
+}

packages/website/src/components/ParameterTable.tsx

@@ -0,0 +1,35 @@
+import { constructHyperlinkedText } from '../util/util';
+import type { ParameterDocumentation } from '~/util/parse.server';
+
+interface ParameterDetailProps {
+	data: ParameterDocumentation[];
+}
+
+export function ParameterTable({ data }: ParameterDetailProps) {
+	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>Type</th>
+						<th>Optional</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.tokens)}</code>
+							</th>
+							<th>{parameter.isOptional ? 'Yes' : 'No'}</th>
+							<th>None</th>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}

packages/website/src/components/PropertyList.tsx

@@ -0,0 +1,18 @@
+import type { DocProperty } from '~/DocModel/DocProperty';
+
+export interface PropertyListProps {
+	data: ReturnType<DocProperty['toJSON']>[];
+}
+
+export function PropertyList({ data }: PropertyListProps) {
+	return (
+		<div>
+			<h3>Properties</h3>
+			<ul>
+				{data.map((prop) => (
+					<li key={prop.name}>{prop.name}</li>
+				))}
+			</ul>
+		</div>
+	);
+}

packages/website/src/components/model/Class.tsx

@@ -0,0 +1,19 @@
+import { DocContainer } from '../DocContainer';
+import { MethodList } from '../MethodList';
+import { PropertyList } from '../PropertyList';
+import type { DocClass } from '~/DocModel/DocClass';
+
+export interface ClassProps {
+	data: ReturnType<DocClass['toJSON']>;
+}
+
+export function Class({ data }: ClassProps) {
+	return (
+		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
+			<>
+				{data.properties.length ? <PropertyList data={data.properties} /> : null}
+				{data.methods.length ? <MethodList data={data.methods} /> : null}
+			</>
+		</DocContainer>
+	);
+}

packages/website/src/components/model/Enum.tsx

@@ -0,0 +1,21 @@
+import { DocContainer } from '../DocContainer';
+import type { DocEnum } from '~/DocModel/DocEnum';
+
+export interface EnumProps {
+	data: ReturnType<DocEnum['toJSON']>;
+}
+
+export function Enum({ data }: EnumProps) {
+	return (
+		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
+			<>
+				<h3>Members</h3>
+				<ul>
+					{data.members.map((member) => (
+						<li key={member.name}>{member.name}</li>
+					))}
+				</ul>
+			</>
+		</DocContainer>
+	);
+}

packages/website/src/components/model/Function.tsx

@@ -0,0 +1,15 @@
+import { DocContainer } from '../DocContainer';
+import { ParameterTable } from '../ParameterTable';
+import type { DocFunction } from '~/DocModel/DocFunction';
+
+export interface FunctionProps {
+	data: ReturnType<DocFunction['toJSON']>;
+}
+
+export function Function({ data }: FunctionProps) {
+	return (
+		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
+			<ParameterTable data={data.parameters} />
+		</DocContainer>
+	);
+}

packages/website/src/components/model/Interface.tsx

@@ -0,0 +1,19 @@
+import { DocContainer } from '../DocContainer';
+import { MethodList } from '../MethodList';
+import { PropertyList } from '../PropertyList';
+import type { DocInterface } from '~/DocModel/DocInterface';
+
+export interface InterfaceProps {
+	data: ReturnType<DocInterface['toJSON']>;
+}
+
+export function Interface({ data }: InterfaceProps) {
+	return (
+		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
+			<>
+				{data.properties.length ? <PropertyList data={data.properties} /> : null}
+				{data.methods.length ? <MethodList data={data.methods} /> : null}
+			</>
+		</DocContainer>
+	);
+}

packages/website/src/components/model/TypeAlias.tsx

@@ -0,0 +1,14 @@
+import { DocContainer } from '../DocContainer';
+import type { DocTypeAlias } from '~/DocModel/DocTypeAlias';
+
+export interface TypeAliasProps {
+	data: ReturnType<DocTypeAlias['toJSON']>;
+}
+
+export function TypeAlias({ data }: TypeAliasProps) {
+	return (
+		<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
+			<div>WIP</div>
+		</DocContainer>
+	);
+}

packages/website/src/components/model/Variable.tsx

@@ -0,0 +1,10 @@
+import { DocContainer } from '../DocContainer';
+import type { DocVariable } from '~/DocModel/DocVariable';
+
+export interface VariableProps {
+	data: ReturnType<DocVariable['toJSON']>;
+}
+
+export function Variable({ data }: VariableProps) {
+	return <DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary} />;
+}