feat: alert & discord components

packages/guide/package.json

@@ -60,6 +60,7 @@
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/node": "^16.11.64",
+		"@types/react": "^17.0.39",
 		"@types/react-dom": "^17.0.17",
 		"@types/react-syntax-highlighter": "^15.5.5",
 		"@unocss/cli": "^0.45.26",

packages/guide/src/components/Caution.tsx

@@ -1,22 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { VscWarning } from 'react-icons/vsc';
-
-export function Caution({ children }: PropsWithChildren<{}>) {
-	return (
-		<div className="my-4">
-			<div className="relative flex">
-				<div className="p-4">{children}</div>
-				<div className="absolute flex h-full w-full">
-					<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-red-500" />
-					<div className="relative border-b-2 border-red-500">
-						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
-							<VscWarning size={20} />
-							<span className="font-semibold text-red-500">Caution</span>
-						</div>
-					</div>
-					<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-red-500" />
-				</div>
-			</div>
-		</div>
-	);
-}

packages/guide/src/components/Info.tsx

@@ -1,22 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { VscInfo } from 'react-icons/vsc';
-
-export function Info({ children }: PropsWithChildren<{}>) {
-	return (
-		<div className="my-4">
-			<div className="relative flex">
-				<div className="p-4">{children}</div>
-				<div className="absolute flex h-full w-full">
-					<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-blue-500" />
-					<div className="relative border-b-2 border-blue-500">
-						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-blue-500">
-							<VscInfo size={20} />
-							<span className="font-semibold text-blue-500">Info</span>
-						</div>
-					</div>
-					<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-blue-500" />
-				</div>
-			</div>
-		</div>
-	);
-}

packages/guide/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Scrollbars } from 'react-custom-scrollbars-2';
-import type { MDXPage } from './SidebarItems';
+import type { MDXPage } from './SidebarItems.jsx';
 
 export function Sidebar({ pages, opened }: { opened: boolean; pages?: MDXPage[] | undefined }) {
 	return (

packages/guide/src/components/Tip.tsx

@@ -1,22 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { VscFlame } from 'react-icons/vsc';
-
-export function Tip({ children }: PropsWithChildren<{}>) {
-	return (
-		<div className="my-4">
-			<div className="relative flex">
-				<div className="p-4">{children}</div>
-				<div className="absolute flex h-full w-full">
-					<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-green-500" />
-					<div className="relative border-b-2 border-green-500">
-						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-green-500">
-							<VscFlame size={20} />
-							<span className="font-semibold text-green-500">Tip</span>
-						</div>
-					</div>
-					<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-green-500" />
-				</div>
-			</div>
-		</div>
-	);
-}

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

@@ -4,16 +4,16 @@ title: Creating commands
 category: Creating your bot
 ---
 
-import { Tip } from '../../components/Tip.jsx';
-import { DiscordMessages } from '../../components/discord/Messages.jsx';
-import { DiscordMessage } from '../../components/discord/Message.jsx';
+import { CH } from '@code-hike/mdx/components';
+import { Alert, DiscordMessages, DiscordMessage } from '@discordjs/ui';
 import { DocsLink } from '../../components/DocsLink.jsx';
 import { ResultingCode } from '../../components/ResultingCode.jsx';
-import { CH } from '@code-hike/mdx/components';
 
 # Creating commands
 
-<Tip>This page is a follow-up and bases its code on [the previous page](/creating-your-bot/).</Tip>
+<Alert title="Tip" type="success">
+	This page is a follow-up and bases its code on [the previous page](/creating-your-bot/).
+</Alert>
 
 <DiscordMessages rounded>
 	<DiscordMessage
@@ -52,13 +52,13 @@ Below is a deployment script you can use. Focus on these variables:
 - `guildId`: Your development server's id
 - `commands`: An array of commands to register. The [slash command builder](/popular-topics/builders.md#slash-command-builders) from `discord.js` is used to build the data for your commands
 
-<Tip>
+<Alert title="Tip" type="success">
 	In order to get your application's client id, go to [Discord Developer
 	Portal](https://discord.com/developers/applications) and choose your application. Find the id under "Application ID"
 	in General Information subpage. To get guild id, open Discord and go to your settings. On the "Advanced" page, turn on
 	"Developer Mode". This will enable a "Copy ID" button in the context menu when you right-click on a server icon, a
 	user's profile, etc.
-</Tip>
+</Alert>
 
 <CH.Code client:load>
 
@@ -94,10 +94,10 @@ rest
 
 Once you fill in these values, run `node deploy-commands.js` in your project directory to register your commands to a single guild. It's also possible to [register commands globally](/interactions/slash-commands.md#global-commands).
 
-<Tip>
+<Alert title="Tip" type="success">
 	You only need to run `node deploy-commands.js` once. You should only run it again if you add or edit existing
 	commands.
-</Tip>
+</Alert>
 
 ## Replying to commands
 
@@ -172,9 +172,9 @@ client.on('interactionCreate', async (interaction) => {
 
 You could also display the date the server was created, or the server's verification level. You would do those in the same manner – use `interaction.guild.createdAt` or `interaction.guild.verificationLevel`, respectively.
 
-<Tip>
+<Alert title="Tip" type="success">
 	Refer to the <DocsLink path="class/Guild" /> documentation for a list of all the available properties and methods!
-</Tip>
+</Alert>
 
 ### User info command
 
@@ -218,9 +218,9 @@ client.on('interactionCreate', async (interaction) => {
 	</DiscordMessage>
 </DiscordMessages>
 
-<Tip>
+<Alert title="Tip" type="success">
 	Refer to the <DocsLink path="class/User" /> documentation for a list of all the available properties and methods!
-</Tip>
+</Alert>
 
 And there you have it!
 

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

@@ -5,9 +5,7 @@ category: Creating your bot
 ---
 
 import { CH } from '@code-hike/mdx/components';
-import { Section } from '@discordjs/ui';
-import { Tip } from '../../components/Tip.jsx';
-import { Caution } from '../../components/Caution.jsx';
+import { Alert, Section } from '@discordjs/ui';
 import { DocsLink } from '../../components/DocsLink.jsx';
 import { ResultingCode } from '../../components/ResultingCode.jsx';
 
@@ -43,10 +41,10 @@ console.log(token);
 
 </CH.Code>
 
-<Caution>
+<Alert title="Caution" type="danger">
 	If you're using Git, you should not commit this file and should [ignore it via
 	`.gitignore`](/creating-your-bot/#git-and-gitignore).
-</Caution>
+</Alert>
 
 ### Using environment variables
 
@@ -114,10 +112,10 @@ console.log(process.env.DISCORD_TOKEN);
 
 </CH.Code>
 
-<Caution>
+<Alert title="Caution" type="danger">
 	If you're using Git, you should not commit this file and should [ignore it via
 	`.gitignore`](/creating-your-bot/#git-and-gitignore).
-</Caution>
+</Alert>
 
 <Section client:load title="Online editors (Glitch, Heroku, Replit, etc.)" defaultClosed padded background gutter>
 While we generally do not recommend using online editors as hosting solutions, but rather invest in a proper virtual private server, these services do offer ways to keep your credentials safe as well! Please see the respective service's documentation and help articles for more information on how to keep sensitive values safe:
@@ -144,12 +142,12 @@ config.json
 
 </CH.Code>
 
-<Tip>
+<Alert title="Tip" type="success">
 	Aside from keeping credentials safe, `node_modules` should be included here. Since this directory can be restored
 	based on the entries in your `package.json` and `package-lock.json` files by running `npm install`, it does not need
 	to be included in Git. You can specify quite intricate patterns in `.gitignore` files, check out the [Git
 	documentation on `.gitignore`](https://git-scm.com/docs/gitignore) for more information!
-</Tip>
+</Alert>
 
 ## Creating the main file
 
@@ -184,12 +182,12 @@ Intents also define which events Discord should send to your bot, and you may wi
 
 Open your terminal and run `node index.js` to start the process. If you see "Ready!" after a few seconds, you're good to go!
 
-<Tip>
+<Alert title="Tip" type="success">
 	You can open your `package.json` file and edit the `"main": "index.js"` field to point to your main file. You can then
 	run `node .` in your terminal to start the process! After closing the process with `Ctrl + C`, you can press the up
 	arrow on your keyboard to bring up the latest commands you've run. Pressing up and then enter after closing the
 	process is a quick way to start it up again.
-</Tip>
+</Alert>
 
 ## Resulting code
 

packages/guide/src/pages/requesting-more-content.mdx

@@ -4,7 +4,7 @@ title: Requesting more content
 category: Home
 ---
 
-import { Tip } from '../components/Tip.jsx';
+import { Alert } from '@discordjs/ui';
 
 # Requesting more content
 
@@ -14,7 +14,7 @@ Requests may be as simple as "add an example to the [frequently asked questions]
 
 To make a request, simply head over to [the repo's issue tracker](https://github.com/discordjs/guide/issues) and [create a new issue](https://github.com/discordjs/guide/issues/new)! Title it appropriately, and let us know exactly what you mean inside the issue description. Make sure that you've looked around the site before making a request; what you want to request might already exist!
 
-<Tip>
+<Alert title="Tip" type="success">
 	Remember that you can always [fork the repo](https://github.com/discordjs/guide) and [make a pull
 	request](https://github.com/discordjs/guide/pulls) if you want to add anything to the guide yourself!
-</Tip>
+</Alert>

packages/guide/src/pages/test.mdx

@@ -3,9 +3,7 @@ title: Test
 category: Test
 ---
 
-import { DiscordMessages } from '../components/discord/Messages.jsx';
-import { DiscordMessage } from '../components/discord/Message.jsx';
-import { DiscordMessageEmbed } from '../components/discord/MessageEmbed.jsx';
+import { DiscordMessages, DiscordMessage, DiscordMessageEmbed } from '@discordjs/ui';
 
 <DiscordMessages>
 	<DiscordMessage

packages/guide/src/pages/whats-new.mdx

@@ -4,8 +4,7 @@ title: What's new
 category: Home
 ---
 
-import { DiscordMessages } from '../components/discord/Messages.jsx';
-import { DiscordMessage } from '../components/discord/Message.jsx';
+import { DiscordMessages, DiscordMessage } from '@discordjs/ui';
 
 # What's new
 

packages/ui/package.json

@@ -19,6 +19,7 @@
 		"import": "./dist/ui.js",
 		"types": "./dist/index.d.ts"
 	},
+	"sideEffects": false,
 	"directories": {
 		"lib": "src"
 	},
@@ -51,6 +52,7 @@
 		"@favware/cliff-jumper": "^1.8.8",
 		"@ladle/react": "^2.4.3",
 		"@types/node": "^16.11.64",
+		"@types/react": "^18.0.21",
 		"@types/react-dom": "^18.0.6",
 		"@unocss/reset": "^0.45.26",
 		"@vitejs/plugin-react": "^2.1.0",

packages/ui/src/lib/components/Alert.tsx

@@ -0,0 +1,57 @@
+import type { PropsWithChildren } from 'react';
+import { VscFlame, VscInfo, VscWarning } from 'react-icons/vsc';
+
+export interface IAlert {
+	title?: string | undefined;
+	type: 'danger' | 'info' | 'success';
+}
+
+function resolveType(type: IAlert['type']) {
+	switch (type) {
+		case 'danger': {
+			return {
+				text: 'text-red-500',
+				border: 'border-red-500',
+				icon: <VscWarning size={20} />,
+			};
+		}
+
+		case 'info': {
+			return {
+				text: 'text-blue-500',
+				border: 'border-blue-500',
+				icon: <VscInfo size={20} />,
+			};
+		}
+
+		case 'success': {
+			return {
+				text: 'text-green-500',
+				border: 'border-green-500',
+				icon: <VscFlame size={20} />,
+			};
+		}
+	}
+}
+
+export function Alert({ title, type, children }: PropsWithChildren<IAlert>) {
+	const { text, border, icon } = resolveType(type);
+
+	return (
+		<div className="my-4">
+			<div className="relative flex">
+				<div className="p-4">{children}</div>
+				<div className="absolute flex h-full w-full">
+					<div className={`rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 ${border}`} />
+					<div className={`relative border-b-2 ${border}`}>
+						<div className={`-translate-y-50% flex place-items-center gap-2 px-2 ${text}`}>
+							{icon}
+							<span className={`font-semibold ${text}`}>{title}</span>
+						</div>
+					</div>
+					<div className={`rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 ${border}`} />
+				</div>
+			</div>
+		</div>
+	);
+}

packages/ui/src/lib/index.ts

@@ -1 +1,14 @@
+export * from './components/Alert.jsx';
 export * from './components/Section.jsx';
+
+export * from './components/discord/Message.jsx';
+export * from './components/discord/MessageAuthor.jsx';
+export * from './components/discord/MessageAuthorReply.jsx';
+export * from './components/discord/MessageBaseReply.jsx';
+export * from './components/discord/MessageEmbed.jsx';
+export * from './components/discord/MessageEmbedAuthor.jsx';
+export * from './components/discord/MessageEmbedFooter.jsx';
+export * from './components/discord/MessageEmbedTitle.jsx';
+export * from './components/discord/MessageInteraction.jsx';
+export * from './components/discord/MessageReply.jsx';
+export * from './components/discord/Messages.jsx';

packages/website/package.json

@@ -72,6 +72,7 @@
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/node": "^16.11.64",
+		"@types/react": "^18.0.21",
 		"@types/react-dom": "^18.0.6",
 		"@types/react-syntax-highlighter": "^15.5.5",
 		"@unocss/cli": "^0.45.26",

packages/website/src/components/tsdoc/BlockComment.tsx

@@ -1,6 +1,6 @@
+import { Alert } from '@discordjs/ui';
 import { StandardTags } from '@microsoft/tsdoc';
 import type { PropsWithChildren } from 'react';
-import { VscWarning } from 'react-icons/vsc';
 
 export function Block({ children, title }: PropsWithChildren<{ title: string }>) {
 	return (
@@ -18,26 +18,6 @@ export function ExampleBlock({
 	return <Block title={`Example ${exampleIndex ? exampleIndex : ''}`}>{children}</Block>;
 }
 
-export function DeprecatedBlock({ children }: PropsWithChildren): JSX.Element {
-	return (
-		<div className="my-4">
-			<div className="relative flex">
-				<div className="p-4">{children}</div>
-				<div className="absolute flex h-full w-full">
-					<div className="rounded-tl-1.5 rounded-bl-1.5 w-4 shrink-0 border-t-2 border-b-2 border-l-2 border-red-500" />
-					<div className="relative border-b-2 border-red-500">
-						<div className="-translate-y-50% flex place-items-center gap-2 px-2 text-red-500">
-							<VscWarning size={20} />
-							<span className="font-semibold text-red-500">Deprecated</span>
-						</div>
-					</div>
-					<div className="rounded-tr-1.5 rounded-br-1.5 flex-1 border-t-2 border-b-2 border-r-2 border-red-500" />
-				</div>
-			</div>
-		</div>
-	);
-}
-
 export function DefaultValueBlock({ children }: PropsWithChildren): JSX.Element {
 	return <Block title="Default value">{children}</Block>;
 }
@@ -58,7 +38,11 @@ export function BlockComment({
 		case StandardTags.example.tagNameWithUpperCase:
 			return <ExampleBlock exampleIndex={index}>{children}</ExampleBlock>;
 		case StandardTags.deprecated.tagNameWithUpperCase:
-			return <DeprecatedBlock>{children}</DeprecatedBlock>;
+			return (
+				<Alert title="Deprecated" type="danger">
+					{children}
+				</Alert>
+			);
 		case StandardTags.remarks.tagNameWithUpperCase:
 			return <RemarksBlock>{children}</RemarksBlock>;
 		case StandardTags.defaultValue.tagNameWithUpperCase:

yarn.lock

@@ -2105,6 +2105,7 @@ __metadata:
     "@testing-library/react": ^13.4.0
     "@testing-library/user-event": ^14.4.3
     "@types/node": ^16.11.64
+    "@types/react": ^17.0.39
     "@types/react-dom": ^17.0.17
     "@types/react-syntax-highlighter": ^15.5.5
     "@unocss/cli": ^0.45.26
@@ -2246,6 +2247,7 @@ __metadata:
     "@favware/cliff-jumper": ^1.8.8
     "@ladle/react": ^2.4.3
     "@types/node": ^16.11.64
+    "@types/react": ^18.0.21
     "@types/react-dom": ^18.0.6
     "@unocss/reset": ^0.45.26
     "@vitejs/plugin-react": ^2.1.0
@@ -2328,6 +2330,7 @@ __metadata:
     "@testing-library/react": ^13.4.0
     "@testing-library/user-event": ^14.4.3
     "@types/node": ^16.11.64
+    "@types/react": ^18.0.21
     "@types/react-dom": ^18.0.6
     "@types/react-syntax-highlighter": ^15.5.5
     "@unocss/cli": ^0.45.26
@@ -4311,7 +4314,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:>=16":
+"@types/react@npm:*, @types/react@npm:>=16, @types/react@npm:^18.0.21":
   version: 18.0.21
   resolution: "@types/react@npm:18.0.21"
   dependencies:
@@ -4322,7 +4325,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^17":
+"@types/react@npm:^17, @types/react@npm:^17.0.39":
   version: 17.0.50
   resolution: "@types/react@npm:17.0.50"
   dependencies: