From 0340622f1a87c3c95643addbd2360d61de5ee147 Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Thu, 13 Apr 2023 20:15:59 +0200
Subject: [PATCH] fix(ui): discord components

---
 .../ui/src/lib/components/Alert.stories.tsx   |  19 ++++
 packages/ui/src/lib/components/Alert.tsx      |   2 +-
 .../ui/src/lib/components/Section.stories.tsx |   6 +-
 .../discord/DiscordMessages.stories.tsx       | 101 ++++++++++++++++++
 .../lib/components/discord/MessageAuthor.tsx  |   2 +-
 .../components/discord/MessageAuthorReply.tsx |   2 +-
 6 files changed, 128 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/lib/components/Alert.stories.tsx
 create mode 100644 packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx

diff --git a/packages/ui/src/lib/components/Alert.stories.tsx b/packages/ui/src/lib/components/Alert.stories.tsx
new file mode 100644
index 000000000..d32196fc9
--- /dev/null
+++ b/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;
diff --git a/packages/ui/src/lib/components/Alert.tsx b/packages/ui/src/lib/components/Alert.tsx
index 1a4b34a84..e0822b40f 100644
--- a/packages/ui/src/lib/components/Alert.tsx
+++ b/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}`} />
diff --git a/packages/ui/src/lib/components/Section.stories.tsx b/packages/ui/src/lib/components/Section.stories.tsx
index b3b190345..af472d3f9 100644
--- a/packages/ui/src/lib/components/Section.stories.tsx
+++ b/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;
diff --git a/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx b/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
new file mode 100644
index 000000000..a4d3c9113
--- /dev/null
+++ b/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;
diff --git a/packages/ui/src/lib/components/discord/MessageAuthor.tsx b/packages/ui/src/lib/components/discord/MessageAuthor.tsx
index 366d7631a..482340f21 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthor.tsx
+++ b/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}
diff --git a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx b/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
index 10c9f449b..1b8de583d 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
+++ b/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}