2.0.2 • Published 4 months ago

alert-kit v2.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

Alert Kit

Alert Kit is a flexible and easy-to-use library for displaying alert messages in the browser. It provides a simple API for creating and managing alert messages, allowing you to display different types of messages with customizable styles and callbacks.

Installation

To get started, install Alert Kit via npm:

npm install alert-kit

Basic Usage

Example 2

You can quickly create an alert message by calling the show method and passing an object with the desired options:

import { AlertKit, alertKit } from "alert-kit";

// Initialize AlertKit
alertKit.show({
  headerTitle: "Alert Kit",
  type: "success",
  title: "Success",
  message: "!The operation was successful!",
  buttons: [
    {
      text: "Ok",
      onClick: () => console.log("Success clicked"),
      primary: true,
      type: "success",
    },
  ],
});

// Info alert
alertKit.show({
  headerTitle: "Alert Kit",
  type: "info",
  title: "Information",
  message: "This is a test information message with a very long text :D",
  onOpen: () => {
    console.log("The alert was opened");
  },
  onClose: () => {
    console.log("The alert was closed");
  },
});

// Warning alert
alertKit.show({
  headerTitle: "Alert Kit",
  type: "warning",
  title: "Warning",
  message: "This is a test warning message with a very long text :D",
  buttons: [
    {
      text: "Ok",
      onClick: () => console.log("Success clicked"),
      primary: true,
      type: "warning",
    },
  ],
});

// Error alert
alertKit.show({
  headerTitle: "Alert Kit",
  type: "error",
  title: "Error",
  message: "The operation failed with an error message :(",
  buttons: [
    {
      text: "Ok",
      onClick: () => console.log("Success clicked"),
      primary: true,
      type: "error",
    },
  ],
});

// Question alert
alertKit.show({
  headerTitle: "Alert Kit",
  type: "question",
  title: "Question",
  message: "Are you sure you want to proceed?",
  isMoveable: false,
  showCloseButton: false,
  closeOnEsc: false,
  closeOnClickOutside: false,
  buttons: [
    {
      text: "Yes",
      onClick: () => {
        alertKit.show({
          message: "Ok",
        });
      },
      primary: true,
      type: "question",
    },
    {
      text: "No",
      onClick: () => console.log("No clicked"),
      type: "error",
    },
  ],
});

// Loading alert
let interval = null;
let counter = 3;

// Función para limpiar el intervalo
const cleanup = () => {
  if (interval) {
    clearInterval(interval);
    interval = null;
  }
  counter = 3;
};

alertKit.show({
  type: "loading",
  message: `Please wait ${counter} seconds...`,
  showCloseButton: false,
  closeOnEsc: false,
  closeOnClickOutside: false,
  autoClose: true,
  autoCloseTime: 3000,
  buttons: [],
  onOpen: () => {
    // Asegurarse de que no haya intervalos previos
    cleanup();

    // Iniciar el nuevo intervalo
    interval = setInterval(() => {
      counter--;
      if (counter >= 0) {
        alertKit.message = `Please wait ${counter} seconds...`;
      }
    }, 1000);
  },
  onClose: () => {
    cleanup();
    alertKit.show({
      message: "First alert",
      type: "success",
    });
  },
});

document.getElementById("btnApiLoading").addEventListener("click", () => {
  alertKit.show({
    headerTitle: "Alert Kit",
    type: AlertType.question,
    title: "Api",
    message: "Are you sure you want to delete the API?",
    isMoveable: false,
    showCloseButton: false,
    closeOnEsc: false,
    closeOnClickOutside: false,
    buttons: [
      {
        text: "Aceptar",
        type: "success",
        primary: true,
        onClick: async () => {
          alertKit.show({
            type: AlertType.loading,
            bodyMessageInnerHTML: `
                <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                  <!-- Fondo -->
                  <rect width="100%" height="100%" fill="none"/>

                  <!-- Cara -->
                  <circle cx="100" cy="100" r="80" stroke="black" stroke-width="4" fill="yellow"/>

                  <!-- Ojo izquierdo -->
                  <circle cx="70" cy="70" r="10" fill="black"/>

                  <!-- Ojo derecho -->
                  <circle cx="130" cy="70" r="10" fill="black"/>

                  <!-- Boca -->
                  <path d="M 70 130 Q 100 160 130 130" stroke="black" stroke-width="4" fill="transparent"/>
                </svg>
                `,
            showCloseButton: false,
            closeOnEsc: false,
            closeOnClickOutside: false,
            autoClose: false,
          });

          await new Promise((resolve) => setTimeout(resolve, 2000));

          alertKit.show({
            headerTitle: "Alert Kit",
            type: AlertType.success,
            title: "Api",
            message: "Deleted successfully",
            buttons: [
              {
                text: "Oky",
                primary: true,
              },
            ],
          });
        },
      },
      {
        text: "Cancelar",
        type: "error",
      },
    ],
  });

  // Test using class Bootstrap

  // Load Bootstrap CSS dinamically
  // Cargar Bootstrap CSS dinámicamente
  const bootstrapCSS = document.createElement("link");
  bootstrapCSS.rel = "stylesheet";
  bootstrapCSS.href =
    "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css";
  bootstrapCSS.setAttribute("data-bootstrap", "");
  document.head.appendChild(bootstrapCSS);

  // Carga el estilo de Bootstrap
  alertKit.show({
    headerTitle: "Bootstrap",
    type: "info",
    title: "Information",
    message: "The alert was opened using Bootstrap CSS",
    buttons: [
      {
        text: "Aceptar",
        onClick: () => console.log("Botón aceptado"),
        primary: true,
        class: ["btn", "btn-danger"],
      },
    ],
    onClose: () => {
      // Remover Bootstrap CSS cuando se cierra el alert
      const bootstrapLink = document.querySelector("[data-bootstrap]");
      if (bootstrapLink) {
        bootstrapLink.remove();
      }
    },
  });
});

// Load Tailwind CSS dinamically
// Cargar Tailwind CSS dinámicamente
const tailwindCSS = document.createElement("link");
tailwindCSS.rel = "stylesheet";
tailwindCSS.href =
  "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css";
tailwindCSS.setAttribute("data-tailwind", "");
document.head.appendChild(tailwindCSS);

alertKit.show({
  overlayClass: ["italic", "bg-red-500", "text-green-700"],
  contentClass: ["rounded-none"],
  headerVisible: false,
  headerClass: ["bg-white"],
  headerTitle: "Tailwind",
  bodyIconStyle: "width: 50px;",
  bodyIconInnerHTML: ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>`,
  type: "info",
  title: "Information",
  message: "The alert was opened using Tailwind CSS",
  buttons: [
    {
      text: "Aceptar",
      onClick: () => console.log("Botón aceptado"),
      primary: true,
      class: [
        "bg-blue-500",
        "hover:bg-blue-700",
        "text-white",
        "font-bold",
        "py-2",
        "px-4",
        "rounded-0",
        "focus:outline-none",
        "focus:ring-2",
        "focus:ring-offset-2",
        "focus:ring-blue-500",
      ],
    },
  ],
  onClose: () => {
    // Remover Tailwind CSS cuando se cierra el alert
    const tailwindLink = document.querySelector("[data-tailwind]");
    if (tailwindLink) {
      tailwindLink.remove();
    }
  },
});

Customization Options

Customize your alerts with a variety of options by passing an object to the alertKit method:

import { AlertKit, alertKit, AlertType } from "alert-kit";

alertKit.show({
  overlayClass: ["class1", "class2"],
  overlayStyle: "background-color: red;",
  backdropBlur: true,

  contentClass: ["class1", "class2"],
  contentStyle: "background-color: red;",

  headerVisible: true,
  headerClass: ["class1", "class2"],
  headerStyle: "background-color: red;",

  headerTitleClass: ["class1", "class2"],
  headerTitleStyle: "background-color: red;",
  headerTitleInnerHTML: "<h1>Title</h1>",

  headerCloseButtonClass: ["class1", "class2"],
  headerCloseButtonStyle: "background-color: red;",
  headerCloseButtonInnerHTML: "<h1>Title</h1>",

  bodyClass: ["class1", "class2"],
  bodyStyle: "background-color: red;",
  bodyInnerHTML: "<h1>body</h1>",

  bodyIconClass: ["class1", "class2"],
  bodyIconStyle: "background-color: red;",
  bodyIconInnerHTML: "<h1>bodyIcon</h1>",

  bodyTitleClass: ["class1", "class2"],
  bodyTitleStyle: "background-color: red;",
  bodyTitleInnerHTML: "<h1>bodyTitle</h1>",

  bodyMessageClass: ["class1", "class2"],
  bodyMessageStyle: "background-color: red;",
  bodyMessageInnerHTML: "<h1>bodyMessage</h1>",

  footerClass: ["class1", "class2"],
  footerStyle: "background-color: red;",
  footerInnerHTML: "<h1>footer</h1>",

  headerTitle: "Alert Kit",
  title: "Subtitle",
  message: "Message",
  type: AlertType.info,
  showCloseButton: true,
  closeOnEsc: true,
  closeOnClickOutside: true,
  isMoveable: true,
  buttons: [
    {
      text: "Yes",
      onClick: () => {
        console.log("Yes clicked");
      },
      primary: true,
      type: "info",
    },
    {
      text: "No",
      onClick: () => {
        console.log("No clicked");
      },
      type: "error",
    },
    {
      text: "That's it",
      onClick: () => {
        console.log("That's it");
      },
      type: "warning",
    },
  ],
  autoClose: false,
  autoCloseTime: 0,
  onOpen: () => {
    console.log("Open");
  },
  onClose: () => {
    console.log("Close");
  },
});

setTimeout(() => {
  alertKit.close();
}, 2000);

Available Styles

Alert Kit offers multiple styles for your alerts:

Information

alertKit.information({
  headerTitle: "Alert Kit",
  message: "!The operation was information!",
  onClose: () => {
    console.log("The alert was closed");
  },
}, () => {
  console.log("Success clicked");
});

Success

alertKit.success({
  headerTitle: "Alert Kit",
  message: "!The operation was successful!",
  onClose: () => {
    console.log("The alert was closed");
  },
}, () => {
  console.log("Success clicked");
});

Warning

alertKit.warning({
  headerTitle: "Alert Kit",
  message: "!The operation was warning!",
  onClose: () => {
    console.log("The alert was closed");
  },
}, () => {
  console.log("Success clicked");
});

Error

alertKit.error({
  headerTitle: "Alert Kit",
  message: "!The operation was error!",
  onClose: () => {
    console.log("The alert was closed");
  },
}, () => {
  console.log("Success clicked");
});

Question

alertKit.question({
  headerTitle: "Alert Kit",
  message: "Are you sure you want to proceed?",
  onClose: () => {
    console.log("The alert was closed");
  },
}, (value) => {
  console.log("Value: ", value);
});

Loading

alertKit.loading({
  message: "Loading...",
  onOpen: () => {
    console.log("Loading started");
  },
  onClose: () => {
    console.log("Finished loading");
  },
});

Bootstrap

Tailwind

Available Options

OptionTypeDefaultDescription
backdropBlurbooleantrueWhether or not to blur the background of the alert.
titlestring'Alert Title'The title of the alert
subTitlestring'Subtitle'The subTitle of the alert
messagestring'Write your message here.'The content of the alert
typestring'info'The type of the alert message. Options: 'info', 'success', 'warning', 'error', 'question', 'loading'.
showCloseButtonbooleantrueWhether or not to display a close button.
closeOnEscbooleantrueWhether or not to close the alert when the user presses the Esc key.
closeOnClickOutsidebooleantrueWhether or not to close the alert when the user clicks outside of it.
isMoveablebooleantrueWhether or not to allow the user to move the alert.
buttonsarray[{text: 'Accept' html: '<span>Accept</span>', onClick: () => { }, primary: true}]An array of buttons to display in the alert.
autoClosebooleanfalseWhether or not to automatically close the alert after a specified time.
autoCloseTimenumber3000The time in milliseconds to wait before automatically closing the alert.
onOpenfunctionundefinedCallback function that is called when the alert is opened.
onClosefunctionundefinedCallback function that is called when the alert is closed.
2.0.2

4 months ago

2.0.1

4 months ago

2.0.0

4 months ago

1.1.0

4 months ago

1.0.9

4 months ago

1.0.8

4 months ago

1.0.7

4 months ago

1.0.6

4 months ago

1.0.5

4 months ago

1.0.4

4 months ago

1.0.3

4 months ago

1.0.2

4 months ago

1.0.1

4 months ago

1.0.0

4 months ago