trotl-modal 1.0.1

package/README.md

@@ -0,0 +1,60 @@
+# texteditor
+
+A simple, flexible **modal editor UI** for React
+
+---
+**DEMO:** [https://modal.linijart.eu/](https://modal.linijart.eu/)
+---
+
+## 🚀 Installation
+
+```bash
+npm install trotl-modal
+# or
+yarn add trotl-modal
+```
+
+## Versions
+```js
+
+
+1.0.1  => initial release
+```
+
+## ⚡ Quick Start
+
+```jsx
+import Editor from "trotl-modal";
+
+export default function Demo() {
+  return (
+    <div>
+
+    </div>
+  );
+}
+```
+
+## 🛠 Features
+
+
+## 📚 API Reference
+
+
+## 🌟 Context Hooks
+
+
+```js
+
+```
+
+## 🎨 Styling
+
+```css
+
+```
+
+## 🏆 License
+
+MIT — free to use, modify, and share.
+

package/dist/index.cjs.js

@@ -0,0 +1,149 @@
+'use strict';
+
+var React = require('react');
+
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children
+}) {
+  const modalRef = React.useRef(null);
+  const headerRef = React.useRef(null);
+  const [pos, setPos] = React.useState({
+    x: 0,
+    y: 0
+  });
+  const draggingRef = React.useRef(false);
+  const offsetRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  React.useEffect(() => {
+    if (isOpen) {
+      // center modal initially
+      const el = modalRef.current;
+      if (el) {
+        const {
+          innerWidth,
+          innerHeight
+        } = window;
+        const rect = el.getBoundingClientRect();
+        setPos({
+          x: (innerWidth - rect.width) / 2,
+          y: (innerHeight - rect.height) / 2
+        });
+      }
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    function onMove(e) {
+      if (!draggingRef.current) return;
+      if (e.touches) e.preventDefault();
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+      // compute desired position
+      const desiredX = clientX - offsetRef.current.x;
+      const desiredY = clientY - offsetRef.current.y;
+      // clamp to viewport so it can't be dragged fully offscreen
+      const el = modalRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        const maxX = window.innerWidth - rect.width;
+        const maxY = window.innerHeight - rect.height;
+        const clampedX = Math.min(Math.max(0, desiredX), Math.max(0, maxX));
+        const clampedY = Math.min(Math.max(0, desiredY), Math.max(0, maxY));
+        setPos({
+          x: clampedX,
+          y: clampedY
+        });
+      } else {
+        setPos({
+          x: desiredX,
+          y: desiredY
+        });
+      }
+    }
+    function onUp() {
+      draggingRef.current = false;
+    }
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    window.addEventListener('touchmove', onMove, {
+      passive: false
+    });
+    window.addEventListener('touchend', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      window.removeEventListener('touchmove', onMove);
+      window.removeEventListener('touchend', onUp);
+    };
+  }, []);
+  function startDrag(e) {
+    e.preventDefault();
+    draggingRef.current = true;
+    document.body.style.userSelect = 'none';
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    const rect = modalRef.current.getBoundingClientRect();
+    offsetRef.current = {
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    };
+  }
+
+  // ensure we re-enable selection when drag ends
+  React.useEffect(() => {
+    function onUpCleanup() {
+      draggingRef.current = false;
+      document.body.style.userSelect = '';
+      // final clamp to ensure modal stays visible if window size changed
+      const el = modalRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        const maxX = window.innerWidth - rect.width;
+        const maxY = window.innerHeight - rect.height;
+        setPos(prev => ({
+          x: Math.min(Math.max(0, prev.x), Math.max(0, maxX)),
+          y: Math.min(Math.max(0, prev.y), Math.max(0, maxY))
+        }));
+      }
+    }
+    window.addEventListener('mouseup', onUpCleanup);
+    window.addEventListener('touchend', onUpCleanup);
+    return () => {
+      window.removeEventListener('mouseup', onUpCleanup);
+      window.removeEventListener('touchend', onUpCleanup);
+    };
+  }, []);
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "modal-overlay",
+    onMouseDown: e => {
+      if (e.target === e.currentTarget) onClose();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal",
+    ref: modalRef,
+    style: {
+      left: `${pos.x}px`,
+      top: `${pos.y}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header",
+    ref: headerRef,
+    onMouseDown: startDrag,
+    onTouchStart: startDrag
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-title"
+  }, title), /*#__PURE__*/React.createElement("button", {
+    className: "modal-close",
+    onClick: onClose
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    className: "modal-body"
+  }, children)));
+}
+
+exports.Modal = Modal;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/components/Modal.jsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react'\r\n\r\nexport default function Modal({isOpen, onClose, title, children}){\r\n  const modalRef = useRef(null)\r\n  const headerRef = useRef(null)\r\n  const [pos, setPos] = useState({x: 0, y: 0})\r\n  const draggingRef = useRef(false)\r\n  const offsetRef = useRef({x:0,y:0})\r\n\r\n  useEffect(()=>{\r\n    if(isOpen){\r\n      // center modal initially\r\n      const el = modalRef.current\r\n      if(el){\r\n        const {innerWidth, innerHeight} = window\r\n        const rect = el.getBoundingClientRect()\r\n        setPos({x: (innerWidth - rect.width)/2, y: (innerHeight - rect.height)/2})\r\n      }\r\n    }\r\n  },[isOpen])\r\n\r\n  useEffect(()=>{\r\n    function onMove(e){\r\n      if(!draggingRef.current) return\r\n      if (e.touches) e.preventDefault()\r\n      const clientX = e.touches ? e.touches[0].clientX : e.clientX\r\n      const clientY = e.touches ? e.touches[0].clientY : e.clientY\r\n      // compute desired position\r\n      const desiredX = clientX - offsetRef.current.x\r\n      const desiredY = clientY - offsetRef.current.y\r\n      // clamp to viewport so it can't be dragged fully offscreen\r\n      const el = modalRef.current\r\n      if(el){\r\n        const rect = el.getBoundingClientRect()\r\n        const maxX = window.innerWidth - rect.width\r\n        const maxY = window.innerHeight - rect.height\r\n        const clampedX = Math.min(Math.max(0, desiredX), Math.max(0, maxX))\r\n        const clampedY = Math.min(Math.max(0, desiredY), Math.max(0, maxY))\r\n        setPos({x: clampedX, y: clampedY})\r\n      } else {\r\n        setPos({x: desiredX, y: desiredY})\r\n      }\r\n    }\r\n    function onUp(){ draggingRef.current = false }\r\n    window.addEventListener('mousemove', onMove)\r\n    window.addEventListener('mouseup', onUp)\r\n    window.addEventListener('touchmove', onMove, {passive:false})\r\n    window.addEventListener('touchend', onUp)\r\n    return ()=>{\r\n      window.removeEventListener('mousemove', onMove)\r\n      window.removeEventListener('mouseup', onUp)\r\n      window.removeEventListener('touchmove', onMove)\r\n      window.removeEventListener('touchend', onUp)\r\n    }\r\n  },[])\r\n\r\n  function startDrag(e){\r\n    e.preventDefault()\r\n    draggingRef.current = true\r\n    document.body.style.userSelect = 'none'\r\n    const clientX = e.touches ? e.touches[0].clientX : e.clientX\r\n    const clientY = e.touches ? e.touches[0].clientY : e.clientY\r\n    const rect = modalRef.current.getBoundingClientRect()\r\n    offsetRef.current = {x: clientX - rect.left, y: clientY - rect.top}\r\n  }\r\n\r\n  // ensure we re-enable selection when drag ends\r\n  useEffect(()=>{\r\n    function onUpCleanup(){\r\n      draggingRef.current = false\r\n      document.body.style.userSelect = ''\r\n      // final clamp to ensure modal stays visible if window size changed\r\n      const el = modalRef.current\r\n      if(el){\r\n        const rect = el.getBoundingClientRect()\r\n        const maxX = window.innerWidth - rect.width\r\n        const maxY = window.innerHeight - rect.height\r\n        setPos(prev => ({\r\n          x: Math.min(Math.max(0, prev.x), Math.max(0, maxX)),\r\n          y: Math.min(Math.max(0, prev.y), Math.max(0, maxY))\r\n        }))\r\n      }\r\n    }\r\n    window.addEventListener('mouseup', onUpCleanup)\r\n    window.addEventListener('touchend', onUpCleanup)\r\n    return ()=>{\r\n      window.removeEventListener('mouseup', onUpCleanup)\r\n      window.removeEventListener('touchend', onUpCleanup)\r\n    }\r\n  },[])\r\n\r\n  if(!isOpen) return null\r\n\r\n  return (\r\n    <div className=\"modal-overlay\" onMouseDown={(e)=>{ if(e.target === e.currentTarget) onClose() }}>\r\n      <div className=\"modal\" ref={modalRef} style={{left:`${pos.x}px`, top:`${pos.y}px`}}>\r\n        <div className=\"modal-header\" ref={headerRef} onMouseDown={startDrag} onTouchStart={startDrag}>\r\n          <div className=\"modal-title\">{title}</div>\r\n          <button className=\"modal-close\" onClick={onClose}>×</button>\r\n        </div>\r\n        <div className=\"modal-body\">{children}</div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":["Modal","isOpen","onClose","title","children","modalRef","useRef","headerRef","pos","setPos","useState","x","y","draggingRef","offsetRef","useEffect","el","current","innerWidth","innerHeight","window","rect","getBoundingClientRect","width","height","onMove","e","touches","preventDefault","clientX","clientY","desiredX","desiredY","maxX","maxY","clampedX","Math","min","max","clampedY","onUp","addEventListener","passive","removeEventListener","startDrag","document","body","style","userSelect","left","top","onUpCleanup","prev","React","createElement","className","onMouseDown","target","currentTarget","ref","onTouchStart","onClick"],"mappings":"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"}

package/dist/index.esm.js

@@ -0,0 +1,147 @@
+import React, { useRef, useState, useEffect } from 'react';
+
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children
+}) {
+  const modalRef = useRef(null);
+  const headerRef = useRef(null);
+  const [pos, setPos] = useState({
+    x: 0,
+    y: 0
+  });
+  const draggingRef = useRef(false);
+  const offsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  useEffect(() => {
+    if (isOpen) {
+      // center modal initially
+      const el = modalRef.current;
+      if (el) {
+        const {
+          innerWidth,
+          innerHeight
+        } = window;
+        const rect = el.getBoundingClientRect();
+        setPos({
+          x: (innerWidth - rect.width) / 2,
+          y: (innerHeight - rect.height) / 2
+        });
+      }
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    function onMove(e) {
+      if (!draggingRef.current) return;
+      if (e.touches) e.preventDefault();
+      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+      const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+      // compute desired position
+      const desiredX = clientX - offsetRef.current.x;
+      const desiredY = clientY - offsetRef.current.y;
+      // clamp to viewport so it can't be dragged fully offscreen
+      const el = modalRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        const maxX = window.innerWidth - rect.width;
+        const maxY = window.innerHeight - rect.height;
+        const clampedX = Math.min(Math.max(0, desiredX), Math.max(0, maxX));
+        const clampedY = Math.min(Math.max(0, desiredY), Math.max(0, maxY));
+        setPos({
+          x: clampedX,
+          y: clampedY
+        });
+      } else {
+        setPos({
+          x: desiredX,
+          y: desiredY
+        });
+      }
+    }
+    function onUp() {
+      draggingRef.current = false;
+    }
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    window.addEventListener('touchmove', onMove, {
+      passive: false
+    });
+    window.addEventListener('touchend', onUp);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('mouseup', onUp);
+      window.removeEventListener('touchmove', onMove);
+      window.removeEventListener('touchend', onUp);
+    };
+  }, []);
+  function startDrag(e) {
+    e.preventDefault();
+    draggingRef.current = true;
+    document.body.style.userSelect = 'none';
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    const rect = modalRef.current.getBoundingClientRect();
+    offsetRef.current = {
+      x: clientX - rect.left,
+      y: clientY - rect.top
+    };
+  }
+
+  // ensure we re-enable selection when drag ends
+  useEffect(() => {
+    function onUpCleanup() {
+      draggingRef.current = false;
+      document.body.style.userSelect = '';
+      // final clamp to ensure modal stays visible if window size changed
+      const el = modalRef.current;
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        const maxX = window.innerWidth - rect.width;
+        const maxY = window.innerHeight - rect.height;
+        setPos(prev => ({
+          x: Math.min(Math.max(0, prev.x), Math.max(0, maxX)),
+          y: Math.min(Math.max(0, prev.y), Math.max(0, maxY))
+        }));
+      }
+    }
+    window.addEventListener('mouseup', onUpCleanup);
+    window.addEventListener('touchend', onUpCleanup);
+    return () => {
+      window.removeEventListener('mouseup', onUpCleanup);
+      window.removeEventListener('touchend', onUpCleanup);
+    };
+  }, []);
+  if (!isOpen) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "modal-overlay",
+    onMouseDown: e => {
+      if (e.target === e.currentTarget) onClose();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal",
+    ref: modalRef,
+    style: {
+      left: `${pos.x}px`,
+      top: `${pos.y}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-header",
+    ref: headerRef,
+    onMouseDown: startDrag,
+    onTouchStart: startDrag
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-title"
+  }, title), /*#__PURE__*/React.createElement("button", {
+    className: "modal-close",
+    onClick: onClose
+  }, "\xD7")), /*#__PURE__*/React.createElement("div", {
+    className: "modal-body"
+  }, children)));
+}
+
+export { Modal };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/Modal.jsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from 'react'\r\n\r\nexport default function Modal({isOpen, onClose, title, children}){\r\n  const modalRef = useRef(null)\r\n  const headerRef = useRef(null)\r\n  const [pos, setPos] = useState({x: 0, y: 0})\r\n  const draggingRef = useRef(false)\r\n  const offsetRef = useRef({x:0,y:0})\r\n\r\n  useEffect(()=>{\r\n    if(isOpen){\r\n      // center modal initially\r\n      const el = modalRef.current\r\n      if(el){\r\n        const {innerWidth, innerHeight} = window\r\n        const rect = el.getBoundingClientRect()\r\n        setPos({x: (innerWidth - rect.width)/2, y: (innerHeight - rect.height)/2})\r\n      }\r\n    }\r\n  },[isOpen])\r\n\r\n  useEffect(()=>{\r\n    function onMove(e){\r\n      if(!draggingRef.current) return\r\n      if (e.touches) e.preventDefault()\r\n      const clientX = e.touches ? e.touches[0].clientX : e.clientX\r\n      const clientY = e.touches ? e.touches[0].clientY : e.clientY\r\n      // compute desired position\r\n      const desiredX = clientX - offsetRef.current.x\r\n      const desiredY = clientY - offsetRef.current.y\r\n      // clamp to viewport so it can't be dragged fully offscreen\r\n      const el = modalRef.current\r\n      if(el){\r\n        const rect = el.getBoundingClientRect()\r\n        const maxX = window.innerWidth - rect.width\r\n        const maxY = window.innerHeight - rect.height\r\n        const clampedX = Math.min(Math.max(0, desiredX), Math.max(0, maxX))\r\n        const clampedY = Math.min(Math.max(0, desiredY), Math.max(0, maxY))\r\n        setPos({x: clampedX, y: clampedY})\r\n      } else {\r\n        setPos({x: desiredX, y: desiredY})\r\n      }\r\n    }\r\n    function onUp(){ draggingRef.current = false }\r\n    window.addEventListener('mousemove', onMove)\r\n    window.addEventListener('mouseup', onUp)\r\n    window.addEventListener('touchmove', onMove, {passive:false})\r\n    window.addEventListener('touchend', onUp)\r\n    return ()=>{\r\n      window.removeEventListener('mousemove', onMove)\r\n      window.removeEventListener('mouseup', onUp)\r\n      window.removeEventListener('touchmove', onMove)\r\n      window.removeEventListener('touchend', onUp)\r\n    }\r\n  },[])\r\n\r\n  function startDrag(e){\r\n    e.preventDefault()\r\n    draggingRef.current = true\r\n    document.body.style.userSelect = 'none'\r\n    const clientX = e.touches ? e.touches[0].clientX : e.clientX\r\n    const clientY = e.touches ? e.touches[0].clientY : e.clientY\r\n    const rect = modalRef.current.getBoundingClientRect()\r\n    offsetRef.current = {x: clientX - rect.left, y: clientY - rect.top}\r\n  }\r\n\r\n  // ensure we re-enable selection when drag ends\r\n  useEffect(()=>{\r\n    function onUpCleanup(){\r\n      draggingRef.current = false\r\n      document.body.style.userSelect = ''\r\n      // final clamp to ensure modal stays visible if window size changed\r\n      const el = modalRef.current\r\n      if(el){\r\n        const rect = el.getBoundingClientRect()\r\n        const maxX = window.innerWidth - rect.width\r\n        const maxY = window.innerHeight - rect.height\r\n        setPos(prev => ({\r\n          x: Math.min(Math.max(0, prev.x), Math.max(0, maxX)),\r\n          y: Math.min(Math.max(0, prev.y), Math.max(0, maxY))\r\n        }))\r\n      }\r\n    }\r\n    window.addEventListener('mouseup', onUpCleanup)\r\n    window.addEventListener('touchend', onUpCleanup)\r\n    return ()=>{\r\n      window.removeEventListener('mouseup', onUpCleanup)\r\n      window.removeEventListener('touchend', onUpCleanup)\r\n    }\r\n  },[])\r\n\r\n  if(!isOpen) return null\r\n\r\n  return (\r\n    <div className=\"modal-overlay\" onMouseDown={(e)=>{ if(e.target === e.currentTarget) onClose() }}>\r\n      <div className=\"modal\" ref={modalRef} style={{left:`${pos.x}px`, top:`${pos.y}px`}}>\r\n        <div className=\"modal-header\" ref={headerRef} onMouseDown={startDrag} onTouchStart={startDrag}>\r\n          <div className=\"modal-title\">{title}</div>\r\n          <button className=\"modal-close\" onClick={onClose}>×</button>\r\n        </div>\r\n        <div className=\"modal-body\">{children}</div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":["Modal","isOpen","onClose","title","children","modalRef","useRef","headerRef","pos","setPos","useState","x","y","draggingRef","offsetRef","useEffect","el","current","innerWidth","innerHeight","window","rect","getBoundingClientRect","width","height","onMove","e","touches","preventDefault","clientX","clientY","desiredX","desiredY","maxX","maxY","clampedX","Math","min","max","clampedY","onUp","addEventListener","passive","removeEventListener","startDrag","document","body","style","userSelect","left","top","onUpCleanup","prev","React","createElement","className","onMouseDown","target","currentTarget","ref","onTouchStart","onClick"],"mappings":"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"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "trotl-modal",
+  "version": "1.0.1",
+  "description": "Modal UI",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "dist/index.css"
+  ],
+  "scripts": {
+    "dev": "vite --config vite.dev.config.js",
+    "build": "rollup -c rollup.config.js",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "author": "Dejan Trtnik",
+  "license": "MIT",
+  "type": "module",
+  "devDependencies": {
+    "@babel/preset-react": "^7.28.5",
+    "@eslint/js": "^9.39.1",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "rollup": "^4.53.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "vite": "^7.2.4"
+  },
+  "dependencies": {},
+  "keywords": [
+    "react",
+    "ui-library"
+  ]
+}