refactor: reset state and code cleanup

packages/website/src/components/DocContainer.tsx

@@ -23,7 +23,7 @@ import type { TypeParameterData } from '~/DocModel/TypeParameterMixin';
 import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
 import type { TokenDocumentation } from '~/util/parse.server';
 
-export interface DocContainerProps {
+interface DocContainerProps {
 	name: string;
 	kind: string;
 	excerpt: string;

packages/website/src/components/MethodItem.tsx

@@ -6,9 +6,7 @@ import { TSDoc } from './tsdoc/TSDoc';
 import type { ApiMethodJSON, ApiMethodSignatureJSON } from '~/DocModel/ApiNodeJSONEncoder';
 import { Visibility } from '~/DocModel/Visibility';
 
-type MethodResolvable = ApiMethodJSON | ApiMethodSignatureJSON;
-
-function getShorthandName(data: MethodResolvable) {
+function getShorthandName(data: ApiMethodJSON | ApiMethodSignatureJSON) {
 	return `${data.name}${data.optional ? '?' : ''}(${data.parameters.reduce((prev, cur, index) => {
 		if (index === 0) {
 			return `${prev}${cur.isOptional ? `${cur.name}?` : cur.name}`;
@@ -18,7 +16,7 @@ function getShorthandName(data: MethodResolvable) {
 	}, '')})`;
 }
 
-export function MethodItem({ data }: { data: MethodResolvable }) {
+export function MethodItem({ data }: { data: ApiMethodJSON | ApiMethodSignatureJSON }) {
 	const method = data as ApiMethodJSON;
 
 	return (

packages/website/src/components/ParameterTable.tsx

@@ -4,6 +4,11 @@ import { Table } from './Table';
 import { TSDoc } from './tsdoc/TSDoc';
 import type { ParameterDocumentation } from '~/util/parse.server';
 
+const columnStyles = {
+	Name: 'font-mono whitespace-nowrap',
+	Type: 'font-mono whitespace-pre-wrap break-normal',
+};
+
 export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
 	const rows = data.map((param) => ({
 		Name: param.name,
@@ -12,11 +17,6 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
 		Description: param.paramCommentBlock ? <TSDoc node={param.paramCommentBlock} /> : 'None',
 	}));
 
-	const columnStyles = {
-		Name: 'font-mono whitespace-nowrap',
-		Type: 'font-mono whitespace-pre-wrap break-normal',
-	};
-
 	return (
 		<Box>
 			<ScrollArea pb="xs" offsetScrollbars>

packages/website/src/components/Section.tsx

@@ -8,7 +8,7 @@ import {
 	Text,
 	useMantineColorScheme,
 } from '@mantine/core';
-import { type ReactNode, useState } from 'react';
+import { type ReactNode, useState, useEffect } from 'react';
 import { VscChevronDown } from 'react-icons/vsc';
 
 const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
@@ -51,6 +51,11 @@ export function Section({
 	const { colorScheme } = useMantineColorScheme();
 	const { classes } = useStyles({ opened });
 
+	useEffect(() => {
+		setOpened(!defaultClosed);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
 	return (
 		<Box sx={{ wordBreak: 'break-all' }}>
 			<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>

packages/website/src/components/Sections.tsx

@@ -1,7 +1,6 @@
 import { Stack, Group, Badge, Title } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
-
 import { MethodList } from './MethodList';
 import { ParameterTable } from './ParameterTable';
 import { PropertyList } from './PropertyList';

packages/website/src/components/SidebarLayout.tsx

@@ -27,7 +27,7 @@ import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import Image from 'next/future/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { type PropsWithChildren, useState } from 'react';
+import { type PropsWithChildren, useState, useEffect } from 'react';
 import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
 import { WiDaySunny, WiNightClear } from 'react-icons/wi';
 import useSWR from 'swr';
@@ -99,6 +99,12 @@ const libraries = [
 	{ label: 'ws', value: 'ws' },
 ];
 
+const libraryMenuItems = libraries.map((item) => (
+	<Menu.Item key={item.label} component={NextLink} href={`/docs/packages/${item.value}/main`}>
+		{item.label}
+	</Menu.Item>
+));
+
 export function SidebarLayout({
 	packageName,
 	branchName,
@@ -117,13 +123,13 @@ export function SidebarLayout({
 	const [openedLibPicker, setOpenedLibPicker] = useState(false);
 	const [openedVersionPicker, setOpenedVersionPicker] = useState(false);
 
-	const { classes } = useStyles({ openedLib: openedLibPicker, openedVersion: openedVersionPicker });
+	useEffect(() => {
+		setOpened(false);
+		setOpenedLibPicker(false);
+		setOpenedVersionPicker(false);
+	}, []);
 
-	const libraryMenuItems = libraries.map((item) => (
-		<Menu.Item key={item.label} component={NextLink} href={`/docs/packages/${item.value}/main`}>
-			{item.label}
-		</Menu.Item>
-	));
+	const { classes } = useStyles({ openedLib: openedLibPicker, openedVersion: openedVersionPicker });
 
 	const versionMenuItems =
 		versions?.map((item) => (

packages/website/src/components/TypeParamTable.tsx

@@ -4,6 +4,12 @@ import { Table } from './Table';
 import { TSDoc } from './tsdoc/TSDoc';
 import type { TypeParameterData } from '~/DocModel/TypeParameterMixin';
 
+const rowElements = {
+	Name: 'font-mono whitespace-nowrap',
+	Constraints: 'font-mono whitespace-pre break-normal',
+	Default: 'font-mono whitespace-pre break-normal',
+};
+
 export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 	const rows = data.map((typeParam) => ({
 		Name: typeParam.name,
@@ -13,12 +19,6 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 		Description: typeParam.commentBlock ? <TSDoc node={typeParam.commentBlock} /> : 'None',
 	}));
 
-	const rowElements = {
-		Name: 'font-mono whitespace-nowrap',
-		Constraints: 'font-mono whitespace-pre break-normal',
-		Default: 'font-mono whitespace-pre break-normal',
-	};
-
 	return (
 		<ScrollArea pb="xs" offsetScrollbars>
 			<Table

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

@@ -3,12 +3,7 @@ import { StandardTags } from '@microsoft/tsdoc';
 import type { ReactNode } from 'react';
 import { VscWarning } from 'react-icons/vsc';
 
-export interface BlockProps {
-	children: ReactNode;
-	title: string;
-}
-
-export function Block({ children, title }: BlockProps) {
+export function Block({ children, title }: { children: ReactNode; title: string }) {
 	return (
 		<Box>
 			<Title order={5}>{title}</Title>
@@ -17,18 +12,13 @@ export function Block({ children, title }: BlockProps) {
 	);
 }
 
-export interface BlockCommentProps {
-	tagName: string;
-	children: ReactNode;
-	index?: number | undefined;
-}
-
-export interface ExampleBlockProps {
+export function ExampleBlock({
+	children,
+	exampleIndex,
+}: {
 	children: ReactNode;
 	exampleIndex?: number | undefined;
-}
-
-export function ExampleBlock({ children, exampleIndex }: ExampleBlockProps): JSX.Element {
+}): JSX.Element {
 	return <Block title={`Example ${exampleIndex ? exampleIndex : ''}`}>{children}</Block>;
 }
 
@@ -48,7 +38,15 @@ export function RemarksBlock({ children }: { children: ReactNode }): JSX.Element
 	return <Block title="Remarks">{children}</Block>;
 }
 
-export function BlockComment({ children, tagName, index }: BlockCommentProps): JSX.Element {
+export function BlockComment({
+	children,
+	tagName,
+	index,
+}: {
+	tagName: string;
+	children: ReactNode;
+	index?: number | undefined;
+}): JSX.Element {
 	switch (tagName.toUpperCase()) {
 		case StandardTags.example.tagNameWithUpperCase:
 			return <ExampleBlock exampleIndex={index}>{children}</ExampleBlock>;