custome-modal 1.0.6

package/README.md

@@ -0,0 +1,98 @@
+# Custom Modal
+
+Lightweight modal component for React. Focused on rendering any React children, with simple API and optional imperative control.
+
+## Install
+
+```bash
+npm install @firstzxd/custome-modal
+```
+
+Or with yarn/pnpm:
+```bash
+yarn add @firstzxd/custome-modal
+pnpm add @firstzxd/custome-modal
+```
+
+## QuickStart
+
+```tsx
+"use client";
+
+import { useModal } from "@firstzxd/custome-modal/react";
+
+export default function Example() {
+  const { openModal, closeModal, Modal } = useModal();
+
+  return (
+    <div>
+      <button onClick={openModal}>Open modal</button>
+
+      <Modal width="lg">
+        <h2>Confirm action</h2>
+        <p>Custom content here</p>
+        <div className="mt-6 flex gap-2 justify-end">
+          <button onClick={closeModal}>Cancel</button>
+          <button onClick={closeModal}>Confirm</button>
+        </div>
+      </Modal>
+    </div>
+  );
+}
+```
+
+### Multiple Modals
+
+```tsx
+"use client";
+
+import { useModal } from "@firstzxd/custome-modal/react";
+
+export default function Example() {
+  const confirmModal = useModal();
+  const detailModal = useModal();
+
+  return (
+    <div className="space-y-3">
+      <button onClick={confirmModal.openModal}>Open confirm</button>
+      <button onClick={detailModal.openModal}>Open detail</button>
+
+      <confirmModal.Modal width="md">
+        <h2>Confirm delete</h2>
+        <p>Are you sure?</p>
+        <div className="mt-4 flex gap-2 justify-end">
+          <button onClick={confirmModal.closeModal}>Cancel</button>
+          <button onClick={confirmModal.closeModal}>Delete</button>
+        </div>
+      </confirmModal.Modal>
+
+      <detailModal.Modal width="lg">
+        <h2>Order detail</h2>
+        <p>Any custom content here</p>
+        <div className="mt-4 flex justify-end">
+          <button onClick={detailModal.closeModal}>Close</button>
+        </div>
+      </detailModal.Modal>
+    </div>
+  );
+}
+```
+
+## Props
+
+- `children` (ReactNode) - custom content. Default: `undefined`.
+- `dismissOnBackdrop` (boolean) - click backdrop to close. Default: `true`.
+- `align` (`left` | `center` | `right`) - horizontal alignment inside viewport. Default: `center`.
+- `justify` (`top` | `center` | `bottom`) - vertical alignment inside viewport. Default: `center`.
+- `width` (`sm` | `md` | `lg` | `xl` | `2xl` | `3xl` | `4xl` | `5xl` | number | string) - modal width. Default: `lg`.
+
+## Methods (from useModal)
+
+- `openModal()` - open the modal.
+- `closeModal()` - close the modal.
+- `setOpen(value: boolean)` - set open state directly.
+
+## Notes
+
+- Works with any React app (Next.js, Vite, CRA, etc.)
+- For Next.js, use within `"use client"` components only.

package/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "custome-modal",
+    "version": "1.0.6",
+    "description": "Custom modal component for react",
+    "type": "module",
+    "main": "./src/index.js",
+    "types": "./src/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./src/index.d.ts",
+            "default": "./src/index.js"
+        },
+        "./react": {
+            "types": "./src/react-modal.d.ts",
+            "default": "./src/react-modal.js"
+        }
+    },
+    "publishConfig": {
+        "@firstzxd:registry": "https://npm.pkg.github.com"
+    },
+    "files": [
+        "src"
+    ],
+    "keywords": [
+        "modal",
+        "nextjs",
+        "react",
+        "dialog"
+    ]
+}

package/src/custom-modal.js

@@ -0,0 +1,244 @@
+const template = document.createElement("template");
+
+template.innerHTML = `
+  <style>
+    :host {
+      --cm-overlay-bg: rgba(0, 0, 0, 0.55);
+      --cm-bg: #ffffff;
+      --cm-text: #1a1a1a;
+      --cm-radius: 16px;
+      --cm-width: 720px;
+      --cm-max-width: 92vw;
+      --cm-max-height: 85vh;
+      --cm-padding: 12px;
+      --cm-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
+      --cm-z-index: 1000;
+      --cm-anim-duration: 180ms;
+      --cm-align-items: center;
+      --cm-justify-content: center;
+
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: var(--cm-z-index);
+      font: inherit;
+      color: var(--cm-text);
+    }
+
+    :host([open]) {
+      display: block;
+    }
+
+    .overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: var(--cm-align-items);
+      justify-content: var(--cm-justify-content);
+      padding: var(--cm-padding);
+      background: var(--cm-overlay-bg);
+      opacity: 0;
+      transition: opacity var(--cm-anim-duration) ease;
+    }
+
+    :host([open]) .overlay {
+      opacity: 1;
+    }
+
+    .dialog {
+      position: relative;
+      width: var(--cm-width);
+      max-width: var(--cm-max-width);
+      max-height: var(--cm-max-height);
+      overflow: auto;
+      background: var(--cm-bg);
+      border-radius: var(--cm-radius);
+      box-shadow: var(--cm-shadow);
+      transform: translateY(10px) scale(0.98);
+      opacity: 0;
+      transition: transform var(--cm-anim-duration) ease, opacity var(--cm-anim-duration) ease;
+      outline: none;
+    }
+
+    :host([open]) .dialog {
+      transform: translateY(0) scale(1);
+      opacity: 1;
+    }
+  </style>
+
+  <div class="overlay" part="overlay">
+    <div class="dialog" part="dialog" role="dialog" aria-modal="true" tabindex="-1">
+      <slot></slot>
+    </div>
+  </div>
+`;
+
+class CustomModal extends HTMLElement {
+  static get observedAttributes() {
+    return ["open", "width", "align", "justify", "dismiss-on-backdrop"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+
+    this._overlayEl = this.shadowRoot.querySelector(".overlay");
+    this._dialogEl = this.shadowRoot.querySelector(".dialog");
+
+    this._handleOverlayClick = this._handleOverlayClick.bind(this);
+  }
+
+  connectedCallback() {
+    this._upgradeProperty("open");
+    this._upgradeProperty("width");
+    this._upgradeProperty("align");
+    this._upgradeProperty("justify");
+    this._upgradeProperty("dismissOnBackdrop");
+
+    this._overlayEl.addEventListener("click", this._handleOverlayClick);
+    this._syncLayout();
+  }
+
+  disconnectedCallback() {
+    this._overlayEl.removeEventListener("click", this._handleOverlayClick);
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === "open") {
+      if (this.open) {
+        this._onOpen();
+      } else {
+        this._onClose();
+      }
+      return;
+    }
+
+    if (name === "width" || name === "align" || name === "justify") {
+      this._syncLayout();
+    }
+  }
+
+  get open() {
+    return this.hasAttribute("open");
+  }
+
+  set open(value) {
+    if (value) {
+      this.setAttribute("open", "");
+    } else {
+      this.removeAttribute("open");
+    }
+  }
+
+  openModal() {
+    this.open = true;
+  }
+
+  closeModal() {
+    this.open = false;
+  }
+
+  get dismissOnBackdrop() {
+    return !this._isFalseAttr("dismiss-on-backdrop");
+  }
+
+  set dismissOnBackdrop(value) {
+    if (value === false) {
+      this.setAttribute("dismiss-on-backdrop", "false");
+    } else {
+      this.removeAttribute("dismiss-on-backdrop");
+    }
+  }
+
+  _upgradeProperty(prop) {
+    if (Object.prototype.hasOwnProperty.call(this, prop)) {
+      const value = this[prop];
+      delete this[prop];
+      this[prop] = value;
+    }
+  }
+
+  _isFalseAttr(name) {
+    const attr = this.getAttribute(name);
+    return attr !== null && attr.toLowerCase() === "false";
+  }
+
+  _handleOverlayClick(event) {
+    if (event.target !== this._overlayEl) {
+      return;
+    }
+    if (this.dismissOnBackdrop) {
+      this.closeModal();
+    }
+  }
+
+  _onOpen() {
+    this._lastActive = document.activeElement;
+    this.dispatchEvent(new CustomEvent("modal-opened", { bubbles: true }));
+
+    window.requestAnimationFrame(() => {
+      this._dialogEl.focus();
+    });
+  }
+
+  _onClose() {
+    this.dispatchEvent(new CustomEvent("modal-closed", { bubbles: true }));
+
+    if (this._lastActive && typeof this._lastActive.focus === "function") {
+      this._lastActive.focus();
+    }
+  }
+
+  _syncLayout() {
+    const align = (this.getAttribute("align") || "center").toLowerCase();
+    const justify = (this.getAttribute("justify") || "center").toLowerCase();
+    const width = (this.getAttribute("width") || "lg").toLowerCase();
+
+    const alignMap = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end"
+    };
+
+    const justifyMap = {
+      top: "flex-start",
+      center: "center",
+      bottom: "flex-end"
+    };
+
+    const widthMap = {
+      sm: "300px",
+      md: "500px",
+      lg: "720px",
+      xl: "960px",
+      "2xl": "1140px",
+      "3xl": "1280px",
+      "4xl": "1440px",
+      "5xl": "1600px"
+    };
+
+    const widthValue = widthMap[width] || width;
+    this.style.setProperty("--cm-align-items", alignMap[align] || "center");
+    this.style.setProperty("--cm-justify-content", justifyMap[justify] || "center");
+    this.style.setProperty("--cm-width", this._formatWidth(widthValue));
+  }
+
+  _formatWidth(value) {
+    if (!value) {
+      return "720px";
+    }
+    if (/^\d+$/.test(value)) {
+      return `${value}px`;
+    }
+    return value;
+  }
+}
+
+customElements.define("custom-modal", CustomModal);
+
+export { CustomModal };

package/src/index.d.ts

@@ -0,0 +1,7 @@
+export class CustomModal extends HTMLElement {
+  open: boolean;
+  showClose: boolean;
+  closeOnBackdrop: boolean;
+  openModal(): void;
+  closeModal(): void;
+}

package/src/index.js

@@ -0,0 +1 @@
+export { CustomModal } from "./custom-modal.js";

package/src/react-modal.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+type Align = "left" | "center" | "right";
+
+type Justify = "top" | "center" | "bottom";
+
+type Width = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | number | string;
+
+export type ModalProps = {
+  children?: ReactNode;
+  dismissOnBackdrop?: boolean;
+  align?: Align;
+  justify?: Justify;
+  width?: Width;
+};
+
+export function Modal(props: ModalProps): JSX.Element | null;
+
+export function useModal(options?: Partial<ModalProps>): {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  openModal: () => void;
+  closeModal: () => void;
+  Modal: (props: ModalProps) => JSX.Element | null;
+};

package/src/react-modal.js

@@ -0,0 +1,216 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+const ALIGN_MAP = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end"
+};
+
+const JUSTIFY_MAP = {
+    top: "flex-start",
+    center: "center",
+    bottom: "flex-end"
+};
+
+const WIDTH_MAP = {
+    sm: "300px",
+    md: "500px",
+    lg: "720px",
+    xl: "960px",
+    "2xl": "1140px",
+    "3xl": "1280px",
+    "4xl": "1440px",
+    "5xl": "1600px"
+};
+
+let scrollLockCount = 0;
+
+function enableScrollLock() {
+    if (scrollLockCount === 0) {
+        const prevOverflow = document.body.style.overflow;
+        document.body.dataset.scrollLockPrev = prevOverflow || "auto";
+        document.body.style.overflow = "hidden";
+    }
+    scrollLockCount += 1;
+}
+
+function disableScrollLock() {
+    scrollLockCount = Math.max(0, scrollLockCount - 1);
+    if (scrollLockCount === 0) {
+        const prevOverflow = document.body.dataset.scrollLockPrev || "auto";
+        document.body.style.overflow = prevOverflow;
+        delete document.body.dataset.scrollLockPrev;
+    }
+}
+
+function Portal({ children, selector = "body" }) {
+    const container = useMemo(() => document.createElement("div"), []);
+
+    useEffect(() => {
+        let host = document.body;
+        if (typeof selector === "string" && selector.length > 0) {
+            try {
+                host = document.querySelector(selector) ?? document.body;
+            } catch {
+                host = document.body;
+            }
+        }
+
+        host.appendChild(container);
+
+        return () => {
+            if (host.contains(container)) {
+                host.removeChild(container);
+            }
+        };
+    }, [selector, container]);
+
+    return createPortal(children, container);
+}
+
+export function Modal({
+    children,
+    dismissOnBackdrop = true,
+    align = "center",
+    justify = "center",
+    width = "lg",
+    _open = false,
+    _onClose,
+    _lockScroll = true,
+    _closeOnEsc = true
+} = {}) {
+    const dialogRef = useRef(null);
+
+    useEffect(() => {
+        if (!_open || !_lockScroll) {
+            return undefined;
+        }
+        enableScrollLock();
+        return () => disableScrollLock();
+    }, [_open, _lockScroll]);
+
+    useEffect(() => {
+        if (!_open || !_closeOnEsc) {
+            return undefined;
+        }
+
+        function onKey(event) {
+            if (event.key === "Escape") {
+                _onClose?.();
+            }
+        }
+
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [_open, _closeOnEsc, _onClose]);
+
+
+    if (!_open) {
+        return null;
+    }
+
+    const alignItems = ALIGN_MAP[align] || "center";
+    const justifyContent = JUSTIFY_MAP[justify] || "center";
+    const widthValue = typeof width === "number" ? `${width}px` : (WIDTH_MAP[width] || width);
+
+    const safeContainerStyle = {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1000,
+        display: "flex",
+        alignItems,
+        justifyContent,
+        padding: "12px"
+    };
+
+    const safeOverlayStyle = {
+        position: "absolute",
+        inset: 0,
+        background: "rgba(0, 0, 0, 0.5)"
+    };
+
+    const safeDialogStyle = {
+        position: "relative",
+        zIndex: 1,
+        background: "#ffffff",
+        borderRadius: "12px",
+        boxShadow: "0 20px 60px rgba(0, 0, 0, 0.2)",
+        width: widthValue || "720px",
+        maxWidth: "92vw",
+        maxHeight: "85vh",
+        overflow: "auto"
+    };
+
+    return React.createElement(
+        Portal,
+        { selector: "body" },
+        React.createElement(
+            "div",
+            {
+                className: "",
+                style: safeContainerStyle
+            },
+            React.createElement("div", {
+                className: "",
+                style: safeOverlayStyle,
+                onClick: () => dismissOnBackdrop && _onClose?.()
+            }),
+            React.createElement(
+                "div",
+                {
+                    ref: dialogRef,
+                    role: "dialog",
+                    "aria-modal": "true",
+                    className: "",
+                    style: safeDialogStyle,
+                    onClick: (event) => event.stopPropagation()
+                },
+                children
+            )
+        )
+    );
+}
+
+export function useModal(options = {}) {
+    const [open, setOpen] = useState(false);
+
+    const openModal = () => setOpen(true);
+    const closeModal = () => setOpen(false);
+
+    const stateRef = useRef({
+        open,
+        closeModal,
+        options
+    });
+
+    stateRef.current = {
+        open,
+        closeModal,
+        options
+    };
+
+    const modalSlotRef = useRef(null);
+    if (!modalSlotRef.current) {
+        modalSlotRef.current = function ModalSlot(props) {
+            const current = stateRef.current;
+            return React.createElement(Modal, {
+                _open: current.open,
+                _onClose: current.closeModal,
+                _lockScroll: true,
+                _closeOnEsc: true,
+                ...current.options,
+                ...props
+            });
+        };
+        modalSlotRef.current.displayName = "ModalSlot";
+    }
+
+    return {
+        open,
+        setOpen,
+        openModal,
+        closeModal,
+        Modal: modalSlotRef.current
+    };
+}