kz-react-modal 1.0.0

package/README.md

@@ -0,0 +1,146 @@
+# kz-react-modal
+
+A simple accessible and reusable **React modal component**.
+
+This plugin provides a lightweight modal with keyboard accessibility and easy integration into any React project.
+
+---
+
+# Installation
+
+Install the package with npm:
+
+```bash
+npm install kz-react-modal
+```
+
+or with pnpm:
+
+```bash
+pnpm add kz-react-modal
+```
+
+---
+
+# Usage
+
+Import the modal component in your React application:
+
+```javascript
+import Modal from "kz-react-modal";
+```
+
+Example usage:
+
+```jsx
+import { useState } from "react";
+import Modal from "kz-react-modal";
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>
+        Open modal
+      </button>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Employee created"
+      >
+        <p>Your Text/p>
+      </Modal>
+    </>
+  );
+}
+
+export default App;
+```
+
+---
+
+# Props
+
+| Prop | Type | Description |
+|-----|-----|-----|
+| `isOpen` | boolean | Controls whether the modal is visible |
+| `onClose` | function | Function called when the modal is closed |
+| `title` | string | Optional title displayed in the modal |
+| `children` | ReactNode | Content displayed inside the modal |
+| `className` | string | Optional class to customize the modal styles |
+
+---
+
+# Features
+
+- Simple React modal component
+- Keyboard accessible (ESC key closes the modal)
+- Overlay click closes the modal
+- Accessible with `role="dialog"` and `aria-modal`
+- Customizable with CSS
+- Lightweight and dependency-free
+
+---
+
+# Customization
+
+You can customize the modal style by using the `className` prop.
+
+Example:
+
+```jsx
+<Modal
+  isOpen={isOpen}
+  onClose={closeModal}
+  className="custom-modal"
+>
+  <p>Custom content</p>
+</Modal>
+```
+
+Example CSS:
+
+```css
+.custom-modal {
+  background: #2d2d2d;
+  color: white;
+}
+```
+
+---
+
+# Accessibility
+
+This modal component includes basic accessibility features:
+
+- ESC key closes the modal
+- `role="dialog"` for screen readers
+- `aria-modal="true"` support
+- Click outside to close the modal
+
+---
+
+# Development
+
+To run the project locally:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+The modal can be tested using the local development environment provided by Vite.
+
+---
+
+# Author
+
+Created by **KZKO** as part of the **HRnet modernization project**.
+
+---
+
+# License
+
+MIT

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "kz-react-modal",
+  "version": "1.0.0",
+  "description": "A simple accessible React modal component",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.0",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "vite": "^8.0.0"
+  },
+  "keywords": [
+    "react",
+    "modal",
+    "react-modal",
+    "hrnet",
+    "component"
+  ],
+  "author": "KZ",
+  "license": "MIT"
+}

package/src/Modal.css

@@ -0,0 +1,46 @@
+.kz-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.kz-modal {
+  position: relative;
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  animation: modalFadeIn 0.25s ease;
+}
+
+.kz-modal-close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  border: none;
+  background: transparent;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.kz-modal-close:hover {
+  opacity: 0.6;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/Modal.jsx

@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import "./Modal.css";
+
+function Modal({ isOpen, onClose, title, children, className = "" }) {
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener("keydown", handleKeyDown);
+        }
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="kz-modal-overlay" onClick={onClose}>
+            <div
+                className={`kz-modal ${className}`}
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby="kz-modal-title"
+                onClick={(event) => event.stopPropagation()}
+            >
+                <button
+                    className="kz-modal-close"
+                    onClick={onClose}
+                    aria-label="Close modal"
+                    type="button"
+                >
+                    ×
+                </button>
+
+                {title && <h2 id="kz-modal-title">{title}</h2>}
+
+                <div className="kz-modal-content">
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Modal;

package/src/index.js

@@ -0,0 +1,3 @@
+import Modal from "./Modal";
+
+export default Modal;