fix(ui): discord components

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './Alert.jsx';
+
+export default {
+	title: 'Alert',
+	component: Alert,
+	tags: ['autodocs'],
+} satisfies Meta<typeof Alert>;
+
+type Story = StoryObj<typeof Alert>;
+
+export const Default = {
+	render: ({ children, ...args }) => <Alert {...args}>{children}</Alert>,
+	args: {
+		type: 'info',
+		title: 'Test',
+		children: 'Test Content',
+	},
+} satisfies Story;

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

@@ -56,7 +56,7 @@ export function Alert({ title, type, children }: PropsWithChildren<IAlert>) {
 					<div className={`relative border-b-2 ${border}`}>
 						<div className={`-translate-y-50% pointer-events-auto flex place-items-center gap-2 px-2 ${text}`}>
 							{icon}
-							<span className={`font-semibold ${text}`}>{title}</span>
+							{title ? <span className={`font-semibold ${text}`}>{title}</span> : null}
 						</div>
 					</div>
 					<div className={`rounded-tr-1.5 rounded-br-1.5 flex-1 border-b-2 border-r-2 border-t-2 ${border}`} />

packages/ui/src/lib/components/Section.stories.tsx

@@ -10,5 +10,9 @@ export default {
 type Story = StoryObj<typeof Section>;
 
 export const Default = {
-	render: () => <Section title="Test">Test Content</Section>,
+	render: ({ children, ...args }) => <Section {...args}>{children}</Section>,
+	args: {
+		title: 'Test',
+		children: 'Test Content',
+	},
 } satisfies Story;

packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DiscordMessage } from './Message.jsx';
+import { DiscordMessageEmbed } from './MessageEmbed.jsx';
+import { DiscordMessages } from './Messages.jsx';
+
+export default {
+	title: 'DiscordMessages',
+	component: DiscordMessages,
+	tags: ['autodocs'],
+} satisfies Meta<typeof DiscordMessages>;
+
+type Story = StoryObj<typeof DiscordMessages>;
+
+export const Default = {
+	render: ({ ...args }) => (
+		<DiscordMessages {...args}>
+			<DiscordMessage
+				author={{
+					avatar: '/assets/discordjs.png',
+					bot: true,
+					time: 'Today at 21:00',
+					username: 'Guide Bot',
+				}}
+			>
+				A _`DiscordMessage`_ must be within _`DiscordMessages`_.
+			</DiscordMessage>
+			<DiscordMessage
+				author={{
+					avatar: '/assets/discordjs.png',
+					bot: true,
+					time: 'Today at 21:01',
+					username: 'Guide Bot',
+				}}
+				reply={{
+					author: {
+						avatar: '/assets/discordjs.png',
+						bot: true,
+						username: 'Guide Bot',
+					},
+					content: 'A _`DiscordMessage`_ must be within _`DiscordMessages`_.',
+				}}
+				time="21:02"
+			>
+				It's much better to see the source code of this page to replicate and learn!
+			</DiscordMessage>
+			<DiscordMessage
+				author={{
+					avatar: '/assets/discordjs.png',
+					bot: true,
+					time: 'Today at 21:02',
+					username: 'Guide Bot',
+				}}
+			>
+				This message depicts the use of embeds.
+				<>
+					<DiscordMessageEmbed
+						author={{
+							avatar: '/assets/discordjs.png',
+							username: 'Guide Bot',
+						}}
+						footer={{ content: 'Sometimes, titles just have to be.' }}
+						title={{ title: 'An amazing title' }}
+					>
+						This is a description. You can put a description here. It must be descriptive!
+					</DiscordMessageEmbed>
+					<DiscordMessageEmbed
+						author={{
+							avatar: '/assets/discordjs.png',
+							username: 'Guide Bot',
+						}}
+						footer={{ content: "When one amazing title just wasn't enough." }}
+						title={{ title: 'Another amazing title' }}
+					>
+						Multiple embeds!
+					</DiscordMessageEmbed>
+				</>
+			</DiscordMessage>
+			<DiscordMessage
+				author={{
+					avatar: '/assets/discordjs.png',
+					bot: true,
+					time: 'Today at 21:03',
+					username: 'Guide Bot',
+				}}
+				interaction={{
+					author: {
+						avatar: '/assets/discordjs.png',
+						bot: true,
+						username: 'Guide Bot',
+					},
+					command: '/interaction',
+				}}
+			>
+				Interactions are supported! I definitely used a command.
+			</DiscordMessage>
+		</DiscordMessages>
+	),
+	args: {
+		rounded: false,
+	},
+} satisfies Story;

packages/ui/src/lib/components/discord/MessageAuthor.tsx

@@ -17,7 +17,7 @@ export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMe
 				<span className="mr-1" id="username">
 					<span className="cursor-pointer text-base font-medium text-white hover:underline">{username}</span>
 					{bot ? (
-						<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
+						<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
 							BOT
 						</span>
 					) : null}

packages/ui/src/lib/components/discord/MessageAuthorReply.tsx

@@ -9,7 +9,7 @@ export function DiscordMessageAuthorReply({ avatar, bot, username }: IDiscordMes
 		<>
 			<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
 			{bot ? (
-				<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs" id="bot">
+				<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
 					BOT
 				</div>
 			) : null}