ehscan-react-components 0.1.45 → 0.1.46

package/README.md

@@ -1,25 +1,101 @@
 # ehscan-react-components
 
+A lightweight, modular collection of reusable React UI components designed for modern applications.
+All components are built with TypeScript, React, and Vite and css modules. Its focused on flexibility, performance, and ease of integration.
+This library is ideal for dashboards, admin panels, internal tools, and feature-rich web apps.
+
+## 📦 Available Components
+
+## Table of Contents
+- [Drag And Drop](#drag-and-drop)
+- [AddBox](#addbox)
+- [Window](#window)
 - Button
-- Window
-- TextArea
+- textarea
 - TextAreaDropDown
-- AddBox
-    - useChangeAddBox.tsx
-    - css changes on vars can be done in parent class
 
-# Usage
+## Installation
+
+```bash
+npm ehscan-react-components
+# or
+yarn add ehscan-react-components
+```
+
+# Usage Examples
+
+## Drag And Drop
+
+```jsx
+import { DragAndDrop } from 'ehscan-react-components';
+
+const DND = () => {
+
+    const [items, setItems] = useState([
+        { id: 1, label: "title" },
+        { id: 2, label: "description" },
+        { id: 3, label: "category" },
+        ...
+        { id: 10, label: "thumbnail" }
+    ]
+    );
+
+    const changeItemsAction = (colums) => {
+        console.log(colums)
+    };
+
+    return (<>
+    <div classname="dnd-css-inject">
+      <DragAndDrop items={items} setItems={setItems} changeItemsAction={changeItemsAction} />
+      </div>
+    </>) 
+} 
+
+```
+<!-- IMAGE -->
+
+### Styling
+```css
+/* Customize Drag & Drop component */
+.dnd-css-inject {
+  /* List Item */
+  --ext-dnd-item-bck-clr: darkblue;
+  --ext-dnd-item-border-radius: 4px;
+  --ext-dnd-item-padding: 10px;
+  --ext-dnd-item-clr: white;
+  --ext-dnd-item-height: 40px;
+
+  /* Selected Item */
+  --ext-dnd-item-selected-bck-clr: darkviolet;
+
+  /* Hovered Item */
+  --ext-dnd-item-selected-bck-hvr-clr: darkgreen;
+
+  /* Drag Handle */
+  --ext-dnd-item-handle-clr: #6c8cff;
+
+  /* SVG */
+  --ext-dnd-svg-width: 30px;
+  --ext-dnd-svg-height: 30px;
+  --ext-dnd-svg-fill: white;
+  --ext-dnd-svg-fill-check: lightslategrey;
+
+  /* Ghost Item (dragging) */
+  --ext-dnd-item-ghost-padding: 10px;
+  --ext-dnd-item-ghost-bck-clr: white;
+  --ext-dnd-item-ghost-border: 1px solid #6c8cff;
+  --ext-dnd-item-ghost-clr: lightslategrey;
+  --ext-dnd-item-ghost-border-radius: 6px;
+}
+```
+
 ## AddBox
 
 AddBox is a React component for managing a list of entries. It allows users to add, edit, and remove rows dynamically. Each row has an id and a title.
-
 The component is fully controlled — the parent manages the state and receives updates via the onChange callback.
 
 ![AddBox Preview](https://raw.githubusercontent.com/beeplaced/ehscan-react-components/main/src/images/AddBox.png)
 
-
-### Implementation
-
 ```jsx
 import { useEffect, useState } from "react";
 import { AddBox, useChangeAddBox } from 'ehscan-react-components';
@@ -87,7 +163,6 @@ CSS Variables for AddBox
 | `--ext-addbox-input-focus-border`               | `1px dashed darkgrey` | Border of the input on focus                   |
 
 
-
 # Styling
 
 - TextAreaDropDown
@@ -172,30 +247,71 @@ CSS Variables for AddBox
 | `--btn-radius-trash`    | trashBtn | `4px`            |
 | `--btn-bg-trash`        | trashBtn | `lightgray`      |
 
-# Window
-
-## styling
-
-| Variable                             | Default                       | Description                        |
-| ------------------------------------ | ----------------------------- | ---------------------------------- |
-| `--ext-window-bck-color`             | `white`                       | Window background color            |
-| `--ext-window-width`                 | `400px`                       | Window default width               |
-| `--ext-window-min-height`            | `300px`                       | Window minimum height              |
-| `--ext-window-border-radius`         | `12px`                        | Window border radius               |
-| `--ext-window-shadow`                | `rgba(50,50,93,0.25) ...`   | Box shadow for window              |
-| `--ext-window-opacity`               | `0`                           | Initial opacity (used for fade-in) |
-| `--ext-window-transition`            | `opacity 0.4s ease-in-out`    | Fade transition                    |
-| `--ext-window-header-bck-color`      | `var(--ext-window-bck-color)` | Header background color            |
-| `--ext-window-close-bck`             | `aqua`                        | Close button background            |
-| `--ext-window-body-bck`              | `transparent`                 | Body background color              |
-| `--ext-window-footer-bck`            | `transparent`                 | Footer background color            |
-| `--ext-window-footer-min-height`     | `50px`                        | Footer min height                  |
-| `--ext-window-scrollbar-thumb`       | `white`                       | Scrollbar thumb color              |
-| `--ext-window-scrollbar-thumb-hover` | `#555`                        | Scrollbar thumb color on hover     |
-| `--ext-window-resize-bck`            | `darkgreen`                   | Resize handle background           |
+## Window
+```jsx
+import { useEffect, useState } from "react";
+import { Window } from 'ehscan-react-components';
+
+const WindowWrapper = ({ windowOpen, setWindowOpen }) => {
+    const [closeCommand, setCloseCommand] = useState(undefined);
+
+    return (<>
+        <div className="inject-window-css">
+            <Window trackMove={(entry) => setCloseCommand(entry)} open={windowOpen}
+                header={
+                    <div className="window-header">
+                        <div className="window-header-title _txt">My Window Header Title</div>
+                    </div>
+                }
+                body={
+                    <div className="window-body-wrapper">My Window Body</div>
+                }
+                footer={
+                    <div className="window-footer">My Window Footer</div>
+                }
+            />
+        </div>
+    </>)
+}
+
+```
 
+### Styling
+```css
+
+.inject-window-css {
+  /* Window container */
+  --ext-window-bck-color: white;
+  --ext-window-width: 400px;
+  --ext-window-min-height: 300px;
+  --ext-window-border-radius: 12px;
+  --ext-window-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --ext-window-opacity: 0;
+  --ext-window-transition: opacity 0.4s ease-in-out;
+
+  /* Header */
+  --ext-window-header-bck-color: transparent;
+  --ext-window-header-height: 50px;
+
+  /* Body */
+  --ext-window-body-bck: transparent;
+
+  /* Footer */
+  --ext-window-footer-bck: transparent;
+  --ext-window-footer-height: 50px;
+
+  /* Scrollbars */
+  --ext-window-scrollbar-thumb: white;
+  --ext-window-scrollbar-thumb-hover: #555;
+
+  /* Resize handle */
+  --ext-window-resize-bck: darkgrey;
+}
+```
 ----
 # Changelog
 
-All notable changes to this project will be documented in this file.
+## [0.1.45] - 2025-12-11
+- Added Drag And Drop Component
+- Added Window css module and docu
 ---

package/dist/Components.d.ts

@@ -1,7 +1,7 @@
 export { Button } from './Button';
-export { Window } from './Window';
+export { Window } from './window/Window';
+export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './TextArea';
 export { TextAreaDropDown } from './TextAreaDropDown';
 export { AddBox } from './AddBox';
-export { DragAndDrop } from './dnd/DragAndDrop';
 export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/Components.js

@@ -1,8 +1,8 @@
 // ehscan-react-components entries
 export { Button } from './Button';
-export { Window } from './Window';
+export { Window } from './window/Window';
+export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './TextArea';
 export { TextAreaDropDown } from './TextAreaDropDown';
 export { AddBox } from './AddBox';
-export { DragAndDrop } from './dnd/DragAndDrop';
 export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/dnd/DragAndDrop.js

@@ -18,7 +18,7 @@ export const DragAndDrop = ({ items, setItems, changeItemsAction }) => {
     const [popItem, setPopItem] = useState(null);
     const containerRef = useRef(null);
     const draggingIndexRef = useRef(null);
-    const hoverIndexRef = useRef(0);
+    const hoverIndexRef = useRef(null);
     useEffect(() => {
         console.log(hoverIndexRef.current, draggingIndexRef.current);
     }, [draggingIndexRef, hoverIndexRef]);
@@ -76,7 +76,7 @@ export const DragAndDrop = ({ items, setItems, changeItemsAction }) => {
         }
         setPopItem(hoverIndexRef.current);
         draggingIndexRef.current = null;
-        hoverIndexRef.current = 0;
+        hoverIndexRef.current = null;
         setDragPosition({ x: 0, y: 0 });
         setTimeout(() => { setPopItem(null); }, 300);
         window.removeEventListener("mousemove", onMouseMove);

package/dist/style/window.module.css

@@ -0,0 +1,74 @@
+.extWindow {
+  background-color: var(--ext-window-bck-color, white);
+  position: absolute;
+  width: var(--ext-window-width, 400px);
+  min-height: var(--ext-window-min-height, 300px);
+  border-radius: var(--ext-window-border-radius, 12px);
+  box-shadow: var(--ext-window-shadow, rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px);
+  opacity: var(--ext-window-opacity, 0);
+  transition: var(--ext-window-transition, opacity 0.4s ease-in-out);
+  user-select: none;
+}
+
+.fadeIn {
+  opacity: 1;
+}
+
+/* Header */
+.windowHeader {
+  border-radius: var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px) 0 0;
+  background-color: var(--ext-window-header-bck-color, transparent);
+  height: var(--ext-window-header-height, 50px);
+  cursor: pointer;
+  display: flex;
+}
+
+/* Body */
+.windowBody {
+  background-color: var(--ext-window-body-bck, transparent);
+  min-height: var(--ext-window-min-height, 200px);
+  overflow: auto;
+}
+
+/* Footer */
+.footer {
+  background-color: var(--ext-window-footer-bck, transparent);
+  height: var(--ext-window-footer-height, 50px);
+  border-radius: 0 0 var(--ext-window-border-radius, 12px) var(--ext-window-border-radius, 12px);
+}
+
+/* Scrollbars for WebKit */
+.windowBody::-webkit-scrollbar {
+  width: 6px;
+  background-color: var(--ext-window-bck-color, white);
+}
+
+.windowBody:hover::-webkit-scrollbar {
+  width: 6px;
+}
+
+.windowBody::-webkit-scrollbar-thumb {
+  background-color: var(--ext-window-scrollbar-thumb, white);
+  border-radius: 12px;
+}
+
+.windowBody:hover::-webkit-scrollbar-thumb {
+  background-color: var(--ext-window-scrollbar-thumb-hover, #555);
+}
+
+/* Resize handle */
+.resizeHandle {
+    width: 7px;
+    height: 120px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    cursor: e-resize;
+    background-color: transparent;
+    border-radius: 22px 0 0 22px;
+}
+
+.resizeHandle:hover {
+    background: var(--ext-window-resize-bck, darkgrey);
+}

package/dist/window/Window.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface Props {
+    trackMove?: (args?: any) => void;
+    open: boolean;
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    initialWidth?: number;
+    initialBodyPadding?: number;
+    header?: React.ReactNode;
+    body?: React.ReactNode;
+    footer?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Window: React.FC<Props>;

package/dist/window/Window.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from "react";
+import { useDraggable } from "../tools/useDraggable"; // adjust path as needed
+import styles from './style/window.module.css';
+export const Window = ({ trackMove, open, initialPosition = { x: 600, y: 100 }, initialWidth = 400, initialBodyPadding = 20, header, body, footer, onClose, }) => {
+    const targetRef = useRef(null);
+    const headerRef = useRef(null);
+    const resizeHandleRef = useRef(null);
+    const bodyRef = useRef(null);
+    const footerRef = useRef(null);
+    const [bodyPadding] = useState(initialBodyPadding);
+    const [windowWidth] = useState(initialWidth);
+    useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);
+    useEffect(() => {
+        if (!bodyRef.current || !targetRef.current || !headerRef.current)
+            return;
+        const headerHeight = headerRef.current.offsetHeight;
+        const topPosition = targetRef.current.getBoundingClientRect().top;
+        const availableHeight = window.innerHeight - topPosition - 20; // 20px bottom margin
+        const bodyMaxHeight = Math.max(100, availableHeight - headerHeight - 2 * bodyPadding);
+        bodyRef.current.style.maxHeight = `${bodyMaxHeight}px`;
+        bodyRef.current.style.overflowY = "auto";
+    }, [bodyPadding]);
+    const [fadeIn, setFadeIn] = useState(false);
+    useEffect(() => {
+        if (open === undefined)
+            return;
+        setTimeout(() => {
+            setFadeIn(open);
+        }, 0);
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs("div", { ref: targetRef, className: `${styles.extWindow} ${fadeIn ? styles.fadeIn : ""}`, style: { left: `${initialPosition.x}px`, top: `${initialPosition.y}px`, minWidth: `${windowWidth}px` }, children: [_jsx("div", { ref: headerRef, className: styles.windowHeader, children: header !== null && header !== void 0 ? header : (_jsxs(_Fragment, { children: [_jsx("div", { children: "||" }), _jsx("div", { children: "Header" }), _jsx("div", { onClick: onClose, children: "close" })] })) }), _jsx("div", { ref: bodyRef, className: styles.windowBody, style: { padding: `${bodyPadding}px` }, children: body !== null && body !== void 0 ? body : _jsx(_Fragment, { children: "Body" }) }), footer && (_jsx("div", { ref: footerRef, className: styles.footer, children: footer })), _jsx("div", { className: styles.resizeHandle, ref: resizeHandleRef })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",