community-rule/stories/modals/Alert.stories.js

import React, { useState } from "react";
import Alert from "../../app/components/modals/Alert";
import {
  ALERT_SIZE_OPTIONS,
  ALERT_STATUS_OPTIONS,
  ALERT_TYPE_OPTIONS,
} from "../../lib/propNormalization";

export default {
  title: "Components/Modals/Alert",
  component: Alert,
  argTypes: {
    status: {
      control: { type: "select" },
      options: [...ALERT_STATUS_OPTIONS],
    },
    type: {
      control: { type: "select" },
      options: [...ALERT_TYPE_OPTIONS],
    },
    size: {
      control: { type: "select" },
      options: [...ALERT_SIZE_OPTIONS],
    },
    hasTrailingIcon: { control: { type: "boolean" } },
    title: {
      control: { type: "text" },
    },
    description: {
      control: { type: "text" },
    },
  },
};

const Template = (args) => {
  const [isVisible, setIsVisible] = useState(true);
  if (!isVisible) return <div>Alert closed</div>;
  return (
    <div className="p-8 max-w-[600px]">
      <Alert {...args} onClose={() => setIsVisible(false)} />
    </div>
  );
};

export const ToastDefault = {
  args: {
    title: "Short alert toast message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "default",
    type: "toast",
  },
  render: Template,
};
export const ToastPositive = {
  args: {
    title: "Short alert toast message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "positive",
    type: "toast",
  },
  render: Template,
};
export const ToastWarning = {
  args: {
    title: "Short alert toast message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "warning",
    type: "toast",
  },
  render: Template,
};
export const ToastDanger = {
  args: {
    title: "Short alert toast message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "danger",
    type: "toast",
  },
  render: Template,
};
export const Banner = {
  args: {
    title: "Short alert banner message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "default",
    type: "banner",
  },
  render: Template,
};
export const BannerPositive = {
  args: {
    title: "Short alert banner message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "positive",
    type: "banner",
  },
  render: Template,
};
export const BannerWarning = {
  args: {
    title: "Short alert banner message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "warning",
    type: "banner",
  },
  render: Template,
};
export const BannerDanger = {
  args: {
    title: "Short alert banner message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "danger",
    type: "banner",
  },
  render: Template,
};
export const TitleOnly = {
  args: {
    title: "Short alert banner message goes here",
    status: "default",
    type: "toast",
  },
  render: Template,
};
export const ToastSmall = {
  args: {
    title: "Short alert toast message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "default",
    type: "toast",
    size: "s",
  },
  render: Template,
};
export const BannerSmall = {
  args: {
    title: "Short alert banner message goes here",
    description:
      "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
    status: "positive",
    type: "banner",
    size: "s",
  },
  render: Template,
};
const NoDismissTemplate = (args) => (
  <div className="p-8 max-w-[600px]">
    <Alert {...args} />
  </div>
);
export const BannerNoDismiss = {
  args: {
    title: "Non-dismissible banner (no onClose)",
    description:
      "Used when the message clears via navigation or parent state only.",
    status: "danger",
    type: "banner",
    size: "s",
  },
  render: NoDismissTemplate,
};
export const AllStatuses = () => {
  const [visible, setVisible] = useState({
    default: true,
    positive: true,
    warning: true,
    danger: true,
  });

  return (
    <div className="p-8 space-y-4 max-w-[600px]">
      {visible.default && (
        <Alert
          title="Default alert"
          description="This is a default alert message"
          status="default"
          type="toast"
          onClose={() => setVisible({ ...visible, default: false })}
        />
      )}
      {visible.positive && (
        <Alert
          title="Positive alert"
          description="This is a positive alert message"
          status="positive"
          type="toast"
          onClose={() => setVisible({ ...visible, positive: false })}
        />
      )}
      {visible.warning && (
        <Alert
          title="Warning alert"
          description="This is a warning alert message"
          status="warning"
          type="toast"
          onClose={() => setVisible({ ...visible, warning: false })}
        />
      )}
      {visible.danger && (
        <Alert
          title="Danger alert"
          description="This is a danger alert message"
          status="danger"
          type="toast"
          onClose={() => setVisible({ ...visible, danger: false })}
        />
      )}
    </div>
  );
};