feat(website): show package members in a sidebar (#8245)

* feat(website): show package members in a sidebar

* fix: put response instead of loader

* Apply suggestions from code review

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

* chore: make requested changes

* refactor: make only package list scrollable

* feat: make sidebar mobile responsive

* fix: breakpoints for sidebar

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

packages/website/src/components/DocContainer.tsx

@@ -1,7 +1,7 @@
-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 { generateIcon } from '~/util/icon';
 import type { TypeParameterData } from '~/util/parse.server';
 
 export interface DocContainerProps {
@@ -13,27 +13,25 @@ export interface DocContainerProps {
 	typeParams?: TypeParameterData[];
 }
 
-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, typeParams, children }: DocContainerProps) {
 	return (
 		<div className="px-10">
-			<h1 style={{ fontFamily: 'JetBrains Mono' }} className="flex items-csenter content-center">
-				{icons[kind as keyof typeof icons]}
+			<h1 className="font-mono flex items-center content-center break-all">
+				{generateIcon(kind, 'mr-2')}
 				{name}
 			</h1>
 			<h3>Code declaration:</h3>
-			<SyntaxHighlighter language="typescript" style={vs} codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}>
-				{excerpt}
-			</SyntaxHighlighter>
+			<div>
+				<SyntaxHighlighter
+					wrapLines
+					wrapLongLines
+					language="typescript"
+					style={vs}
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+				>
+					{excerpt}
+				</SyntaxHighlighter>
+			</div>
 			{typeParams?.length ? (
 				<>
 					<h3>Type Parameters</h3>

packages/website/src/components/ItemSidebar.tsx

@@ -0,0 +1,45 @@
+import { AiOutlineMenu } from 'react-icons/ai';
+import { VscPackage } from 'react-icons/vsc';
+import { generateIcon } from '~/util/icon';
+import type { getMembers } from '~/util/parse.server';
+
+export interface ItemListProps {
+	packageName: string;
+	data: {
+		members: ReturnType<typeof getMembers>;
+	};
+}
+
+function onMenuClick() {
+	console.log('menu clicked');
+	// Todo show/hide list
+}
+
+export function ItemSidebar({ packageName, data }: ItemListProps) {
+	return (
+		<div className="flex flex-col max-h-full min-w-[270px] border-r-solid border-b-solid border-gray border-width-0.5">
+			<div className="flex justify-between content-center items-center border-b-solid border-gray border-width-0.5">
+				<h1 className="px-2 font-mono flex items-center content-center">
+					<VscPackage className="px-1" />
+					{`${packageName}`}
+				</h1>
+				<button className="lg:hidden mr-2 bg-transparent border-none" onClick={onMenuClick}>
+					<AiOutlineMenu size={32} />
+				</button>
+			</div>
+			<div className="hidden lg:block overflow-y-scroll overflow-x-clip p-7">
+				{data.members.map((member, i) => (
+					<div key={i} className="mb-1">
+						<a
+							className="flex content-center items-center align-center font-mono no-underline break-all color-blue-500"
+							href={member.path}
+						>
+							{generateIcon(member.kind, 'px-1')}
+							{member.name}
+						</a>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

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

@@ -14,7 +14,7 @@ export function Class({ data }: ClassProps) {
 			kind={data.kind}
 			excerpt={data.excerpt}
 			summary={data.summary}
-			typeParams={data.typeParameters}
+			typeParams={data.typeParameterData}
 		>
 			<>
 				{data.properties.length ? <PropertyList data={data.properties} /> : null}

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

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

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

@@ -14,7 +14,7 @@ export function Interface({ data }: InterfaceProps) {
 			kind={data.kind}
 			excerpt={data.excerpt}
 			summary={data.summary}
-			typeParams={data.typeParameters}
+			typeParams={data.typeParameterData}
 		>
 			<>
 				{data.properties.length ? <PropertyList data={data.properties} /> : null}

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

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