From 31107f5e1e5f5e23fb6d8a1d59b91c3ba5c084b9 Mon Sep 17 00:00:00 2001
From: Larocca <Larocca@RIVPRO1.net>
Date: Thu, 7 Nov 2024 12:21:40 -0500
Subject: [PATCH 1/2] Docs: Story for the Alert component #645

Docs: Add Alert Story (#645)\n\n- [x] Wrote a Story for the Alert component.\n\nCloses #645
---
 components/Alert/Alert.stories.tsx | 62 ++++++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 components/Alert/Alert.stories.tsx

diff --git a/components/Alert/Alert.stories.tsx b/components/Alert/Alert.stories.tsx
new file mode 100644
index 00000000..1c1f898e
--- /dev/null
+++ b/components/Alert/Alert.stories.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert } from './Alert';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `The Alert component is a versatile UI element designed to display important messages to users. It is built to handle various types of alerts, each with its own visual style to convey different levels of importance or types of information.`,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      options: ['default', 'error', 'warning', 'success'],
+      control: { type: 'radio' },
+      description: 'The variant of the alert.',
+    },
+    children: {
+      description: 'Content of the alert message.',
+    },
+  },
+  args: {
+    children: 'This is an alert message',
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'This is an error alert',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'This is a warning alert',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'This is a success alert',
+  },
+};
\ No newline at end of file

From 63276c5ea847fc1d85d807abcef7a225b5b0fc46 Mon Sep 17 00:00:00 2001
From: Larocca <Larocca@RIVPRO1.net>
Date: Fri, 8 Nov 2024 12:18:49 -0500
Subject: [PATCH 2/2] Docs: Story for the Alert component #645

Docs: Updated Alert Story (#645)\n\n- [x] Wrote a Story for the Alert component.\n\nCloses #645
---
 components/Alert/Alert.stories.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/components/Alert/Alert.stories.tsx b/components/Alert/Alert.stories.tsx
index 1c1f898e..521c28d0 100644
--- a/components/Alert/Alert.stories.tsx
+++ b/components/Alert/Alert.stories.tsx
@@ -11,7 +11,32 @@ const meta: Meta<typeof Alert> = {
   parameters: {
     docs: {
       description: {
-        component: `The Alert component is a versatile UI element designed to display important messages to users. It is built to handle various types of alerts, each with its own visual style to convey different levels of importance or types of information.`,
+        component: `
+The \`Alert\` component is a dynamic UI element from the Shadcn UI library, designed to display important notifications to users. It combines several subcomponents—\`AlertTitle\`, \`AlertDescription\`, and \`AlertDefault\`—into a cohesive \`AlertNotification\` component. This component is exported as \`<Alert variant={variant} message="Whatever message" />\`, making it easy to use across applications.
+
+### Variants
+
+- **Success**: Indicates successful operations, such as a successful user sign-in.
+- **Error**: Alerts users to errors, like incorrect login information.
+- **Warning**: Reserved for potential issues.
+- **Default**: Used for general information.
+
+### Usage
+
+The \`Alert\` component is primarily used to provide users with visual feedback on the status of their actions, such as confirming successful operations or notifying them of errors. It is integrated with \`react-hot-toast\` to enable popup notifications, enhancing user experience by providing immediate feedback.
+
+\`\`\`jsx
+<Alert variant="success" message="This is a success alert" />
+\`\`\`
+
+### Props
+
+- **variant**: Determines the type of alert, affecting its title and color. Options include 'success', 'error', 'warning', and 'default'.
+- **message**: The content of the alert message, rendered within the \`AlertDescription\`.
+
+### Integration with Toast
+
+The component's notification functionality is powered by \`react-hot-toast\`, a package that handles popup notifications. By wrapping \`toast.custom()\` around \`<Alert variant={} message="" />\`, the component can display alerts as pop-up notifications, providing users with immediate visual feedback.`,
       },
     },
   },