Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: upgrade deps (#10824)

Browse Source
This commit is contained in:
Noel
2025-04-05 13:18:56 +02:00
committed by GitHub
parent 432aba3df7
commit f580de8025
200 changed files with 6756 additions and 12893 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/website/src/app/docs/packages/[packageName]/[version]/layout.tsx
View File

@@ -31,7 +31,7 @@ export default async function Layout({
return (
// eslint-disable-next-line react/no-unknown-property
<div vaul-drawer-wrapper="" className="mx-auto flex max-w-screen-2xl flex-col gap-12 p-6 md:flex-row">
<div className="mx-auto flex max-w-screen-2xl flex-col gap-12 p-6 md:flex-row" vaul-drawer-wrapper="">
<div className="sticky top-6 hidden flex-shrink-0 self-start md:block">
<OverlayScrollbarsComponent
className="max-h-[calc(100dvh-48px)]"
@@ -57,9 +57,9 @@ export default async function Layout({
<Drawer>
<Navigation
className="max-w-none overflow-auto p-0 lg:max-w-none"
drawer
packageName={params.packageName}
version={params.version}
drawer
/>
</Drawer>
</div>

2
apps/website/src/app/layout.tsx
View File

@@ -76,7 +76,7 @@ export const metadata: Metadata = {
export default async function RootLayout({ children }: PropsWithChildren) {
return (
<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable} antialiased`} suppressHydrationWarning>
<html className={`${GeistSans.variable} ${GeistMono.variable} antialiased`} lang="en" suppressHydrationWarning>
<body className="relative bg-white dark:bg-[#121212]">
<LocalizedStringProvider locale="en-US" />
<Providers>

1
apps/website/src/app/providers.tsx
View File

@@ -14,7 +14,6 @@ export function Providers({ children }: PropsWithChildren) {
useSystemThemeFallback();
return (
// eslint-disable-next-line @typescript-eslint/unbound-method
<RouterProvider navigate={router.push}>
<JotaiProvider>
<ThemeProvider attribute="class">{children}</ThemeProvider>

1
apps/website/src/components/Badges.tsx
View File

@@ -20,6 +20,7 @@ export async function Badges({ node }: { readonly node: any }) {
const isOptional = node.isOptional;
const isExternal = node.isExternal;
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const isAny = isDeprecated || isProtected || isStatic || isAbstract || isReadonly || isOptional || isExternal;
return isAny ? (

10
apps/website/src/components/ConstructorNode.tsx
View File

@@ -15,11 +15,11 @@ export async function ConstructorNode({ node, version }: { readonly node: any; r
<div className="flex place-content-between place-items-center">
<h3
id="constructor"
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group break-words font-mono font-semibold`}
id="constructor"
>
{/* constructor({parsedContent.constructor.parametersString}) */}
<Link href="#constructor" className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block">
<Link className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block" href="#constructor">
<LinkIcon aria-hidden size={16} />
</Link>
constructor({node.parameters?.length ? <ParameterNode node={node.parameters} version={version} /> : null})
@@ -34,18 +34,18 @@ export async function ConstructorNode({ node, version }: { readonly node: any; r
>
<Code2
aria-hidden
size={20}
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
size={20}
/>
</a>
</div>
{node.summary?.summarySection.length ? (
<SummaryNode padding node={node.summary.summarySection} version={version} />
<SummaryNode node={node.summary.summarySection} padding version={version} />
) : null}
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
</div>
);

42
apps/website/src/components/DocItem.tsx
View File

@@ -29,29 +29,25 @@ async function OverloadNode({
return (
<Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2">
{node.overloads.map((overload: any) => {
return (
<Tab
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
>
<span>Overload {overload.overloadIndex}</span>
</Tab>
);
})}
</TabList>
{node.overloads.map((overload: any) => {
return (
<TabPanel
{node.overloads.map((overload: any) => (
<Tab
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
className="flex flex-col gap-8"
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
>
<DocItem node={overload} packageName={packageName} version={version} />
</TabPanel>
);
})}
<span>Overload {overload.overloadIndex}</span>
</Tab>
))}
</TabList>
{node.overloads.map((overload: any) => (
<TabPanel
className="flex flex-col gap-8"
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
>
<DocItem node={overload} packageName={packageName} version={version} />
</TabPanel>
))}
</Tabs>
);
}
@@ -74,14 +70,14 @@ export function DocItem({
<InformationNode node={node} version={version} />
<OverlayScrollbarsComponent
className="rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
defer
options={{
overflow: { y: 'hidden' },
scrollbars: { autoHide: 'scroll', autoHideDelay: 500, autoHideSuspend: true, clickScroll: true },
}}
className="rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
>
<SyntaxHighlighter className="py-4 text-sm" lang="typescript" code={node.sourceExcerpt} />
<SyntaxHighlighter className="py-4 text-sm" code={node.sourceExcerpt} lang="typescript" />
</OverlayScrollbarsComponent>
{node.summary?.deprecatedBlock.length ? (

12
apps/website/src/components/DocNode.tsx
View File

@@ -12,9 +12,9 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
if (node.resolvedPackage) {
return (
<Link
key={`${node.text}-${idx}`}
className="font-mono text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={`/docs/packages/${node.resolvedPackage.packageName}/${node.resolvedPackage.version ?? version}/${node.uri}`}
key={`${node.text}-${idx}`}
>
{node.text}
</Link>
@@ -24,9 +24,9 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
if (node.uri) {
return (
<a
key={`${node.text}-${idx}`}
className="text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={node.uri}
key={`${node.text}-${idx}`}
rel="external noreferrer noopener"
target="_blank"
>
@@ -39,9 +39,9 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
const href = BuiltinDocumentationLinks[node.text as keyof typeof BuiltinDocumentationLinks];
return (
<a
key={`${node.text}-${idx}`}
className="text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={href}
key={`${node.text}-${idx}`}
rel="external noreferrer noopener"
target="_blank"
>
@@ -55,7 +55,7 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
case 'CodeSpan':
return (
<code key={`${node.text}-${idx}`} className="font-mono text-sm">
<code className="font-mono text-sm" key={`${node.text}-${idx}`}>
{node.text}
</code>
);
@@ -65,14 +65,14 @@ export async function DocNode({ node, version }: { readonly node?: any; readonly
return (
<OverlayScrollbarsComponent
className="my-4 rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
defer
options={{
overflow: { y: 'hidden' },
scrollbars: { autoHide: 'scroll', autoHideDelay: 500, autoHideSuspend: true, clickScroll: true },
}}
className="my-4 rounded-md border border-neutral-300 bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900"
>
<SyntaxHighlighter className="py-4 text-sm " lang={language} code={text} />
<SyntaxHighlighter className="py-4 text-sm " code={text} lang={language} />
</OverlayScrollbarsComponent>
);
}

148
apps/website/src/components/EnumMemberNode.tsx
View File

@@ -30,83 +30,81 @@ export async function EnumMemberNode({
</h2>
<div className="flex flex-col gap-8">
{node.map((enumMember: any, idx: number) => {
return (
<Fragment key={`${enumMember.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<h3
id={enumMember.displayName}
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group break-words font-mono font-semibold`}
>
<Badges node={enumMember} />
<span>
<Link
href={`#${enumMember.displayName}`}
className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block"
>
<LinkIcon aria-hidden size={16} />
</Link>
{enumMember.displayName}
{enumMember.parameters?.length ? (
<ParameterNode node={enumMember.parameters} version={version} />
) : null}
{enumMember.initializerExcerpt ? (
<>
{' = '}
<ExcerptNode node={enumMember.initializerExcerpt} version={version} />
</>
) : null}
</span>
</h3>
{node.map((enumMember: any, idx: number) => (
<Fragment key={`${enumMember.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<h3
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group break-words font-mono font-semibold`}
id={enumMember.displayName}
>
<Badges node={enumMember} />
<span>
<Link
className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block"
href={`#${enumMember.displayName}`}
>
<LinkIcon aria-hidden size={16} />
</Link>
{enumMember.displayName}
{enumMember.parameters?.length ? (
<ParameterNode node={enumMember.parameters} version={version} />
) : null}
{enumMember.initializerExcerpt ? (
<>
{' = '}
<ExcerptNode node={enumMember.initializerExcerpt} version={version} />
</>
) : null}
</span>
</h3>
<a
aria-label="Open source file in new tab"
className="min-w-min"
href={
enumMember.sourceLine ? `${enumMember.sourceURL}#L${enumMember.sourceLine}` : enumMember.sourceURL
}
rel="external noreferrer noopener"
target="_blank"
>
<Code2
aria-hidden
size={20}
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
/>
</a>
</div>
{enumMember.summary?.deprecatedBlock.length ? (
<DeprecatedNode deprecatedBlock={enumMember.summary.deprecatedBlock} version={version} />
) : null}
{enumMember.summary?.summarySection.length ? (
<SummaryNode padding node={enumMember.summary.summarySection} version={version} />
) : null}
{enumMember.summary?.exampleBlocks.length ? (
<ExampleNode node={enumMember.summary.exampleBlocks} version={version} />
) : null}
{enumMember.summary?.returnsBlock.length ? (
<ReturnNode padding node={enumMember.summary.returnsBlock} version={version} />
) : null}
{enumMember.inheritedFrom ? (
<InheritedFromNode node={enumMember.inheritedFrom} packageName={packageName} version={version} />
) : null}
{enumMember.summary?.seeBlocks.length ? (
<SeeNode padding node={enumMember.summary.seeBlocks} version={version} />
) : null}
<a
aria-label="Open source file in new tab"
className="min-w-min"
href={
enumMember.sourceLine ? `${enumMember.sourceURL}#L${enumMember.sourceLine}` : enumMember.sourceURL
}
rel="external noreferrer noopener"
target="_blank"
>
<Code2
aria-hidden
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
size={20}
/>
</a>
</div>
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
</div>
</Fragment>
);
})}
{enumMember.summary?.deprecatedBlock.length ? (
<DeprecatedNode deprecatedBlock={enumMember.summary.deprecatedBlock} version={version} />
) : null}
{enumMember.summary?.summarySection.length ? (
<SummaryNode node={enumMember.summary.summarySection} padding version={version} />
) : null}
{enumMember.summary?.exampleBlocks.length ? (
<ExampleNode node={enumMember.summary.exampleBlocks} version={version} />
) : null}
{enumMember.summary?.returnsBlock.length ? (
<ReturnNode node={enumMember.summary.returnsBlock} padding version={version} />
) : null}
{enumMember.inheritedFrom ? (
<InheritedFromNode node={enumMember.inheritedFrom} packageName={packageName} version={version} />
) : null}
{enumMember.summary?.seeBlocks.length ? (
<SeeNode node={enumMember.summary.seeBlocks} padding version={version} />
) : null}
</div>
<div aria-hidden className="px-4">
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
</Fragment>
))}
</div>
</div>
);

68
apps/website/src/components/EventNode.tsx
View File

@@ -30,12 +30,12 @@ async function EventBodyNode({
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<h3
id={event.displayName}
className={`${overload ? (ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-24' : 'scroll-mt-16') : ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group break-words font-mono font-semibold`}
id={event.displayName}
>
<Badges node={event} /> {event.displayName}
<span>
<Link href={`#${event.displayName}`} className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block">
<Link className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block" href={`#${event.displayName}`}>
<LinkIcon aria-hidden size={16} />
</Link>
{event.typeParameters?.length ? (
@@ -58,8 +58,8 @@ async function EventBodyNode({
>
<Code2
aria-hidden
size={20}
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
size={20}
/>
</a>
</div>
@@ -69,7 +69,7 @@ async function EventBodyNode({
) : null}
{event.summary?.summarySection.length ? (
<SummaryNode padding node={event.summary.summarySection} version={version} />
<SummaryNode node={event.summary.summarySection} padding version={version} />
) : null}
{event.summary?.exampleBlocks.length ? (
@@ -77,17 +77,17 @@ async function EventBodyNode({
) : null}
{event.summary?.returnsBlock.length ? (
<ReturnNode padding node={event.summary.returnsBlock} version={version} />
<ReturnNode node={event.summary.returnsBlock} padding version={version} />
) : null}
{event.inheritedFrom ? (
<InheritedFromNode node={event.inheritedFrom} packageName={packageName} version={version} />
) : null}
{event.summary?.seeBlocks.length ? <SeeNode padding node={event.summary.seeBlocks} version={version} /> : null}
{event.summary?.seeBlocks.length ? <SeeNode node={event.summary.seeBlocks} padding version={version} /> : null}
</div>
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
</>
);
@@ -105,29 +105,25 @@ async function OverloadNode({
return (
<Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2">
{event.overloads.map((overload: any) => {
return (
<Tab
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
>
<span>Overload {overload.overloadIndex}</span>
</Tab>
);
})}
</TabList>
{event.overloads.map((overload: any) => {
return (
<TabPanel
{event.overloads.map((overload: any) => (
<Tab
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
className="flex flex-col gap-8"
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
>
<EventBodyNode overload event={overload} packageName={packageName} version={version} />
</TabPanel>
);
})}
<span>Overload {overload.overloadIndex}</span>
</Tab>
))}
</TabList>
{event.overloads.map((overload: any) => (
<TabPanel
className="flex flex-col gap-8"
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
>
<EventBodyNode event={overload} overload packageName={packageName} version={version} />
</TabPanel>
))}
</Tabs>
);
}
@@ -147,29 +143,29 @@ export async function EventNode({
<h2 className="flex place-items-center gap-2 text-xl font-bold">
<VscSymbolEvent aria-hidden className="flex-shrink-0" size={24} /> Events
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-8">
{node.map((event: any) => {
return event.overloads?.length ? (
{node.map((event: any) =>
event.overloads?.length ? (
<OverloadNode
key={`${event.displayName}-${event.overloadIndex}`}
event={event}
key={`${event.displayName}-${event.overloadIndex}`}
packageName={packageName}
version={version}
/>
) : (
<EventBodyNode
key={`${event.displayName}-${event.overloadIndex}`}
event={event}
key={`${event.displayName}-${event.overloadIndex}`}
packageName={packageName}
version={version}
/>
);
})}
),
)}
</div>
</CollapsibleContent>
</Collapsible>

6
apps/website/src/components/ExcerptNode.tsx
View File

@@ -18,9 +18,9 @@ export async function ExcerptNode({ node, version }: { readonly node?: any; read
if (excerpt.resolvedItem) {
return (
<Link
key={`${excerpt.resolvedItem.displayName}-${idx}`}
className="text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={`/docs/packages/${excerpt.resolvedItem.packageName}/${excerpt.resolvedItem.version ?? version}/${excerpt.resolvedItem.uri}`}
key={`${excerpt.resolvedItem.displayName}-${idx}`}
>
{excerpt.text}
</Link>
@@ -30,9 +30,9 @@ export async function ExcerptNode({ node, version }: { readonly node?: any; read
if (excerpt.href) {
return (
<a
key={`${excerpt.text}-${idx}`}
className="text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={excerpt.href}
key={`${excerpt.text}-${idx}`}
rel="external noreferrer noopener"
target="_blank"
>
@@ -45,9 +45,9 @@ export async function ExcerptNode({ node, version }: { readonly node?: any; read
const href = BuiltinDocumentationLinks[excerpt.text as keyof typeof BuiltinDocumentationLinks];
return (
<a
key={`${excerpt.text}-${idx}`}
className="text-blurple hover:text-blurple-500 dark:hover:text-blurple-300"
href={href}
key={`${excerpt.text}-${idx}`}
rel="external noreferrer noopener"
target="_blank"
>

6
apps/website/src/components/InformationNode.tsx
View File

@@ -10,8 +10,8 @@ export async function InformationNode({ node, version }: { readonly node: any; r
<h1 className="text-xl">
<DocKind node={node} /> <span className="break-words font-bold">{node.displayName}</span>
</h1>
{node.implements ? <InheritanceNode text="implements" node={node.implements} version={version} /> : null}
{node.extends ? <InheritanceNode text="extends" node={node.extends} version={version} /> : null}
{node.implements ? <InheritanceNode node={node.implements} text="implements" version={version} /> : null}
{node.extends ? <InheritanceNode node={node.extends} text="extends" version={version} /> : null}
<Badges node={node} />
</div>
@@ -24,8 +24,8 @@ export async function InformationNode({ node, version }: { readonly node: any; r
>
<FileCode2
aria-hidden
size={20}
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
size={20}
/>
</a>
</div>

64
apps/website/src/components/MethodNode.tsx
View File

@@ -31,12 +31,12 @@ async function MethodBodyNode({
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<h3
id={method.displayName}
className={`${overload ? (ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-24' : 'scroll-mt-16') : ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group break-words font-mono font-semibold`}
id={method.displayName}
>
<Badges node={method} /> {method.displayName}
<span>
<Link href={`#${method.displayName}`} className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block">
<Link className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block" href={`#${method.displayName}`}>
<LinkIcon aria-hidden size={16} />
</Link>
{method.typeParameters?.length ? (
@@ -60,8 +60,8 @@ async function MethodBodyNode({
>
<Code2
aria-hidden
size={20}
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
size={20}
/>
</a>
</div>
@@ -71,7 +71,7 @@ async function MethodBodyNode({
) : null}
{method.summary?.summarySection.length ? (
<SummaryNode padding node={method.summary.summarySection} version={version} />
<SummaryNode node={method.summary.summarySection} padding version={version} />
) : null}
{method.summary?.exampleBlocks.length ? (
@@ -79,7 +79,7 @@ async function MethodBodyNode({
) : null}
{method.summary?.returnsBlock.length ? (
<ReturnNode padding node={method.summary.returnsBlock} version={version} />
<ReturnNode node={method.summary.returnsBlock} padding version={version} />
) : null}
{method.inheritedFrom ? (
@@ -87,11 +87,11 @@ async function MethodBodyNode({
) : null}
{method.summary?.seeBlocks.length ? (
<SeeNode padding node={method.summary.seeBlocks} version={version} />
<SeeNode node={method.summary.seeBlocks} padding version={version} />
) : null}
</div>
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
</>
);
@@ -109,29 +109,25 @@ async function OverloadNode({
return (
<Tabs className="flex flex-col gap-4">
<TabList className="flex gap-2">
{method.overloads.map((overload: any) => {
return (
<Tab
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
>
<span>Overload {overload.overloadIndex}</span>
</Tab>
);
})}
</TabList>
{method.overloads.map((overload: any) => {
return (
<TabPanel
{method.overloads.map((overload: any) => (
<Tab
className="cursor-pointer rounded-full bg-neutral-800/10 px-2 py-1 font-sans text-sm font-normal leading-none text-neutral-800 hover:bg-neutral-800/20 data-[selected]:bg-neutral-500 data-[selected]:text-neutral-100 dark:bg-neutral-200/10 dark:text-neutral-200 dark:hover:bg-neutral-200/20 dark:data-[selected]:bg-neutral-500/70"
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
className="flex flex-col gap-8"
key={`overload-tab-${overload.displayName}-${overload.overloadIndex}`}
>
<MethodBodyNode overload method={overload} packageName={packageName} version={version} />
</TabPanel>
);
})}
<span>Overload {overload.overloadIndex}</span>
</Tab>
))}
</TabList>
{method.overloads.map((overload: any) => (
<TabPanel
className="flex flex-col gap-8"
id={`overload-${overload.displayName}-${overload.overloadIndex}`}
key={`overload-tab-panel-${overload.displayName}-${overload.overloadIndex}`}
>
<MethodBodyNode method={overload} overload packageName={packageName} version={version} />
</TabPanel>
))}
</Tabs>
);
}
@@ -151,14 +147,14 @@ export async function MethodNode({
<h2 className="flex place-items-center gap-2 text-xl font-bold">
<VscSymbolMethod aria-hidden className="flex-shrink-0" size={24} /> Methods
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-8">
{node.map((method: any) => {
return method.overloads?.length ? (
{node.map((method: any) =>
method.overloads?.length ? (
<OverloadNode
key={`${method.displayName}-${method.overloadIndex}`}
method={method}
@@ -172,8 +168,8 @@ export async function MethodNode({
packageName={packageName}
version={version}
/>
);
})}
),
)}
</div>
</CollapsibleContent>
</Collapsible>

27
apps/website/src/components/Navigation.tsx
View File

@@ -37,6 +37,7 @@ export async function Navigation({
const versions = await fetchVersions(packageName);
const groupedNodes = node.reduce((acc: any, node: any) => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
(acc[node.kind.toLowerCase()] ||= []).push(node);
return acc;
}, {});
@@ -48,7 +49,7 @@ export async function Navigation({
>
<div className="flex flex-col gap-2 pt-px">
<div className="flex place-content-between place-items-center p-1">
<Link href={`/docs/packages/${packageName}/${version}`} className="text-xl font-bold">
<Link className="text-xl font-bold" href={`/docs/packages/${packageName}/${version}`}>
{packageName}
</Link>
<div className="flex gap-2">
@@ -77,8 +78,8 @@ export async function Navigation({
<Collapsible className="flex flex-col gap-4" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
<h4 className="font-semibold">Classes</h4>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1.5">
@@ -102,8 +103,8 @@ export async function Navigation({
<Collapsible className="flex flex-col gap-4" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
<h4 className="font-semibold">Functions</h4>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1.5">
@@ -127,8 +128,8 @@ export async function Navigation({
<Collapsible className="flex flex-col gap-4" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
<h4 className="font-semibold">Enums</h4>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1.5">
@@ -152,8 +153,8 @@ export async function Navigation({
<Collapsible className="flex flex-col gap-4" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
<h4 className="font-semibold">Interfaces</h4>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1.5">
@@ -177,8 +178,8 @@ export async function Navigation({
<Collapsible className="flex flex-col gap-4" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
<h4 className="font-semibold">Types</h4>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1.5">
@@ -202,8 +203,8 @@ export async function Navigation({
<Collapsible className="flex flex-col gap-4" defaultOpen>
<CollapsibleTrigger className="group flex place-content-between place-items-center rounded-md p-2 hover:bg-neutral-200 dark:hover:bg-neutral-800">
<h4 className="font-semibold">Variables</h4>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-1.5">

2
apps/website/src/components/NavigationItem.tsx
View File

@@ -25,8 +25,8 @@ export function NavigationItem({
<Link
className={`truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1 ${pathname === href ? 'bg-neutral-200 font-medium text-blurple dark:bg-neutral-800' : ''}`}
href={href}
title={node.name}
onClick={() => setDrawerOpen(false)}
title={node.name}
>
{children}
</Link>

103
apps/website/src/components/Outline.tsx
View File

@@ -8,6 +8,7 @@ import { Fragment } from 'react';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/Collapsible';
export async function Outline({ node }: { readonly node: any }) {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const hasAny = node.members?.properties?.length || node.members?.events?.length || node.members?.methods?.length;
return hasAny ? (
@@ -16,8 +17,8 @@ export async function Outline({ node }: { readonly node: any }) {
<h2 className="flex place-items-center gap-2 text-xl font-bold">
<VscListSelection aria-hidden className="flex-shrink-0" size={24} /> Table of contents
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
@@ -30,28 +31,26 @@ export async function Outline({ node }: { readonly node: any }) {
<VscSymbolProperty aria-hidden className="flex-shrink-0" size={24} />
Properties
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-2 px-4">
{node.members.properties.map((property: any, idx: number) => {
return (
<Fragment key={`${property.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<Link
href={`#${property.displayName}`}
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
>
{property.displayName}
</Link>
</div>
{node.members.properties.map((property: any, idx: number) => (
<Fragment key={`${property.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<Link
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
href={`#${property.displayName}`}
>
{property.displayName}
</Link>
</div>
</Fragment>
);
})}
</div>
</Fragment>
))}
</div>
</CollapsibleContent>
</Collapsible>
@@ -64,28 +63,26 @@ export async function Outline({ node }: { readonly node: any }) {
<VscSymbolMethod aria-hidden className="flex-shrink-0" size={24} />
Methods
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-2 px-4">
{node.members.methods.map((method: any, idx: number) => {
return (
<Fragment key={`${method.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<Link
href={`#${method.displayName}`}
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
>
{method.displayName}
</Link>
</div>
{node.members.methods.map((method: any, idx: number) => (
<Fragment key={`${method.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<Link
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
href={`#${method.displayName}`}
>
{method.displayName}
</Link>
</div>
</Fragment>
);
})}
</div>
</Fragment>
))}
</div>
</CollapsibleContent>
</Collapsible>
@@ -98,35 +95,33 @@ export async function Outline({ node }: { readonly node: any }) {
<VscSymbolEvent aria-hidden className="flex-shrink-0" size={24} />
Events
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-2 px-4">
{node.members.events.map((event: any, idx: number) => {
return (
<Fragment key={`${event.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<Link
href={`#${event.displayName}`}
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
>
{event.displayName}
</Link>
</div>
{node.members.events.map((event: any, idx: number) => (
<Fragment key={`${event.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<Link
className="grow truncate rounded-md p-2 font-mono transition-colors hover:bg-neutral-200 dark:hover:bg-neutral-800 md:px-1 md:py-1"
href={`#${event.displayName}`}
>
{event.displayName}
</Link>
</div>
</Fragment>
);
})}
</div>
</Fragment>
))}
</div>
</CollapsibleContent>
</Collapsible>
) : null}
</div>
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
</div>
</CollapsibleContent>

46
apps/website/src/components/ParameterNode.tsx
View File

@@ -16,33 +16,31 @@ export async function ParameterNode({
}) {
return (
<div className={`${description ? 'flex flex-col gap-8' : 'inline'}`}>
{node.map((parameter: any, idx: number) => {
return (
<Fragment key={`${parameter.name}-${idx}`}>
<div className={description ? 'group' : 'inline after:content-[",_"] last-of-type:after:content-none'}>
<span className="font-mono font-semibold">
{description ? (
<Link href={`#${parameter.name}`} className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block">
<LinkIcon aria-hidden size={16} />
</Link>
) : null}
{description ? <Badges node={parameter} /> : null}
{parameter.name}
{parameter.isOptional ? '?' : ''}: <ExcerptNode node={parameter.typeExcerpt} version={version} />
{parameter.defaultValue ? ` = ${parameter.defaultValue}` : ''}
</span>
{description && parameter.description?.length ? (
<div className="mt-4 pl-4">
<DocNode node={parameter.description} version={version} />
</div>
{node.map((parameter: any, idx: number) => (
<Fragment key={`${parameter.name}-${idx}`}>
<div className={description ? 'group' : 'inline after:content-[",_"] last-of-type:after:content-none'}>
<span className="font-mono font-semibold">
{description ? (
<Link className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block" href={`#${parameter.name}`}>
<LinkIcon aria-hidden size={16} />
</Link>
) : null}
</div>
</Fragment>
);
})}
{description ? <Badges node={parameter} /> : null}
{parameter.name}
{parameter.isOptional ? '?' : ''}: <ExcerptNode node={parameter.typeExcerpt} version={version} />
{parameter.defaultValue ? ` = ${parameter.defaultValue}` : ''}
</span>
{description && parameter.description?.length ? (
<div className="mt-4 pl-4">
<DocNode node={parameter.description} version={version} />
</div>
) : null}
</div>
</Fragment>
))}
{description ? (
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
) : null}
</div>

128
apps/website/src/components/PropertyNode.tsx
View File

@@ -27,77 +27,75 @@ export async function PropertyNode({
<VscSymbolProperty aria-hidden className="flex-shrink-0" size={24} />
Properties
</h2>
<ChevronDown className='group-data-[state="open"]:hidden' aria-hidden size={24} />
<ChevronUp className='group-data-[state="closed"]:hidden' aria-hidden size={24} />
<ChevronDown aria-hidden className='group-data-[state="open"]:hidden' size={24} />
<ChevronUp aria-hidden className='group-data-[state="closed"]:hidden' size={24} />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="flex flex-col gap-8">
{node.map((property: any, idx: number) => {
return (
<Fragment key={`${property.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<h3
id={property.displayName}
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 break-words font-mono font-semibold`}
>
<Badges node={property} />
<span>
<Link
href={`#${property.displayName}`}
className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block"
>
<LinkIcon aria-hidden size={16} />
</Link>
{property.displayName}
{property.isOptional ? '?' : ''} : <ExcerptNode node={property.typeExcerpt} version={version} />{' '}
{property.summary?.defaultValueBlock.length
? `= ${property.summary.defaultValueBlock.reduce(
(acc: string, def: { kind: string; text: string }) => `${acc}${def.text}`,
'',
)}`
: ''}
</span>
</h3>
{node.map((property: any, idx: number) => (
<Fragment key={`${property.displayName}-${idx}`}>
<div className="flex flex-col gap-4">
<div className="flex place-content-between place-items-center">
<h3
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group flex flex-col gap-2 break-words font-mono font-semibold`}
id={property.displayName}
>
<Badges node={property} />
<span>
<Link
className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block"
href={`#${property.displayName}`}
>
<LinkIcon aria-hidden size={16} />
</Link>
{property.displayName}
{property.isOptional ? '?' : ''} : <ExcerptNode node={property.typeExcerpt} version={version} />{' '}
{property.summary?.defaultValueBlock.length
? `= ${property.summary.defaultValueBlock.reduce(
(acc: string, def: { kind: string; text: string }) => `${acc}${def.text}`,
'',
)}`
: ''}
</span>
</h3>
<a
aria-label="Open source file in new tab"
className="min-w-min"
href={property.sourceLine ? `${property.sourceURL}#L${property.sourceLine}` : property.sourceURL}
rel="external noreferrer noopener"
target="_blank"
>
<Code2
aria-hidden
size={20}
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
/>
</a>
</div>
{property.summary?.deprecatedBlock.length ? (
<DeprecatedNode deprecatedBlock={property.summary.deprecatedBlock} version={version} />
) : null}
{property.summary?.summarySection.length ? (
<SummaryNode padding node={property.summary.summarySection} version={version} />
) : null}
{property.inheritedFrom ? (
<InheritedFromNode node={property.inheritedFrom} packageName={packageName} version={version} />
) : null}
{property.summary?.seeBlocks.length ? (
<SeeNode padding node={property.summary.seeBlocks} version={version} />
) : null}
<a
aria-label="Open source file in new tab"
className="min-w-min"
href={property.sourceLine ? `${property.sourceURL}#L${property.sourceLine}` : property.sourceURL}
rel="external noreferrer noopener"
target="_blank"
>
<Code2
aria-hidden
className="text-neutral-500 hover:text-neutral-600 dark:text-neutral-400 dark:hover:text-neutral-300"
size={20}
/>
</a>
</div>
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
</div>
</Fragment>
);
})}
{property.summary?.deprecatedBlock.length ? (
<DeprecatedNode deprecatedBlock={property.summary.deprecatedBlock} version={version} />
) : null}
{property.summary?.summarySection.length ? (
<SummaryNode node={property.summary.summarySection} padding version={version} />
) : null}
{property.inheritedFrom ? (
<InheritedFromNode node={property.inheritedFrom} packageName={packageName} version={version} />
) : null}
{property.summary?.seeBlocks.length ? (
<SeeNode node={property.summary.seeBlocks} padding version={version} />
) : null}
</div>
<div aria-hidden className="px-4">
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
</Fragment>
))}
</div>
</CollapsibleContent>
</Collapsible>

83
apps/website/src/components/TypeParameterNode.tsx
View File

@@ -17,53 +17,48 @@ export async function TypeParameterNode({
}) {
return (
<div className={`${description ? 'flex flex-col gap-8' : 'inline-block'}`}>
{node.map((typeParameter: any, idx: number) => {
return (
<Fragment key={`${typeParameter.name}-${idx}`}>
<div className={description ? '' : 'inline after:content-[",_"] last-of-type:after:content-none'}>
<h3
id={typeParameter.name}
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group inline break-words font-mono font-semibold`}
>
{description ? <Badges node={typeParameter} /> : null}
<span>
{description ? (
<Link
href={`#${typeParameter.name}`}
className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block"
>
<LinkIcon aria-hidden size={16} />
</Link>
) : null}
{typeParameter.name}
{typeParameter.isOptional ? '?' : ''}
{typeParameter.constraintsExcerpt.length ? (
<>
{' extends '}
<ExcerptNode node={typeParameter.constraintsExcerpt} version={version} />
</>
) : null}
{typeParameter.defaultExcerpt.length ? (
<>
{' = '}
<ExcerptNode node={typeParameter.defaultExcerpt} version={version} />
</>
) : null}
</span>
</h3>
{node.map((typeParameter: any, idx: number) => (
<Fragment key={`${typeParameter.name}-${idx}`}>
<div className={description ? '' : 'inline after:content-[",_"] last-of-type:after:content-none'}>
<h3
className={`${ENV.IS_LOCAL_DEV || ENV.IS_PREVIEW ? 'scroll-mt-16' : 'scroll-mt-8'} group inline break-words font-mono font-semibold`}
id={typeParameter.name}
>
{description ? <Badges node={typeParameter} /> : null}
<span>
{description ? (
<Link className="float-left -ml-6 hidden pb-2 pr-2 group-hover:block" href={`#${typeParameter.name}`}>
<LinkIcon aria-hidden size={16} />
</Link>
) : null}
{typeParameter.name}
{typeParameter.isOptional ? '?' : ''}
{typeParameter.constraintsExcerpt.length ? (
<>
{' extends '}
<ExcerptNode node={typeParameter.constraintsExcerpt} version={version} />
</>
) : null}
{typeParameter.defaultExcerpt.length ? (
<>
{' = '}
<ExcerptNode node={typeParameter.defaultExcerpt} version={version} />
</>
) : null}
</span>
</h3>
{description && typeParameter.description?.length ? (
<div className="pl-4">
<DocNode node={typeParameter.description} version={version} />
</div>
) : null}
</div>
</Fragment>
);
})}
{description && typeParameter.description?.length ? (
<div className="pl-4">
<DocNode node={typeParameter.description} version={version} />
</div>
) : null}
</div>
</Fragment>
))}
{description ? (
<div aria-hidden className="px-4">
<div role="separator" className="h-[2px] bg-neutral-300 dark:bg-neutral-700" />
<div className="h-[2px] bg-neutral-300 dark:bg-neutral-700" role="separator" />
</div>
) : null}
</div>

8
apps/website/src/components/ui/CmdK.tsx
View File

@@ -31,8 +31,8 @@ export function CmdK({ dependencies }: { readonly dependencies: string[] }) {
const searchResultItems =
searchResults?.map((item, idx) => (
<Command.Item
key={`${item.id}-${idx}`}
className="flex cursor-pointer place-items-center gap-2 rounded-md p-2 data-[selected='true']:bg-neutral-200 dark:data-[selected='true']:bg-neutral-800"
key={`${item.id}-${idx}`}
onSelect={() => {
router.push(item.path);
setOpen(false);
@@ -108,9 +108,9 @@ export function CmdK({ dependencies }: { readonly dependencies: string[] }) {
return (
<Command.Dialog
className="w-full rounded-md border border-neutral-300 bg-neutral-100 p-2 shadow-md dark:border-neutral-700 dark:bg-neutral-900"
open={open}
onOpenChange={setOpen}
label="Command Menu"
onOpenChange={setOpen}
open={open}
shouldFilter={false}
>
<Command.Input
@@ -135,7 +135,7 @@ export function CmdK({ dependencies }: { readonly dependencies: string[] }) {
{search && searchResultItems.length ? (
searchResultItems
) : (
<div role="presentation" className="flex h-12 place-content-center place-items-center text-sm">
<div className="flex h-12 place-content-center place-items-center text-sm" role="presentation">
No results found.
</div>
)}

2
apps/website/src/components/ui/Drawer.tsx
View File

@@ -18,7 +18,7 @@ export function Drawer({ children }: PropsWithChildren) {
}, [isMedium, setOpen]);
return (
<Vaul.Root open={open} onOpenChange={setOpen}>
<Vaul.Root onOpenChange={setOpen} open={open}>
<Vaul.Trigger
aria-label="Open navigation"
className="flex h-12 w-full place-content-center place-items-center rounded-t-lg border-t border-neutral-300 bg-neutral-100 p-2 dark:border-neutral-700 dark:bg-neutral-900"

4
apps/website/src/components/ui/InstallButton.tsx
View File

@@ -24,9 +24,9 @@ export function InstallButton({ className = '' }: { readonly className?: string
>
<span className="font-semibold text-blurple">{'>'}</span> npm install discord.js{' '}
{copiedText && interacted ? (
<CopyCheck aria-hidden size={20} className="ml-1 inline-block text-green-500" />
<CopyCheck aria-hidden className="ml-1 inline-block text-green-500" size={20} />
) : (
<Copy aria-hidden size={20} className="ml-1 inline-block" />
<Copy aria-hidden className="ml-1 inline-block" size={20} />
)}
</button>
);

20
apps/website/src/components/ui/PackageSelect.tsx
View File

@@ -27,23 +27,23 @@ export function PackageSelect({ packageName }: { readonly packageName: string })
<Select
aria-label="Select a package"
className="hidden md:block"
selectedKey={selectedPackage}
onSelectionChange={(selected) => {
setSelectedPackage(selected);
}}
selectedKey={selectedPackage}
>
<Button className="flex w-full place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800">
<SelectValue className="font-medium" />
<ChevronsUpDown aria-hidden size={20} />
</Button>
<Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
<ListBox shouldFocusWrap items={PACKAGES}>
<ListBox items={PACKAGES} shouldFocusWrap>
{(item) => (
<ListBoxItem
className="flex p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
href={`/docs/packages/${item.name}/stable`}
id={item.name}
textValue={item.name}
href={`/docs/packages/${item.name}/stable`}
className="flex p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
>
{item.name}
</ListBoxItem>
@@ -52,7 +52,7 @@ export function PackageSelect({ packageName }: { readonly packageName: string })
</Popover>
</Select>
<Vaul.NestedRoot open={open} onOpenChange={setOpen}>
<Vaul.NestedRoot onOpenChange={setOpen} open={open}>
<Vaul.Trigger
aria-label="Open package select"
className="flex w-full place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800 md:hidden"
@@ -67,21 +67,21 @@ export function PackageSelect({ packageName }: { readonly packageName: string })
<ListBox
aria-label="Select a package"
className="flex flex-col gap-2 overflow-auto"
shouldFocusWrap
items={PACKAGES}
selectionMode="single"
selectedKeys={[selectedPackage]}
onSelectionChange={(selected) => {
const [val] = selected;
setSelectedPackage(val as Key);
}}
selectedKeys={[selectedPackage]}
selectionMode="single"
shouldFocusWrap
>
{(item) => (
<ListBoxItem
className="rounded-md p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
href={`/docs/packages/${item.name}/stable`}
id={item.name}
textValue={item.name}
href={`/docs/packages/${item.name}/stable`}
className="rounded-md p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
>
{item.name}
</ListBoxItem>

2
apps/website/src/components/ui/SearchButton.tsx
View File

@@ -11,8 +11,8 @@ export function SearchButton() {
<button
aria-label="Open search"
className="flex place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800"
type="button"
onClick={() => setIsOpen(true)}
type="button"
>
<span className="flex place-items-center gap-2">
<Search aria-hidden size={20} />

20
apps/website/src/components/ui/VersionSelect.tsx
View File

@@ -34,23 +34,23 @@ export function VersionSelect({
<Select
aria-label="Select a version"
className="hidden md:block"
selectedKey={selectedVersion}
onSelectionChange={(selected) => {
setSelectedVersion(selected);
}}
selectedKey={selectedVersion}
>
<Button className="flex w-full place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800">
<SelectValue className="font-medium" />
<ChevronsUpDown aria-hidden size={20} />
</Button>
<Popover className="max-h-60 w-[--trigger-width] overflow-auto rounded-md border border-neutral-300 bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
<ListBox shouldFocusWrap items={versions}>
<ListBox items={versions} shouldFocusWrap>
{(item) => (
<ListBoxItem
className="flex p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
href={`/docs/packages/${packageName}/${item.version}`}
id={item.version}
textValue={item.version}
href={`/docs/packages/${packageName}/${item.version}`}
className="flex p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
>
{item.version}
</ListBoxItem>
@@ -59,7 +59,7 @@ export function VersionSelect({
</Popover>
</Select>
<Vaul.NestedRoot open={open} onOpenChange={setOpen}>
<Vaul.NestedRoot onOpenChange={setOpen} open={open}>
<Vaul.Trigger
aria-label="Open version select"
className="flex w-full place-content-between place-items-center rounded-md bg-neutral-200 p-2 dark:bg-neutral-800 md:hidden"
@@ -74,21 +74,21 @@ export function VersionSelect({
<ListBox
aria-label="Select a version"
className="flex flex-col gap-2 overflow-auto"
shouldFocusWrap
items={versions}
selectionMode="single"
selectedKeys={[selectedVersion]}
onSelectionChange={(selected) => {
const [val] = selected;
setSelectedVersion(val as Key);
}}
selectedKeys={[selectedVersion]}
selectionMode="single"
shouldFocusWrap
>
{(item) => (
<ListBoxItem
className="rounded-md p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
href={`/docs/packages/${packageName}/${item.version}`}
id={item.version}
textValue={item.version}
href={`/docs/packages/${packageName}/${item.version}`}
className="rounded-md p-2 outline-none data-[focus-visible]:bg-neutral-300 data-[hovered]:bg-neutral-300 data-[selected]:bg-blurple data-[selected]:data-[focus-visible]:bg-blurple-500 data-[selected]:data-[hovered]:bg-blurple-500 data-[selected]:text-white dark:data-[focus-visible]:bg-neutral-700 dark:data-[hovered]:bg-neutral-700 dark:data-[selected]:data-[focus-visible]:bg-blurple-500 dark:data-[selected]:data-[hovered]:bg-blurple-500"
>
{item.version}
</ListBoxItem>