@algolia/satellite 1.4.0 → 1.5.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.
@@ -0,0 +1,940 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.JSONFormsComplexComponent = void 0;
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
+ var _core = require("@jsonforms/core");
12
+ var _react = require("@jsonforms/react");
13
+ var _vanillaRenderers = require("@jsonforms/vanilla-renderers");
14
+ var _ajvErrors = _interopRequireDefault(require("ajv-errors"));
15
+ var _clsx = _interopRequireDefault(require("clsx"));
16
+ var _capitalize = _interopRequireDefault(require("lodash/capitalize"));
17
+ var _react2 = require("react");
18
+ var _satellitePrefixer = _interopRequireDefault(require("../../../styles/helpers/satellitePrefixer"));
19
+ var _AutoComplete = require("../../AutoComplete");
20
+ var _Checkbox = require("../../Checkbox");
21
+ var _DatePicker = require("../../DatePicker");
22
+ var _Dropzone = require("../../Dropzone");
23
+ var _Field = require("../../Field");
24
+ var _Input = require("../../Input/Input");
25
+ var _RadioGroup = require("../../RadioGroup");
26
+ var _RangeSlider = require("../../RangeSlider");
27
+ var _Select = require("../../Select");
28
+ var _TextArea = require("../../TextArea");
29
+ var _Toggle = require("../../Toggle");
30
+ var _Form = require("../Form");
31
+ var _jsxRuntime = require("react/jsx-runtime");
32
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
33
+ var schema = {
34
+ type: "object",
35
+ properties: {
36
+ firstName: {
37
+ type: "string",
38
+ description: "Please enter your first name",
39
+ minLength: 3,
40
+ not: {
41
+ "enum": ["john"]
42
+ },
43
+ errorMessage: {
44
+ minLength: "First name must be at least 3 characters long",
45
+ not: "John is not allowed"
46
+ }
47
+ },
48
+ lastName: {
49
+ type: "string",
50
+ description: "Please enter your last name",
51
+ minLength: 3,
52
+ errorMessage: {
53
+ minLength: "Last name must be at least 3 characters long"
54
+ }
55
+ },
56
+ password: {
57
+ type: "string",
58
+ description: "Please enter your password",
59
+ minLength: 5,
60
+ errorMessage: {
61
+ minLength: "Password must be at least 5 characters long"
62
+ }
63
+ },
64
+ civility: {
65
+ type: "string",
66
+ description: "Please enter your civility",
67
+ "enum": ["Mr", "Mrs", "Ms"],
68
+ errorMessage: {
69
+ "enum": "You must specify a civility"
70
+ }
71
+ },
72
+ gender: {
73
+ type: "string",
74
+ description: "Please specify your gender",
75
+ not: {
76
+ "enum": ["please select"]
77
+ },
78
+ "enum": ["please select", "woman", "man", "transgender man", "transgender woman", "non-binary", "agender", "prefer not to state"],
79
+ errorMessage: "You must specify a gender"
80
+ },
81
+ jobPositions: {
82
+ type: "array",
83
+ description: "Please specify the job positions you are interested in",
84
+ uniqueItems: true,
85
+ minItems: 1,
86
+ items: {
87
+ oneOf: [{
88
+ "const": "frontend developer",
89
+ title: "Frontend developer"
90
+ }, {
91
+ "const": "backend developer",
92
+ title: "Backend developer"
93
+ }, {
94
+ "const": "fullstack developer",
95
+ title: "Fullstack developer"
96
+ }]
97
+ },
98
+ errorMessage: {
99
+ minItems: "You must specify at least one job position"
100
+ }
101
+ },
102
+ employmentStatus: {
103
+ type: "string",
104
+ description: "Please specify your employment status",
105
+ "enum": ["employed", "unemployed", "student"],
106
+ errorMessage: "You must specify an employment status"
107
+ },
108
+ birthday: {
109
+ type: "object",
110
+ description: "Please specify your birthday",
111
+ errorMessage: "You must specify a birthday"
112
+ },
113
+ age: {
114
+ type: "integer",
115
+ description: "Please specify your age",
116
+ minimum: 18,
117
+ maximum: 100,
118
+ errorMessage: {
119
+ type: "You must specify an age",
120
+ minimum: "You must be at least 18 years old",
121
+ maximum: "You must be at most 100 years old"
122
+ }
123
+ },
124
+ interest: {
125
+ type: "integer",
126
+ description: "Please specify your interest",
127
+ minimum: 5,
128
+ errorMessage: {
129
+ minimum: "Your level of interest must be at least 5"
130
+ }
131
+ },
132
+ idealLocation: {
133
+ type: "array",
134
+ description: "Please specify your ideal location",
135
+ minItems: 2,
136
+ maxItems: 2,
137
+ items: {
138
+ type: "number",
139
+ minimum: 10,
140
+ maximum: 40
141
+ },
142
+ errorMessage: "Your ideal location must be between 10 km and 40 km"
143
+ },
144
+ profilePicture: {
145
+ type: "array",
146
+ description: "Please upload your profile picture, 1 MB minimum",
147
+ items: {
148
+ type: "object",
149
+ properties: {
150
+ path: {
151
+ type: "string"
152
+ }
153
+ }
154
+ },
155
+ errorMessage: "You must upload a profile picture"
156
+ },
157
+ bio: {
158
+ type: "string",
159
+ description: "Please write a short bio",
160
+ minLength: 10,
161
+ errorMessage: {
162
+ minLength: "Your bio must be at least 10 characters long"
163
+ }
164
+ },
165
+ acceptTerms: {
166
+ type: "boolean",
167
+ description: "Please accept the terms",
168
+ not: {
169
+ type: "boolean",
170
+ "const": false
171
+ },
172
+ errorMessage: "You must accept the terms"
173
+ },
174
+ newsletter: {
175
+ type: "boolean",
176
+ description: "Do you want to receive our newsletter?",
177
+ not: {
178
+ type: "boolean",
179
+ "const": false
180
+ },
181
+ errorMessage: "You must accept to receive the newsletter"
182
+ }
183
+ },
184
+ required: ["firstName", "lastName", "password", "civility", "gender", "jobPositions", "employmentStatus", "birthday", "age", "interest", "idealLocation", "profilePicture", "bio", "acceptTerms", "newsletter"]
185
+ };
186
+ var uischema = {
187
+ type: "VerticalLayout",
188
+ elements: [{
189
+ type: "Control",
190
+ label: "First Name",
191
+ scope: "#/properties/firstName",
192
+ options: {
193
+ placeholder: "John",
194
+ focus: true
195
+ }
196
+ }, {
197
+ type: "Control",
198
+ label: "Last Name",
199
+ scope: "#/properties/lastName",
200
+ options: {
201
+ placeholder: "Doe"
202
+ }
203
+ }, {
204
+ type: "Control",
205
+ label: "Password",
206
+ scope: "#/properties/password",
207
+ options: {
208
+ format: "password",
209
+ placeholder: "Password"
210
+ }
211
+ }, {
212
+ type: "Control",
213
+ label: "Civility",
214
+ scope: "#/properties/civility",
215
+ options: {
216
+ format: "radio"
217
+ }
218
+ }, {
219
+ type: "Control",
220
+ label: "Gender",
221
+ scope: "#/properties/gender"
222
+ }, {
223
+ type: "Control",
224
+ label: "Job Positions",
225
+ scope: "#/properties/jobPositions",
226
+ options: {
227
+ placeholder: "Frontend developer",
228
+ format: "autocomplete",
229
+ multiple: true,
230
+ clearable: true
231
+ }
232
+ }, {
233
+ type: "Control",
234
+ label: "Employment Status",
235
+ scope: "#/properties/employmentStatus",
236
+ options: {
237
+ format: "radioGroup"
238
+ }
239
+ }, {
240
+ type: "Control",
241
+ label: "Birthday",
242
+ scope: "#/properties/birthday",
243
+ options: {
244
+ format: "date"
245
+ }
246
+ }, {
247
+ type: "Control",
248
+ label: "Age",
249
+ scope: "#/properties/age",
250
+ options: {
251
+ placeholder: "18",
252
+ format: "number"
253
+ }
254
+ }, {
255
+ type: "Control",
256
+ label: "Interest",
257
+ scope: "#/properties/interest",
258
+ options: {
259
+ format: "slider",
260
+ minimum: 0,
261
+ maximum: 10,
262
+ step: 5
263
+ }
264
+ }, {
265
+ type: "Control",
266
+ label: "Ideal Location",
267
+ scope: "#/properties/idealLocation",
268
+ options: {
269
+ format: "slider",
270
+ minimum: 0,
271
+ maximum: 50,
272
+ step: 10
273
+ }
274
+ }, {
275
+ type: "Control",
276
+ label: "Profile Picture",
277
+ scope: "#/properties/profilePicture",
278
+ options: {
279
+ format: "dropzone",
280
+ minSize: 1024 * 1024 * 1,
281
+ accept: [".png", ".jpg"]
282
+ }
283
+ }, {
284
+ type: "Control",
285
+ label: "Bio",
286
+ scope: "#/properties/bio",
287
+ options: {
288
+ format: "textarea"
289
+ }
290
+ }, {
291
+ type: "Control",
292
+ label: "Accept Terms",
293
+ scope: "#/properties/acceptTerms",
294
+ options: {
295
+ inline: true
296
+ }
297
+ }, {
298
+ type: "Control",
299
+ label: "Newsletter",
300
+ scope: "#/properties/newsletter",
301
+ options: {
302
+ format: "toggle",
303
+ inline: true
304
+ }
305
+ }]
306
+ };
307
+ var initialFormData = {
308
+ firstName: "",
309
+ lastName: "",
310
+ password: "",
311
+ civility: "",
312
+ gender: "",
313
+ jobPositions: [],
314
+ employmentStatus: "",
315
+ birthday: "",
316
+ age: "",
317
+ interest: 0,
318
+ idealLocation: [0, 50],
319
+ profilePicture: null,
320
+ bio: "",
321
+ acceptTerms: false,
322
+ newsletter: false
323
+ };
324
+ var getFieldState = function getFieldState(errors) {
325
+ var fieldErrors = errors.length > 0 ? errors.split("\n") : [];
326
+ if (fieldErrors.length > 0) {
327
+ return {
328
+ status: "invalid",
329
+ errors: fieldErrors
330
+ };
331
+ } else {
332
+ return {
333
+ status: "default"
334
+ };
335
+ }
336
+ };
337
+ var inputTester = (0, _core.rankWith)(1, (0, _core.or)((0, _core.schemaTypeIs)("string"), (0, _core.schemaTypeIs)("integer")));
338
+ var InputRendererComponent = function InputRendererComponent(_ref) {
339
+ var _uischema$options, _uischema$options2, _uischema$options3, _uischema$options4;
340
+ var data = _ref.data,
341
+ handleChange = _ref.handleChange,
342
+ path = _ref.path,
343
+ required = _ref.required,
344
+ enabled = _ref.enabled,
345
+ id = _ref.id,
346
+ label = _ref.label,
347
+ description = _ref.description,
348
+ uischema = _ref.uischema,
349
+ errors = _ref.errors,
350
+ visible = _ref.visible;
351
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
352
+ label: label,
353
+ labelFor: id,
354
+ description: description,
355
+ state: getFieldState(errors),
356
+ inline: (_uischema$options = uischema.options) === null || _uischema$options === void 0 ? void 0 : _uischema$options.inline,
357
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
358
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
359
+ id: id,
360
+ required: required,
361
+ disabled: !enabled,
362
+ value: data,
363
+ type: ((_uischema$options2 = uischema.options) === null || _uischema$options2 === void 0 ? void 0 : _uischema$options2.format) || "text",
364
+ placeholder: (_uischema$options3 = uischema.options) === null || _uischema$options3 === void 0 ? void 0 : _uischema$options3.placeholder,
365
+ autoFocus: (_uischema$options4 = uischema.options) === null || _uischema$options4 === void 0 ? void 0 : _uischema$options4.focus,
366
+ onChange: function onChange(evt) {
367
+ var _uischema$options5;
368
+ return handleChange(path, ((_uischema$options5 = uischema.options) === null || _uischema$options5 === void 0 ? void 0 : _uischema$options5.format) === "number" ? parseInt(evt.currentTarget.value || "0") : evt.currentTarget.value);
369
+ }
370
+ })
371
+ });
372
+ };
373
+ var InputRenderer = (0, _react.withJsonFormsControlProps)(InputRendererComponent);
374
+ var radioButtonTester = (0, _core.rankWith)(3, (0, _core.and)(_core.isEnumControl, (0, _core.optionIs)("format", "radio")));
375
+ var RadioButtonRendererComponent = function RadioButtonRendererComponent(_ref2) {
376
+ var _schema$enum, _uischema$options6, _schema$enum2;
377
+ var data = _ref2.data,
378
+ handleChange = _ref2.handleChange,
379
+ path = _ref2.path,
380
+ required = _ref2.required,
381
+ enabled = _ref2.enabled,
382
+ id = _ref2.id,
383
+ label = _ref2.label,
384
+ description = _ref2.description,
385
+ schema = _ref2.schema,
386
+ uischema = _ref2.uischema,
387
+ errors = _ref2.errors,
388
+ visible = _ref2.visible;
389
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
390
+ label: label,
391
+ labelFor: id + ((_schema$enum = schema["enum"]) === null || _schema$enum === void 0 ? void 0 : _schema$enum[0]),
392
+ description: description,
393
+ state: getFieldState(errors),
394
+ inline: (_uischema$options6 = uischema.options) === null || _uischema$options6 === void 0 ? void 0 : _uischema$options6.inline,
395
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
396
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
397
+ className: (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["flex gap-4 display-body"]))),
398
+ children: (_schema$enum2 = schema["enum"]) === null || _schema$enum2 === void 0 ? void 0 : _schema$enum2.map(function (option) {
399
+ var _uischema$options7;
400
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
401
+ htmlFor: id + option,
402
+ className: (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["flex items-center gap-1"]))),
403
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioButton, {
404
+ id: id + option,
405
+ "aria-labelledby": id + option,
406
+ required: required,
407
+ disabled: !enabled,
408
+ checked: data === option,
409
+ value: option,
410
+ autoFocus: (_uischema$options7 = uischema.options) === null || _uischema$options7 === void 0 ? void 0 : _uischema$options7.focus,
411
+ onChange: function onChange() {
412
+ return handleChange(path, option);
413
+ }
414
+ }), (0, _capitalize["default"])(option)]
415
+ }, option);
416
+ })
417
+ })
418
+ });
419
+ };
420
+ var RadioButtonRenderer = (0, _react.withJsonFormsControlProps)(RadioButtonRendererComponent);
421
+ var selectTester = (0, _core.rankWith)(2, _core.isEnumControl);
422
+ var SelectRendererComponent = function SelectRendererComponent(_ref3) {
423
+ var _uischema$options8, _uischema$options9, _schema$enum3;
424
+ var data = _ref3.data,
425
+ handleChange = _ref3.handleChange,
426
+ path = _ref3.path,
427
+ required = _ref3.required,
428
+ enabled = _ref3.enabled,
429
+ id = _ref3.id,
430
+ label = _ref3.label,
431
+ description = _ref3.description,
432
+ uischema = _ref3.uischema,
433
+ schema = _ref3.schema,
434
+ errors = _ref3.errors,
435
+ visible = _ref3.visible;
436
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
437
+ label: label,
438
+ labelFor: id,
439
+ description: description,
440
+ state: getFieldState(errors),
441
+ inline: (_uischema$options8 = uischema.options) === null || _uischema$options8 === void 0 ? void 0 : _uischema$options8.inline,
442
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
443
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
444
+ id: id,
445
+ required: required,
446
+ disabled: !enabled,
447
+ value: data,
448
+ autoFocus: (_uischema$options9 = uischema.options) === null || _uischema$options9 === void 0 ? void 0 : _uischema$options9.focus,
449
+ onChange: function onChange(evt) {
450
+ return handleChange(path, evt.currentTarget.value);
451
+ },
452
+ children: (_schema$enum3 = schema["enum"]) === null || _schema$enum3 === void 0 ? void 0 : _schema$enum3.map(function (option) {
453
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
454
+ value: option,
455
+ children: (0, _capitalize["default"])(option)
456
+ }, option);
457
+ })
458
+ })
459
+ });
460
+ };
461
+ var SelectRenderer = (0, _react.withJsonFormsControlProps)(SelectRendererComponent);
462
+ var autocompleteTester = (0, _core.rankWith)(2, (0, _core.and)((0, _core.optionIs)("format", "autocomplete"), (0, _core.schemaMatches)(function (schema) {
463
+ return (0, _core.hasType)(schema, "array") && !Array.isArray(schema.items) && schema.uniqueItems === true;
464
+ })));
465
+ var AutocompleteRendererComponent = function AutocompleteRendererComponent(_ref4) {
466
+ var _uischema$options10, _oneOf, _uischema$options11, _uischema$options12, _uischema$options13, _uischema$options14;
467
+ var data = _ref4.data,
468
+ handleChange = _ref4.handleChange,
469
+ path = _ref4.path,
470
+ required = _ref4.required,
471
+ enabled = _ref4.enabled,
472
+ id = _ref4.id,
473
+ label = _ref4.label,
474
+ description = _ref4.description,
475
+ uischema = _ref4.uischema,
476
+ schema = _ref4.schema,
477
+ errors = _ref4.errors,
478
+ visible = _ref4.visible;
479
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
480
+ label: label,
481
+ labelFor: id,
482
+ description: description,
483
+ state: getFieldState(errors),
484
+ inline: (_uischema$options10 = uischema.options) === null || _uischema$options10 === void 0 ? void 0 : _uischema$options10.inline,
485
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
486
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoComplete.AutoComplete, {
487
+ id: id,
488
+ value: data.map(function (item) {
489
+ return {
490
+ value: item,
491
+ label: (0, _capitalize["default"])(item)
492
+ };
493
+ }),
494
+ options: (_oneOf = schema.items.oneOf) === null || _oneOf === void 0 ? void 0 : _oneOf.map(function (option) {
495
+ return {
496
+ value: option["const"],
497
+ label: (0, _capitalize["default"])(option.title)
498
+ };
499
+ }),
500
+ placeholder: (_uischema$options11 = uischema.options) === null || _uischema$options11 === void 0 ? void 0 : _uischema$options11.placeholder,
501
+ required: required,
502
+ disabled: !enabled,
503
+ autoFocus: (_uischema$options12 = uischema.options) === null || _uischema$options12 === void 0 ? void 0 : _uischema$options12.focus,
504
+ multiple: (_uischema$options13 = uischema.options) === null || _uischema$options13 === void 0 ? void 0 : _uischema$options13.multiple,
505
+ clearable: (_uischema$options14 = uischema.options) === null || _uischema$options14 === void 0 ? void 0 : _uischema$options14.clearable,
506
+ onChange: function onChange(value) {
507
+ return handleChange(path, value.map(function (item) {
508
+ return item.value;
509
+ }));
510
+ }
511
+ })
512
+ });
513
+ };
514
+ var AutocompleteRenderer = (0, _react.withJsonFormsControlProps)(AutocompleteRendererComponent);
515
+ var radioGroupTester = (0, _core.rankWith)(3, (0, _core.and)(_core.isEnumControl, (0, _core.optionIs)("format", "radioGroup")));
516
+ var RadioGroupRendererComponent = function RadioGroupRendererComponent(_ref5) {
517
+ var _uischema$options15, _schema$enum4;
518
+ var data = _ref5.data,
519
+ handleChange = _ref5.handleChange,
520
+ path = _ref5.path,
521
+ required = _ref5.required,
522
+ enabled = _ref5.enabled,
523
+ id = _ref5.id,
524
+ label = _ref5.label,
525
+ description = _ref5.description,
526
+ uischema = _ref5.uischema,
527
+ schema = _ref5.schema,
528
+ errors = _ref5.errors,
529
+ visible = _ref5.visible;
530
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
531
+ label: label,
532
+ labelFor: id,
533
+ description: description,
534
+ state: getFieldState(errors),
535
+ inline: (_uischema$options15 = uischema.options) === null || _uischema$options15 === void 0 ? void 0 : _uischema$options15.inline,
536
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
537
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup, {
538
+ id: id,
539
+ required: required,
540
+ disabled: !enabled,
541
+ value: data,
542
+ onChange: function onChange(value) {
543
+ return handleChange(path, value);
544
+ },
545
+ children: (_schema$enum4 = schema["enum"]) === null || _schema$enum4 === void 0 ? void 0 : _schema$enum4.map(function (item) {
546
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroup.RadioGroup.Item, {
547
+ value: item,
548
+ children: (0, _capitalize["default"])(item)
549
+ }, item);
550
+ })
551
+ })
552
+ });
553
+ };
554
+ var RadioGroupRenderer = (0, _react.withJsonFormsControlProps)(RadioGroupRendererComponent);
555
+ var datePickerTester = (0, _core.rankWith)(2, (0, _core.optionIs)("format", "date"));
556
+ var DatePickerRendererComponent = function DatePickerRendererComponent(_ref6) {
557
+ var _uischema$options16;
558
+ var data = _ref6.data,
559
+ handleChange = _ref6.handleChange,
560
+ path = _ref6.path,
561
+ required = _ref6.required,
562
+ id = _ref6.id,
563
+ label = _ref6.label,
564
+ uischema = _ref6.uischema,
565
+ description = _ref6.description,
566
+ errors = _ref6.errors,
567
+ visible = _ref6.visible;
568
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
569
+ label: label,
570
+ labelFor: id,
571
+ description: description,
572
+ state: getFieldState(errors),
573
+ inline: (_uischema$options16 = uischema.options) === null || _uischema$options16 === void 0 ? void 0 : _uischema$options16.inline,
574
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
575
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DatePicker.DatePicker, {
576
+ id: id,
577
+ calendarProps: {
578
+ disabled: {
579
+ after: new Date()
580
+ }
581
+ },
582
+ required: required,
583
+ value: data,
584
+ onChange: function onChange(value) {
585
+ return handleChange(path, value);
586
+ }
587
+ })
588
+ });
589
+ };
590
+ var DatePickerRenderer = (0, _react.withJsonFormsControlProps)(DatePickerRendererComponent);
591
+ var rangeSliderTester = (0, _core.rankWith)(2, (0, _core.and)((0, _core.or)((0, _core.schemaTypeIs)("integer"), (0, _core.schemaTypeIs)("array")), (0, _core.optionIs)("format", "slider")));
592
+ var RangeSliderRendererComponent = function RangeSliderRendererComponent(_ref7) {
593
+ var _uischema$options17, _uischema$options18, _uischema$options19, _uischema$options21, _uischema$options22, _uischema$options23, _uischema$options24, _uischema$options25, _uischema$options26;
594
+ var data = _ref7.data,
595
+ handleChange = _ref7.handleChange,
596
+ path = _ref7.path,
597
+ required = _ref7.required,
598
+ enabled = _ref7.enabled,
599
+ id = _ref7.id,
600
+ label = _ref7.label,
601
+ description = _ref7.description,
602
+ uischema = _ref7.uischema,
603
+ errors = _ref7.errors,
604
+ visible = _ref7.visible;
605
+ var step = (_uischema$options17 = uischema.options) === null || _uischema$options17 === void 0 ? void 0 : _uischema$options17.step;
606
+ var totalSteps = Math.floor((((_uischema$options18 = uischema.options) === null || _uischema$options18 === void 0 ? void 0 : _uischema$options18.maximum) - ((_uischema$options19 = uischema.options) === null || _uischema$options19 === void 0 ? void 0 : _uischema$options19.minimum)) / step);
607
+ var stepsInBetween = Array.from({
608
+ length: totalSteps - 1
609
+ }, function (_, index) {
610
+ var _uischema$options20;
611
+ return ((_uischema$options20 = uischema.options) === null || _uischema$options20 === void 0 ? void 0 : _uischema$options20.minimum) + step * (index + 1);
612
+ });
613
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Field.Field, {
614
+ label: label,
615
+ labelFor: id,
616
+ description: description,
617
+ state: getFieldState(errors),
618
+ inline: (_uischema$options21 = uischema.options) === null || _uischema$options21 === void 0 ? void 0 : _uischema$options21.inline,
619
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
620
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
621
+ className: (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["display-caption flex justify-between mb-2"]))),
622
+ children: [typeof ((_uischema$options22 = uischema.options) === null || _uischema$options22 === void 0 ? void 0 : _uischema$options22.minimum) !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
623
+ children: uischema.options.minimum
624
+ }), stepsInBetween.map(function (step) {
625
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
626
+ children: step
627
+ }, step);
628
+ }), typeof ((_uischema$options23 = uischema.options) === null || _uischema$options23 === void 0 ? void 0 : _uischema$options23.maximum) !== "undefined" && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
629
+ children: uischema.options.maximum
630
+ })]
631
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RangeSlider.RangeSlider, {
632
+ id: id,
633
+ min: (_uischema$options24 = uischema.options) === null || _uischema$options24 === void 0 ? void 0 : _uischema$options24.minimum,
634
+ max: (_uischema$options25 = uischema.options) === null || _uischema$options25 === void 0 ? void 0 : _uischema$options25.maximum,
635
+ step: (_uischema$options26 = uischema.options) === null || _uischema$options26 === void 0 ? void 0 : _uischema$options26.step,
636
+ required: required,
637
+ disabled: !enabled,
638
+ value: data,
639
+ onChange: function onChange(value) {
640
+ return handleChange(path, value);
641
+ }
642
+ })]
643
+ });
644
+ };
645
+ var RangeSliderRenderer = (0, _react.withJsonFormsControlProps)(RangeSliderRendererComponent);
646
+ var dropzoneTester = (0, _core.rankWith)(2, (0, _core.optionIs)("format", "dropzone"));
647
+ var DropzoneRendererComponent = function DropzoneRendererComponent(_ref8) {
648
+ var _uischema$options27, _uischema$options28, _uischema$options29, _uischema$options30, _uischema$options31, _uischema$options32;
649
+ var handleChange = _ref8.handleChange,
650
+ path = _ref8.path,
651
+ required = _ref8.required,
652
+ enabled = _ref8.enabled,
653
+ uischema = _ref8.uischema,
654
+ id = _ref8.id,
655
+ label = _ref8.label,
656
+ description = _ref8.description,
657
+ errors = _ref8.errors,
658
+ visible = _ref8.visible;
659
+ var _useAdditionalErrorsC = useAdditionalErrorsContext(),
660
+ setAdditionalErrors = _useAdditionalErrorsC.setAdditionalErrors;
661
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
662
+ label: label,
663
+ labelFor: id,
664
+ description: description,
665
+ state: getFieldState(errors),
666
+ inline: (_uischema$options27 = uischema.options) === null || _uischema$options27 === void 0 ? void 0 : _uischema$options27.inline,
667
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
668
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropzone.Dropzone, {
669
+ id: id,
670
+ minSize: (_uischema$options28 = uischema.options) === null || _uischema$options28 === void 0 ? void 0 : _uischema$options28.minSize,
671
+ maxSize: (_uischema$options29 = uischema.options) === null || _uischema$options29 === void 0 ? void 0 : _uischema$options29.maxSize,
672
+ accept: (_uischema$options30 = uischema.options) === null || _uischema$options30 === void 0 ? void 0 : _uischema$options30.accept,
673
+ clearable: (_uischema$options31 = uischema.options) === null || _uischema$options31 === void 0 ? void 0 : _uischema$options31.clearable,
674
+ multiple: (_uischema$options32 = uischema.options) === null || _uischema$options32 === void 0 ? void 0 : _uischema$options32.multiple,
675
+ required: required,
676
+ disabled: !enabled,
677
+ onChange: function onChange(acceptedFiles, rejectedFiles) {
678
+ if (rejectedFiles.length > 0) {
679
+ setAdditionalErrors(function (errors) {
680
+ return [].concat((0, _toConsumableArray2["default"])(errors), (0, _toConsumableArray2["default"])(rejectedFiles.map(function (files) {
681
+ return files.errors;
682
+ }).flat().map(function (error) {
683
+ return {
684
+ instancePath: "/".concat(path),
685
+ message: error.message,
686
+ schemaPath: "",
687
+ keyword: "",
688
+ params: {}
689
+ };
690
+ })));
691
+ });
692
+ } else {
693
+ setAdditionalErrors([]);
694
+ handleChange(path, acceptedFiles);
695
+ }
696
+ }
697
+ })
698
+ });
699
+ };
700
+ var DropzoneRenderer = (0, _react.withJsonFormsControlProps)(DropzoneRendererComponent);
701
+ var textAreaTester = (0, _core.rankWith)(2, (0, _core.and)((0, _core.schemaTypeIs)("string"), (0, _core.optionIs)("format", "textarea")));
702
+ var TextAreaRendererComponent = function TextAreaRendererComponent(_ref9) {
703
+ var _uischema$options33, _uischema$options34;
704
+ var data = _ref9.data,
705
+ handleChange = _ref9.handleChange,
706
+ path = _ref9.path,
707
+ required = _ref9.required,
708
+ enabled = _ref9.enabled,
709
+ id = _ref9.id,
710
+ label = _ref9.label,
711
+ uischema = _ref9.uischema,
712
+ description = _ref9.description,
713
+ errors = _ref9.errors,
714
+ visible = _ref9.visible;
715
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
716
+ label: label,
717
+ labelFor: id,
718
+ description: description,
719
+ state: getFieldState(errors),
720
+ inline: (_uischema$options33 = uischema.options) === null || _uischema$options33 === void 0 ? void 0 : _uischema$options33.inline,
721
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
722
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextArea.TextArea, {
723
+ id: id,
724
+ required: required,
725
+ disabled: !enabled,
726
+ placeholder: (_uischema$options34 = uischema.options) === null || _uischema$options34 === void 0 ? void 0 : _uischema$options34.placeholder,
727
+ value: data,
728
+ onChange: function onChange(evt) {
729
+ return handleChange(path, evt.currentTarget.value);
730
+ }
731
+ })
732
+ });
733
+ };
734
+ var TextAreaRenderer = (0, _react.withJsonFormsControlProps)(TextAreaRendererComponent);
735
+ var checkboxTester = (0, _core.rankWith)(1, (0, _core.schemaTypeIs)("boolean"));
736
+ var CheckboxRendererComponent = function CheckboxRendererComponent(_ref10) {
737
+ var _uischema$options35;
738
+ var data = _ref10.data,
739
+ handleChange = _ref10.handleChange,
740
+ path = _ref10.path,
741
+ required = _ref10.required,
742
+ enabled = _ref10.enabled,
743
+ id = _ref10.id,
744
+ label = _ref10.label,
745
+ uischema = _ref10.uischema,
746
+ description = _ref10.description,
747
+ errors = _ref10.errors,
748
+ visible = _ref10.visible;
749
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
750
+ label: label,
751
+ labelFor: id,
752
+ description: description,
753
+ state: getFieldState(errors),
754
+ inline: (_uischema$options35 = uischema.options) === null || _uischema$options35 === void 0 ? void 0 : _uischema$options35.inline,
755
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
756
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
757
+ id: id,
758
+ required: required,
759
+ disabled: !enabled,
760
+ checked: data,
761
+ onChange: function onChange(evt) {
762
+ return handleChange(path, evt.currentTarget.checked);
763
+ }
764
+ })
765
+ });
766
+ };
767
+ var CheckboxRenderer = (0, _react.withJsonFormsControlProps)(CheckboxRendererComponent);
768
+ var toggleTester = (0, _core.rankWith)(2, (0, _core.and)((0, _core.schemaTypeIs)("boolean"), (0, _core.optionIs)("format", "toggle")));
769
+ var ToggleRendererComponent = function ToggleRendererComponent(_ref11) {
770
+ var _uischema$options36;
771
+ var data = _ref11.data,
772
+ handleChange = _ref11.handleChange,
773
+ path = _ref11.path,
774
+ required = _ref11.required,
775
+ enabled = _ref11.enabled,
776
+ id = _ref11.id,
777
+ label = _ref11.label,
778
+ uischema = _ref11.uischema,
779
+ description = _ref11.description,
780
+ errors = _ref11.errors,
781
+ visible = _ref11.visible;
782
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Field.Field, {
783
+ label: label,
784
+ labelFor: id,
785
+ description: description,
786
+ state: getFieldState(errors),
787
+ inline: (_uischema$options36 = uischema.options) === null || _uischema$options36 === void 0 ? void 0 : _uischema$options36.inline,
788
+ className: (0, _clsx["default"])(!visible && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
789
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toggle.Toggle, {
790
+ id: id,
791
+ required: required,
792
+ disabled: !enabled,
793
+ checked: data,
794
+ onChange: function onChange(evt) {
795
+ return handleChange(path, evt.currentTarget.checked);
796
+ }
797
+ })
798
+ });
799
+ };
800
+ var ToggleRenderer = (0, _react.withJsonFormsControlProps)(ToggleRendererComponent);
801
+ var renderers = [{
802
+ tester: _vanillaRenderers.verticalLayoutTester,
803
+ renderer: _vanillaRenderers.VerticalLayout
804
+ }, {
805
+ tester: inputTester,
806
+ renderer: InputRenderer
807
+ }, {
808
+ tester: radioButtonTester,
809
+ renderer: RadioButtonRenderer
810
+ }, {
811
+ tester: selectTester,
812
+ renderer: SelectRenderer
813
+ }, {
814
+ tester: autocompleteTester,
815
+ renderer: AutocompleteRenderer
816
+ }, {
817
+ tester: radioGroupTester,
818
+ renderer: RadioGroupRenderer
819
+ }, {
820
+ tester: datePickerTester,
821
+ renderer: DatePickerRenderer
822
+ }, {
823
+ tester: rangeSliderTester,
824
+ renderer: RangeSliderRenderer
825
+ }, {
826
+ tester: dropzoneTester,
827
+ renderer: DropzoneRenderer
828
+ }, {
829
+ tester: textAreaTester,
830
+ renderer: TextAreaRenderer
831
+ }, {
832
+ tester: checkboxTester,
833
+ renderer: CheckboxRenderer
834
+ }, {
835
+ tester: toggleTester,
836
+ renderer: ToggleRenderer
837
+ }];
838
+ var styleContextValue = {
839
+ styles: [{
840
+ name: "vertical.layout",
841
+ classNames: [(0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72 w-full"])))]
842
+ }, {
843
+ name: "vertical.layout.item",
844
+ classNames: [(0, _satellitePrefixer["default"])(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["w-full"])))]
845
+ }]
846
+ };
847
+
848
+ // Allow the display of custom error messages using the `ajv-errors' package.
849
+ // For more information, see: https://jsonforms.io/docs/validation
850
+ var ajv = (0, _core.createAjv)();
851
+ (0, _ajvErrors["default"])(ajv);
852
+ var AdditionalErrorsContext = /*#__PURE__*/(0, _react2.createContext)(null);
853
+ var useAdditionalErrorsContext = function useAdditionalErrorsContext() {
854
+ var contextValue = (0, _react2.useContext)(AdditionalErrorsContext);
855
+ if (!contextValue) {
856
+ throw new Error("Invalid usage of useAdditionalErrorsContext outside of AdditionalErrorsContext");
857
+ }
858
+ return contextValue;
859
+ };
860
+ var JSONFormsComplexComponent = exports.JSONFormsComplexComponent = function JSONFormsComplexComponent() {
861
+ var _useState = (0, _react2.useState)(initialFormData),
862
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
863
+ internalFormData = _useState2[0],
864
+ setInternalFormData = _useState2[1];
865
+ var _useState3 = (0, _react2.useState)(initialFormData),
866
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
867
+ formData = _useState4[0],
868
+ setFormData = _useState4[1];
869
+ var _useState5 = (0, _react2.useState)([]),
870
+ _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
871
+ errors = _useState6[0],
872
+ setErrors = _useState6[1];
873
+ var _useState7 = (0, _react2.useState)([]),
874
+ _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
875
+ additionalErrors = _useState8[0],
876
+ setAdditionalErrors = _useState8[1];
877
+ var _useState9 = (0, _react2.useState)("ValidateAndHide"),
878
+ _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
879
+ validationMode = _useState10[0],
880
+ setValidationMode = _useState10[1];
881
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
882
+ className: (0, _satellitePrefixer["default"])(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col gap-8 w-3/5"]))),
883
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Form.ExperimentalForm, {
884
+ onSubmit: function onSubmit(e) {
885
+ e.preventDefault();
886
+ setValidationMode("ValidateAndShow");
887
+ if (!errors.length) {
888
+ setFormData(internalFormData);
889
+ }
890
+ },
891
+ onReset: function onReset() {
892
+ setInternalFormData(initialFormData);
893
+ setFormData(initialFormData);
894
+ setAdditionalErrors([]);
895
+ setValidationMode("ValidateAndHide");
896
+ },
897
+ className: (0, _satellitePrefixer["default"])(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["flex flex-col items-start gap-4 min-w-72"]))),
898
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormErrorMessage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(AdditionalErrorsContext.Provider, {
899
+ value: {
900
+ setAdditionalErrors: setAdditionalErrors
901
+ },
902
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vanillaRenderers.JsonFormsStyleContext.Provider, {
903
+ value: styleContextValue,
904
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.JsonForms, {
905
+ schema: schema,
906
+ uischema: uischema,
907
+ data: internalFormData,
908
+ renderers: renderers,
909
+ ajv: ajv,
910
+ validationMode: validationMode,
911
+ additionalErrors: additionalErrors,
912
+ onChange: function onChange(_ref12) {
913
+ var data = _ref12.data,
914
+ errors = _ref12.errors;
915
+ setInternalFormData(data);
916
+ setErrors((errors === null || errors === void 0 ? void 0 : errors.map(function (error) {
917
+ return error.message || "";
918
+ })) || []);
919
+ }
920
+ })
921
+ })
922
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
923
+ className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["flex gap-2"]))),
924
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormSubmit, {
925
+ variant: "primary",
926
+ "aria-label": "Save the form",
927
+ children: "Save"
928
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.ExperimentalFormReset, {
929
+ "aria-label": "Reset the form",
930
+ children: "Reset"
931
+ })]
932
+ })]
933
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
934
+ className: (0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["text-grey-500"])))
935
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("code", {
936
+ className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["whitespace-pre"]))),
937
+ children: JSON.stringify(formData, null, 2)
938
+ })]
939
+ });
940
+ };