feat: add alert component

frontend/src/components/v2/Alert/Alert.stories.tsx

@@ -0,0 +1,54 @@
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Alert, AlertDescription, AlertTitle } from "./Alert";
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["v2"]
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+const ExampleComponent = () => (
+  <>
+    <AlertTitle>this is a title</AlertTitle>
+    <AlertDescription>this is a description</AlertDescription>
+  </>
+);
+
+export const Default: Story = {
+  args: {
+    children: <ExampleComponent />
+  }
+};
+
+export const Warning: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "warning"
+  }
+};
+
+export const Destructive: Story = {
+  args: {
+    children: <ExampleComponent />,
+    variant: "destructive"
+  }
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <FontAwesomeIcon icon={faTriangleExclamation} />
+        <ExampleComponent />
+      </>
+    ),
+    variant: "warning"
+  }
+};

frontend/src/components/v2/Alert/Alert.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { type VariantProps, cva } from "cva";
+
+import { cn } from "@app/helpers/classNames";
+
+const alertVariants = cva(
+  "relative w-full bg-mineshaft-800 rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "",
+        destructive: "text-red border-red",
+        warning: "text-yellow border-yellow"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </h5>
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertDescription, AlertTitle };

frontend/src/components/v2/Alert/index.tsx

@@ -0,0 +1 @@
+export { Alert, AlertDescription, AlertTitle } from "./Alert";

frontend/src/components/v2/index.tsx

@@ -1,4 +1,5 @@
 export * from "./Accordion";
+export * from "./Alert";
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";