refactor: use eslint-config-neon for packages. (#8579)

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

packages/website/src/components/CodeListing.tsx

@@ -37,15 +37,15 @@ export function CodeListing({
 	deprecation,
 	inheritanceData,
 }: PropsWithChildren<{
-	name: string;
-	separator?: CodeListingSeparatorType;
-	typeTokens: TokenDocumentation[];
-	readonly?: boolean;
-	optional?: boolean;
-	summary?: ApiItemJSON['summary'];
 	comment?: AnyDocNodeJSON | null;
 	deprecation?: AnyDocNodeJSON | null;
 	inheritanceData?: InheritanceData | null;
+	name: string;
+	optional?: boolean;
+	readonly?: boolean;
+	separator?: CodeListingSeparatorType;
+	summary?: ApiItemJSON['summary'];
+	typeTokens: TokenDocumentation[];
 }>) {
 	const { classes } = useStyles();
 	const matches = useMediaQuery('(max-width: 768px)');

packages/website/src/components/DocContainer.tsx

@@ -2,7 +2,6 @@ import type {
 	ApiItemJSON,
 	TokenDocumentation,
 	TypeParameterData,
-	AnyDocNodeJSON,
 	ApiClassJSON,
 	ApiInterfaceJSON,
 } from '@discordjs/api-extractor-utils';
@@ -40,16 +39,15 @@ import { TypeParamTable } from './TypeParamTable';
 import { TSDoc } from './tsdoc/TSDoc';
 
 type DocContainerProps = PropsWithChildren<{
-	name: string;
-	kind: string;
 	excerpt: string;
-	summary?: ApiItemJSON['summary'];
 	extendsTokens?: TokenDocumentation[] | null;
 	implementsTokens?: TokenDocumentation[][];
-	typeParams?: TypeParameterData[];
-	comment?: AnyDocNodeJSON | null;
+	kind: string;
 	methods?: ApiClassJSON['methods'] | ApiInterfaceJSON['methods'] | null;
+	name: string;
 	properties?: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] | null;
+	summary?: ApiItemJSON['summary'];
+	typeParams?: TypeParameterData[];
 }>;
 
 function generateIcon(kind: string) {
@@ -161,7 +159,7 @@ export function DocContainer({
 				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
 					<Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder>
 						<ScrollArea p="sm" offsetScrollbars>
-							<TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems>
+							<TableOfContentItems properties={properties ?? []} methods={methods ?? []} />
 						</ScrollArea>
 					</Aside>
 				</MediaQuery>

packages/website/src/components/HyperlinkedText.tsx

@@ -2,13 +2,6 @@ import type { TokenDocumentation } from '@discordjs/api-extractor-utils';
 import { Anchor, Text } from '@mantine/core';
 import Link from 'next/link';
 
-/**
- * Constructs a hyperlinked html node based on token type references
- *
- * @param tokens An array of documentation tokens to construct the HTML
- *
- * @returns An array of JSX elements and string comprising the hyperlinked text
- */
 export function HyperlinkedText({ tokens }: { tokens: TokenDocumentation[] }) {
 	return (
 		<>

packages/website/src/components/Section.tsx

@@ -40,11 +40,11 @@ export function Section({
 	defaultClosed = false,
 	children,
 }: PropsWithChildren<{
-	title: string;
+	defaultClosed?: boolean;
+	dense?: boolean;
 	icon?: JSX.Element;
 	padded?: boolean;
-	dense?: boolean;
-	defaultClosed?: boolean;
+	title: string;
 }>) {
 	const [opened, setOpened] = useState(!defaultClosed);
 	const { colorScheme } = useMantineColorScheme();
@@ -57,7 +57,7 @@ export function Section({
 
 	return (
 		<Box sx={{ wordBreak: 'break-all' }}>
-			<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>
+			<UnstyledButton className={classes.control} onClick={() => setOpened((isOpen) => !isOpen)}>
 				<Group position="apart">
 					<Group>
 						{icon ? (

packages/website/src/components/SidebarItems.tsx

@@ -61,7 +61,7 @@ function resolveIcon(item: keyof GroupedMembers) {
 			return <VscSymbolField size={20} />;
 		case 'Variables':
 			return <VscSymbolVariable size={20} />;
-		case 'Functions':
+		default:
 			return <VscSymbolMethod size={20} />;
 	}
 }
@@ -115,12 +115,12 @@ export function SidebarItems({
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (
 					<Section key={idx} title={group} icon={resolveIcon(group)}>
-						{groupItems[group].map((member, i) => (
-							<Link key={i} href={member.path} passHref prefetch={false}>
+						{groupItems[group].map((member, index) => (
+							<Link key={index} href={member.path} passHref prefetch={false}>
 								<NavLink
 									className={classes.link}
 									component="a"
-									onClick={() => setOpened((o) => !o)}
+									onClick={() => setOpened((isOpened) => !isOpened)}
 									label={
 										<Group>
 											<Text sx={{ textOverflow: 'ellipsis', overflow: 'hidden' }} className="line-clamp-1">
@@ -135,7 +135,7 @@ export function SidebarItems({
 									}
 									active={asPathWithoutQueryAndAnchor === member.path}
 									variant="filled"
-								></NavLink>
+								/>
 							</Link>
 						))}
 					</Section>

packages/website/src/components/SidebarLayout.tsx

@@ -25,10 +25,10 @@ import {
 	Title,
 } from '@mantine/core';
 import { NextLink } from '@mantine/next';
-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 { MDXRemoteSerializeResult } from 'next-mdx-remote';
 import { type PropsWithChildren, useState, useEffect, useMemo } from 'react';
 import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
 import { WiDaySunny, WiNightClear } from 'react-icons/wi';
@@ -37,16 +37,19 @@ import { SidebarItems } from './SidebarItems';
 import type { findMember } from '~/util/model.server';
 import { PACKAGES } from '~/util/packages';
 
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const fetcher = async (url: string) => {
+	const res = await fetch(url);
+	return res.json();
+};
 
 export interface SidebarLayoutProps {
-	packageName: string;
 	branchName: string;
 	data: {
-		members: ReturnType<typeof getMembers>;
 		member: ReturnType<typeof findMember>;
+		members: ReturnType<typeof getMembers>;
 		source: MDXRemoteSerializeResult;
 	};
+	packageName: string;
 
 	selectedMember?: ApiItemJSON | undefined;
 }
@@ -55,8 +58,8 @@ export type Members = SidebarLayoutProps['data']['members'];
 
 export interface GroupedMembers {
 	Classes: Members;
-	Functions: Members;
 	Enums: Members;
+	Functions: Members;
 	Interfaces: Members;
 	Types: Members;
 	Variables: Members;
@@ -158,6 +161,7 @@ export function SidebarLayout({
 		fetcher,
 	);
 	const theme = useMantineTheme();
+	// eslint-disable-next-line @typescript-eslint/unbound-method
 	const { colorScheme, toggleColorScheme } = useMantineColorScheme();
 
 	const [opened, setOpened] = useState(false);
@@ -188,7 +192,7 @@ export function SidebarLayout({
 					{item}
 				</Menu.Item>
 			)) ?? [],
-		[versions],
+		[versions, packageName],
 	);
 
 	const breadcrumbs = useMemo(
@@ -302,7 +306,7 @@ export function SidebarLayout({
 							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
 								<Burger
 									opened={opened}
-									onClick={() => (router.isFallback ? null : setOpened((o) => !o))}
+									onClick={() => (router.isFallback ? null : setOpened((isOpened) => !isOpened))}
 									size="sm"
 									color={theme.colors.gray![6]}
 									mr="xl"
@@ -346,7 +350,7 @@ export function SidebarLayout({
 				<Box className={classes.content} p="lg" pb={80}>
 					{children}
 				</Box>
-				<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })}></Box>
+				<Box sx={(theme) => ({ height: 200, [theme.fn.smallerThan('sm')]: { height: 300 } })} />
 				<Box
 					component="footer"
 					sx={{ paddingRight: data?.member?.kind !== 'Class' && data?.member?.kind !== 'Interface' ? 54 : 324 }}

packages/website/src/components/Table.tsx

@@ -6,8 +6,8 @@ export function Table({
 	columns,
 	columnStyles,
 }: {
-	columns: string[];
 	columnStyles?: Record<string, string>;
+	columns: string[];
 	rows: Record<string, ReactNode>[];
 }) {
 	return (

packages/website/src/components/TableOfContentItems.tsx

@@ -48,6 +48,7 @@ export function TableOfContentItems({
 					</Group>
 				</Box>
 			)),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[properties, colorScheme],
 	);
 
@@ -73,7 +74,7 @@ export function TableOfContentItems({
 					</Box>
 				);
 			}),
-		[methods, colorScheme],
+		[methods, classes.link],
 	);
 
 	return (

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

@@ -16,7 +16,6 @@ export function Class({ data }: { data: ApiClassJSON }) {
 			typeParams={data.typeParameters}
 			extendsTokens={data.extendsTokens}
 			implementsTokens={data.implementsTokens}
-			comment={data.comment}
 			methods={data.methods}
 			properties={data.properties}
 		>

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

@@ -40,8 +40,8 @@ export function BlockComment({
 	tagName,
 	index,
 }: PropsWithChildren<{
-	tagName: string;
 	index?: number | undefined;
+	tagName: string;
 }>): JSX.Element {
 	switch (tagName.toUpperCase()) {
 		case StandardTags.example.tagNameWithUpperCase:

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

@@ -63,6 +63,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 
 					return null;
 				}
+
 				case DocNodeKind.CodeSpan: {
 					const { code } = node as DocFencedCodeJSON;
 					return (
@@ -71,6 +72,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						</Code>
 					);
 				}
+
 				case DocNodeKind.FencedCode: {
 					const { language, code } = node as DocFencedCodeJSON;
 					return (
@@ -86,6 +88,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						</SyntaxHighlighter>
 					);
 				}
+
 				case DocNodeKind.ParamBlock:
 				case DocNodeKind.Block: {
 					const { tag } = node as DocBlockJSON;
@@ -102,6 +105,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 						</BlockComment>
 					);
 				}
+
 				case DocNodeKind.Comment: {
 					const comment = node as DocCommentJSON;
 					// Cheat a bit by finding out how many comments we have beforehand...
@@ -111,6 +115,7 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
 
 					return <Box key={idx}>{comment.customBlocks.map((node, idx) => createNode(node, idx))}</Box>;
 				}
+
 				default:
 					console.log(`Captured unknown node kind: ${node.kind}`);
 					break;