ehscan-react-components 0.1.40 → 0.1.42

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +79 -0
  2. package/dist/AddBox.d.ts +1 -0
  3. package/dist/AddBox.js +2 -2
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -8,6 +8,85 @@
8
8
  - useChangeAddBox.tsx
9
9
  - css changes on vars can be done in parent class
10
10
 
11
+ # Usage
12
+ ## AddBox
13
+
14
+ 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.
15
+
16
+ The component is fully controlled — the parent manages the state and receives updates via the onChange callback.
17
+
18
+ ![AddBox Example](./src/images/AddBox.png)
19
+
20
+ ### Implementation
21
+
22
+ ```jsx
23
+ import { useEffect, useState } from "react";
24
+ import { AddBox, useChangeAddBox } from 'ehscan-react-components';
25
+
26
+ const Elements = () => {
27
+
28
+ const [inValue, setInValue] = useState({
29
+ add: [
30
+ { id: 0, title: "first Entry" },
31
+ { id: 1, title: "second Entry" },
32
+ { id: 2, title: "last Entry" }
33
+ ]
34
+ });
35
+
36
+ useEffect(() => {
37
+ console.log(inValue); //use ValueChanges on save
38
+ },[inValue])
39
+
40
+ const changeAddBox = useChangeAddBox(inValue, setInValue, "add"); //change on specific tag
41
+
42
+ return (
43
+ <>
44
+ <div className="element-wrapper"> {/* ✏️ Put custom styling overrides here */}
45
+ <AddBox title="Element-Title" value={inValue.add} onChange={(value, id) => changeAddBox(value, id)} />
46
+ </div>
47
+ </>
48
+ );
49
+ }
50
+
51
+ export default Elements;
52
+ ```
53
+
54
+ ### Styling
55
+
56
+ CSS Variables for AddBox
57
+
58
+ | Variable | Default | Applies To / Description |
59
+ | ----------------------------------------------- | --------------------- | ---------------------------------------------- |
60
+ | `--ext-add-inputbox-border-radius` | `10px` | Border radius of the outer AddBox container |
61
+ | `--ext-add-inputbox-border` | `2px solid white` | Border of the AddBox container |
62
+ | `--ext-add-inputbox-title-top` | `-15px` | Top position of the title row |
63
+ | `--ext-add-inputbox-plus-svg-stroke` | `white` | Stroke color of the “plus” SVG lines |
64
+ | `--ext-add-inputbox-plus-svg-strokeWidth` | `3` | Stroke width of the “plus” SVG lines |
65
+ | `--ext-add-inputbox-plus-bck-clr` | `lightblue` | Background color of the plus-wrapper container |
66
+ | `--ext-add-inputbox-plus-padding` | `7px` | Horizontal padding inside plus-wrapper |
67
+ | `--ext-add-inputbox-title-plus-margin-right` | `15px` | Margin-right of the plus wrapper |
68
+ | `--ext-add-inputbox-title-plus-bck-clr` | `transparent` | Background color of the plus button |
69
+ | `--ext-add-inputbox-title-plus-border-radius` | `50px` | Border radius of the plus button |
70
+ | `--ext-add-inputbox-title-plus-h` | `25px` | Height of the plus button |
71
+ | `--ext-add-inputbox-title-plus-w` | `25px` | Width of the plus button |
72
+ | `--ext-add-inputbox-title-plus-border` | `2px solid white` | Border of the plus button |
73
+ | `--ext-add-inputbox-title-plus-bck-clr-hvr` | `lightgray` | Background color of plus button on hover |
74
+ | `--ext-add-inputbox-txt-margin-left` | `10px` | Margin-left of the title text |
75
+ | `--ext-add-inputbox-txt-bck-clr` | `lightblue` | Background color of the title text |
76
+ | `--ext-add-inputbox-txt-clr` | `black` | Text color of the title text |
77
+ | `--ext-add-inputbox-txt-plus-h` | `20px` | Height of the title text container |
78
+ | `--ext-add-inputbox-body-padding` | `20px 10px 10px 10px` | Padding for the AddBox body |
79
+ | `--ext-add-content-row-height` | `30px` | Height of each row in the AddBox |
80
+ | `--ext-add-content-row-bck-clr` | `white` | Background color of each row |
81
+ | `--ext-add-content-row-border-radius` | `50px` | Border radius of each row |
82
+ | `--ext-add-content-row-hover-bck-clr` | `whitesmoke` | Background color of row on hover |
83
+ | `--tag-erase-w` | `25px` | Width of the row delete button |
84
+ | `--tag-erase-h` | `25px` | Height of the row delete button |
85
+ | `--ext-addbox-textarea-tag-erase-hover-bck-clr` | `darkgray` | Background color of the delete button on hover |
86
+ | `--ext-addbox-input-focus-border` | `1px dashed darkgrey` | Border of the input on focus |
87
+
88
+
89
+
11
90
  # Styling
12
91
 
13
92
  - TextAreaDropDown
package/dist/AddBox.d.ts CHANGED
@@ -5,6 +5,7 @@ interface Entry {
5
5
  title: string;
6
6
  }
7
7
  interface Props {
8
+ title: string;
8
9
  value: Entry[];
9
10
  onChange: (value: string | Entry[], id?: number) => void;
10
11
  }
package/dist/AddBox.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import './style/addbox.css';
3
- export const AddBox = ({ value, onChange }) => {
3
+ export const AddBox = ({ title, value, onChange }) => {
4
4
  const closeBtn = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }));
5
5
  const plusBtn = () => (_jsxs("svg", { className: "ext-add-inputbox-plus-svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }));
6
6
  const addRow = () => onChange([...value, { id: Date.now(), title: "" }]);
7
7
  const removeRow = (id) => onChange(value.filter((entry) => entry.id !== id));
8
8
  const changeTxt = (id, newTitle) => onChange(newTitle, id);
9
9
  const btnRow = (item) => (_jsxs("div", { className: "ext-add-content-row", children: [_jsx("div", { className: "ext-add-content-row-bullet", children: "\u2022" }), _jsx("input", { id: `inputAddBox-${item.id}`, className: "ext-addbox-input", type: "text", placeholder: "...", value: item.title, onChange: (e) => changeTxt(item.id, e.target.value), spellCheck: false }), _jsx("div", { className: "ext-addbox-textarea-tag-erase", onClick: () => removeRow(item.id), children: closeBtn() })] }, item.id));
10
- return (_jsxs("div", { className: "ext-add-inputbox", children: [_jsxs("div", { className: "ext-add-inputbox-title", children: [_jsx("div", { className: "ext-add-inputbox-title-txt", children: "title" }), _jsx("div", { className: "ext-add-inputbox-title-plus-wrapper", children: _jsx("div", { className: "ext-add-inputbox-title-plus", onClick: addRow, children: plusBtn() }) })] }), _jsx("div", { className: "ext-add-inputbox-body", children: value.map((item) => btnRow(item)) })] }));
10
+ return (_jsxs("div", { className: "ext-add-inputbox", children: [_jsxs("div", { className: "ext-add-inputbox-title", children: [_jsx("div", { className: "ext-add-inputbox-title-txt", children: title }), _jsx("div", { className: "ext-add-inputbox-title-plus-wrapper", children: _jsx("div", { className: "ext-add-inputbox-title-plus", onClick: addRow, children: plusBtn() }) })] }), _jsx("div", { className: "ext-add-inputbox-body", children: value.map((item) => btnRow(item)) })] }));
11
11
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ehscan-react-components",
3
- "version": "0.1.40",
3
+ "version": "0.1.42",
4
4
  "description": "components",
5
5
  "main": "dist/Components.js",
6
6
  "types": "dist/Components.d.ts",