feat: web-components (#8715)

packages/website/package.json

@@ -1,21 +1,21 @@
 {
 	"name": "@discordjs/website",
 	"version": "0.1.0",
-	"description": "A set of builders that you can use when creating your bot",
+	"description": "Imagine a bot... the most popular way to build discord bots",
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
 		"build:local": "yarn run --top-level docs --force && cross-env NEXT_PUBLIC_LOCAL_DEV=true yarn build:prod",
-		"build:prod": "yarn workspace @discordjs/api-extractor-utils run build && yarn workspace @discordjs/scripts run build && yarn build:css && yarn build:next",
+		"build:prod": "yarn workspace @discordjs/api-extractor-utils run build && yarn workspace @discordjs/scripts run build && yarn workspace @discordjs/ui run build && yarn build:css && yarn build:next",
 		"build:next": "next build",
 		"build:css": "yarn generate:css",
 		"build:search_indicies": "yarn node scripts/generateAllIndicies.js",
 		"dev": "yarn run --top-level docs && concurrently 'yarn dev:css' 'yarn dev:next'",
 		"dev:next": "next dev",
 		"dev:css": "yarn generate:css --watch",
-		"generate:css": "unocss 'src/**/*.tsx' --out-file ./src/styles/unocss.css",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx --fix"
+		"generate:css": "unocss 'src/**/*.tsx' '../ui/src/**/*.tsx' --out-file ./src/styles/unocss.css --config ../ui/unocss.config.ts",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx --fix"
 	},
 	"type": "module",
 	"contributors": [
@@ -42,6 +42,7 @@
 	"dependencies": {
 		"@discordjs/api-extractor-utils": "workspace:^",
 		"@discordjs/scripts": "workspace:^",
+		"@discordjs/ui": "workspace:^",
 		"@microsoft/api-extractor-model": "7.24.0",
 		"@microsoft/tsdoc": "0.14.1",
 		"@vscode/codicons": "^0.0.32",

packages/website/src/components/DocContainer.tsx

@@ -5,6 +5,7 @@ import type {
 	ApiClassJSON,
 	ApiInterfaceJSON,
 } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
 import type { ReactNode } from 'react';
 import { Fragment, type PropsWithChildren } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
@@ -19,7 +20,6 @@ import {
 } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { HyperlinkedText } from './HyperlinkedText';
-import { Section } from './Section';
 import { SyntaxHighlighter } from './SyntaxHighlighter';
 import { TableOfContentItems } from './TableOfContentItems';
 import { TypeParamTable } from './TypeParamTable';

packages/website/src/components/Section.tsx

@@ -1,43 +0,0 @@
-import { Disclosure, DisclosureContent, useDisclosureState } from 'ariakit/disclosure';
-import type { PropsWithChildren } from 'react';
-import { VscChevronDown } from 'react-icons/vsc';
-
-export function Section({
-	title,
-	icon,
-	padded = false,
-	dense = false,
-	defaultClosed = false,
-	children,
-}: PropsWithChildren<{
-	defaultClosed?: boolean;
-	dense?: boolean;
-	icon?: JSX.Element;
-	padded?: boolean;
-	title: string;
-}>) {
-	const disclosure = useDisclosureState({ defaultOpen: !defaultClosed });
-
-	return (
-		<div className="flex flex-col">
-			<Disclosure
-				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 rounded p-3 outline-0 focus:ring"
-				state={disclosure}
-			>
-				<div className="flex flex-row place-content-between place-items-center">
-					<div className="flex flex-row place-items-center gap-3">
-						{icon ?? null}
-						<span className="font-semibold">{title}</span>
-					</div>
-					<VscChevronDown
-						className={`transform transition duration-150 ease-in-out ${disclosure.open ? 'rotate-180' : 'rotate-0'}`}
-						size={20}
-					/>
-				</div>
-			</Disclosure>
-			<DisclosureContent state={disclosure}>
-				{padded ? <div className={`py-5 ${dense ? 'mx-2 px-0' : 'px-4.5 mx-6.5'}`}>{children}</div> : children}
-			</DisclosureContent>
-		</div>
-	);
-}

packages/website/src/components/Sections.tsx

@@ -4,13 +4,13 @@ import type {
 	ParameterDocumentation,
 	ApiConstructorJSON,
 } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
 import { useMemo } from 'react';
 import { VscSymbolConstant, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { MethodList } from './MethodList';
 import { ParameterTable } from './ParameterTable';
 import { PropertyList } from './PropertyList';
-import { Section } from './Section';
 import { TSDoc } from './tsdoc/TSDoc';
 
 export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] | ApiInterfaceJSON['properties'] }) {

packages/website/src/components/SidebarItems.tsx

@@ -1,3 +1,4 @@
+import { Section } from '@discordjs/ui';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { type Dispatch, type SetStateAction, useEffect, useState, useMemo } from 'react';
@@ -9,7 +10,6 @@ import {
 	VscSymbolVariable,
 	VscSymbolMethod,
 } from 'react-icons/vsc';
-import { Section } from './Section';
 import type { GroupedMembers, Members } from './SidebarLayout';
 
 function groupMembers(members: Members): GroupedMembers {

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

@@ -1,9 +1,9 @@
 import type { ApiEnumJSON } from '@discordjs/api-extractor-utils';
+import { Section } from '@discordjs/ui';
 import { VscSymbolEnumMember } from 'react-icons/vsc';
 import { useMedia } from 'react-use';
 import { CodeListing, CodeListingSeparatorType } from '../CodeListing';
 import { DocContainer } from '../DocContainer';
-import { Section } from '../Section';
 
 export function Enum({ data }: { data: ApiEnumJSON }) {
 	const matches = useMedia('(max-width: 768px)', true);

packages/website/unocss.config.ts

@@ -1,65 +0,0 @@
-import { defineConfig, presetTypography, presetUno, presetWebFonts } from 'unocss';
-
-export default defineConfig({
-	theme: {
-		colors: {
-			blurple: {
-				50: '#e0e3ff',
-				100: '#cdd2ff',
-				200: '#9ea7ff',
-				300: '#7782fa',
-				DEFAULT: '#5865F2',
-				500: '#3d48c3',
-				600: '#293294',
-				700: '#1a2165',
-				800: '#0e1137',
-				900: '#020208',
-			},
-		},
-	},
-	presets: [
-		presetUno({ dark: 'class' }),
-		presetWebFonts({
-			provider: 'bunny',
-			fonts: {
-				mono: ['JetBrains Mono', 'JetBrains Mono:400,600,700'],
-			},
-		}),
-		presetTypography({
-			cssExtend: {
-				pre: {
-					padding: '1em',
-					'line-height': '1.5',
-					'border-radius': '4px',
-				},
-				code: {
-					'font-size': '1em',
-					'font-weight': 'unset',
-				},
-				':where(:not(pre) > code)::before': {
-					content: '""',
-				},
-				':where(:not(pre) > code)::after': {
-					content: '""',
-				},
-				a: {
-					color: '#5865F2',
-					'text-decoration': 'none',
-				},
-				'a > img': {
-					display: 'inline-block',
-				},
-				h2: {
-					'margin-top': '1.25em',
-				},
-				h3: {
-					'margin-top': '0.75em',
-				},
-				// eslint-disable-next-line id-length
-				p: {
-					margin: '.5em 0',
-				},
-			},
-		}),
-	],
-});