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: storybook

Browse Source
This commit is contained in:
iCrawl
2023-04-13 19:09:56 +02:00
parent 8218ffc78d
commit e5859b41cf
91 changed files with 3660 additions and 1571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/extensions.json vendored
View File

@@ -9,7 +9,6 @@
"christian-kohler.npm-intellisense",
"christian-kohler.path-intellisense",
"antfu.unocss",
"astro-build.astro-vscode",
"unifiedjs.vscode-mdx"
]
}

1
.vscode/settings.json vendored
View File

@@ -1,7 +1,6 @@
{
"eslint.workingDirectories": [{ "pattern": "./apps/*" }, { "pattern": "./packages/*" }],
"eslint.validate": ["javascript", "javascriptreact", "astro", "typescript", "typescriptreact"],
"prettier.documentSelectors": ["**/*.astro"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {

5
.yarnrc.yml
View File

@@ -11,3 +11,8 @@ plugins:
spec: 'https://github.com/Dcard/yarn-plugins/releases/latest/download/plugin-docker-build.js'
yarnPath: .yarn/releases/yarn-3.5.0.cjs
packageExtensions:
'@storybook/core-common@*':
dependencies:
'@storybook/react-vite': '7.0.4'

2
apps/guide/.eslintrc.json
View File

@@ -1,5 +1,5 @@
{
"extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "neon/prettier"],
"extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "@unocss", "neon/prettier"],
"settings": {
"react": {
"version": "detect"

8
apps/guide/.prettierrc.cjs
View File

@@ -1,7 +1 @@
module.exports = {
...require('../../.prettierrc.json'),
plugins: [
'prettier-plugin-tailwindcss', // MUST come last
],
pluginSearchDirs: false,
};
module.exports = require('../../.prettierrc.json');

24
apps/guide/package.json
View File

@@ -43,13 +43,13 @@
},
"homepage": "https://discord.js.org",
"dependencies": {
"@code-hike/mdx": "^0.8.1",
"@code-hike/mdx": "^0.8.2",
"@discordjs/ui": "workspace:^",
"@react-icons/all-files": "^4.1.0",
"@vercel/analytics": "^0.1.11",
"@vercel/edge-config": "^0.1.6",
"@vercel/og": "^0.5.1",
"ariakit": "^2.0.0-next.43",
"@vercel/edge-config": "^0.1.7",
"@vercel/og": "^0.5.2",
"ariakit": "^2.0.0-next.44",
"cmdk": "^0.2.0",
"contentlayer": "^0.3.1",
"next": "^13.3.0",
@@ -73,27 +73,27 @@
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "18.15.11",
"@types/react": "^18.0.33",
"@types/react": "^18.0.35",
"@types/react-dom": "^18.0.11",
"@unocss/cli": "^0.51.0",
"@unocss/reset": "^0.51.0",
"@unocss/cli": "^0.51.4",
"@unocss/eslint-config": "^0.51.4",
"@unocss/reset": "^0.51.4",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"concurrently": "^8.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",
"eslint-formatter-pretty": "^5.0.0",
"happy-dom": "^9.1.9",
"happy-dom": "^9.5.0",
"hast-util-to-string": "^2.0.0",
"hastscript": "^7.2.0",
"html-escaper": "^3.0.3",
"lighthouse": "^10.1.0",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.7",
"typescript": "^5.0.4",
"unocss": "^0.51.0",
"vercel": "^28.18.4",
"unocss": "^0.51.4",
"vercel": "^28.18.5",
"vitest": "^0.29.8"
},
"engines": {

2
apps/guide/src/app/error.tsx
View File

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

6
apps/guide/src/app/global-error.tsx
View File

@@ -8,10 +8,10 @@ export default function GlobalError({ error }: { error: Error }) {
return (
<html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-light-600">
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
<Providers>
<main className="mx-auto min-h-screen max-w-2xl">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<main className="mx-auto max-w-2xl min-h-screen">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

2
apps/guide/src/app/guide/[[...slug]]/page.tsx
View File

@@ -14,7 +14,7 @@ export default function Page({ params }: { params: { slug: string[] } }) {
}
return (
<article className="prose max-w-none">
<article className="max-w-none prose">
<Mdx code={content?.body.code ?? ''} />
</article>
);

6
apps/guide/src/app/guide/layout.tsx
View File

@@ -9,12 +9,12 @@ export default function Layout({ children }: PropsWithChildren) {
<Providers>
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
<Header />
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_105px)]">
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
<Nav />
</div>
<div className="min-w-xs mx-auto w-full max-w-5xl pb-10">
<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">
{children}
<Footer />
</div>

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

@@ -77,7 +77,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-600 bg-light-600 dark:text-light-900">
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
<Providers>{children}</Providers>
<Analytics />
</body>

2
apps/guide/src/app/loading.tsx
View File

@@ -1,6 +1,6 @@
export default function Loading() {
return (
<div className="mx-4 flex min-h-screen flex-col items-center justify-center gap-4">
<div className="mx-4 min-h-screen flex flex-col items-center justify-center gap-4">
<svg
className="h-9 w-9 animate-spin text-black dark:text-white"
fill="none"

4
apps/guide/src/app/not-found.tsx
View File

@@ -2,11 +2,11 @@ import Link from 'next/link';
export default function NotFound() {
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
href="/guide"
>
Take me back

4
apps/guide/src/app/page.tsx
View File

@@ -3,10 +3,10 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Page() {
return (
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<div className="mx-auto max-w-6xl min-h-screen flex flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<div className="flex flex-row place-content-center">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"

2
apps/guide/src/components/ExternalLink.tsx
View File

@@ -2,7 +2,7 @@ import { FiExternalLink } from 'react-icons/fi';
export function ExternalLink({ href, title }: { href: string; title: string }) {
return (
<a className="text-blurple inline-flex place-items-center gap-2 text-sm font-semibold" href={href}>
<a className="inline-flex place-items-center gap-2 text-sm font-semibold text-blurple" href={href}>
<p>{title}</p>
<FiExternalLink size={18} />
</a>

16
apps/guide/src/components/Footer.tsx
View File

@@ -4,10 +4,10 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Footer() {
return (
<footer className="md:pl-12 md:pr-12">
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
@@ -25,7 +25,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.gg/djs"
rel="noopener noreferrer"
target="_blank"
@@ -33,7 +33,7 @@ export default function Footer() {
Discord
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer"
target="_blank"
@@ -46,7 +46,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
@@ -54,7 +54,7 @@ export default function Footer() {
discord.js
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.js.org/docs/"
rel="noopener noreferrer"
target="_blank"
@@ -62,7 +62,7 @@ export default function Footer() {
discord.js documentation
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord-api-types.dev"
rel="noopener noreferrer"
target="_blank"

10
apps/guide/src/components/Header.tsx
View File

@@ -22,7 +22,7 @@ export default function Header() {
.slice(1)
.map((path, idx, original) => (
<Link
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
className="rounded outline-0 hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
href={`/${original.slice(0, idx + 1).join('/')}`}
key={`${path}-${idx}`}
>
@@ -60,12 +60,12 @@ export default function Header() {
);
return (
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
<header className="sticky top-4 z-20 border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md dark:border-dark-100 dark:bg-dark-600/75">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
<div className="h-full flex flex-row place-content-between place-items-center gap-8">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
@@ -75,7 +75,7 @@ export default function Header() {
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"

2
apps/guide/src/components/Nav.tsx
View File

@@ -17,7 +17,7 @@ export function Nav() {
autoHide
className="[&>div]:overscroll-none"
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}

4
apps/guide/src/components/Outline.tsx
View File

@@ -43,7 +43,7 @@ export function Outline({ headings }: { headings: MarkdownHeading[] }) {
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}
@@ -57,7 +57,7 @@ export function Outline({ headings }: { headings: MarkdownHeading[] }) {
<div className="ml-2 mt-4 flex flex-col gap-2">
<div className="relative flex flex-col">
<div
className="bg-blurple absolute h-[10px] w-[10px] rounded-full border-2 border-black dark:border-white"
className="absolute h-[10px] w-[10px] border-2 border-black rounded-full bg-blurple dark:border-white"
style={{
left: INDICATOR_SIZE / 2 + 0.5,
transform: `translateY(${active * LINK_HEIGHT + INDICATOR_OFFSET}px)`,

2
apps/guide/src/components/PageButton.tsx
View File

@@ -1,7 +1,7 @@
export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
return (
<a
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded px-4 py-3 leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-0 active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
href={url}
>
<h3 className="text-md font-semibold">{title}</h3>

2
apps/guide/src/components/ThemeSwitcher.tsx
View File

@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
return (
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />

2
apps/website/.eslintrc.json
View File

@@ -1,5 +1,5 @@
{
"extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "neon/prettier"],
"extends": ["../../.eslintrc.json", "neon/react", "neon/next", "neon/edge", "@unocss", "neon/prettier"],
"settings": {
"react": {
"version": "detect"

8
apps/website/.prettierrc.cjs
View File

@@ -1,7 +1 @@
module.exports = {
...require('../../.prettierrc.json'),
plugins: [
'prettier-plugin-tailwindcss', // MUST come last
],
pluginSearchDirs: false,
};
module.exports = require('../../.prettierrc.json');

28
apps/website/package.json
View File

@@ -50,17 +50,17 @@
"@discordjs/ui": "workspace:^",
"@microsoft/api-extractor-model": "7.26.4",
"@microsoft/tsdoc": "0.14.2",
"@planetscale/database": "1.6.0",
"@planetscale/database": "1.7.0",
"@react-icons/all-files": "^4.1.0",
"@vercel/analytics": "^0.1.11",
"@vercel/edge-config": "^0.1.6",
"@vercel/og": "^0.5.1",
"@vercel/edge-config": "^0.1.7",
"@vercel/og": "^0.5.2",
"@vscode/codicons": "^0.0.32",
"ariakit": "^2.0.0-next.43",
"ariakit": "^2.0.0-next.44",
"bright": "^0.7.1",
"cmdk": "^0.2.0",
"meilisearch": "^0.32.3",
"next": "^13.3.1-canary.3",
"next": "^13.3.1-canary.6",
"next-mdx-remote": "^4.4.1",
"next-themes": "^0.2.1",
"react": "^18.2.0",
@@ -73,32 +73,32 @@
"remark-gfm": "^3.0.1",
"server-only": "^0.0.1",
"sharp": "^0.32.0",
"swr": "^2.1.2"
"swr": "^2.1.3"
},
"devDependencies": {
"@next/bundle-analyzer": "^13.3.0",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/node": "18.15.11",
"@types/react": "^18.0.33",
"@types/react": "^18.0.35",
"@types/react-dom": "^18.0.11",
"@unocss/cli": "^0.51.0",
"@unocss/reset": "^0.51.0",
"@unocss/cli": "^0.51.4",
"@unocss/eslint-config": "^0.51.4",
"@unocss/reset": "^0.51.4",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"concurrently": "^8.0.1",
"cpy-cli": "^4.2.0",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",
"eslint-formatter-pretty": "^5.0.0",
"happy-dom": "^9.1.9",
"happy-dom": "^9.5.0",
"lighthouse": "^10.1.0",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.7",
"typescript": "^5.0.4",
"unocss": "^0.51.0",
"vercel": "^28.18.4",
"unocss": "^0.51.4",
"vercel": "^28.18.5",
"vitest": "^0.29.8"
},
"engines": {

4
apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
View File

@@ -8,11 +8,11 @@ export default function NotFound() {
const href = pathname.split('/').slice(0, -1).join('/');
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
href={href}
>
Take me back

2
apps/website/src/app/docs/packages/[package]/[version]/error.tsx
View File

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex h-full max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto h-full max-w-lg flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

6
apps/website/src/app/docs/packages/[package]/[version]/layout.tsx
View File

@@ -71,12 +71,12 @@ export default async function PackageLayout({ children, params }: PropsWithChild
<Providers>
<main className="mx-auto max-w-7xl px-4 lg:max-w-full">
<Header />
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:flex lg:max-w-full">
<div className="lg:top-23 lg:sticky lg:h-[calc(100vh_-_105px)]">
<div className="relative top-6 mx-auto max-w-7xl gap-6 lg:max-w-full lg:flex">
<div className="lg:sticky lg:top-23 lg:h-[calc(100vh_-_105px)]">
<Nav members={members.map((member) => serializeIntoSidebarItemData(member))} />
</div>
<div className="min-w-xs mx-auto w-full max-w-5xl pb-10">
<div className="mx-auto max-w-5xl min-w-xs w-full pb-10">
{children}
<Footer />
</div>

2
apps/website/src/app/docs/packages/[package]/[version]/page.tsx
View File

@@ -27,7 +27,7 @@ export default async function Page({ params }: { params: VersionRouteParams }) {
const readmeSource = await loadREADME(packageName);
return (
<div className="prose max-w-none">
<div className="max-w-none prose">
{/* @ts-expect-error async component */}
<MDXRemote components={{ pre: SyntaxHighlighter }} options={mdxOptions} source={readmeSource} />
</div>

6
apps/website/src/app/docs/packages/[package]/page.tsx
View File

@@ -27,12 +27,12 @@ export default async function Page({ params }: { params: { package: string } })
const data = await getData(params.package);
return (
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-col gap-8 px-4 py-6 lg:px-6 lg:py-6">
<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
<h1 className="text-2xl font-semibold">Select a version:</h1>
<div className="flex flex-col gap-4">
{data.map((version, idx) => (
<Link
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-col place-content-center rounded border border-neutral-300 bg-white p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
className="h-11 flex flex-col transform-gpu cursor-pointer select-none appearance-none place-content-center border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
href={`/docs/packages/${params.package}/${version}`}
key={`${version}-${idx}`}
>
@@ -47,7 +47,7 @@ export default async function Page({ params }: { params: { package: string } })
)) ?? null}
</div>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
href="/docs/packages"
>
<VscArrowLeft size={20} /> Go back

10
apps/website/src/app/docs/packages/page.tsx
View File

@@ -10,11 +10,11 @@ export const runtime: ServerRuntime = 'edge';
export default function Page() {
return (
<div className="min-w-xs sm:w-md mx-auto flex min-h-screen flex-col gap-8 px-4 py-6 lg:px-6 lg:py-6">
<div className="mx-auto min-h-screen min-w-xs flex flex-col gap-8 px-4 py-6 sm:w-md lg:px-6 lg:py-6">
<h1 className="text-2xl font-semibold">Select a package:</h1>
<div className="flex flex-col gap-4">
<a
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-white p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
href="https://old.discordjs.dev/#/docs/discord.js"
>
<div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -29,7 +29,7 @@ export default function Page() {
</a>
{PACKAGES.map((pkg, idx) => (
<Link
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-between rounded border border-neutral-300 bg-white p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
href={`/docs/packages/${pkg}`}
key={`${pkg}-${idx}`}
>
@@ -53,7 +53,7 @@ export default function Page() {
</Link>
))}
<a
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple flex h-11 transform-gpu cursor-pointer select-none appearance-none place-content-between rounded border border-neutral-300 bg-white p-4 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 focus:ring active:translate-y-px active:bg-neutral-200 dark:text-white"
className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
href="https://discord-api-types.dev/"
>
<div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -68,7 +68,7 @@ export default function Page() {
</a>
</div>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 place-self-center rounded border-0 px-4 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
href="/"
>
<VscArrowLeft size={20} /> Go back

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

@@ -4,7 +4,7 @@ export default function Error({ error }: { error: Error }) {
console.error(error);
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

6
apps/website/src/app/global-error.tsx
View File

@@ -8,10 +8,10 @@ export default function GlobalError({ error }: { error: Error }) {
return (
<html className={inter.variable} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-800 bg-light-600">
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
<Providers>
<main className="mx-auto min-h-screen max-w-2xl">
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<main className="mx-auto max-w-2xl min-h-screen">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">500</h1>
<h2 className="text-[2rem] md:text-[3rem]">Error.</h2>
</div>

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

@@ -75,7 +75,7 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: PropsWithChildren) {
return (
<html className={`${inter.variable} ${jetBrainsMono.variable}`} lang="en" suppressHydrationWarning>
<body className="dark:bg-dark-600 bg-light-600 dark:text-light-900">
<body className="bg-light-600 dark:bg-dark-600 dark:text-light-900">
<Providers>{children}</Providers>
<Analytics />
</body>

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

@@ -1,6 +1,6 @@
export default function Loading() {
return (
<div className="mx-4 flex min-h-screen flex-col items-center justify-center gap-4">
<div className="mx-4 min-h-screen flex flex-col items-center justify-center gap-4">
<svg
className="h-9 w-9 animate-spin text-black dark:text-white"
fill="none"

4
apps/website/src/app/not-found.tsx
View File

@@ -2,11 +2,11 @@ import Link from 'next/link';
export default function NotFound() {
return (
<div className="mx-auto flex min-h-screen max-w-lg flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<div className="mx-auto max-w-lg min-h-screen flex flex-col place-content-center place-items-center gap-8 px-8 py-16 lg:px-6 lg:py-0">
<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
href="/docs/packages"
>
Take me back

14
apps/website/src/app/page.tsx
View File

@@ -7,23 +7,23 @@ import { DESCRIPTION, CODE_EXAMPLE } from '~/util/constants';
export default function Page() {
return (
<div className="mx-auto flex min-h-screen max-w-6xl flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<div className="mx-auto max-w-6xl min-h-screen flex flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
<div className="flex flex-col place-items-center gap-10 lg:flex-row lg:gap-6">
<div className="flex max-w-lg flex-col gap-3 lg:mr-8">
<div className="max-w-lg flex flex-col gap-3 lg:mr-8">
<h1 className="text-3xl font-black leading-tight sm:text-5xl sm:leading-tight">
The <span className="bg-blurple relative rounded px-3 py-1 text-white">most popular</span> way to build
The <span className="relative rounded bg-blurple px-3 py-1 text-white">most popular</span> way to build
Discord <br /> bots.
</h1>
<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
<div className="flex flex-row gap-4">
<Link
className="bg-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 px-6 text-base font-semibold leading-none text-white no-underline outline-0 focus:ring focus:ring-white active:translate-y-px"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
href="/docs"
>
Docs
</Link>
<a
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center gap-2 rounded border bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
href="https://discordjs.guide"
rel="noopener noreferrer"
target="_blank"
@@ -31,7 +31,7 @@ export default function Page() {
Guide <FiExternalLink />
</a>
<a
className="dark:bg-dark-400 dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 border-light-900 hover:bg-light-200 active:bg-light-300 focus:ring-blurple focus:ring-width-2 flex h-11 transform-gpu cursor-pointer select-none appearance-none appearance-none flex-row place-items-center gap-2 rounded border bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 focus:ring active:translate-y-px dark:text-white"
className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
@@ -47,7 +47,7 @@ export default function Page() {
</div>
<div className="flex flex-row place-content-center">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"

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

@@ -2,7 +2,7 @@ import { FiLink } from '@react-icons/all-files/fi/FiLink';
export function Anchor({ href }: { href: string }) {
return (
<a className="focus:ring-width-2 focus:ring-blurple mr-1 inline-block rounded outline-0 focus:ring" href={href}>
<a className="mr-1 inline-block rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" href={href}>
<FiLink size={20} />
</a>
);

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

@@ -50,7 +50,7 @@ export function CmdKDialog() {
() =>
searchResults?.map((item, idx) => (
<Command.Item
className="dark:border-dark-100 dark:hover:bg-dark-300 dark:active:bg-dark-200 [&[aria-selected]]:ring-blurple [&[aria-selected]]:ring-width-2 my-1 flex transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 hover:bg-neutral-100 active:translate-y-px active:bg-neutral-200 dark:text-white [&[aria-selected]]:ring"
className="my-1 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 hover:bg-neutral-100 dark:text-white [&[aria-selected]]:ring [&[aria-selected]]:ring-width-2 [&[aria-selected]]:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
key={`${item.id}-${idx}`}
onSelect={() => {
router.push(item.path);
@@ -60,10 +60,10 @@ export function CmdKDialog() {
<div className="flex grow flex-row place-content-between place-items-center gap-4">
<div className="flex flex-row place-items-center gap-4">
{resolveIcon(item.kind)}
<div className="w-50 sm:w-100 flex flex-col">
<div className="w-50 flex flex-col sm:w-100">
<h2 className="font-semibold">{item.name}</h2>
<div className="line-clamp-1 text-sm font-normal">{item.summary}</div>
<div className="line-clamp-1 hidden text-xs font-light opacity-75 dark:opacity-50 sm:block">
<div className="line-clamp-1 hidden text-xs font-light opacity-75 sm:block dark:opacity-50">
{item.path}
</div>
</div>
@@ -114,12 +114,12 @@ export function CmdKDialog() {
return (
<Dialog className="fixed left-1/2 top-1/4 z-50 -translate-x-1/2" state={dialog!}>
<Command
className="dark:bg-dark/50 min-w-xs sm:min-w-lg dark:border-dark-100 border-light-900 max-w-xs rounded border bg-white/50 shadow backdrop-blur-md sm:max-w-lg"
className="max-w-xs min-w-xs border border-light-900 rounded bg-white/50 shadow backdrop-blur-md sm:max-w-lg sm:min-w-lg dark:border-dark-100 dark:bg-dark/50"
label="Command Menu"
shouldFilter={false}
>
<Command.Input
className="dark:bg-dark/50 caret-blurple placeholder:text-dark-300/75 dark:border-dark-100 border-light-900 rounded-b-0 w-full rounded border-0 border-b bg-white/50 p-4 text-lg outline-0 dark:placeholder:text-white/75"
className="w-full border-0 border-b border-light-900 rounded rounded-b-0 bg-white/50 p-4 text-lg caret-blurple outline-0 dark:border-dark-100 dark:bg-dark/50 placeholder:text-dark-300/75 dark:placeholder:text-white/75"
onValueChange={setSearch}
placeholder="Quick search..."
value={search}

16
apps/website/src/components/Footer.tsx
View File

@@ -4,10 +4,10 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Footer() {
return (
<footer className="md:pl-12 md:pr-12">
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
rel="noopener noreferrer"
target="_blank"
@@ -25,7 +25,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Community</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord.gg/djs"
rel="noopener noreferrer"
target="_blank"
@@ -33,7 +33,7 @@ export default function Footer() {
Discord
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js/discussions"
rel="noopener noreferrer"
target="_blank"
@@ -46,7 +46,7 @@ export default function Footer() {
<div className="text-lg font-semibold">Project</div>
<div className="flex flex-col gap-1">
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"
@@ -54,7 +54,7 @@ export default function Footer() {
discord.js
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discordjs.guide"
rel="noopener noreferrer"
target="_blank"
@@ -62,7 +62,7 @@ export default function Footer() {
discord.js guide
</a>
<a
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 focus:ring"
className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://discord-api-types.dev"
rel="noopener noreferrer"
target="_blank"

14
apps/website/src/components/Header.tsx
View File

@@ -26,7 +26,7 @@ export default function Header() {
.slice(1)
.map((path, idx, original) => (
<Link
className="focus:ring-width-2 focus:ring-blurple rounded outline-0 hover:underline focus:ring"
className="rounded outline-0 hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
href={`/${original.slice(0, idx + 1).join('/')}`}
key={`${path}-${idx}`}
>
@@ -64,12 +64,12 @@ export default function Header() {
);
return (
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
<header className="sticky top-4 z-20 border border-light-900 rounded-md bg-white/75 shadow backdrop-blur-md dark:border-dark-100 dark:bg-dark-600/75">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
<div className="h-full flex flex-row place-content-between place-items-center gap-8">
<Button
aria-label="Menu"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px lg:hidden"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => setOpened((open) => !open)}
>
<VscMenu size={24} />
@@ -77,13 +77,13 @@ export default function Header() {
<div className="hidden lg:flex lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
<Button
as="div"
className="dark:bg-dark-800 focus:ring-width-2 focus:ring-blurple w-56 grow rounded bg-white px-4 py-2.5 outline-0 focus:ring sm:grow-0"
className="w-56 grow rounded bg-white px-4 py-2.5 outline-0 sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => dialog?.toggle()}
>
<div className="flex flex-row place-items-center gap-4 md:justify-between">
<VscSearch size={18} />
<span className="opacity-65">Search...</span>
<div className="md:opacity-65 hidden md:flex md:flex-row md:place-items-center md:gap-2">
<div className="hidden md:flex md:flex-row md:place-items-center md:gap-2 md:opacity-65">
<FiCommand size={18} /> K
</div>
</div>
@@ -92,7 +92,7 @@ export default function Header() {
<Button
aria-label="GitHub"
as="a"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
href="https://github.com/discordjs/discord.js"
rel="noopener noreferrer"
target="_blank"

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

@@ -7,7 +7,7 @@ export function InheritanceText({ parent }: { parent: ApiDeclaredItem }) {
<span className="font-semibold">
Inherited from{' '}
<ItemLink
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
itemURI={resolveItemURI(parent)}
>
{parent.displayName}

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

@@ -22,7 +22,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
autoHide
className="[&>div]:overscroll-none"
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}

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

@@ -6,11 +6,11 @@ import { TableOfContentItems } from './TableOfContentItems';
export function Outline({ members }: { members: TableOfContentsSerialized[] }) {
return (
<aside className="dark:bg-dark-600 dark:border-dark-100 border-light-800 fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l bg-white pr-2 xl:block">
<aside className="fixed bottom-0 right-0 top-[50px] z-20 hidden h-[calc(100vh_-_65px)] w-64 border-l border-light-800 bg-white pr-2 xl:block dark:border-dark-100 dark:bg-dark-600">
<Scrollbars
autoHide
hideTracksWhenNotNeeded
renderThumbVertical={(props) => <div {...props} className="dark:bg-dark-100 bg-light-900 z-30 rounded" />}
renderThumbVertical={(props) => <div {...props} className="z-30 rounded bg-light-900 dark:bg-dark-100" />}
renderTrackVertical={(props) => (
<div {...props} className="absolute bottom-0.5 right-0.5 top-0.5 z-30 w-1.5 rounded" />
)}

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

@@ -19,7 +19,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
() =>
overloads.map((_, idx) => (
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
key={idx}
onClick={() => setOverloadIndex(idx + 1)}
>
@@ -32,7 +32,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
return (
<div className="flex flex-col place-items-start gap-2">
<MenuButton
className="bg-light-700 hover:bg-light-800 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
className="rounded bg-light-700 p-3 outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-800 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
state={menu}
>
<div className="flex flex-row place-content-between place-items-center gap-2">
@@ -48,7 +48,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
state={menu}
>
{menuItems}

8
apps/website/src/components/PackageSelect.tsx
View File

@@ -16,7 +16,7 @@ export default function PackageSelect() {
() => [
<a href="https://old.discordjs.dev/#/docs/discord.js" key="discord.js">
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
id="discord-js"
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
@@ -27,7 +27,7 @@ export default function PackageSelect() {
...PACKAGES.map((pkg, idx) => (
<Link href={`/docs/packages/${pkg}/main`} key={`${pkg}-${idx}`}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
id={pkg}
onClick={() => packageMenu.setOpen(false)}
state={packageMenu}
@@ -43,7 +43,7 @@ export default function PackageSelect() {
return (
<>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
className="rounded bg-light-600 p-3 outline-0 active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
state={packageMenu}
>
<div className="flex flex-row place-content-between place-items-center">
@@ -58,7 +58,7 @@ export default function PackageSelect() {
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
state={packageMenu}
>
{packageMenuItems}

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

@@ -4,7 +4,7 @@ export function Panel({ children }: PropsWithChildren) {
return (
<>
{children}
<div className="border-light-900 dark:border-dark-100 border-t-2" />
<div className="border-t-2 border-light-900 dark:border-dark-100" />
</>
);
}

8
apps/website/src/components/Property.tsx
View File

@@ -24,22 +24,22 @@ export function Property({
const hasSummary = Boolean(item.tsdocComment?.summarySection);
return (
<div className="scroll-mt-30 flex flex-col gap-4" id={item.displayName}>
<div className="flex flex-col scroll-mt-30 gap-4" id={item.displayName}>
<div className="flex flex-col gap-2 md:-ml-9">
{isDeprecated || item.isReadonly || item.isOptional ? (
<div className="flex flex-row gap-1 md:ml-7">
{isDeprecated ? (
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{item.isReadonly ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Readonly
</div>
) : null}
{item.isOptional ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Optional
</div>
) : null}

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

@@ -28,7 +28,7 @@ export function PropertyList({ item }: { item: ApiItemContainerMixin }) {
item={prop.item as ApiPropertyItem}
separator={PropertySeparatorType.Type}
/>
<div className="border-light-900 dark:border-dark-100 border-t-2" />
<div className="border-t-2 border-light-900 dark:border-dark-100" />
</Fragment>
);
}),

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

@@ -7,7 +7,7 @@ export function SyntaxHighlighter(props: typeof Code) {
{/* @ts-expect-error async component */}
<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="github-dark-dimmed" />
</div>
<div className="[&_pre]:rounded-md [&_pre]:border [&_pre]:border-gray-300" data-theme="light">
<div className="[&_pre]:border [&_pre]:border-gray-300 [&_pre]:rounded-md" data-theme="light">
{/* @ts-expect-error async component */}
<Code codeClassName="font-mono" lang={props.lang ?? 'typescript'} {...props} theme="min-light" />
</div>

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

@@ -13,7 +13,7 @@ export function Table({
() =>
columns.map((column, idx) => (
<th
className="border-light-900 dark:border-dark-100 break-normal border-b px-3 py-2 text-left text-sm"
className="break-normal border-b border-light-900 px-3 py-2 text-left text-sm dark:border-dark-100"
key={`${column}-${idx}`}
>
{column}

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

@@ -25,7 +25,7 @@ export interface TableOfContentsItemProps {
export function TableOfContentsPropertyItem({ property }: { property: TableOfContentsSerializedProperty }) {
return (
<a
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
className="ml-[10px] border-l border-light-800 p-[5px] pl-6.5 text-sm outline-0 focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
href={`#${property.name}`}
key={`${property.name}-${property.kind}`}
title={property.name}
@@ -44,7 +44,7 @@ export function TableOfContentsMethodItem({ method }: { method: TableOfContentsS
return (
<a
className="dark:border-dark-100 border-light-800 dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] flex flex-row place-items-center gap-2 border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring"
className="ml-[10px] flex flex-row place-items-center gap-2 border-l border-light-800 p-[5px] pl-6.5 text-sm outline-0 focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
href={`#${key}`}
key={key}
title={method.name}
@@ -91,7 +91,7 @@ export function TableOfContentItems({ serializedMembers }: TableOfContentsItemPr
<VscListSelection size={25} />
<span className="font-semibold">Contents</span>
</div>
<div className="mt-5.5 ml-2 flex flex-col gap-2">
<div className="ml-2 mt-5.5 flex flex-col gap-2">
{propertyItems.length ? (
<div className="flex flex-col">
<div className="flex flex-row place-items-center gap-4">

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

@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
return (
<Button
aria-label="Toggle theme"
className="focus:ring-width-2 focus:ring-blurple flex h-6 w-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-items-center rounded rounded-full border-0 bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 focus:ring active:translate-y-px"
className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
onClick={() => toggleTheme()}
>
<VscColorMode size={24} />

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

@@ -23,7 +23,7 @@ export default function VersionSelect() {
?.map((item, idx) => (
<Link href={`/docs/packages/${packageName}/${item}`} key={`${item}-${idx}`}>
<MenuItem
className="hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple my-0.5 rounded bg-white p-3 text-sm outline-0 focus:ring"
className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
onClick={() => versionMenu.setOpen(false)}
state={versionMenu}
>
@@ -38,7 +38,7 @@ export default function VersionSelect() {
return (
<>
<MenuButton
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
className="rounded bg-light-600 p-3 outline-0 active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
state={versionMenu}
>
<div className="flex flex-row place-content-between place-items-center">
@@ -53,7 +53,7 @@ export default function VersionSelect() {
</div>
</MenuButton>
<Menu
className="dark:bg-dark-600 border-light-800 dark:border-dark-100 focus:ring-width-2 focus:ring-blurple z-20 flex flex-col rounded border bg-white p-1 outline-0 focus:ring"
className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
state={versionMenu}
>
{versionMenuItems}

2
apps/website/src/components/documentation/HierarchyText.tsx
View File

@@ -41,7 +41,7 @@ export function HierarchyText({ item, type }: { item: ApiClass | ApiInterface; t
return (
<div className="flex flex-row place-items-center gap-4">
<h3 className="text-xl font-bold">{type}</h3>
<span className="space-y-2 break-all font-mono">
<span className="break-all font-mono space-y-2">
{excerpts.map((excerpt, idx) => (
<ExcerptText excerpt={excerpt} key={idx} model={model} />
))}

2
apps/website/src/components/documentation/section/DocumentationSection.tsx
View File

@@ -8,7 +8,7 @@ export function DocumentationSection(opts: PropsWithChildren<SectionOptions & {
return (
<Section {...props}>
{children}
{separator ? <div className="border-light-900 dark:border-dark-100 mt-6 border-t-2" /> : null}
{separator ? <div className="mt-6 border-t-2 border-light-900 dark:border-dark-100" /> : null}
</Section>
);
}

2
apps/website/src/components/documentation/section/MethodsSection.tsx
View File

@@ -31,7 +31,7 @@ export function MethodsSection({ item }: { item: ApiItemContainerMixin }) {
}`}
>
<Method inheritedFrom={inherited as ApiDeclaredItem & ApiItemContainerMixin} method={method} />
<div className="border-light-900 dark:border-dark-100 border-t-2" />
<div className="border-t-2 border-light-900 dark:border-dark-100" />
</Fragment>
)),
[members],

4
apps/website/src/components/documentation/tsdoc/TSDoc.tsx
View File

@@ -39,7 +39,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
return (
<ItemLink
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
itemURI={resolveItemURI(foundItem)}
key={idx}
>
@@ -51,7 +51,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
if (urlDestination) {
return (
<Link
className="text-blurple focus:ring-width-2 focus:ring-blurple rounded font-mono outline-0 focus:ring"
className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
href={urlDestination}
key={idx}
>

4
apps/website/src/components/model/enum/EnumMember.tsx
View File

@@ -6,8 +6,8 @@ import { TSDoc } from '../../documentation/tsdoc/TSDoc';
export function EnumMember({ member }: { member: ApiEnumMember }) {
return (
<div className="scroll-mt-30 flex flex-col" id={member.displayName}>
<div className="md:-ml-8.5 flex flex-col gap-2 md:flex-row md:place-items-center">
<div className="flex flex-col scroll-mt-30" id={member.displayName}>
<div className="flex flex-col gap-2 md:flex-row md:place-items-center md:-ml-8.5">
<Anchor href={`#${member.displayName}`} />
<NameText name={member.name} />
{member.initializerExcerpt ? (

8
apps/website/src/components/model/method/MethodHeader.tsx
View File

@@ -25,24 +25,24 @@ export function MethodHeader({ method }: { method: ApiMethod | ApiMethodSignatur
);
return (
<div className="scroll-mt-30 flex flex-col" id={key}>
<div className="flex flex-col scroll-mt-30" id={key}>
<div className="flex flex-col gap-2 md:-ml-9">
{isDeprecated ||
(method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected) ||
(method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic) ? (
<div className="flex flex-row gap-1 md:ml-7">
{isDeprecated ? (
<div className="flex h-5 flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-red-500 px-3 text-center text-xs font-semibold uppercase text-white">
Deprecated
</div>
) : null}
{method.kind === ApiItemKind.Method && (method as ApiMethod).isProtected ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Protected
</div>
) : null}
{method.kind === ApiItemKind.Method && (method as ApiMethod).isStatic ? (
<div className="bg-blurple flex h-5 flex-row place-content-center place-items-center rounded-full px-3 text-center text-xs font-semibold uppercase text-white">
<div className="h-5 flex flex-row place-content-center place-items-center rounded-full bg-blurple px-3 text-center text-xs font-semibold uppercase text-white">
Static
</div>
) : null}

10
package.json
View File

@@ -46,8 +46,8 @@
},
"homepage": "https://discord.js.org",
"devDependencies": {
"@commitlint/cli": "^17.5.1",
"@commitlint/config-angular": "^17.4.4",
"@commitlint/cli": "^17.6.0",
"@commitlint/config-angular": "^17.6.0",
"@favware/cliff-jumper": "^2.0.0",
"@favware/npm-deprecate": "^1.0.7",
"conventional-changelog-cli": "^2.2.2",
@@ -55,10 +55,10 @@
"is-ci": "^3.0.1",
"lint-staged": "^13.2.1",
"tsup": "^6.7.0",
"turbo": "^1.8.8",
"turbo": "^1.9.1",
"typescript": "^5.0.4",
"unocss": "^0.51.0",
"vercel": "^28.18.4",
"unocss": "^0.51.4",
"vercel": "^28.18.5",
"vitest": "^0.29.8"
},
"resolutions": {

2
packages/actions/package.json
View File

@@ -47,7 +47,7 @@
},
"devDependencies": {
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",

2
packages/brokers/package.json
View File

@@ -65,7 +65,7 @@
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",

4
packages/builders/package.json
View File

@@ -58,7 +58,7 @@
"@discordjs/formatters": "workspace:^",
"@discordjs/util": "workspace:^",
"@sapphire/shapeshift": "^3.8.2",
"discord-api-types": "^0.37.37",
"discord-api-types": "^0.37.38",
"fast-deep-equal": "^3.1.3",
"ts-mixer": "^6.0.3",
"tslib": "^2.5.0"
@@ -67,7 +67,7 @@
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"downlevel-dts": "^0.11.0",
"esbuild-plugin-version-injector": "^1.1.0",

2
packages/collection/package.json
View File

@@ -54,7 +54,7 @@
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"esbuild-plugin-version-injector": "^1.1.0",
"eslint": "^8.38.0",

6
packages/core/package.json
View File

@@ -56,15 +56,15 @@
"@discordjs/rest": "workspace:^",
"@discordjs/util": "workspace:^",
"@discordjs/ws": "workspace:^",
"@sapphire/snowflake": "^3.4.0",
"@sapphire/snowflake": "^3.4.2",
"@vladfrangu/async_event_emitter": "^2.2.1",
"discord-api-types": "^0.37.37"
"discord-api-types": "^0.37.38"
},
"devDependencies": {
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"esbuild-plugin-version-injector": "^1.1.0",
"eslint": "^8.38.0",

4
packages/discord.js/package.json
View File

@@ -54,9 +54,9 @@
"@discordjs/formatters": "workspace:^",
"@discordjs/rest": "workspace:^",
"@discordjs/util": "workspace:^",
"@sapphire/snowflake": "^3.4.0",
"@sapphire/snowflake": "^3.4.2",
"@types/ws": "^8.5.4",
"discord-api-types": "^0.37.37",
"discord-api-types": "^0.37.38",
"fast-deep-equal": "^3.1.3",
"lodash.snakecase": "^4.1.1",
"tslib": "^2.5.0",

4
packages/formatters/package.json
View File

@@ -45,13 +45,13 @@
},
"homepage": "https://discord.js.org",
"dependencies": {
"discord-api-types": "^0.37.37"
"discord-api-types": "^0.37.38"
},
"devDependencies": {
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",

4
packages/next/package.json
View File

@@ -59,13 +59,13 @@
"@discordjs/rest": "workspace:^",
"@discordjs/util": "workspace:^",
"@discordjs/ws": "workspace:^",
"discord-api-types": "^0.37.37"
"discord-api-types": "^0.37.38"
},
"devDependencies": {
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "18.15.11",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"esbuild-plugin-version-injector": "^1.1.0",
"eslint": "^8.38.0",

2
packages/proxy/package.json
View File

@@ -65,7 +65,7 @@
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@types/supertest": "^2.0.12",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",

6
packages/rest/package.json
View File

@@ -56,8 +56,8 @@
"@discordjs/collection": "workspace:^",
"@discordjs/util": "workspace:^",
"@sapphire/async-queue": "^1.5.0",
"@sapphire/snowflake": "^3.4.0",
"discord-api-types": "^0.37.37",
"@sapphire/snowflake": "^3.4.2",
"discord-api-types": "^0.37.38",
"file-type": "^18.2.1",
"tslib": "^2.5.0",
"undici": "^5.21.2"
@@ -66,7 +66,7 @@
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"esbuild-plugin-version-injector": "^1.1.0",
"eslint": "^8.38.0",

2
packages/scripts/package.json
View File

@@ -56,7 +56,7 @@
"devDependencies": {
"@types/fs-extra": "^11.0.1",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",

9
packages/ui/.eslintrc.json
View File

@@ -1,5 +1,5 @@
{
"extends": ["../../.eslintrc.json", "neon/react", "neon/prettier"],
"extends": ["../../.eslintrc.json", "neon/react", "plugin:storybook/recommended", "@unocss", "neon/prettier"],
"settings": {
"react": {
"version": "detect"
@@ -7,6 +7,11 @@
},
"rules": {
"react/react-in-jsx-scope": 0,
"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
"react/jsx-filename-extension": [
1,
{
"extensions": [".tsx"]
}
]
}
}

1
packages/ui/.gitignore vendored
View File

@@ -20,6 +20,7 @@ typings/
docs/**/*
!docs/index.json
!docs/README.md
storybook-static/
# Miscellaneous
.tmp/

5
packages/ui/.ladle/components.tsx
View File

@@ -1,5 +0,0 @@
import type { GlobalProvider } from '@ladle/react';
import '@unocss/reset/tailwind-compat.css';
import 'uno.css';
export const Provider: GlobalProvider = ({ children }) => <>{children}</>;

21
packages/ui/.storybook/main.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { StorybookConfig } from '@storybook/react-vite';
export default {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-styling',
],
core: {
builder: '@storybook/builder-vite',
},
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
} satisfies StorybookConfig;

7
packages/ui/.storybook/preview.css Normal file
View File

@@ -0,0 +1,7 @@
html {
color-scheme: light;
}
html.dark {
color-scheme: dark;
}

28
packages/ui/.storybook/preview.ts Normal file
View File

@@ -0,0 +1,28 @@
import type { Preview } from '@storybook/react';
import { withThemeByClassName } from '@storybook/addon-styling';
import '@unocss/reset/tailwind-compat.css';
import './preview.css';
import 'virtual:uno.css';
export default {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
} satisfies Preview;
export const decorators = [
withThemeByClassName({
themes: {
light: 'bg-light-600',
dark: 'dark bg-dark-600',
},
defaultTheme: 'light',
}),
];

26
packages/ui/package.json
View File

@@ -10,7 +10,8 @@
"prepack": "yarn build && yarn lint",
"changelog": "git cliff --prepend ./CHANGELOG.md -u -c ./cliff.toml -r ../../ --include-path 'packages/ui/*'",
"release": "cliff-jumper",
"storybook": "ladle serve"
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"type": "module",
"module": "./dist/ui.js",
@@ -43,27 +44,38 @@
},
"homepage": "https://discord.js.org",
"dependencies": {
"ariakit": "^2.0.0-next.43",
"ariakit": "^2.0.0-next.44",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@favware/cliff-jumper": "^2.0.0",
"@ladle/react": "^2.11.0",
"@react-icons/all-files": "^4.1.0",
"@storybook/addon-essentials": "^7.0.4",
"@storybook/addon-interactions": "^7.0.4",
"@storybook/addon-links": "^7.0.4",
"@storybook/addon-styling": "^1.0.0",
"@storybook/blocks": "^7.0.4",
"@storybook/react": "^7.0.4",
"@storybook/react-vite": "^7.0.4",
"@storybook/testing-library": "^0.1.0",
"@types/node": "16.18.23",
"@types/react": "^18.0.33",
"@types/react": "^18.0.35",
"@types/react-dom": "^18.0.11",
"@unocss/reset": "^0.51.0",
"@unocss/eslint-config": "^0.51.4",
"@unocss/reset": "^0.51.4",
"@vitejs/plugin-react": "^3.1.0",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",
"eslint-formatter-pretty": "^5.0.0",
"eslint-plugin-storybook": "^0.6.11",
"prettier": "^2.8.7",
"prop-types": "^15.8.1",
"storybook": "^7.0.4",
"typescript": "^5.0.4",
"unocss": "^0.51.0",
"unocss": "^0.51.4",
"vite": "^4.2.1",
"vite-plugin-dts": "^2.2.0",
"vitest": "^0.29.8"

2
packages/ui/src/lib/components/Alert.tsx
View File

@@ -51,7 +51,7 @@ export function Alert({ title, type, children }: PropsWithChildren<IAlert>) {
<div className="mb-4 mt-6">
<div className="relative flex">
<div className="p-4">{children}</div>
<div className="pointer-events-none absolute flex h-full w-full">
<div className="pointer-events-none absolute h-full w-full flex">
<div className={`rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-b-2 border-l-2 border-t-2 ${border}`} />
<div className={`relative border-b-2 ${border}`}>
<div className={`-translate-y-50% pointer-events-auto flex place-items-center gap-2 px-2 ${text}`}>

65
packages/ui/src/lib/components/Section.stories.tsx
View File

@@ -1,58 +1,13 @@
import type { Story } from '@ladle/react';
import type { PropsWithChildren } from 'react';
import { Section, type SectionOptions } from './Section.jsx';
import type { Meta, StoryObj } from '@storybook/react';
import { Section } from './Section.jsx';
export const Default = () => <Section title="Test">Test 1234</Section>;
export default {
title: 'Section',
component: Section,
} satisfies Meta<typeof Section>;
export const Padded = () => (
<Section padded title="Test">
Test 1234
</Section>
);
type Story = StoryObj<typeof Section>;
export const Background = () => (
<Section background title="Test">
Test 1234
</Section>
);
export const Dense = () => (
<Section dense title="Test">
Test 1234
</Section>
);
export const Gutter = () => (
<Section gutter title="Test">
Test 1234
</Section>
);
export const Playground: Story<PropsWithChildren<SectionOptions>> = ({
title,
background,
defaultClosed,
dense,
gutter,
padded,
}: PropsWithChildren<SectionOptions>) => (
<Section
background={background}
defaultClosed={defaultClosed}
dense={dense}
gutter={gutter}
padded={padded}
title={title}
>
Test 1234
</Section>
);
Playground.args = {
title: 'Test',
background: true,
defaultClosed: false,
dense: false,
gutter: true,
padded: true,
};
export const Default = {
render: () => <Section title="Test">Test Content</Section>,
} satisfies Story;

2
packages/ui/src/lib/components/discord/Message.tsx
View File

@@ -40,7 +40,7 @@ export function DiscordMessage({
<div className="static" id="content-wrapper">
{followUp ? (
<span
className="h-5.5 absolute left-0 mr-1 hidden w-[56px] cursor-default select-none text-right text-xs leading-loose text-[rgb(163_166_170)] group-hover:inline-block"
className="absolute left-0 mr-1 hidden h-5.5 w-[56px] cursor-default select-none text-right text-xs leading-loose text-[rgb(163_166_170)] group-hover:inline-block"
id="time"
>
{time}

4
packages/ui/src/lib/components/discord/MessageAuthor.tsx
View File

@@ -13,11 +13,11 @@ export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMe
className="absolute left-[16px] mt-0.5 h-10 w-10 cursor-pointer select-none rounded-full"
src={avatar}
/>
<h2 className="text-size-inherit m-0 font-medium leading-snug" id="user-info">
<h2 className="m-0 text-size-inherit font-medium leading-snug" id="user-info">
<span className="mr-1" id="username">
<span className="cursor-pointer text-base font-medium text-white hover:underline">{username}</span>
{bot ? (
<span className="bg-blurple vertical-top relative top-1 ml-1 rounded px-1 text-xs" id="bot">
<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
BOT
</span>
) : null}

2
packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
View File

@@ -9,7 +9,7 @@ export function DiscordMessageAuthorReply({ avatar, bot, username }: IDiscordMes
<>
<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
{bot ? (
<div className="bg-blurple vertical-top mr-1 rounded px-1 text-xs" id="bot">
<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
BOT
</div>
) : null}

2
packages/ui/src/lib/components/discord/MessageBaseReply.tsx
View File

@@ -8,7 +8,7 @@ export function DiscordMessageBaseReply({
}: PropsWithChildren<{ author?: IDiscordMessageAuthorReply | undefined; authorNode?: ReactNode | undefined }>) {
return (
<div
className="before:rounded-tl-1.5 relative mb-1 flex place-items-center before:absolute before:bottom-0 before:left-[-36px] before:right-full before:top-[50%] before:mr-1 before:block before:border-l-2 before:border-t-2 before:border-[rgb(79_84_92)] before:content-none"
className="relative mb-1 flex place-items-center before:absolute before:bottom-0 before:left-[-36px] before:right-full before:top-[50%] before:mr-1 before:block before:border-l-2 before:border-t-2 before:border-[rgb(79_84_92)] before:rounded-tl-1.5 before:content-none"
id="reply-wrapper"
>
<div className="flex place-items-center [&>span]:opacity-60">

2
packages/ui/src/lib/components/discord/MessageEmbed.tsx
View File

@@ -23,7 +23,7 @@ export function DiscordMessageEmbed({
}: PropsWithChildren<IDiscordMessageEmbed>) {
return (
<div className="py-0.5" id="outer-embed-wrapper">
<div className="border-l-blurple grid max-w-max rounded border-l-4 bg-[rgb(47_49_54)]" id="embed-wrapper">
<div className="grid max-w-max border-l-4 border-l-blurple rounded bg-[rgb(47_49_54)]" id="embed-wrapper">
<div className="max-w-128">
<div className="pb-4 pl-3 pr-4 pt-2">
{author ? <DiscordMessageEmbedAuthor {...author} /> : authorNode ?? null}

2
packages/ui/src/lib/components/discord/MessageInteraction.tsx
View File

@@ -12,7 +12,7 @@ export function DiscordMessageInteraction({ author, authorNode, command }: IDisc
return (
<DiscordMessageBaseReply author={author} authorNode={authorNode}>
<span className="mr-1 select-none text-sm leading-snug text-white">used</span>
<div className="text-blurple cursor-pointer text-sm leading-snug hover:underline">{command}</div>
<div className="cursor-pointer text-sm leading-snug text-blurple hover:underline">{command}</div>
</DiscordMessageBaseReply>
);
}

2
packages/ui/vite.config.ts
View File

@@ -5,7 +5,7 @@ import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
export default defineConfig({
plugins: [dts(), react(), Unocss()],
plugins: [dts(), react(), Unocss({ include: ['.storybook/preview.ts'] })],
build: {
lib: {
entry: resolve(__dirname, 'src/lib/index.ts'),

2
packages/util/package.json
View File

@@ -55,7 +55,7 @@
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"eslint": "^8.38.0",
"eslint-config-neon": "^0.1.42",

2
packages/voice/package.json
View File

@@ -54,7 +54,7 @@
"homepage": "https://discord.js.org",
"dependencies": {
"@types/ws": "^8.5.4",
"discord-api-types": "^0.37.37",
"discord-api-types": "^0.37.38",
"prism-media": "^1.3.5",
"tslib": "^2.5.0",
"ws": "^8.13.0"

4
packages/ws/package.json
View File

@@ -65,7 +65,7 @@
"@sapphire/async-queue": "^1.5.0",
"@types/ws": "^8.5.4",
"@vladfrangu/async_event_emitter": "^2.2.1",
"discord-api-types": "^0.37.37",
"discord-api-types": "^0.37.38",
"tslib": "^2.5.0",
"ws": "^8.13.0"
},
@@ -73,7 +73,7 @@
"@favware/cliff-jumper": "^2.0.0",
"@microsoft/api-extractor": "^7.34.4",
"@types/node": "16.18.23",
"@vitest/coverage-c8": "^0.29.8",
"@vitest/coverage-c8": "^0.30.1",
"cross-env": "^7.0.3",
"esbuild-plugin-version-injector": "^1.1.0",
"eslint": "^8.38.0",

4674
yarn.lock
View File

File diff suppressed because it is too large Load Diff