feat: web-components (#8715)

.github/labeler.yml

@@ -1,47 +1,39 @@
-'packages:builders':
+packages:builders:
   - packages/builders/*
   - packages/builders/**/*
-
-'packages:collection':
+packages:collection:
   - packages/collection/*
   - packages/collection/**/*
-
-'packages:discord.js':
+packages:discord.js:
   - packages/discord.js/*
   - packages/discord.js/**/*
-
-'packages:docgen':
+packages:docgen:
   - packages/docgen/*
   - packages/docgen/**/*
-
-'packages:guide':
+packages:guide:
   - packages/guide/*
   - packages/guide/**/*
-
-'packages:proxy':
+packages:proxy:
   - packages/proxy/*
   - packages/proxy/**/*
-
-'packages:proxy-container':
+packages:proxy-container:
   - packages/proxy-container/*
   - packages/proxy-container/**/*
-
-'packages:rest':
+packages:rest:
   - packages/rest/*
   - packages/rest/**/*
-
-'packages:util':
+packages:util:
   - packages/util/*
   - packages/util/**/*
-
-'packages:voice':
+packages:voice:
   - packages/voice/*
   - packages/voice/**/*
-
-'packages:website':
+packages:website:
   - packages/website/*
   - packages/website/**/*
-
-'packages:ws':
+packages/web-components:
+  - packages:web-components/*
+  - packages:web-components/**/*
+packages:ws:
   - packages/ws/*
   - packages/ws/**/*

.github/labels.yml

@@ -1,106 +1,108 @@
-- name: 'api changes'
+- name: api changes
   color: '5663e9'
-- name: 'api support'
+- name: api support
   color: '5663e9'
-- name: 'backlog'
-  color: '7ef7ef'
-- name: 'blocked'
-  color: 'fc1423'
-- name: 'bug'
-  color: 'd73a4a'
-- name: 'caching'
-  color: '80c042'
-- name: 'chore'
-  color: 'ffffff'
-- name: 'ci'
-  color: '0075ca'
-- name: 'dependencies'
-  color: '276bd1'
-- name: 'discussion'
-  color: 'b6b1f9'
-- name: 'discord'
+- name: backlog
+  color: 7ef7ef
+- name: blocked
+  color: fc1423
+- name: bug
+  color: d73a4a
+- name: caching
+  color: 80c042
+- name: chore
+  color: ffffff
+- name: ci
+  color: 0075ca
+- name: dependencies
+  color: 276bd1
+- name: discussion
+  color: b6b1f9
+- name: discord
   color: '5663e9'
-- name: 'documentation'
-  color: '0075ca'
-- name: 'duplicate'
-  color: 'cfd3d7'
-- name: 'error handling'
-  color: '80c042'
-- name: 'feature request'
-  color: 'fcf95a'
-- name: 'gateway'
-  color: '80c042'
-- name: 'good first issue'
-  color: '7057ff'
-- name: 'has PR'
-  color: '4b1f8e'
-- name: 'help wanted'
+- name: documentation
+  color: 0075ca
+- name: duplicate
+  color: cfd3d7
+- name: error handling
+  color: 80c042
+- name: feature request
+  color: fcf95a
+- name: gateway
+  color: 80c042
+- name: good first issue
+  color: 7057ff
+- name: has PR
+  color: 4b1f8e
+- name: help wanted
   color: '008672'
-- name: 'interactions'
-  color: '80c042'
-- name: 'in progress'
-  color: 'ffccd7'
-- name: 'in review'
-  color: 'aed5fc'
-- name: 'invalid'
-  color: 'e4e669'
-- name: 'need repro'
-  color: 'c66037'
-- name: 'packages:builders'
-  color: 'fbca04'
-- name: 'packages:collection'
-  color: 'fbca04'
-- name: 'packages:discord.js'
-  color: 'fbca04'
-- name: 'packages:docgen'
-  color: 'fbca04'
-- name: 'packages:guide'
-  color: 'fbca04'
-- name: 'packages:proxy'
-  color: 'fbca04'
-- name: 'packages:proxy-container'
-  color: 'fbca04'
-- name: 'packages:rest'
-  color: 'fbca04'
-- name: 'packages:util'
-  color: 'fbca04'
-- name: 'packages:voice'
-  color: 'fbca04'
-- name: 'packages:website'
-  color: 'fbca04'
-- name: 'packages:ws'
-  color: 'fbca04'
-- name: 'performance'
-  color: '80c042'
-- name: 'permissions'
-  color: '80c042'
-- name: 'priority:high'
-  color: 'fc1423'
-- name: 'question (please use Discord instead)'
-  color: 'd876e3'
-- name: 'ratelimits'
-  color: '80c042'
-- name: 'refactor'
-  color: '1d637f'
-- name: 'regression'
-  color: 'ea8785'
-- name: 'REST'
-  color: '80c042'
-- name: 'semver:major'
-  color: 'c10f47'
-- name: 'semver:minor'
-  color: 'e4f486'
-- name: 'semver:patch'
-  color: 'e8be8b'
-- name: 'sharding'
-  color: '80c042'
-- name: 'tests'
-  color: 'f06dff'
-- name: 'threads'
-  color: '80c042'
-- name: 'typings'
-  color: '80c042'
-- name: 'utility'
-  color: '80c042'
-- name: 'wontfix'
-  color: 'ffffff'
+- name: interactions
+  color: 80c042
+- name: in progress
+  color: ffccd7
+- name: in review
+  color: aed5fc
+- name: invalid
+  color: e4e669
+- name: need repro
+  color: c66037
+- name: packages:builders
+  color: fbca04
+- name: packages:collection
+  color: fbca04
+- name: packages:discord.js
+  color: fbca04
+- name: packages:docgen
+  color: fbca04
+- name: packages:guide
+  color: fbca04
+- name: packages:proxy
+  color: fbca04
+- name: packages:proxy-container
+  color: fbca04
+- name: packages:rest
+  color: fbca04
+- name: packages:util
+  color: fbca04
+- name: packages:voice
+  color: fbca04
+- name: packages:website
+  color: fbca04
+- name: packages:web-components
+  color: fbca04
+- name: packages:ws
+  color: fbca04
+- name: performance
+  color: 80c042
+- name: permissions
+  color: 80c042
+- name: priority:high
+  color: fc1423
+- name: question (please use Discord instead)
+  color: d876e3
+- name: ratelimits
+  color: 80c042
+- name: refactor
+  color: 1d637f
+- name: regression
+  color: ea8785
+- name: REST
+  color: 80c042
+- name: semver:major
+  color: c10f47
+- name: semver:minor
+  color: e4f486
+- name: semver:patch
+  color: e8be8b
+- name: sharding
+  color: 80c042
+- name: tests
+  color: f06dff
+- name: threads
+  color: 80c042
+- name: typings
+  color: 80c042
+- name: utility
+  color: 80c042
+- name: wontfix
+  color: ffffff

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
 	"*": "prettier --ignore-unknown --write",
-	"{src/**,__tests__/**}.{mjs,js,ts}": "eslint --ext mjs,js,ts --fix",
-	"src/**.ts": "vitest related --run"
+	"{src/**,__tests__/**}.{mjs,js,cjs,ts,tsx,astro}": "eslint --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix",
+	"src/**.ts": "vitest related --run --config ./vitest.config.ts"
 }

.vscode/settings.json

@@ -11,6 +11,6 @@
 	"files.associations": {
 		"*.mdx": "markdown"
 	},
-	"unocss.root": "./packages/website",
+	"unocss.root": "./packages/web-components",
 	"typescript.tsdk": "node_modules/typescript/lib"
 }

packages/actions/package.json

@@ -6,8 +6,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format"
 	},
 	"main": "./dist/index.mjs",

packages/api-extractor-utils/package.json

@@ -5,8 +5,8 @@
 	"private": true,
 	"scripts": {
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format"
 	},
 	"main": "./dist/index.js",

packages/builders/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/collection/package.json

@@ -5,8 +5,8 @@
 	"scripts": {
 		"test": "vitest run",
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext mjs,js,ts --fix",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src __tests__ --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"docs": "downlevel-dts dist docs/dist --to=3.7 && api-extractor run --local",
 		"prepack": "yarn lint && yarn test && yarn build",

packages/docgen/package.json

@@ -4,8 +4,8 @@
 	"description": "The docs.json generator for discord.js and its related projects",
 	"scripts": {
 		"build": "tsup",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts --fix",
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.ts --fix",
 		"fmt": "yarn format",
 		"prepack": "yarn format && yarn build"
 	},

packages/guide/astro.config.ts

@@ -14,7 +14,9 @@ export default defineConfig({
 		image({
 			serviceEntryPoint: '@astrojs/image/sharp',
 		}),
-		Unocss(),
+		Unocss({
+			configFile: fileURLToPath(new URL('../ui/unocss.config.ts', import.meta.url)),
+		}),
 	],
 	markdown: {
 		remarkPlugins: [[remarkCodeHike, { autoImport: false, theme: shikiThemeDarkPlus, lineNumbers: true }]],

packages/guide/package.json

@@ -1,15 +1,15 @@
 {
 	"name": "@discordjs/guide",
 	"version": "0.1.0",
-	"description": "",
+	"description": "Imagine a guide... that explores the many possibilities for your discord.js bot",
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build:prod": "astro build",
+		"build:prod": "yarn workspace @discordjs/ui run build && astro build",
 		"dev": "astro dev",
 		"preview": "astro preview",
-		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx,astro",
-		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext mjs,js,ts,tsx,astro --fix"
+		"lint": "prettier --check . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro",
+		"format": "prettier --write . && cross-env TIMING=1 eslint src --ext .mjs,.js,.cjs,.ts,.tsx,.astro --fix"
 	},
 	"type": "module",
 	"contributors": [
@@ -38,6 +38,7 @@
 		"@astrojs/mdx": "^0.11.4",
 		"@astrojs/react": "^1.1.4",
 		"@code-hike/mdx": "^0.7.4",
+		"@discordjs/ui": "workspace:^",
 		"@vscode/codicons": "^0.0.32",
 		"ariakit": "^2.0.0-next.41",
 		"astro": "^1.4.5",

packages/guide/src/components/SidebarItems.tsx

@@ -1,5 +1,5 @@
+import { Section } from '@discordjs/ui';
 import type { MDXInstance } from 'astro';
-import { Section } from './Section.jsx';
 
 export type MDXPage = MDXInstance<{ category: string; title: string }>;