@nolwenture/formik-jsonschema-form 0.26.1 → 0.26.2

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 (73) hide show
  1. package/dist/Form.js +3 -3
  2. package/dist/Form.stories.js +9 -32
  3. package/dist/FormEditor.js +3 -12
  4. package/dist/FormPdf.js +3 -3
  5. package/dist/FormPdf.stories.js +7 -30
  6. package/dist/fields/AnyField.js +3 -3
  7. package/dist/fields/ArrayField.js +9 -9
  8. package/dist/fields/BooleanField.js +6 -3
  9. package/dist/fields/DateField.js +1 -1
  10. package/dist/fields/FileUploadField.js +9 -18
  11. package/dist/fields/MultipleChoiceField.js +2 -2
  12. package/dist/fields/NullField.js +1 -1
  13. package/dist/fields/NumberField.js +4 -2
  14. package/dist/fields/ObjectField.js +11 -23
  15. package/dist/fields/RadioField.js +1 -1
  16. package/dist/fields/SchemaField.js +6 -2
  17. package/dist/fields/SearchMultiTagSelectField.js +1 -1
  18. package/dist/fields/SearchableSelectField.js +19 -25
  19. package/dist/fields/StringField.js +11 -9
  20. package/dist/fields/TextAreaField.js +1 -1
  21. package/dist/fields/ToggleField.js +1 -1
  22. package/dist/fields/stories/AnyField.stories.js +22 -31
  23. package/dist/fields/stories/ArrayField.stories.js +64 -73
  24. package/dist/fields/stories/BooleanField.stories.js +6 -15
  25. package/dist/fields/stories/DateField.stories.js +4 -13
  26. package/dist/fields/stories/FileUploadField.stories.js +9 -18
  27. package/dist/fields/stories/MultipleChoiceField.stories.js +24 -33
  28. package/dist/fields/stories/NullField.stories.js +3 -12
  29. package/dist/fields/stories/NumberField.stories.js +4 -13
  30. package/dist/fields/stories/ObjectField.stories.js +11 -20
  31. package/dist/fields/stories/RadioField.stories.js +8 -17
  32. package/dist/fields/stories/SchemaField.stories.js +24 -17
  33. package/dist/fields/stories/SearchMultiTagSelectField.stories.js +8 -17
  34. package/dist/fields/stories/StringField.stories.js +17 -26
  35. package/dist/fields/stories/TextAreaField.stories.js +4 -13
  36. package/dist/fields/stories/ToggleField.stories.js +6 -15
  37. package/dist/hooks/useExtractUiSchema.js +13 -16
  38. package/dist/pdfFields/AnyField.js +3 -3
  39. package/dist/pdfFields/ArrayField.js +3 -4
  40. package/dist/pdfFields/BooleanField.js +1 -1
  41. package/dist/pdfFields/DateField.js +4 -2
  42. package/dist/pdfFields/EJSField.js +1 -2
  43. package/dist/pdfFields/MultipleChoiceField.js +2 -3
  44. package/dist/pdfFields/NullField.js +1 -1
  45. package/dist/pdfFields/NumberField.js +4 -2
  46. package/dist/pdfFields/ObjectField.js +7 -19
  47. package/dist/pdfFields/RadioField.js +7 -2
  48. package/dist/pdfFields/SchemaField.js +6 -2
  49. package/dist/pdfFields/SearchMultiTagSelectField.js +1 -1
  50. package/dist/pdfFields/SearchableSelectField.js +1 -1
  51. package/dist/pdfFields/StringField.js +2 -3
  52. package/dist/pdfFields/TextAreaField.js +1 -1
  53. package/dist/pdfFields/ToggleField.js +7 -2
  54. package/dist/pdfTemplates/ArrayFieldTemplate.js +1 -1
  55. package/dist/pdfTemplates/CollapsibleObjectFieldTemplate.js +1 -1
  56. package/dist/pdfTemplates/FieldTemplate.js +1 -1
  57. package/dist/pdfTemplates/ObjectFieldTemplate.js +1 -1
  58. package/dist/styledComponents.js +39 -59
  59. package/dist/templates/ArrayFieldTemplate.js +6 -14
  60. package/dist/templates/CollapsibleObjectFieldTemplate.js +6 -14
  61. package/dist/templates/FieldTemplate.js +6 -14
  62. package/dist/templates/ObjectFieldTemplate.js +6 -14
  63. package/dist/utils/__tests/createInitialValues.test.js +2 -11
  64. package/dist/utils/__tests/createValidationSchema.test.js +30 -35
  65. package/dist/utils/__tests/solveReferences.test.js +4 -8
  66. package/dist/utils/createInitialValues.js +9 -7
  67. package/dist/utils/createValidationSchema.js +19 -32
  68. package/dist/utils/getEnums.js +2 -2
  69. package/dist/utils/getTitleAndDescription.js +7 -9
  70. package/dist/utils/hasReferences.js +2 -2
  71. package/dist/utils/resolveSchema.js +16 -30
  72. package/dist/utils/solveReferences.js +3 -4
  73. package/package.json +9 -9
@@ -5,7 +5,6 @@ import { getEnums } from "../utils/getEnums";
5
5
  import { useExtractUiSchema, useSetDefault } from "../hooks";
6
6
  import { useFormikContext } from "formik";
7
7
  export const StringField = (props) => {
8
- var _a;
9
8
  const { templates: { FieldTemplate }, components: { FieldInput }, } = useContext(FormRegistry);
10
9
  useSetDefault(props);
11
10
  const { name, uiSchema = {}, schema } = props;
@@ -15,18 +14,21 @@ export const StringField = (props) => {
15
14
  const fieldDataAttribute = schema.type === "string"
16
15
  ? { "data-fjsf-string": name }
17
16
  : { "data-fjsf-number": name };
18
- switch (enums === null || enums === void 0 ? void 0 : enums.type) {
17
+ switch (enums?.type) {
19
18
  case "select":
20
- return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsxs(FieldInput, Object.assign({ type }, inputProps, { name: name, formikAs: "select", onChange: (e) => {
21
- const selectedOption = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const.toString() === e.target.value);
19
+ return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(FieldInput, { type,
20
+ ...inputProps, name: name, formikAs: "select", onChange: (e) => {
21
+ const selectedOption = enums?.values.find((option) => option.const.toString() === e.target.value);
22
22
  const selectedValue = selectedOption
23
23
  ? selectedOption.const
24
24
  : e.target.value;
25
- form === null || form === void 0 ? void 0 : form.setFieldValue(name, selectedValue);
26
- }, children: [_jsx("option", Object.assign({ value: "", disabled: false,
27
- hidden: true }, (_a = uiSchema["ui:placeholderOptionOptions"]) === null || _a === void 0 ? void 0 : _a.props, { children: placeholder })), enums === null || enums === void 0 ? void 0 : enums.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] })) })));
25
+ form?.setFieldValue(name, selectedValue);
26
+ }, children: [_jsx("option", { value: "", disabled: false,
27
+ hidden: true,
28
+ ...uiSchema["ui:placeholderOptionOptions"]?.props, children: placeholder }), enums?.values.map((option, index) => (_jsx("option", { value: option.const.toString(), children: option.title }, index)))] }) }));
28
29
  default:
29
- return (_jsx(FieldTemplate, Object.assign({}, props, fieldDataAttribute, { children: _jsx(FieldInput, Object.assign({ type,
30
- placeholder }, inputProps, { name: name })) })));
30
+ return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(FieldInput, { type,
31
+ placeholder,
32
+ ...inputProps, name: name }) }));
31
33
  }
32
34
  };
@@ -7,5 +7,5 @@ export const TextAreaField = (props) => {
7
7
  useSetDefault(props);
8
8
  const { name, uiSchema } = props;
9
9
  const { props: inputProps } = useExtractUiSchema(uiSchema);
10
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-string": name, children: _jsx(TextAreaInputField, { inputProps: inputProps, name: name }) })));
10
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(TextAreaInputField, { inputProps: inputProps, name: name }) }));
11
11
  };
@@ -7,5 +7,5 @@ export const ToggleField = (props) => {
7
7
  useSetDefault(props);
8
8
  const { name, uiSchema } = props;
9
9
  const { props: inputProps } = useExtractUiSchema(uiSchema);
10
- return (_jsx(FieldTemplate, Object.assign({}, props, { "data-fjsf-boolean": name, children: _jsx(ToggleSwitchField, Object.assign({}, inputProps, { name: name })) })));
10
+ return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(ToggleSwitchField, { ...inputProps, name: name }) }));
11
11
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { within, userEvent, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -24,56 +15,56 @@ export const Default = {
24
15
  schema: {},
25
16
  uiSchema: {},
26
17
  },
27
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
18
+ play: async ({ canvasElement }) => {
28
19
  const canvas = within(canvasElement);
29
20
  const select = canvasElement.querySelector("select");
30
21
  // Null
31
- yield userEvent.selectOptions(select, "null");
22
+ await userEvent.selectOptions(select, "null");
32
23
  const allInputs = canvasElement.querySelectorAll("input");
33
24
  expect(allInputs).toHaveLength(0);
34
25
  // AnyField
35
- yield userEvent.selectOptions(select, "any");
26
+ await userEvent.selectOptions(select, "any");
36
27
  const anySelect = canvasElement.querySelectorAll("select");
37
28
  const input = canvasElement.querySelector('input[name="dynamicField"]');
38
- yield userEvent.type(input, "testString");
29
+ await userEvent.type(input, "testString");
39
30
  expect(input).toHaveValue("testString");
40
- yield userEvent.selectOptions(anySelect[1], "boolean");
41
- yield userEvent.click(input);
31
+ await userEvent.selectOptions(anySelect[1], "boolean");
32
+ await userEvent.click(input);
42
33
  expect(input).toBeChecked;
43
34
  // StringField
44
- yield userEvent.selectOptions(select, "string");
45
- yield userEvent.type(input, "testString");
35
+ await userEvent.selectOptions(select, "string");
36
+ await userEvent.type(input, "testString");
46
37
  expect(input).toHaveValue("testString");
47
38
  // IntegerField
48
- yield userEvent.selectOptions(select, "integer");
39
+ await userEvent.selectOptions(select, "integer");
49
40
  const integerInput = canvasElement.querySelector('input[name="dynamicField"]');
50
- yield userEvent.type(integerInput, "321");
41
+ await userEvent.type(integerInput, "321");
51
42
  expect(integerInput).toHaveValue(321);
52
43
  // NumberField
53
- yield userEvent.selectOptions(select, "number");
44
+ await userEvent.selectOptions(select, "number");
54
45
  const numberInput = canvasElement.querySelector('input[name="dynamicField"]');
55
- yield userEvent.clear(numberInput);
56
- yield userEvent.type(numberInput, "123");
46
+ await userEvent.clear(numberInput);
47
+ await userEvent.type(numberInput, "123");
57
48
  expect(numberInput).toHaveValue(123);
58
49
  // BooleanField
59
- yield userEvent.selectOptions(select, "boolean");
50
+ await userEvent.selectOptions(select, "boolean");
60
51
  const checkBox = canvasElement.querySelector('input[name="dynamicField"]');
61
- yield userEvent.click(checkBox);
52
+ await userEvent.click(checkBox);
62
53
  expect(checkBox).toBeChecked();
63
54
  // ObjectField
64
55
  // TODO Find out how to handle modal
65
56
  // ArrayField
66
- yield userEvent.selectOptions(select, "array");
57
+ await userEvent.selectOptions(select, "array");
67
58
  const addButton = canvas.getByText("+");
68
- yield userEvent.click(addButton);
69
- yield userEvent.click(addButton);
59
+ await userEvent.click(addButton);
60
+ await userEvent.click(addButton);
70
61
  const downArrow = canvas.queryAllByText("↓");
71
62
  const inputFirst = canvasElement.querySelector('input[name="dynamicField[0]"]');
72
63
  const inputSecond = canvasElement.querySelector('input[name="dynamicField[1]"]');
73
- yield userEvent.type(inputFirst, "first");
74
- yield userEvent.type(inputSecond, "second");
75
- yield userEvent.click(downArrow[0]);
64
+ await userEvent.type(inputFirst, "first");
65
+ await userEvent.type(inputSecond, "second");
66
+ await userEvent.click(downArrow[0]);
76
67
  expect(inputFirst).toHaveValue("second");
77
68
  expect(inputSecond).toHaveValue("first");
78
- }),
69
+ },
79
70
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { within, userEvent, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -29,13 +20,13 @@ export const BasicArray = {
29
20
  },
30
21
  uiSchema: {},
31
22
  },
32
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
23
+ play: async ({ canvasElement }) => {
33
24
  const canvas = within(canvasElement);
34
25
  // Add three items
35
26
  const addButton = canvas.getByText("+");
36
- yield userEvent.click(addButton);
37
- yield userEvent.click(addButton);
38
- yield userEvent.click(addButton);
27
+ await userEvent.click(addButton);
28
+ await userEvent.click(addButton);
29
+ await userEvent.click(addButton);
39
30
  const allDownArrows = canvas.queryAllByText("↓");
40
31
  const allUpArrows = canvas.queryAllByText("↑");
41
32
  const firstCheckbox = canvasElement.querySelector('input[name="itemsList[0]"]');
@@ -44,30 +35,30 @@ export const BasicArray = {
44
35
  const allLabelsAfterAdd = canvasElement.querySelectorAll('[name^="itemsList["]');
45
36
  expect(allLabelsAfterAdd.length).toEqual(3);
46
37
  // Check that moving items work
47
- yield userEvent.click(firstCheckbox);
38
+ await userEvent.click(firstCheckbox);
48
39
  expect(firstCheckbox).toBeChecked();
49
40
  expect(secondCheckbox).not.toBeChecked();
50
41
  expect(thirdCheckbox).not.toBeChecked();
51
- yield userEvent.click(allDownArrows[0]);
42
+ await userEvent.click(allDownArrows[0]);
52
43
  expect(firstCheckbox).not.toBeChecked();
53
44
  expect(secondCheckbox).toBeChecked();
54
45
  expect(thirdCheckbox).not.toBeChecked();
55
- yield userEvent.click(allDownArrows[1]);
46
+ await userEvent.click(allDownArrows[1]);
56
47
  expect(firstCheckbox).not.toBeChecked();
57
48
  expect(secondCheckbox).not.toBeChecked();
58
49
  expect(thirdCheckbox).toBeChecked();
59
- yield userEvent.click(allUpArrows[1]);
50
+ await userEvent.click(allUpArrows[1]);
60
51
  expect(firstCheckbox).not.toBeChecked();
61
52
  expect(secondCheckbox).toBeChecked();
62
53
  expect(thirdCheckbox).not.toBeChecked();
63
54
  // Remove items
64
55
  const removeButton = canvas.queryAllByText("-");
65
- yield userEvent.click(removeButton[2]);
66
- yield userEvent.click(removeButton[1]);
67
- yield userEvent.click(removeButton[0]);
56
+ await userEvent.click(removeButton[2]);
57
+ await userEvent.click(removeButton[1]);
58
+ await userEvent.click(removeButton[0]);
68
59
  const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
69
60
  expect(allLabelsAfterRemove.length).toEqual(0);
70
- }),
61
+ },
71
62
  };
72
63
  export const EnumArray = {
73
64
  args: {
@@ -83,13 +74,13 @@ export const EnumArray = {
83
74
  },
84
75
  uiSchema: {},
85
76
  },
86
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
77
+ play: async ({ canvasElement }) => {
87
78
  const canvas = within(canvasElement);
88
79
  // Add three items
89
80
  const addButton = canvas.getByText("+");
90
- yield userEvent.click(addButton);
91
- yield userEvent.click(addButton);
92
- yield userEvent.click(addButton);
81
+ await userEvent.click(addButton);
82
+ await userEvent.click(addButton);
83
+ await userEvent.click(addButton);
93
84
  const allDownArrows = canvas.queryAllByText("↓");
94
85
  const allUpArrows = canvas.queryAllByText("↑");
95
86
  const firstSelect = canvasElement.querySelector('select[name="itemsList[0]"]');
@@ -97,33 +88,33 @@ export const EnumArray = {
97
88
  const thirdSelect = canvasElement.querySelector('select[name="itemsList[2]"]');
98
89
  const allLabelsAfterAdd = canvasElement.querySelectorAll('[name^="itemsList["]');
99
90
  expect(allLabelsAfterAdd.length).toEqual(3);
100
- yield userEvent.selectOptions(firstSelect, "1");
101
- yield userEvent.selectOptions(secondSelect, "2");
102
- yield userEvent.selectOptions(thirdSelect, "3");
91
+ await userEvent.selectOptions(firstSelect, "1");
92
+ await userEvent.selectOptions(secondSelect, "2");
93
+ await userEvent.selectOptions(thirdSelect, "3");
103
94
  // Check that moving items work
104
- yield expect(firstSelect).toHaveValue("1");
105
- yield expect(secondSelect).toHaveValue("2");
106
- yield expect(thirdSelect).toHaveValue("3");
107
- yield userEvent.click(allDownArrows[0]);
108
- yield expect(firstSelect).toHaveValue("2");
109
- yield expect(secondSelect).toHaveValue("1");
110
- yield expect(thirdSelect).toHaveValue("3");
111
- yield userEvent.click(allDownArrows[1]);
112
- yield expect(firstSelect).toHaveValue("2");
113
- yield expect(secondSelect).toHaveValue("3");
114
- yield expect(thirdSelect).toHaveValue("1");
115
- yield userEvent.click(allUpArrows[1]);
116
- yield expect(firstSelect).toHaveValue("2");
117
- yield expect(secondSelect).toHaveValue("1");
118
- yield expect(thirdSelect).toHaveValue("3");
95
+ await expect(firstSelect).toHaveValue("1");
96
+ await expect(secondSelect).toHaveValue("2");
97
+ await expect(thirdSelect).toHaveValue("3");
98
+ await userEvent.click(allDownArrows[0]);
99
+ await expect(firstSelect).toHaveValue("2");
100
+ await expect(secondSelect).toHaveValue("1");
101
+ await expect(thirdSelect).toHaveValue("3");
102
+ await userEvent.click(allDownArrows[1]);
103
+ await expect(firstSelect).toHaveValue("2");
104
+ await expect(secondSelect).toHaveValue("3");
105
+ await expect(thirdSelect).toHaveValue("1");
106
+ await userEvent.click(allUpArrows[1]);
107
+ await expect(firstSelect).toHaveValue("2");
108
+ await expect(secondSelect).toHaveValue("1");
109
+ await expect(thirdSelect).toHaveValue("3");
119
110
  // Remove items
120
111
  const removeButton = canvas.queryAllByText("-");
121
- yield userEvent.click(removeButton[2]);
122
- yield userEvent.click(removeButton[1]);
123
- yield userEvent.click(removeButton[0]);
112
+ await userEvent.click(removeButton[2]);
113
+ await userEvent.click(removeButton[1]);
114
+ await userEvent.click(removeButton[0]);
124
115
  const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
125
116
  expect(allLabelsAfterRemove.length).toEqual(0);
126
- }),
117
+ },
127
118
  };
128
119
  export const ObjectArray = {
129
120
  args: {
@@ -152,12 +143,12 @@ export const ObjectArray = {
152
143
  },
153
144
  uiSchema: {},
154
145
  },
155
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
146
+ play: async ({ canvasElement }) => {
156
147
  const canvas = within(canvasElement);
157
148
  // Add two items
158
149
  const addButton = canvas.getByText("+");
159
- yield userEvent.click(addButton);
160
- yield userEvent.click(addButton);
150
+ await userEvent.click(addButton);
151
+ await userEvent.click(addButton);
161
152
  const allDownArrows = canvas.queryAllByText("↓");
162
153
  const allUpArrows = canvas.queryAllByText("↑");
163
154
  const firstStringInput = canvasElement.querySelector('input[name="itemsList[0].string"]');
@@ -166,28 +157,28 @@ export const ObjectArray = {
166
157
  const secondNumberInput = canvasElement.querySelector('input[name="itemsList[1].number"]');
167
158
  const allLabelsAfterAdd = canvasElement.querySelectorAll('[name^="itemsList["]');
168
159
  expect(allLabelsAfterAdd.length).toEqual(4);
169
- yield userEvent.type(firstStringInput, "first");
170
- yield userEvent.type(firstNumberInput, "1");
171
- yield userEvent.type(secondStringInput, "second");
172
- yield userEvent.type(secondNumberInput, "2");
160
+ await userEvent.type(firstStringInput, "first");
161
+ await userEvent.type(firstNumberInput, "1");
162
+ await userEvent.type(secondStringInput, "second");
163
+ await userEvent.type(secondNumberInput, "2");
173
164
  // Check that moving items work
174
- yield userEvent.click(allDownArrows[0]);
175
- yield expect(firstStringInput).toHaveValue("second");
176
- yield expect(firstNumberInput).toHaveValue(2);
177
- yield expect(secondStringInput).toHaveValue("first");
178
- yield expect(secondNumberInput).toHaveValue(1);
179
- yield userEvent.click(allUpArrows[0]);
180
- yield expect(firstStringInput).toHaveValue("first");
181
- yield expect(firstNumberInput).toHaveValue(1);
182
- yield expect(secondStringInput).toHaveValue("second");
183
- yield expect(secondNumberInput).toHaveValue(2);
165
+ await userEvent.click(allDownArrows[0]);
166
+ await expect(firstStringInput).toHaveValue("second");
167
+ await expect(firstNumberInput).toHaveValue(2);
168
+ await expect(secondStringInput).toHaveValue("first");
169
+ await expect(secondNumberInput).toHaveValue(1);
170
+ await userEvent.click(allUpArrows[0]);
171
+ await expect(firstStringInput).toHaveValue("first");
172
+ await expect(firstNumberInput).toHaveValue(1);
173
+ await expect(secondStringInput).toHaveValue("second");
174
+ await expect(secondNumberInput).toHaveValue(2);
184
175
  // Remove items
185
176
  const removeButton = canvas.queryAllByText("-");
186
- yield userEvent.click(removeButton[1]);
187
- yield userEvent.click(removeButton[0]);
177
+ await userEvent.click(removeButton[1]);
178
+ await userEvent.click(removeButton[0]);
188
179
  const allLabelsAfterRemove = canvasElement.querySelectorAll('[name^="itemsList["]');
189
180
  expect(allLabelsAfterRemove.length).toEqual(0);
190
- }),
181
+ },
191
182
  };
192
183
  export const AnyOfArray = {
193
184
  args: {
@@ -205,7 +196,7 @@ export const AnyOfArray = {
205
196
  },
206
197
  uiSchema: {},
207
198
  },
208
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
199
+ play: async ({ canvasElement }) => {
209
200
  const anyOfSelectField = canvasElement.querySelector('select[name="anyOf Select"]');
210
201
  const optionOne = canvasElement.querySelector('option[value="1"]');
211
202
  const optionTwo = canvasElement.querySelector('option[value="2"]');
@@ -216,9 +207,9 @@ export const AnyOfArray = {
216
207
  expect(optionTwo).toBeInTheDocument();
217
208
  expect(optionThree).toBeInTheDocument();
218
209
  expect(optionFour).toBeInTheDocument();
219
- yield userEvent.selectOptions(anyOfSelectField, optionOne);
220
- yield userEvent.selectOptions(anyOfSelectField, optionThree);
221
- yield userEvent.click(optionThree);
222
- yield expect(anyOfSelectField).toHaveValue(["1", "3"]);
223
- }),
210
+ await userEvent.selectOptions(anyOfSelectField, optionOne);
211
+ await userEvent.selectOptions(anyOfSelectField, optionThree);
212
+ await userEvent.click(optionThree);
213
+ await expect(anyOfSelectField).toHaveValue(["1", "3"]);
214
+ },
224
215
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { userEvent, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -26,11 +17,11 @@ export const Default = {
26
17
  "ui:label": "I accept the terms and conditions",
27
18
  },
28
19
  },
29
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
20
+ play: async ({ canvasElement }) => {
30
21
  const checkbox = canvasElement.querySelector('input[type="checkbox"][name="acceptTerms"]');
31
- yield userEvent.click(checkbox);
32
- yield expect(checkbox).toBeChecked();
33
- yield userEvent.click(checkbox);
34
- yield expect(checkbox).not.toBeChecked();
35
- }),
22
+ await userEvent.click(checkbox);
23
+ await expect(checkbox).toBeChecked();
24
+ await userEvent.click(checkbox);
25
+ await expect(checkbox).not.toBeChecked();
26
+ },
36
27
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { userEvent, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -24,11 +15,11 @@ export const Default = {
24
15
  schema: { type: "string", format: "date" },
25
16
  uiSchema: {},
26
17
  },
27
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
18
+ play: async ({ canvasElement }) => {
28
19
  const dateInput = canvasElement.querySelector('input[name="birthDate"]');
29
20
  expect(dateInput).toBeInTheDocument();
30
21
  const dateToInput = "2023-02-01";
31
- yield userEvent.type(dateInput, dateToInput);
32
- yield expect(dateInput).toHaveValue(dateToInput);
33
- }),
22
+ await userEvent.type(dateInput, dateToInput);
23
+ await expect(dateInput).toHaveValue(dateToInput);
24
+ },
34
25
  };
@@ -1,23 +1,14 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { Formik, Form } from "formik";
12
3
  import { FileUploadField } from "../FileUploadField";
13
4
  import { FileUploadContext } from "../../FileUploadContext";
14
5
  let isFileUploaded = false;
15
6
  let mockFileName = "";
16
- export const mockUploadFile = (_a) => __awaiter(void 0, [_a], void 0, function* ({ data, onUploadProgress, }) {
7
+ export const mockUploadFile = async ({ data, onUploadProgress, }) => {
17
8
  const file = data.get("file");
18
- mockFileName = (file === null || file === void 0 ? void 0 : file.name) || "unknown";
9
+ mockFileName = file?.name || "unknown";
19
10
  console.log("Mock uploadFile called with FormData:", data);
20
- const mockFileId = (file === null || file === void 0 ? void 0 : file.name) || "mockFileId";
11
+ const mockFileId = file?.name || "mockFileId";
21
12
  setTimeout(() => {
22
13
  isFileUploaded = true;
23
14
  }, 1000);
@@ -31,20 +22,20 @@ export const mockUploadFile = (_a) => __awaiter(void 0, [_a], void 0, function*
31
22
  clearInterval(interval);
32
23
  }, 100);
33
24
  return mockFileId;
34
- });
35
- export const mockFetchFile = (fileId) => __awaiter(void 0, void 0, void 0, function* () {
25
+ };
26
+ export const mockFetchFile = async (fileId) => {
36
27
  console.log("Mock fetchFile called with fileId:", fileId);
37
28
  if (!isFileUploaded) {
38
29
  return new Promise((resolve) => setTimeout(() => resolve({ name: mockFileName }), 0));
39
30
  }
40
31
  return new Promise((resolve) => setTimeout(() => resolve({ name: mockFileName }), 500));
41
- });
42
- export const mockRemoveFile = (fileName) => __awaiter(void 0, void 0, void 0, function* () {
32
+ };
33
+ export const mockRemoveFile = async (fileName) => {
43
34
  console.log("Mock removeFile called with fileName:", fileName);
44
35
  isFileUploaded = false;
45
36
  mockFileName = "";
46
37
  return { success: true };
47
- });
38
+ };
48
39
  export default {
49
40
  title: "Fields/FileUploadField",
50
41
  component: FileUploadField,
@@ -62,5 +53,5 @@ export const Default = {
62
53
  schema: { type: "object" },
63
54
  uiSchema: {},
64
55
  },
65
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) { }),
56
+ play: async ({ canvasElement }) => { },
66
57
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { userEvent, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -34,22 +25,22 @@ export const OneOf = {
34
25
  "ui:field": "MultipleChoiceField",
35
26
  },
36
27
  },
37
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
28
+ play: async ({ canvasElement }) => {
38
29
  const optionSunny = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="sunny"]');
39
30
  const optionCloudy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="cloudy"]');
40
31
  const optionRainy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="rainy"]');
41
32
  const optionWindy = canvasElement.querySelector('input[type="radio"][name="choicesOneOf"][value="windy"]');
42
- yield userEvent.click(optionSunny);
43
- yield expect(optionSunny).toBeChecked();
44
- yield expect(optionCloudy).not.toBeChecked();
45
- yield expect(optionRainy).not.toBeChecked();
46
- yield expect(optionWindy).not.toBeChecked();
47
- yield userEvent.click(optionCloudy);
48
- yield expect(optionCloudy).toBeChecked();
49
- yield expect(optionSunny).not.toBeChecked();
50
- yield expect(optionRainy).not.toBeChecked();
51
- yield expect(optionWindy).not.toBeChecked();
52
- }),
33
+ await userEvent.click(optionSunny);
34
+ await expect(optionSunny).toBeChecked();
35
+ await expect(optionCloudy).not.toBeChecked();
36
+ await expect(optionRainy).not.toBeChecked();
37
+ await expect(optionWindy).not.toBeChecked();
38
+ await userEvent.click(optionCloudy);
39
+ await expect(optionCloudy).toBeChecked();
40
+ await expect(optionSunny).not.toBeChecked();
41
+ await expect(optionRainy).not.toBeChecked();
42
+ await expect(optionWindy).not.toBeChecked();
43
+ },
53
44
  };
54
45
  export const AnyOf = {
55
46
  args: {
@@ -67,20 +58,20 @@ export const AnyOf = {
67
58
  "ui:field": "MultipleChoiceField",
68
59
  },
69
60
  },
70
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
61
+ play: async ({ canvasElement }) => {
71
62
  const optionLily = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="lily"]');
72
63
  const optionRose = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="rose"]');
73
64
  const optionIris = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="iris"]');
74
65
  const optionDaisy = canvasElement.querySelector('input[type="checkbox"][name="choicesAnyOf"][value="daisy"]');
75
- yield userEvent.click(optionIris);
76
- yield expect(optionIris).toBeChecked();
77
- yield expect(optionRose).not.toBeChecked();
78
- yield expect(optionLily).not.toBeChecked();
79
- yield expect(optionDaisy).not.toBeChecked();
80
- yield userEvent.click(optionRose);
81
- yield expect(optionIris).toBeChecked();
82
- yield expect(optionRose).toBeChecked();
83
- yield expect(optionLily).not.toBeChecked();
84
- yield expect(optionDaisy).not.toBeChecked();
85
- }),
66
+ await userEvent.click(optionIris);
67
+ await expect(optionIris).toBeChecked();
68
+ await expect(optionRose).not.toBeChecked();
69
+ await expect(optionLily).not.toBeChecked();
70
+ await expect(optionDaisy).not.toBeChecked();
71
+ await userEvent.click(optionRose);
72
+ await expect(optionIris).toBeChecked();
73
+ await expect(optionRose).toBeChecked();
74
+ await expect(optionLily).not.toBeChecked();
75
+ await expect(optionDaisy).not.toBeChecked();
76
+ },
86
77
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
2
  import { within, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -25,14 +16,14 @@ export const Default = {
25
16
  schema: { type: "null", title: "Null Field" },
26
17
  uiSchema: {},
27
18
  },
28
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
19
+ play: async ({ canvasElement }) => {
29
20
  const canvas = within(canvasElement);
30
21
  const title = canvasElement.querySelector('label[for="nullField"]');
31
22
  const submitButton = canvasElement.querySelector('button[type="submit"]');
32
- const additionalInfo = yield canvas.findByText("Additional info");
23
+ const additionalInfo = await canvas.findByText("Additional info");
33
24
  expect(title).toBeInTheDocument();
34
25
  expect(title.textContent).toBeTruthy();
35
26
  expect(additionalInfo).toBeInTheDocument();
36
27
  expect(submitButton).toBeInTheDocument();
37
- }),
28
+ },
38
29
  };
@@ -1,12 +1,3 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
1
  import { jsx as _jsx } from "react/jsx-runtime";
11
2
  import { userEvent, expect } from "@storybook/test";
12
3
  import { Formik, Form } from "formik";
@@ -24,10 +15,10 @@ export const Default = {
24
15
  schema: { type: "number" },
25
16
  uiSchema: {},
26
17
  },
27
- play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
18
+ play: async ({ canvasElement }) => {
28
19
  const numberInput = canvasElement.querySelector('input[name="numberInput"]');
29
- yield userEvent.type(numberInput, "asd123");
30
- yield expect(numberInput).toHaveValue(123);
20
+ await userEvent.type(numberInput, "asd123");
21
+ await expect(numberInput).toHaveValue(123);
31
22
  // Add tests, such as validation adn incrementing/decrementing the value
32
- }),
23
+ },
33
24
  };