ADS3-Design-System/src/components/molecules/Alert/Alert.stories.tsx

import { useState } from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Alert } from './Alert'
import { Button } from '@/components/atoms/Button'

const meta: Meta<typeof Alert> = {
  title: 'Molecules/Alert',
  component: Alert,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['info', 'warning', 'error', 'success', 'neutral'],
    },
  },
  decorators: [
    (Story) => (
      <div className="max-w-xl">
        <Story />
      </div>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    title: 'Information',
    children: 'Your submission has been received and is being reviewed.',
  },
}

// --- Variants ---

export const Info: Story = {
  args: {
    variant: 'info',
    title: 'Alert title',
    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
  },
}

export const Warning: Story = {
  args: {
    variant: 'warning',
    title: 'Alert title',
    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
  },
}

export const Error: Story = {
  args: {
    variant: 'error',
    title: 'Alert title',
    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
  },
}

export const Success: Story = {
  args: {
    variant: 'success',
    title: 'Alert title',
    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
  },
}

export const Neutral: Story = {
  args: {
    variant: 'neutral',
    title: 'Alert title',
    children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus!',
  },
}

// --- With close ---

export const Dismissible: Story = {
  render: () => {
    const [visible, setVisible] = useState(true)
    if (!visible) return <Button size="compact" onClick={() => setVisible(true)}>Show alert</Button>
    return (
      <Alert variant="info" title="New feature available" onClose={() => setVisible(false)}>
        You can now export your synthesis results as a PDF report.
      </Alert>
    )
  },
}

// --- With action ---

export const WithAction: Story = {
  render: () => (
    <Alert
      variant="warning"
      title="Incomplete submission"
      action={
        <Button size="compact">Complete now</Button>
      }
    >
      Your ethics application is missing required attachments. Please upload them before the deadline.
    </Alert>
  ),
}

// --- With close and action ---

export const WithCloseAndAction: Story = {
  render: () => (
    <Alert
      variant="error"
      title="Upload failed"
      onClose={() => {}}
      action={
        <Button size="compact" intent="danger">Retry upload</Button>
      }
    >
      The file could not be uploaded due to a network error. Please check your connection and try again.
    </Alert>
  ),
}

// --- Title only ---

export const TitleOnly: Story = {
  args: {
    variant: 'success',
    title: 'Changes saved successfully.',
  },
}

// --- Content only ---

export const ContentOnly: Story = {
  args: {
    variant: 'neutral',
    children: 'This project is in read-only mode. Contact the project owner to request edit access.',
  },
}

// --- All variants ---

export const AllVariants: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Alert variant="info" title="Alert title" onClose={() => {}}
        action={<Button size="compact">Optional action</Button>}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </Alert>
      <Alert variant="warning" title="Alert title" onClose={() => {}}
        action={<Button size="compact">Optional action</Button>}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </Alert>
      <Alert variant="error" title="Alert title" onClose={() => {}}
        action={<Button size="compact">Optional action</Button>}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </Alert>
      <Alert variant="success" title="Alert title" onClose={() => {}}
        action={<Button size="compact">Optional action</Button>}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </Alert>
      <Alert variant="neutral" title="Alert title" onClose={() => {}}
        action={<Button size="compact">Optional action</Button>}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!
      </Alert>
    </div>
  ),
}