ehscan-react-components 0.1.47 → 0.1.49

package/README.md

@@ -7,6 +7,7 @@ This library is ideal for dashboards, admin panels, internal tools, and feature-
 ## 📦 Available Components
 
 ## Table of Contents
+- [Button](#button)
 - [Drag And Drop](#drag-and-drop)
 - [AddBox](#addbox)
 - [Window](#window)
@@ -24,8 +25,103 @@ yarn add ehscan-react-components
 
 # Usage Examples
 
+## Button
+
+A flexible, reusable button component for React with support for multiple interaction styles like raw, pop, and ripple effects.
+
+Features:
+
+- **Optional text and icon support**: You can pass text and/or children (e.g., an icon) to display inside the button.
+- **Multiple button styles**: Controlled via the type prop:
+  - "raw": Standard button with no extra visual effect.
+  - "pop": Shrinks slightly when pressed, creating a “pop” effect.
+  - "ripple": Shows a ripple animation on click.
+- **Click handling with optional delay**: The click callback is triggered on button press, with an optional 200ms delay unless notimeout is true.
+- **Custom styling**: You can pass additional classes via addClass.
+- **Accessibility support**: Uses aria-pressed to indicate a selected state.
+
+![Button Preview](https://raw.githubusercontent.com/beeplaced/ehscan-react-components/main/src/images/Button.png)
+
+```jsx
+import { Button } from 'ehscan-react-components';
+
+const ButtonPage = () => {
+
+  const doStuff = () => {
+    console.log("doStuff")
+  }
+
+  return (<>
+      <Button index={'primary'} text='Primary' type="pop" addClass="inject-styling" click={() => doStuff()} >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z" /></svg>
+      </Button>
+      <Button index={'danger'} text='Danger' type="pop" addClass="ext-btn--danger" click={() => doStuff()} >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="M330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm36-190 114-114 114 114 56-56-114-114 114-114-56-56-114 114-114-114-56 56 114 114-114 114 56 56Zm-2 110h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z" /></svg>
+      </Button>
+      <Button index={'secondary'} text='Secondary' type="pop" addClass="ext-btn--secondary" click={() => doStuff()} >
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#0000F5"><path d="M360-160q-19 0-36-8.5T296-192L80-480l216-288q11-15 28-23.5t36-8.5h440q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H360ZM180-480l180 240h440v-480H360L180-480Zm220 40q17 0 28.5-11.5T440-480q0-17-11.5-28.5T400-520q-17 0-28.5 11.5T360-480q0 17 11.5 28.5T400-440Zm140 0q17 0 28.5-11.5T580-480q0-17-11.5-28.5T540-520q-17 0-28.5 11.5T500-480q0 17 11.5 28.5T540-440Zm140 0q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-100-40Z" /></svg>
+      </Button>
+  </>)
+}
+
+```
+### Styling
+```css
+.inject-styling {
+  /* Spacing & layout */
+  --ext-btn-gap: 0.5rem;
+  --ext-btn-padding: 5px 10px 5px 5px;
+  --ext-btn-width: fit-content;
+  --ext-btn-height: auto;
+
+  /* Typography */
+  --ext-btn-font-size: 1rem;
+  --ext-btn-font-weight: 500;
+  --ext-btn-color: #fff;
+  --ext-btn-colorbtn-line-height: 1.5;
+  --ext-btn-font-family: inherit;
+
+  /* Background & color */
+  --ext-btn-bg: #007aff;
+  --ext-btn-color: #fff;
+
+  /* Border & radius */
+  --ext-btn-border: none;
+  --ext-btn-radius: 18px;
+
+  /* Effects & transitions */
+  --ext-btn-transition: all 0.2s ease;
+  --ext-btn-pop-scale: 0.95;
+  --ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
+}
+```
+
 ## Drag And Drop
 
+A fully interactive drag-and-drop list component built with React that allows users to reorder items, select items, and handle autosave or custom callbacks.
+
+Features:
+
+- **Drag & drop reordering** 
+  - Users can click and drag any item in the list to reorder it.
+  - A “ghost” of the dragged item follows the cursor while dragging.
+  - Items swap positions when dropped, and the updated order is saved.
+- **Selection support**
+  - Clicking an item toggles its selected state.
+  - Selected items can be highlighted using a CSS class (styles.selected).
+- **Custom callbacks & autosave**
+  - setItems: Updates the parent state with the new item order.
+  - changeItemsAction: A callback fired whenever items are reordered or clicked.
+  - Debounced autosave: Changes are automatically saved with a delay (debounce) to reduce rapid API calls.
+- **Pop effect on drop**
+  - When an item is dropped into a new position, it briefly triggers a “pop” animation to indicate the change.
+- **Accessibility & flexibility**
+  - Works with any list of objects that have an id and label.
+  - Each item can optionally have a selected property.
+  - The component is fully type-safe with TypeScript.
+
+![DND Preview](https://raw.githubusercontent.com/beeplaced/ehscan-react-components/main/src/images/DND.png)
+
 ```jsx
 import { DragAndDrop } from 'ehscan-react-components';
 
@@ -162,91 +258,6 @@ CSS Variables for AddBox
 | `--ext-addbox-textarea-tag-erase-hover-bck-clr` | `darkgray`            | Background color of the delete button on hover |
 | `--ext-addbox-input-focus-border`               | `1px dashed darkgrey` | Border of the input on focus                   |
 
-
-# Styling
-
-- TextAreaDropDown
-
-| Variable                           | Fallback / Default                  |
-| ---------------------------------- | ----------------------------------- |
-| `--ext-textarea-box-bck-clr`       | `lightgray`                         |
-| `--ext-textarea-box-border-radius` | `10px`                              |
-| `--ext-dropdown-border-radius`     | `20px`                              |
-| `--input-txt-size`                 | *(not explicitly set, optional)*    |
-| `--d-font-weight`                  | *(not explicitly set, optional)*    |
-| `--input-clr`                      | `black`                             |
-| `--textarea-tag-bck-clr`           | `white` (some places `transparent`) |
-| `--textarea-tag-clr`               | `darkblue` (some places `white`)    |
-| `--d-input-placeholder-clr`        | `black`                             |
-| `--d-input-bck-clr`                | `transparent`                       |
-| `--dropdown-item-bck-clr`          | `wheat`                             |
-| `--dropdown-amount-row-bck-clr`    | `yellow`                            |
-| `--animate-s`                      | `.5s`                               |
-
-
-## Base Button Variables
-
-| Variable              | Default/Fallback                          |
-| --------------------- | ----------------------------------------- |
-| `--btn-bg`            | `#007aff`                                 |
-| `--btn-color`         | `#fff`                                    |
-| `--btn-radius`        | `18px`                                    |
-| `--btn-padding-y`     | `0.5rem`                                  |
-| `--btn-padding-x`     | `1rem`                                    |
-| `--btn-width`         | `fit-content`                             |
-| `--btn-height`        | `auto`                                    |
-| `--btn-font-size`     | `1rem`                                    |
-| `--btn-font-weight`   | `500`                                     |
-| `--btn-transition`    | `all 0.2s ease`                           |
-| `--btn-line-height`   | `1.5`                                     |
-| `--ripple-box-shadow` | `rgb(100 100 111 / 20%) 0px 7px 29px 0px` |
-| `--ripple-effect-bck` | `rgb(0 0 0 / 15%)`                        |
-
-
-### Size-specific overrides
-
-| Variable             | Size | Default/Fallback |
-| -------------------- | ---- | ---------------- |
-| `--btn-padding-y-sm` | sm   | `0.25rem`        |
-| `--btn-padding-x-sm` | sm   | `0.75rem`        |
-| `--btn-font-size-sm` | sm   | `0.85rem`        |
-| `--btn-padding-y-md` | md   | `0.5rem`         |
-| `--btn-padding-x-md` | md   | `1rem`           |
-| `--btn-font-size-md` | md   | `1rem`           |
-| `--btn-padding-y-lg` | lg   | `0.75rem`        |
-| `--btn-padding-x-lg` | lg   | `1.5rem`         |
-| `--btn-font-size-lg` | lg   | `1.1rem`         |
-
-### Variant-specific variables
-
-| Variable                | Variant   | Default/Fallback |
-| ----------------------- | --------- | ---------------- |
-| `--btn-bg-primary`      | primary   | `#007aff`        |
-| `--btn-color-primary`   | primary   | `#fff`           |
-| `--btn-bg-secondary`    | secondary | `#e5e5ea`        |
-| `--btn-color-secondary` | secondary | `#111`           |
-| `--btn-bg-outline`      | outline   | `transparent`    |
-| `--btn-color-outline`   | outline   | `#007aff`        |
-| `--btn-bg-ghost`        | ghost     | `transparent`    |
-| `--btn-color-ghost`     | ghost     | `#007aff`        |
-| `--btn-bg-danger`       | danger    | `#ff3b30`        |
-| `--btn-color-danger`    | danger    | `#fff`           |
-
-### Specific Button Types
-
-| Variable                | Type     | Default/Fallback |
-| ----------------------- | -------- | ---------------- |
-| `--btn-width-close`     | closeBtn | `35px`           |
-| `--btn-height-close`    | closeBtn | `35px`           |
-| `--btn-bg-close`        | closeBtn | `lightgray`      |
-| `--btn-height-save`     | saveBtn  | `35px`           |
-| `--btn-padding-x-save`  | saveBtn  | `30px`           |
-| `--btn-bg-save`         | saveBtn  | `#007aff`        |
-| `--btn-height-trash`    | trashBtn | `35px`           |
-| `--btn-padding-x-trash` | trashBtn | `10px`           |
-| `--btn-radius-trash`    | trashBtn | `4px`            |
-| `--btn-bg-trash`        | trashBtn | `lightgray`      |
-
 ## Window
 ```jsx
 import { useEffect, useState } from "react";
@@ -311,7 +322,13 @@ const WindowWrapper = ({ windowOpen, setWindowOpen }) => {
 ----
 # Changelog
 
+## [0.1.49] - 2025-12-12
+- Image and docu for Drag and Drop
+
+## [0.1.48] - 2025-12-12
+- Improved Button, module styling and docu, mobile usage (type: "pop")
+- Ripple module styling
+
 ## [0.1.45] - 2025-12-11
 - Added Drag And Drop Component
 - Added Window css module and docu
----

package/dist/Components.d.ts

@@ -1,4 +1,4 @@
-export { Button } from './Button';
+export { Button } from './button/Button';
 export { Window } from './window/Window';
 export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './TextArea';

package/dist/Components.js

@@ -1,5 +1,5 @@
 // ehscan-react-components entries
-export { Button } from './Button';
+export { Button } from './button/Button';
 export { Window } from './window/Window';
 export { DragAndDrop } from './dnd/DragAndDrop';
 export { TextArea } from './TextArea';

package/dist/{Button.d.ts → button/Button.d.ts}

@@ -1,13 +1,12 @@
 import { ReactNode } from "react";
-import './style/button.css';
 type Props = {
     index?: string | number;
     text?: string;
     selected?: boolean;
     addClass?: string;
     notimeout?: boolean;
-    size?: 'sm' | 'md' | 'lg';
     click?: (args?: any) => void;
+    type?: "raw" | "pop" | "ripple";
     children?: ReactNode;
 };
 export declare const Button: React.FC<Props>;

package/dist/{Button.js → button/Button.js}

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useCallback } from "react";
-import useRipple from "./tools/useRipple";
-import './style/button.css';
-export const Button = ({ index, text, selected, addClass, notimeout, size = 'md', click, children }) => {
+import useRipple from "../tools/useRipple";
+import styles from '../style/button.module.css';
+export const Button = ({ index, text, selected, addClass, notimeout, click, type = "raw", children }) => {
     const buttonRef = useRef(null);
     const handleRipple = useRipple();
     const handleButtonClick = useCallback((event) => {
-        handleRipple(event, buttonRef);
+        if (type === 'ripple')
+            handleRipple(event, buttonRef);
         if (notimeout) {
             click === null || click === void 0 ? void 0 : click(event);
             return;
@@ -15,5 +16,5 @@ export const Button = ({ index, text, selected, addClass, notimeout, size = 'md'
             click === null || click === void 0 ? void 0 : click(event);
         }, 200);
     }, [notimeout, click, handleRipple]);
-    return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `ext-btn ext-btn--${size} _ripple ${addClass !== null && addClass !== void 0 ? addClass : 'ext-btn--primary'}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: "ext-btn-label", children: text })] }, index) }));
+    return (_jsx(_Fragment, { children: _jsxs("button", { type: "button", ref: buttonRef, onClick: handleButtonClick, className: `${styles.button} ${styles.ApplyRipple} ${addClass !== null && addClass !== void 0 ? addClass : styles.btnPrimary}${type === 'pop' ? ` ${styles.buttonPop}` : ''}`, "aria-pressed": selected, children: [children, text && _jsx("div", { className: styles.btnLabel, children: text })] }, index) }));
 };

package/dist/style/button.module.css

@@ -0,0 +1,100 @@
+/* EHSCAN Base Button */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ext-btn-gap, 0.5rem);
+  font-family: inherit;
+  font-size: var(--ext-btn-font-size, 1rem);
+  font-weight: var(--ext-btn-font-weight, 500);
+  color: var(--ext-btn-color, #fff);
+  background-color: var(--btn-bg, #007aff);
+  border: none;
+  border-radius: var(--ext-btn-radius, 18px);
+  padding: var(--ext-btn-padding, 5px 10px 5px 5px);
+  width: var(--ext-btn-width, fit-content);
+  height: var(--ext-btn-height, auto);
+  cursor: pointer;
+  transition: var(--ext-btn-transition, all 0.2s ease);
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  line-height: var(--ext-btn-colorbtn-line-height, 1.5);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--ext-btn-bg, #007aff);
+  outline-offset: 2px;
+}
+
+.button:disabled,
+.button[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.button:hover:not(:disabled):not([aria-disabled="true"]) {
+  filter: brightness(0.9);
+}
+
+.buttonPop:active:not(:disabled):not([aria-disabled="true"]) {
+  transform: scale(var(--ext-btn-pop-scale, .95));
+}
+
+/* Variants */
+.btnPrimary {
+  --ext-btn-bg: #007aff;
+  --ext-btn-color: #fff;
+}
+
+.ext-btn--secondary {
+  --btn-bg: #e5e5ea;
+  --btn-color: #111;
+}
+
+.ext-btn--outline {
+  --btn-bg: transparent;
+  --btn-color: #007aff;
+}
+
+.ext-btn--ghost {
+  --btn-bg: transparent;
+  --btn-color: #007aff;
+}
+
+.ext-btn--danger {
+  --btn-bg: #ff3b30;
+  --btn-color: #fff;
+}
+
+/* Loading state */
+.ext-btn--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+
+/* Icon and label wrappers */
+.ext-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1em;
+}
+
+.btnLabel {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* -------------- 
+  Apply Ripple effect 
+---------------*/
+.ApplyRipple {
+  box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}

package/dist/style/ripple.module.css

@@ -0,0 +1,20 @@
+/* -------------- 
+  Ripple effect 
+---------------*/
+.ripple {
+  background: var(--ext-ripple-effect-bck, rgb(0 0 0 / 15%));
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple-animation 0.6s linear;
+  pointer-events: none;
+  transform-origin: center center;
+  will-change: transform, opacity;
+}
+
+@keyframes ripple-animation {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}

package/dist/tools/useRipple.js

@@ -1,4 +1,5 @@
 import { useCallback } from 'react';
+import styles from '../style/ripple.module.css';
 const useRipple = () => {
     const handleRipple = useCallback((event, buttonRef) => {
         const button = buttonRef.current;
@@ -12,7 +13,7 @@ const useRipple = () => {
         ripple.style.width = ripple.style.height = `${size}px`;
         ripple.style.left = `${x}px`;
         ripple.style.top = `${y}px`;
-        ripple.className = 'ripple';
+        ripple.className = styles.ripple;
         button.appendChild(ripple);
         setTimeout(() => ripple.remove(), 600);
     }, []);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",
   "scripts": {
     "build": "tsc && npm run copy-css",
-"copy-css": "rsync -a src/style/ dist/style/",
+    "copy-css": "rsync -a src/style/ dist/style/",
     "prepublishOnly": "npm run build"
   },
   "keywords": [

package/dist/style/button.css

@@ -1,132 +0,0 @@
-/* EHSCAN Base Button - Refactored */
-.ext-btn {
-  /* Core variables with fallbacks */
-  /* --btn-bg: #007aff;
-  --btn-color: #fff;
-  --btn-radius: 18px;
-  --btn-padding: 0.5rem;
-  --btn-width: fit-content;
-  --btn-height: auto;
-  --btn-font-size: 1rem;
-  --btn-font-weight: 500;
-  --btn-transition: all 0.2s ease;
-  --btn-line-height: 1.5;
-  --btn-gap: 0.5rem;
-  --ripple-box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px;
-  --ripple-effect-bck: rgb(0 0 0 / 15%); */
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--btn-gap, 0.5rem);
-  font-family: inherit;
-  font-size: var(--btn-font-size, 1rem);
-  font-weight: var(--btn-font-weight, 500);
-  color: var(--btn-color, #fff);
-  background-color: var(--btn-bg, #007aff);
-  border: none;
-  border-radius: var(--btn-radius, 18px);
-  padding: var(--btn-padding, 0.5rem);
-  width: var(--btn-width, fit-content);
-  height: var(--btn-height, auto);
-  cursor: pointer;
-  transition: var(--btn-transition, all 0.2s ease);
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  line-height: var(--btn-line-height, 1.5);
-}
-
-.ext-btn:focus-visible {
-  outline: 2px solid var(--btn-bg, #007aff);
-  outline-offset: 2px;
-}
-
-.ext-btn:disabled,
-.ext-btn[aria-disabled="true"] {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.ext-btn:hover:not(:disabled):not([aria-disabled="true"]) {
-  filter: brightness(0.9);
-}
-
-.ext-btn:active:not(:disabled):not([aria-disabled="true"]) {
-  transform: scale(0.97);
-}
-
-/* Variants */
-.ext-btn--primary {
-  --btn-bg: #007aff;
-  --btn-color: #fff;
-}
-
-.ext-btn--secondary {
-  --btn-bg: #e5e5ea;
-  --btn-color: #111;
-}
-
-.ext-btn--outline {
-  --btn-bg: transparent;
-  --btn-color: #007aff;
-}
-
-.ext-btn--ghost {
-  --btn-bg: transparent;
-  --btn-color: #007aff;
-}
-
-.ext-btn--danger {
-  --btn-bg: #ff3b30;
-  --btn-color: #fff;
-}
-
-/* Loading state */
-.ext-btn--loading {
-  pointer-events: none;
-  opacity: 0.8;
-}
-
-/* Icon and label wrappers */
-.ext-btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1em;
-}
-
-.ext-btn-label {
-  display: inline-block;
-  white-space: nowrap;
-}
-
-/* Ripple effect */
-._ripple {
-  font-weight: var(--btn-font-weight, 500);
-  box-shadow: var(--ripple-box-shadow, rgb(100 100 111 / 20%) 0px 7px 29px 0px);
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-}
-
-.ripple {
-  background: var(--ripple-effect-bck, rgb(0 0 0 / 15%));
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple-animation 0.6s linear;
-  pointer-events: none;
-  transform-origin: center center;
-  will-change: transform, opacity;
-}
-
-@keyframes ripple-animation {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}