feat: web-components

.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

.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/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

@@ -5,7 +5,7 @@
 	"private": true,
 	"scripts": {
 		"test": "vitest run",
-		"build:prod": "astro build",
+		"build:prod": "yarn workspace @discordjs/web-components 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",
@@ -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/web-components';
 import type { MDXInstance } from 'astro';
-import { Section } from './Section.jsx';
 
 export type MDXPage = MDXInstance<{ category: string; title: string }>;
 

packages/guide/src/pages/creating-your-bot/index.mdx

@@ -9,7 +9,7 @@ import { Caution } from '../../components/Caution.jsx';
 import { DocsLink } from '../../components/DocsLink.jsx';
 import { ResultingCode } from '../../components/ResultingCode.jsx';
 import { CH } from '@code-hike/mdx/components';
-import { Section } from '../../components/Section.jsx';
+import { Section } from '@discordjs/web-components';
 
 # Initial files
 

packages/ui/.cliff-jumperrc.json

@@ -0,0 +1,5 @@
+{
+	"name": "web-components",
+	"org": "discordjs",
+	"packagePath": "packages/web-components"
+}

packages/ui/.eslintrc.json

@@ -0,0 +1,12 @@
+{
+	"extends": ["../../.eslintrc.json", "neon/react", "neon/prettier"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"rules": {
+		"react/react-in-jsx-scope": 0,
+		"react/jsx-filename-extension": [1, { "extensions": [".tsx"] }]
+	}
+}

packages/ui/.gitignore

@@ -0,0 +1,27 @@
+# Packages
+node_modules/
+
+# Log files
+logs/
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Env
+.env
+
+# Dist
+dist/
+typings/
+docs/**/*
+!docs/index.json
+!docs/README.md
+
+# Miscellaneous
+.tmp/
+coverage/
+tsconfig.tsbuildinfo

packages/ui/.ladle/components.tsx

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

packages/ui/.lintstagedrc.cjs

@@ -0,0 +1 @@
+module.exports = require('../../.lintstagedrc.json');

packages/ui/.prettierignore

@@ -0,0 +1,8 @@
+# Autogenerated
+CHANGELOG.md
+.turbo
+dist/
+docs/**/*
+!docs/index.yml
+!docs/README.md
+coverage/

packages/ui/.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require('../../.prettierrc.json');