feat: adds alert component to storybook (#2736)

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/storybook/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
 
-import "../src/index.css";
+import "../../web/app/globals.css";
 
 const preview: Preview = {
   parameters: {

apps/storybook/src/index.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/members/components/BulkInviteTab.tsx

@@ -86,9 +86,9 @@ export const BulkInviteTab = ({ setOpen, onSubmit, canDoRoleManagement }: BulkIn
       </div>
       <div>
         {!canDoRoleManagement && (
-          <Alert variant="destructive" className="mt-1.5 flex items-start bg-slate-50">
+          <Alert variant="error" className="mt-1.5 flex items-start bg-slate-50">
             <AlertDescription className="ml-2">
-              <p className="text-sm text-slate-700 ">
+              <p className="text-sm">
                 <strong>Warning: </strong> Please note that on the Free Plan, all organization members are
                 automatically assigned the &quot;Admin&quot; role regardless of the role specified in the CSV
                 file.

packages/tailwind-config/tailwind.config.js

@@ -35,25 +35,22 @@ module.exports = {
           dark: "#00C4B8",
         },
         focus: "var(--formbricks-focus, #1982fc)",
-        error: "var(--formbricks-error, #d13a3a)",
+        error: "rgb(from var(--formbricks-error) r g b / <alpha-value>)",
         brandnew: "var(--formbricks-brand, #038178)",
         borderColor: {
           primary: "var(--formbricks-border-primary, #e0e0e0)",
           secondary: "var(--formbricks-border-secondary, #0f172a)",
           disabled: "var(--formbricks-border-disabled, #ececec)",
-          error: "var(--formbricks-error, #d13a3a)",
         },
         labelColor: {
           primary: "var(--formbricks-label-primary, #0f172a)",
           secondary: "var(--formbricks-label-secondary, #384258)",
           disabled: "var(--formbricks-label-disabled, #bdbdbd)",
-          error: "var(--formbricks-error, #d13a3a)",
         },
         fill: {
           primary: "var(--formbricks-fill-primary, #fefefe)",
           secondary: "var(--formbricks-fill-secondary, #0f172a)",
           disabled: "var(--formbricks-fill-disabled, #e0e0e0)",
-          error: "var(--formbricks-error, #d13a3a)",
         },
       },
       keyframes: {

packages/ui/Alert/index.tsx

@@ -4,14 +4,12 @@ import * as React from "react";
 import { cn } from "@formbricks/lib/cn";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-3 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+  "relative w-full rounded-lg border p-3 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-3 [&>svg]:top-3 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-9",
   {
     variants: {
       variant: {
         default: "bg-background text-foreground",
-        destructive:
-          "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive",
-        info: "text-slate-800 bg-brand/5",
+        error: "border-error/50 dark:border-error [&>svg]:text-error text-error",
       },
     },
     defaultVariants: {

packages/ui/Alert/stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AlertCircle } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "./index";
+
+const meta = {
+  title: "ui/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["default", "error"],
+    },
+  },
+  args: {
+    variant: "default",
+  },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertTitle>This is an alert</AlertTitle>
+      <AlertDescription>This is a description</AlertDescription>
+    </Alert>
+  ),
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Error: Story = {
+  args: {
+    variant: "error",
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    variant: "error",
+  },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>This is an alert</AlertTitle>
+      <AlertDescription>This is a description</AlertDescription>
+    </Alert>
+  ),
+};