@geoinsight/react-components 0.5.3 → 0.6.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 +29 -4
- package/dist/cjs/index.js +25 -17
- package/dist/esm/index.css +29 -4
- package/dist/esm/index.js +25 -17
- package/package.json +2 -1
package/dist/cjs/index.css
CHANGED
|
@@ -27,6 +27,8 @@
|
|
|
27
27
|
--spacing-96: 6rem;
|
|
28
28
|
--spacing-128: 8rem;
|
|
29
29
|
|
|
30
|
+
--size-m: 12rem;
|
|
31
|
+
|
|
30
32
|
--color-black: #1d1d1d;
|
|
31
33
|
--color-white: #eee;
|
|
32
34
|
|
|
@@ -309,6 +311,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
|
|
|
309
311
|
display: flex;
|
|
310
312
|
flex-direction: column;
|
|
311
313
|
align-items: flex-start;
|
|
314
|
+
position: relative;
|
|
312
315
|
width: 100%;
|
|
313
316
|
}
|
|
314
317
|
|
|
@@ -319,16 +322,36 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
|
|
|
319
322
|
border: 2px solid var(--color-primary);
|
|
320
323
|
color: var(--color-black);
|
|
321
324
|
padding: var(--spacing-16) var(--spacing-24);
|
|
322
|
-
font-size:var(--font-size-16);
|
|
325
|
+
font-size: var(--font-size-16);
|
|
323
326
|
width: 100%;
|
|
324
327
|
}
|
|
325
328
|
|
|
329
|
+
.input--icon {
|
|
330
|
+
padding: var(--spacing-16) var(--spacing-40);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.input__icon {
|
|
334
|
+
/* padding-top: var(--spacing-8); */
|
|
335
|
+
padding: var(--spacing-16) var(--spacing-16);
|
|
336
|
+
position: absolute;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.input__icon--right {
|
|
340
|
+
right: 0;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.input__icon--left {
|
|
344
|
+
left: 0;
|
|
345
|
+
}
|
|
346
|
+
|
|
326
347
|
.input:enabled:hover {
|
|
327
|
-
|
|
348
|
+
box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
|
|
349
|
+
transition: var(--transition-box-shadow-cubic-bezier);
|
|
328
350
|
}
|
|
329
351
|
|
|
330
352
|
.input:focus {
|
|
331
|
-
|
|
353
|
+
box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
|
|
354
|
+
transition: var(--transition-box-shadow-cubic-bezier);
|
|
332
355
|
outline: none;
|
|
333
356
|
}
|
|
334
357
|
|
|
@@ -421,7 +444,9 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
|
|
|
421
444
|
}
|
|
422
445
|
|
|
423
446
|
.textarea__input:enabled:hover {
|
|
424
|
-
|
|
447
|
+
box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
|
|
448
|
+
transition: var(--transition-box-shadow-cubic-bezier);
|
|
449
|
+
|
|
425
450
|
}
|
|
426
451
|
|
|
427
452
|
.textarea__input:disabled {
|
package/dist/cjs/index.js
CHANGED
|
@@ -190,7 +190,7 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
|
|
|
190
190
|
function Form({ children, onSubmit, submitButton = {
|
|
191
191
|
label: "Submit",
|
|
192
192
|
}, ...rest }) {
|
|
193
|
-
const { handleSubmit, control, formState: { errors, isValid }, } = reactHookForm.useForm();
|
|
193
|
+
const { handleSubmit, setValue, control, formState: { errors, isValid }, } = reactHookForm.useForm();
|
|
194
194
|
const [result, setResult] = react.useState({
|
|
195
195
|
message: "",
|
|
196
196
|
isSuccess: false,
|
|
@@ -198,27 +198,35 @@ function Form({ children, onSubmit, submitButton = {
|
|
|
198
198
|
return (jsxRuntime.jsxs("form", { className: "form", onSubmit: handleSubmit(async (data) => await onSubmit(data, setResult)), ...rest, children: [react.Children.map(children, (child) => {
|
|
199
199
|
const { props: { name, error, isRequired, ...rest }, } = child;
|
|
200
200
|
return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
|
|
201
|
-
...(isRequired
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
errors[name]
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
201
|
+
...(isRequired
|
|
202
|
+
? {
|
|
203
|
+
required: error?.message || "Field is required",
|
|
204
|
+
}
|
|
205
|
+
: {}),
|
|
206
|
+
}, render: ({ field: { onBlur, ...restField } }) => {
|
|
207
|
+
return react.cloneElement(child, {
|
|
208
|
+
error: {
|
|
209
|
+
is: Object.keys(errors).length > 0 && !!errors[name],
|
|
210
|
+
message: errors &&
|
|
211
|
+
Object.keys(errors).length > 0 &&
|
|
212
|
+
errors[name]?.message,
|
|
213
|
+
},
|
|
214
|
+
setFormSelected: setValue,
|
|
215
|
+
onFormBlur: onBlur,
|
|
216
|
+
...restField,
|
|
217
|
+
...rest,
|
|
218
|
+
});
|
|
219
|
+
} }));
|
|
214
220
|
}), result.message && (jsxRuntime.jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsxRuntime.jsx(bs.BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsxRuntime.jsx(bs.BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsxRuntime.jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }));
|
|
215
221
|
}
|
|
216
222
|
|
|
217
|
-
function Input({
|
|
223
|
+
function Input({ inputClassName = "", classNameGroup = "", error = {
|
|
218
224
|
is: false,
|
|
219
225
|
message: "",
|
|
220
|
-
}, inputRef, styleGroup, placeholder = "Insert value",
|
|
221
|
-
return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "",
|
|
226
|
+
}, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
|
|
227
|
+
return (jsxRuntime.jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsxRuntime.jsx("label", { className: labelClass, children: label }), icon?.element && icon.position === "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsxRuntime.jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsxRuntime.jsx("div", { className: clsx("input__icon", "input__icon--right",
|
|
228
|
+
// `input__icon--${icon.position || "right"}`,
|
|
229
|
+
icon.className), children: icon.element })), error && error.is && (jsxRuntime.jsx("span", { className: "error", children: error.message }))] }));
|
|
222
230
|
}
|
|
223
231
|
|
|
224
232
|
function Loading({ img, children }) {
|
package/dist/esm/index.css
CHANGED
|
@@ -27,6 +27,8 @@
|
|
|
27
27
|
--spacing-96: 6rem;
|
|
28
28
|
--spacing-128: 8rem;
|
|
29
29
|
|
|
30
|
+
--size-m: 12rem;
|
|
31
|
+
|
|
30
32
|
--color-black: #1d1d1d;
|
|
31
33
|
--color-white: #eee;
|
|
32
34
|
|
|
@@ -309,6 +311,7 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
|
|
|
309
311
|
display: flex;
|
|
310
312
|
flex-direction: column;
|
|
311
313
|
align-items: flex-start;
|
|
314
|
+
position: relative;
|
|
312
315
|
width: 100%;
|
|
313
316
|
}
|
|
314
317
|
|
|
@@ -319,16 +322,36 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
|
|
|
319
322
|
border: 2px solid var(--color-primary);
|
|
320
323
|
color: var(--color-black);
|
|
321
324
|
padding: var(--spacing-16) var(--spacing-24);
|
|
322
|
-
font-size:var(--font-size-16);
|
|
325
|
+
font-size: var(--font-size-16);
|
|
323
326
|
width: 100%;
|
|
324
327
|
}
|
|
325
328
|
|
|
329
|
+
.input--icon {
|
|
330
|
+
padding: var(--spacing-16) var(--spacing-40);
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.input__icon {
|
|
334
|
+
/* padding-top: var(--spacing-8); */
|
|
335
|
+
padding: var(--spacing-16) var(--spacing-16);
|
|
336
|
+
position: absolute;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.input__icon--right {
|
|
340
|
+
right: 0;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.input__icon--left {
|
|
344
|
+
left: 0;
|
|
345
|
+
}
|
|
346
|
+
|
|
326
347
|
.input:enabled:hover {
|
|
327
|
-
|
|
348
|
+
box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
|
|
349
|
+
transition: var(--transition-box-shadow-cubic-bezier);
|
|
328
350
|
}
|
|
329
351
|
|
|
330
352
|
.input:focus {
|
|
331
|
-
|
|
353
|
+
box-shadow: 2px 6px 4px 0 var(--color-neutral-400);
|
|
354
|
+
transition: var(--transition-box-shadow-cubic-bezier);
|
|
332
355
|
outline: none;
|
|
333
356
|
}
|
|
334
357
|
|
|
@@ -421,7 +444,9 @@ transition: var(--transition-bg-cubic-bezier), var(--transition-box-shadow-cubic
|
|
|
421
444
|
}
|
|
422
445
|
|
|
423
446
|
.textarea__input:enabled:hover {
|
|
424
|
-
|
|
447
|
+
box-shadow: 4px 6px 4px 0 var(--color-neutral-400);
|
|
448
|
+
transition: var(--transition-box-shadow-cubic-bezier);
|
|
449
|
+
|
|
425
450
|
}
|
|
426
451
|
|
|
427
452
|
.textarea__input:disabled {
|
package/dist/esm/index.js
CHANGED
|
@@ -188,7 +188,7 @@ const AccordionContent = function AccordionContent({ children, label, toggle, })
|
|
|
188
188
|
function Form({ children, onSubmit, submitButton = {
|
|
189
189
|
label: "Submit",
|
|
190
190
|
}, ...rest }) {
|
|
191
|
-
const { handleSubmit, control, formState: { errors, isValid }, } = useForm();
|
|
191
|
+
const { handleSubmit, setValue, control, formState: { errors, isValid }, } = useForm();
|
|
192
192
|
const [result, setResult] = useState({
|
|
193
193
|
message: "",
|
|
194
194
|
isSuccess: false,
|
|
@@ -196,27 +196,35 @@ function Form({ children, onSubmit, submitButton = {
|
|
|
196
196
|
return (jsxs("form", { className: "form", onSubmit: handleSubmit(async (data) => await onSubmit(data, setResult)), ...rest, children: [Children.map(children, (child) => {
|
|
197
197
|
const { props: { name, error, isRequired, ...rest }, } = child;
|
|
198
198
|
return (jsx(Controller, { name: name, control: control, rules: {
|
|
199
|
-
...(isRequired
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
errors[name]
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
199
|
+
...(isRequired
|
|
200
|
+
? {
|
|
201
|
+
required: error?.message || "Field is required",
|
|
202
|
+
}
|
|
203
|
+
: {}),
|
|
204
|
+
}, render: ({ field: { onBlur, ...restField } }) => {
|
|
205
|
+
return cloneElement(child, {
|
|
206
|
+
error: {
|
|
207
|
+
is: Object.keys(errors).length > 0 && !!errors[name],
|
|
208
|
+
message: errors &&
|
|
209
|
+
Object.keys(errors).length > 0 &&
|
|
210
|
+
errors[name]?.message,
|
|
211
|
+
},
|
|
212
|
+
setFormSelected: setValue,
|
|
213
|
+
onFormBlur: onBlur,
|
|
214
|
+
...restField,
|
|
215
|
+
...rest,
|
|
216
|
+
});
|
|
217
|
+
} }));
|
|
212
218
|
}), result.message && (jsxs("div", { className: "form__message", children: [result.isSuccess ? (jsx(BsCheckCircleFill, { color: "var(--color-success)", size: 48 })) : (jsx(BsXCircleFill, { color: "var(--color-danger)", size: 48 })), result.message] })), jsx(Button, { type: "submit", disabled: !isValid, children: submitButton.label })] }));
|
|
213
219
|
}
|
|
214
220
|
|
|
215
|
-
function Input({
|
|
221
|
+
function Input({ inputClassName = "", classNameGroup = "", error = {
|
|
216
222
|
is: false,
|
|
217
223
|
message: "",
|
|
218
|
-
}, inputRef, styleGroup, placeholder = "Insert value",
|
|
219
|
-
return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "",
|
|
224
|
+
}, inputRef, styleGroup, placeholder = "Insert value", label, labelClass, icon, ...rest }) {
|
|
225
|
+
return (jsxs("div", { className: clsx("input-group", classNameGroup), style: styleGroup, children: [label && jsx("label", { className: labelClass, children: label }), icon?.element && icon.position === "left" && (jsx("div", { className: clsx("input__icon", "input__icon--left", icon.className), children: icon.element })), jsx("input", { ref: inputRef, className: clsx("input", error.is ? "input--error" : "", icon?.position === "left" && "input--icon", inputClassName), placeholder: placeholder, ...rest }), icon?.element && icon.position !== "left" && (jsx("div", { className: clsx("input__icon", "input__icon--right",
|
|
226
|
+
// `input__icon--${icon.position || "right"}`,
|
|
227
|
+
icon.className), children: icon.element })), error && error.is && (jsx("span", { className: "error", children: error.message }))] }));
|
|
220
228
|
}
|
|
221
229
|
|
|
222
230
|
function Loading({ img, children }) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geoinsight/react-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.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",
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
32
32
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
33
33
|
"@storybook/addon-actions": "^7.0.7",
|
|
34
|
+
"@storybook/addon-console": "^2.0.0",
|
|
34
35
|
"@storybook/addon-essentials": "^7.0.7",
|
|
35
36
|
"@storybook/addon-interactions": "^7.0.7",
|
|
36
37
|
"@storybook/addon-links": "^7.0.7",
|