@geoinsight/react-components 0.1.0 → 0.1.1
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.
- package/dist/cjs/index.css +154 -0
- package/dist/cjs/index.js +22 -0
- package/dist/esm/index.css +154 -0
- package/dist/esm/index.js +22 -1
- package/package.json +2 -1
- package/src/index.ts +3 -0
package/dist/cjs/index.css
CHANGED
|
@@ -1,3 +1,103 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
font-family: Poppins;
|
|
6
|
+
font-size: var(--font-size-16);
|
|
7
|
+
|
|
8
|
+
--font-size-10: 10px;
|
|
9
|
+
--font-size-12: 12px;
|
|
10
|
+
--font-size-14: 14px;
|
|
11
|
+
--font-size-16: 16px;
|
|
12
|
+
--font-size-18: 18px;
|
|
13
|
+
--font-size-20: 20px;
|
|
14
|
+
--font-size-24: 24px;
|
|
15
|
+
--font-size-32: 32px;
|
|
16
|
+
--font-size-40: 40px;
|
|
17
|
+
|
|
18
|
+
--spacing-4: 0.25rem;
|
|
19
|
+
--spacing-8: 0.5rem;
|
|
20
|
+
--spacing-16: 1rem;
|
|
21
|
+
--spacing-20: 1.25rem;
|
|
22
|
+
--spacing-24: 1.5rem;
|
|
23
|
+
--spacing-32: 2rem;
|
|
24
|
+
--spacing-40: 2.5rem;
|
|
25
|
+
--spacing-48: 3rem;
|
|
26
|
+
--spacing-64: 4rem;
|
|
27
|
+
--spacing-128: 8rem;
|
|
28
|
+
|
|
29
|
+
--color-black: #000000;
|
|
30
|
+
--color-white: #ffffff;
|
|
31
|
+
|
|
32
|
+
--color-neutral-200: #f2f2f2;
|
|
33
|
+
--color-neutral-300: #e0e0e0;
|
|
34
|
+
--color-neutral-400: #afafaf;
|
|
35
|
+
--color-neutral-500: #818181;
|
|
36
|
+
--color-neutral-600: #6c6c6c;
|
|
37
|
+
--color-neutral-700: #403b3a;
|
|
38
|
+
--color-neutral-800: #201e1d;
|
|
39
|
+
|
|
40
|
+
--color-success: #20e52f;
|
|
41
|
+
--color-danger: #e52f20;
|
|
42
|
+
|
|
43
|
+
--transition-bg-cubic-bezier: background-color 500ms
|
|
44
|
+
cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
45
|
+
--transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
46
|
+
--transition-text-decoration-cubic-bezier: text-decoration 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
47
|
+
--transition-box-shadow-cubic-bezier: box-shadow 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
[data-theme="dark"] {
|
|
53
|
+
--color-neutral-900: var(--color-black);
|
|
54
|
+
--color-neutral-100: var(--color-white);
|
|
55
|
+
--color-primary: var(--color-primary-500);
|
|
56
|
+
--color-secondary: var(--color-primary-600);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme="light"] {
|
|
60
|
+
--color-neutral-900: var(--color-white);
|
|
61
|
+
--color-neutral-100: var(--color-black);
|
|
62
|
+
--color-primary: var(--color-primary-600);
|
|
63
|
+
--color-secondary: var(--color-primary-500);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[palette-theme="water"] {
|
|
67
|
+
--color-primary-100: #d6efff;
|
|
68
|
+
--color-primary-200: #ade0ff;
|
|
69
|
+
--color-primary-300: #85d0ff;
|
|
70
|
+
--color-primary-400: #5cc0ff;
|
|
71
|
+
--color-primary-500: #33b1ff;
|
|
72
|
+
--color-primary-600: #009eff;
|
|
73
|
+
--color-primary-700: #008ae0;
|
|
74
|
+
--color-primary-800: #0071b8;
|
|
75
|
+
--color-primary-900: #00588f;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[palette-theme="earth"]{
|
|
79
|
+
--color-primary-100: #f6e3cb;
|
|
80
|
+
--color-primary-200: #edc897;
|
|
81
|
+
--color-primary-300: #eabe86;
|
|
82
|
+
--color-primary-400: #e3ac63;
|
|
83
|
+
--color-primary-500: #dd9940;
|
|
84
|
+
--color-primary-600: #ca8323;
|
|
85
|
+
--color-primary-700: #ad701f;
|
|
86
|
+
--color-primary-800: #8b5918;
|
|
87
|
+
--color-primary-900: #684312;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
[palette-theme="forest"] {
|
|
91
|
+
--color-primary-100: #bee8b0;
|
|
92
|
+
--color-primary-200: #a4df90;
|
|
93
|
+
--color-primary-300: #8ad671;
|
|
94
|
+
--color-primary-400: #70cd51;
|
|
95
|
+
--color-primary-500: #54b435;
|
|
96
|
+
--color-primary-600: #4a9e2e;
|
|
97
|
+
--color-primary-700: #3b7e25;
|
|
98
|
+
--color-primary-800: #2c5f1c;
|
|
99
|
+
--color-primary-900: #1e3f12;
|
|
100
|
+
}
|
|
1
101
|
.button {
|
|
2
102
|
align-items: center;
|
|
3
103
|
border-radius: var(--spacing-32);
|
|
@@ -109,3 +209,57 @@
|
|
|
109
209
|
font-size: 12px;
|
|
110
210
|
color: var(--color-danger);
|
|
111
211
|
}
|
|
212
|
+
|
|
213
|
+
.textarea {
|
|
214
|
+
margin-bottom: var(--spacing-8);
|
|
215
|
+
position: relative;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.textarea__input {
|
|
219
|
+
box-sizing: border-box;
|
|
220
|
+
border-radius: var(--spacing-8);
|
|
221
|
+
border: 2px solid var(--color-primary);
|
|
222
|
+
cursor: text;
|
|
223
|
+
color: var(--color-black);
|
|
224
|
+
outline: none;
|
|
225
|
+
padding: var(--spacing-8) var(--spacing-16);
|
|
226
|
+
resize: vertical;
|
|
227
|
+
width: 100%;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.textarea__input:hover {
|
|
231
|
+
border: 3px solid var(--color-primary-700);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.textarea__button {
|
|
235
|
+
background: var(--color-primary);
|
|
236
|
+
border: 2px solid var(--color-secondary);
|
|
237
|
+
box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
|
|
238
|
+
border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
|
|
239
|
+
bottom: 0;
|
|
240
|
+
cursor: pointer;
|
|
241
|
+
left: 0;
|
|
242
|
+
padding-bottom: -20px;
|
|
243
|
+
position: absolute;
|
|
244
|
+
width: 100%;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.textarea__button > svg {
|
|
248
|
+
color: var(--color-neutral-100);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.textarea__button:disabled {
|
|
252
|
+
cursor: unset;
|
|
253
|
+
opacity: 0.5;
|
|
254
|
+
pointer-events: none;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.textarea__button:hover {
|
|
258
|
+
background: var(--color-secondary);
|
|
259
|
+
color: var(--color-neutral-100);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.textarea__button--show {
|
|
263
|
+
background: var(--color-primary-700);
|
|
264
|
+
color: var(--color-neutral-100);
|
|
265
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var tb = require('react-icons/tb');
|
|
5
7
|
|
|
6
8
|
function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", ...rest }) {
|
|
7
9
|
return as === "link" ? (jsxRuntime.jsxs("a", { ...(isNewWindow && { target: "_blank" }), className: clsx(className, "button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxRuntime.jsxs("button", { className: clsx(className, "button", `button__${mode}`, `button__${size}`), ...rest, children: [children, icon] }));
|
|
@@ -11,5 +13,25 @@ function Input({ className = "", classNameGroup = "", errorMessage = "", inputRe
|
|
|
11
13
|
return (jsxRuntime.jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsxRuntime.jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsxRuntime.jsx("span", { className: "error", children: errorMessage })] }));
|
|
12
14
|
}
|
|
13
15
|
|
|
16
|
+
function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
|
|
17
|
+
const ref = react.useRef();
|
|
18
|
+
const [isShow, setIsShow] = react.useState(false);
|
|
19
|
+
const handleClickToggle = () => {
|
|
20
|
+
if (ref && ref.current) {
|
|
21
|
+
if (isShow) {
|
|
22
|
+
ref.current.style.height = hideHeight;
|
|
23
|
+
}
|
|
24
|
+
else {
|
|
25
|
+
ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
|
|
26
|
+
}
|
|
27
|
+
setIsShow((prev) => !prev);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
return (jsxRuntime.jsxs("div", { className: clsx("textarea", className), style: style, children: [jsxRuntime.jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
|
|
31
|
+
height: hasToggleButton ? hideHeight : showHeight,
|
|
32
|
+
}, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsxRuntime.jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsxRuntime.jsx(tb.TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
|
|
33
|
+
}
|
|
34
|
+
|
|
14
35
|
exports.Button = Button;
|
|
15
36
|
exports.Input = Input;
|
|
37
|
+
exports.TextArea = TextArea;
|
package/dist/esm/index.css
CHANGED
|
@@ -1,3 +1,103 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
font-family: Poppins;
|
|
6
|
+
font-size: var(--font-size-16);
|
|
7
|
+
|
|
8
|
+
--font-size-10: 10px;
|
|
9
|
+
--font-size-12: 12px;
|
|
10
|
+
--font-size-14: 14px;
|
|
11
|
+
--font-size-16: 16px;
|
|
12
|
+
--font-size-18: 18px;
|
|
13
|
+
--font-size-20: 20px;
|
|
14
|
+
--font-size-24: 24px;
|
|
15
|
+
--font-size-32: 32px;
|
|
16
|
+
--font-size-40: 40px;
|
|
17
|
+
|
|
18
|
+
--spacing-4: 0.25rem;
|
|
19
|
+
--spacing-8: 0.5rem;
|
|
20
|
+
--spacing-16: 1rem;
|
|
21
|
+
--spacing-20: 1.25rem;
|
|
22
|
+
--spacing-24: 1.5rem;
|
|
23
|
+
--spacing-32: 2rem;
|
|
24
|
+
--spacing-40: 2.5rem;
|
|
25
|
+
--spacing-48: 3rem;
|
|
26
|
+
--spacing-64: 4rem;
|
|
27
|
+
--spacing-128: 8rem;
|
|
28
|
+
|
|
29
|
+
--color-black: #000000;
|
|
30
|
+
--color-white: #ffffff;
|
|
31
|
+
|
|
32
|
+
--color-neutral-200: #f2f2f2;
|
|
33
|
+
--color-neutral-300: #e0e0e0;
|
|
34
|
+
--color-neutral-400: #afafaf;
|
|
35
|
+
--color-neutral-500: #818181;
|
|
36
|
+
--color-neutral-600: #6c6c6c;
|
|
37
|
+
--color-neutral-700: #403b3a;
|
|
38
|
+
--color-neutral-800: #201e1d;
|
|
39
|
+
|
|
40
|
+
--color-success: #20e52f;
|
|
41
|
+
--color-danger: #e52f20;
|
|
42
|
+
|
|
43
|
+
--transition-bg-cubic-bezier: background-color 500ms
|
|
44
|
+
cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
45
|
+
--transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
46
|
+
--transition-text-decoration-cubic-bezier: text-decoration 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
47
|
+
--transition-box-shadow-cubic-bezier: box-shadow 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
[data-theme="dark"] {
|
|
53
|
+
--color-neutral-900: var(--color-black);
|
|
54
|
+
--color-neutral-100: var(--color-white);
|
|
55
|
+
--color-primary: var(--color-primary-500);
|
|
56
|
+
--color-secondary: var(--color-primary-600);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme="light"] {
|
|
60
|
+
--color-neutral-900: var(--color-white);
|
|
61
|
+
--color-neutral-100: var(--color-black);
|
|
62
|
+
--color-primary: var(--color-primary-600);
|
|
63
|
+
--color-secondary: var(--color-primary-500);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[palette-theme="water"] {
|
|
67
|
+
--color-primary-100: #d6efff;
|
|
68
|
+
--color-primary-200: #ade0ff;
|
|
69
|
+
--color-primary-300: #85d0ff;
|
|
70
|
+
--color-primary-400: #5cc0ff;
|
|
71
|
+
--color-primary-500: #33b1ff;
|
|
72
|
+
--color-primary-600: #009eff;
|
|
73
|
+
--color-primary-700: #008ae0;
|
|
74
|
+
--color-primary-800: #0071b8;
|
|
75
|
+
--color-primary-900: #00588f;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
[palette-theme="earth"]{
|
|
79
|
+
--color-primary-100: #f6e3cb;
|
|
80
|
+
--color-primary-200: #edc897;
|
|
81
|
+
--color-primary-300: #eabe86;
|
|
82
|
+
--color-primary-400: #e3ac63;
|
|
83
|
+
--color-primary-500: #dd9940;
|
|
84
|
+
--color-primary-600: #ca8323;
|
|
85
|
+
--color-primary-700: #ad701f;
|
|
86
|
+
--color-primary-800: #8b5918;
|
|
87
|
+
--color-primary-900: #684312;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
[palette-theme="forest"] {
|
|
91
|
+
--color-primary-100: #bee8b0;
|
|
92
|
+
--color-primary-200: #a4df90;
|
|
93
|
+
--color-primary-300: #8ad671;
|
|
94
|
+
--color-primary-400: #70cd51;
|
|
95
|
+
--color-primary-500: #54b435;
|
|
96
|
+
--color-primary-600: #4a9e2e;
|
|
97
|
+
--color-primary-700: #3b7e25;
|
|
98
|
+
--color-primary-800: #2c5f1c;
|
|
99
|
+
--color-primary-900: #1e3f12;
|
|
100
|
+
}
|
|
1
101
|
.button {
|
|
2
102
|
align-items: center;
|
|
3
103
|
border-radius: var(--spacing-32);
|
|
@@ -109,3 +209,57 @@
|
|
|
109
209
|
font-size: 12px;
|
|
110
210
|
color: var(--color-danger);
|
|
111
211
|
}
|
|
212
|
+
|
|
213
|
+
.textarea {
|
|
214
|
+
margin-bottom: var(--spacing-8);
|
|
215
|
+
position: relative;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.textarea__input {
|
|
219
|
+
box-sizing: border-box;
|
|
220
|
+
border-radius: var(--spacing-8);
|
|
221
|
+
border: 2px solid var(--color-primary);
|
|
222
|
+
cursor: text;
|
|
223
|
+
color: var(--color-black);
|
|
224
|
+
outline: none;
|
|
225
|
+
padding: var(--spacing-8) var(--spacing-16);
|
|
226
|
+
resize: vertical;
|
|
227
|
+
width: 100%;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.textarea__input:hover {
|
|
231
|
+
border: 3px solid var(--color-primary-700);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.textarea__button {
|
|
235
|
+
background: var(--color-primary);
|
|
236
|
+
border: 2px solid var(--color-secondary);
|
|
237
|
+
box-shadow: 2px 4px 2px 1px rgba(0, 0, 0, 0.25);
|
|
238
|
+
border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
|
|
239
|
+
bottom: 0;
|
|
240
|
+
cursor: pointer;
|
|
241
|
+
left: 0;
|
|
242
|
+
padding-bottom: -20px;
|
|
243
|
+
position: absolute;
|
|
244
|
+
width: 100%;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.textarea__button > svg {
|
|
248
|
+
color: var(--color-neutral-100);
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.textarea__button:disabled {
|
|
252
|
+
cursor: unset;
|
|
253
|
+
opacity: 0.5;
|
|
254
|
+
pointer-events: none;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.textarea__button:hover {
|
|
258
|
+
background: var(--color-secondary);
|
|
259
|
+
color: var(--color-neutral-100);
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.textarea__button--show {
|
|
263
|
+
background: var(--color-primary-700);
|
|
264
|
+
color: var(--color-neutral-100);
|
|
265
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
+
import { useRef, useState } from 'react';
|
|
4
|
+
import { TbArrowsDiagonal2 } from 'react-icons/tb';
|
|
3
5
|
|
|
4
6
|
function Button({ children = "Click me", className = "", icon = undefined, isNewWindow = false, mode = "primary", size = "medium", as = "button", ...rest }) {
|
|
5
7
|
return as === "link" ? (jsxs("a", { ...(isNewWindow && { target: "_blank" }), className: clsx(className, "button", mode === "secondary" ? `button button__${mode}` : "button__link", `button__${size}`), ...rest, children: [children, icon] })) : (jsxs("button", { className: clsx(className, "button", `button__${mode}`, `button__${size}`), ...rest, children: [children, icon] }));
|
|
@@ -9,4 +11,23 @@ function Input({ className = "", classNameGroup = "", errorMessage = "", inputRe
|
|
|
9
11
|
return (jsxs("div", { className: `input-group ${classNameGroup}`, style: styleGroup, children: [jsx("input", { ref: inputRef, className: `input ${errorMessage ? "input--error" : ""} ${className}`, ...rest }), errorMessage && jsx("span", { className: "error", children: errorMessage })] }));
|
|
10
12
|
}
|
|
11
13
|
|
|
12
|
-
|
|
14
|
+
function TextArea({ className = "", disabled = true, hasToggleButton = true, hideHeight = "5rem", placeholder = "", showHeight = "10rem", style = {}, textareaClassName = "", ...rest }) {
|
|
15
|
+
const ref = useRef();
|
|
16
|
+
const [isShow, setIsShow] = useState(false);
|
|
17
|
+
const handleClickToggle = () => {
|
|
18
|
+
if (ref && ref.current) {
|
|
19
|
+
if (isShow) {
|
|
20
|
+
ref.current.style.height = hideHeight;
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
ref.current.style.height = showHeight; //(48 + ref.current.scrollHeight) + 'px';
|
|
24
|
+
}
|
|
25
|
+
setIsShow((prev) => !prev);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
return (jsxs("div", { className: clsx("textarea", className), style: style, children: [jsx("textarea", { ref: ref, className: clsx("textarea__input", textareaClassName), style: {
|
|
29
|
+
height: hasToggleButton ? hideHeight : showHeight,
|
|
30
|
+
}, placeholder: placeholder, disabled: disabled, ...rest }), hasToggleButton && (jsx("button", { className: clsx("textarea__button", isShow && "textarea__button--show"), onClick: handleClickToggle, disabled: disabled, children: jsx(TbArrowsDiagonal2, { size: "1.5rem" }) }))] }));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { Button, Input, TextArea };
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoinsight/react-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "This library is the main UI component library for geoinsight",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
7
8
|
"author": "Geoinsight",
|
|
8
9
|
"license": "MIT",
|
|
9
10
|
"scripts": {
|