Add custom alert modal

[hikasap]

Motivation

This feature introduces a reusable and customizable alert modal component, enhancing user interactions with consistent and visually appealing confirmation dialogs. It allows developers to easily invoke modals for confirmation and alert purposes without duplicating code, improving maintainability and user experience.

Key Changes

1. Added React Modal Library

   • Installed react-modal version 3.16.1 for modal functionality.

2. Alert Modal Component

   • Created AlertModal.js to display a customizable modal dialog.
   • Supports customizable messages, confirm/cancel buttons, and danger styling.

3. Alert Modal Context

   • Added AlertModalContext.js to manage modal states using React Context API.
   • Provides showModal and hideModal functions for ease of use.

4. Integrated Context in Application

   • Wrapped the application in AlertModalProvider in App.js for global modal access.

5. Styling

   • Created AlertModal.css for consistent modal styling across the application.

6. Updated Dependencies

   • Modified package.json and package-lock.json to include the new library.

How to Use

• Import useAlertModal from AlertModalContext.js in any component.
• Call showModal with the required parameters to display the modal.
• Customize button texts, actions, and styles as needed.

Example Usage

import { useAlertModal } from "./components/alert/AlertModalContext";

const ExampleComponent = () => {
  const { showModal } = useAlertModal();

  const handleDelete = () => {
    showModal(
      "Are you sure you want to delete this item?",
      () => console.log("Confirmed!"),
      () => console.log("Cancelled!"),
      true // isDanger
    );
  };

  return <button onClick={handleDelete}>Delete Item</button>;
};

[rukiyeaslan]

Good job! lgtm