chore: storybook

discordjs · Apr 13, 2023 · e5859b4 · e5859b4 · vercel · Apr 13, 2023
1 parent 8218ffc
commit e5859b4
Show file tree

Hide file tree

Showing 91 changed files with 3,667 additions and 1,578 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -9,7 +9,6 @@
 		"christian-kohler.npm-intellisense",
 		"christian-kohler.path-intellisense",
 		"antfu.unocss",
-		"astro-build.astro-vscode",
 		"unifiedjs.vscode-mdx"
 	]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -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": {

diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -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'
diff --git a/apps/guide/.eslintrc.json b/apps/guide/.eslintrc.json
@@ -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"

diff --git a/apps/guide/.prettierrc.cjs b/apps/guide/.prettierrc.cjs
@@ -1,7 +1 @@
-module.exports = {
-	...require('../../.prettierrc.json'),
-	plugins: [
-		'prettier-plugin-tailwindcss', // MUST come last
-	],
-	pluginSearchDirs: false,
-};
+module.exports = require('../../.prettierrc.json');
diff --git a/apps/guide/package.json b/apps/guide/package.json
@@ -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": {

diff --git a/apps/guide/src/app/error.tsx b/apps/guide/src/app/error.tsx
@@ -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>

diff --git a/apps/guide/src/app/global-error.tsx b/apps/guide/src/app/global-error.tsx
@@ -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>

diff --git a/apps/guide/src/app/guide/[[...slug]]/page.tsx b/apps/guide/src/app/guide/[[...slug]]/page.tsx
@@ -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>
 	);

diff --git a/apps/guide/src/app/guide/layout.tsx b/apps/guide/src/app/guide/layout.tsx
@@ -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>

diff --git a/apps/guide/src/app/layout.tsx b/apps/guide/src/app/layout.tsx
@@ -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>

diff --git a/apps/guide/src/app/loading.tsx b/apps/guide/src/app/loading.tsx
@@ -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"

diff --git a/apps/guide/src/app/not-found.tsx b/apps/guide/src/app/not-found.tsx
@@ -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

diff --git a/apps/guide/src/app/page.tsx b/apps/guide/src/app/page.tsx
@@ -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"

diff --git a/apps/guide/src/components/ExternalLink.tsx b/apps/guide/src/components/ExternalLink.tsx
@@ -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>

diff --git a/apps/guide/src/components/Footer.tsx b/apps/guide/src/components/Footer.tsx
@@ -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,15 +25,15 @@ 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"
 								>
 									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,23 +46,23 @@ 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"
 								>
 									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"
 								>
 									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"

diff --git a/apps/guide/src/components/Header.tsx b/apps/guide/src/components/Header.tsx
@@ -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"

diff --git a/apps/guide/src/components/Nav.tsx b/apps/guide/src/components/Nav.tsx
@@ -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" />
 				)}

diff --git a/apps/guide/src/components/Outline.tsx b/apps/guide/src/components/Outline.tsx
@@ -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)`,

diff --git a/apps/guide/src/components/PageButton.tsx b/apps/guide/src/components/PageButton.tsx
@@ -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>

diff --git a/apps/guide/src/components/ThemeSwitcher.tsx b/apps/guide/src/components/ThemeSwitcher.tsx
@@ -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} />

diff --git a/apps/website/.eslintrc.json b/apps/website/.eslintrc.json
@@ -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"

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