@ultraviolet/form 3.17.7 → 4.0.0-beta.0
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/README.md
CHANGED
|
@@ -8,7 +8,7 @@ It is using [React Hook Form](https://react-hook-form.com/) under the hood.
|
|
|
8
8
|
## Get Started
|
|
9
9
|
|
|
10
10
|
```sh
|
|
11
|
-
$ pnpm add @ultraviolet/form @emotion/react @emotion/styled
|
|
11
|
+
$ pnpm add @ultraviolet/ui @ultraviolet/form @emotion/react @emotion/styled
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
### Usage
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
4
|
const jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
5
|
+
const icons = require("@ultraviolet/icons");
|
|
5
6
|
const ui = require("@ultraviolet/ui");
|
|
6
7
|
const reactHookForm = require("react-hook-form");
|
|
7
8
|
const index = require("../TextInputFieldV2/index.cjs");
|
|
@@ -28,13 +29,12 @@ const KeyValueField = ({
|
|
|
28
29
|
fields.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
|
|
29
30
|
/* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
|
|
30
31
|
/* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
|
|
31
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readOnly, "data-testid": `remove-button-${index$1}`,
|
|
32
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readOnly, "data-testid": `remove-button-${index$1}`, variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1), children: /* @__PURE__ */ jsxRuntime.jsx(icons.DeleteIcon, {}) })
|
|
32
33
|
] }, field.id)) }) : null,
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.
|
|
34
|
+
/* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
34
35
|
ui.Button,
|
|
35
36
|
{
|
|
36
37
|
"data-testid": "add-button",
|
|
37
|
-
icon: "plus",
|
|
38
38
|
variant: "outlined",
|
|
39
39
|
sentiment: "primary",
|
|
40
40
|
fullWidth: addButton.fullWidth,
|
|
@@ -44,7 +44,10 @@ const KeyValueField = ({
|
|
|
44
44
|
key: "",
|
|
45
45
|
value: ""
|
|
46
46
|
}),
|
|
47
|
-
children:
|
|
47
|
+
children: [
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx(icons.PlusIcon, {}),
|
|
49
|
+
addButton.name
|
|
50
|
+
]
|
|
48
51
|
}
|
|
49
52
|
) })
|
|
50
53
|
] });
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
|
|
3
|
+
import { DeleteIcon, PlusIcon } from "@ultraviolet/icons";
|
|
3
4
|
import { Stack, Row, Button } from "@ultraviolet/ui";
|
|
4
5
|
import { useFieldArray } from "react-hook-form";
|
|
5
6
|
import { TextInputField } from "../TextInputFieldV2/index.js";
|
|
@@ -26,13 +27,12 @@ const KeyValueField = ({
|
|
|
26
27
|
fields.length > 0 ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
|
|
27
28
|
/* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
|
|
28
29
|
/* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
|
|
29
|
-
/* @__PURE__ */ jsx(Button, { disabled: readOnly, "data-testid": `remove-button-${index}`,
|
|
30
|
+
/* @__PURE__ */ jsx(Button, { disabled: readOnly, "data-testid": `remove-button-${index}`, variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index), children: /* @__PURE__ */ jsx(DeleteIcon, {}) })
|
|
30
31
|
] }, field.id)) }) : null,
|
|
31
|
-
/* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */
|
|
32
|
+
/* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxs(
|
|
32
33
|
Button,
|
|
33
34
|
{
|
|
34
35
|
"data-testid": "add-button",
|
|
35
|
-
icon: "plus",
|
|
36
36
|
variant: "outlined",
|
|
37
37
|
sentiment: "primary",
|
|
38
38
|
fullWidth: addButton.fullWidth,
|
|
@@ -42,7 +42,10 @@ const KeyValueField = ({
|
|
|
42
42
|
key: "",
|
|
43
43
|
value: ""
|
|
44
44
|
}),
|
|
45
|
-
children:
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ jsx(PlusIcon, {}),
|
|
47
|
+
addButton.name
|
|
48
|
+
]
|
|
46
49
|
}
|
|
47
50
|
) })
|
|
48
51
|
] });
|
|
@@ -8,8 +8,6 @@ const Submit = ({
|
|
|
8
8
|
children,
|
|
9
9
|
className,
|
|
10
10
|
disabled = false,
|
|
11
|
-
icon,
|
|
12
|
-
iconPosition,
|
|
13
11
|
size,
|
|
14
12
|
variant = "filled",
|
|
15
13
|
sentiment = "primary",
|
|
@@ -22,6 +20,6 @@ const Submit = ({
|
|
|
22
20
|
isValid
|
|
23
21
|
} = reactHookForm.useFormState();
|
|
24
22
|
const isDisabled = disabled || isSubmitting || !isValid;
|
|
25
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className, disabled: isDisabled,
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { className, disabled: isDisabled, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
|
|
26
24
|
};
|
|
27
25
|
exports.Submit = Submit;
|
|
@@ -4,8 +4,6 @@ type SubmitProps = {
|
|
|
4
4
|
children?: ReactNode;
|
|
5
5
|
className?: string;
|
|
6
6
|
disabled?: boolean;
|
|
7
|
-
icon?: ComponentProps<typeof Button>['icon'];
|
|
8
|
-
iconPosition?: ComponentProps<typeof Button>['iconPosition'];
|
|
9
7
|
size?: ComponentProps<typeof Button>['size'];
|
|
10
8
|
variant?: ComponentProps<typeof Button>['variant'];
|
|
11
9
|
sentiment?: ComponentProps<typeof Button>['sentiment'];
|
|
@@ -13,5 +11,5 @@ type SubmitProps = {
|
|
|
13
11
|
fullWidth?: ComponentProps<typeof Button>['fullWidth'];
|
|
14
12
|
onClick?: ComponentProps<typeof Button>['onClick'];
|
|
15
13
|
};
|
|
16
|
-
export declare const Submit: ({ children, className, disabled,
|
|
14
|
+
export declare const Submit: ({ children, className, disabled, size, variant, sentiment, tooltip, fullWidth, onClick, }: SubmitProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
15
|
export {};
|
|
@@ -6,8 +6,6 @@ const Submit = ({
|
|
|
6
6
|
children,
|
|
7
7
|
className,
|
|
8
8
|
disabled = false,
|
|
9
|
-
icon,
|
|
10
|
-
iconPosition,
|
|
11
9
|
size,
|
|
12
10
|
variant = "filled",
|
|
13
11
|
sentiment = "primary",
|
|
@@ -20,7 +18,7 @@ const Submit = ({
|
|
|
20
18
|
isValid
|
|
21
19
|
} = useFormState();
|
|
22
20
|
const isDisabled = disabled || isSubmitting || !isValid;
|
|
23
|
-
return /* @__PURE__ */ jsx(Button, { className, disabled: isDisabled,
|
|
21
|
+
return /* @__PURE__ */ jsx(Button, { className, disabled: isDisabled, isLoading: isSubmitting, size, type: "submit", variant, sentiment, tooltip, fullWidth, onClick, children });
|
|
24
22
|
};
|
|
25
23
|
export {
|
|
26
24
|
Submit
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ultraviolet/form",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0-beta.0",
|
|
4
4
|
"description": "Ultraviolet Form",
|
|
5
5
|
"homepage": "https://github.com/scaleway/ultraviolet#readme",
|
|
6
6
|
"repository": {
|
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
"@emotion/react": "11.14.0",
|
|
55
55
|
"@emotion/styled": "11.14.0",
|
|
56
56
|
"react": "18.x || 19.x",
|
|
57
|
-
"react-dom": "18.x || 19.x"
|
|
57
|
+
"react-dom": "18.x || 19.x",
|
|
58
|
+
"@ultraviolet/ui": "2.0.0-beta.0"
|
|
58
59
|
},
|
|
59
60
|
"devDependencies": {
|
|
60
61
|
"@babel/core": "7.26.10",
|
|
@@ -65,14 +66,15 @@
|
|
|
65
66
|
"@types/react-dom": "19.0.4",
|
|
66
67
|
"react": "19.0.0",
|
|
67
68
|
"react-dom": "19.0.0",
|
|
69
|
+
"@ultraviolet/ui": "2.0.0-beta.0",
|
|
68
70
|
"@utils/test": "0.0.1"
|
|
69
71
|
},
|
|
70
72
|
"dependencies": {
|
|
71
73
|
"@babel/runtime": "7.27.1",
|
|
72
74
|
"react-hook-form": "7.55.0",
|
|
73
75
|
"react-select": "5.10.0",
|
|
74
|
-
"@ultraviolet/
|
|
75
|
-
"@ultraviolet/themes": "
|
|
76
|
+
"@ultraviolet/icons": "4.0.0-beta.0",
|
|
77
|
+
"@ultraviolet/themes": "2.0.0-beta.0"
|
|
76
78
|
},
|
|
77
79
|
"scripts": {
|
|
78
80
|
"build:profile": "npx vite-bundle-visualizer -c vite.config.ts",
|