@uxf/form 11.74.0 → 11.74.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 (237) hide show
  1. package/_code-generator/form-code-generator.d.ts +16 -0
  2. package/_code-generator/form-code-generator.js +69 -0
  3. package/avatar-file-input/avatar-file-input.d.ts +14 -0
  4. package/avatar-file-input/avatar-file-input.js +42 -0
  5. package/avatar-file-input/avatar-file-input.stories.d.ts +8 -0
  6. package/avatar-file-input/avatar-file-input.stories.js +23 -0
  7. package/avatar-file-input/index.d.ts +1 -0
  8. package/avatar-file-input/index.js +17 -0
  9. package/avatar-file-input/translations.d.ts +13 -0
  10. package/avatar-file-input/translations.js +14 -0
  11. package/bin/form-code-generator.d.ts +2 -0
  12. package/bin/form-code-generator.js +55 -0
  13. package/checkbox-button/checkbox-button.d.ts +14 -0
  14. package/checkbox-button/checkbox-button.js +42 -0
  15. package/checkbox-button/checkbox-button.stories.d.ts +8 -0
  16. package/checkbox-button/checkbox-button.stories.js +24 -0
  17. package/checkbox-button/index.d.ts +1 -0
  18. package/checkbox-button/index.js +17 -0
  19. package/checkbox-button/translations.d.ts +13 -0
  20. package/checkbox-button/translations.js +14 -0
  21. package/checkbox-input/checkbox-input.d.ts +14 -0
  22. package/checkbox-input/checkbox-input.js +42 -0
  23. package/checkbox-input/checkbox-input.stories.d.ts +8 -0
  24. package/checkbox-input/checkbox-input.stories.js +24 -0
  25. package/checkbox-input/index.d.ts +1 -0
  26. package/checkbox-input/index.js +17 -0
  27. package/checkbox-input/translations.d.ts +13 -0
  28. package/checkbox-input/translations.js +14 -0
  29. package/checkbox-list/checkbox-list.d.ts +19 -0
  30. package/checkbox-list/checkbox-list.js +40 -0
  31. package/checkbox-list/checkbox-list.stories.d.ts +2 -0
  32. package/checkbox-list/checkbox-list.stories.js +22 -0
  33. package/checkbox-list/index.d.ts +1 -0
  34. package/checkbox-list/index.js +17 -0
  35. package/checkbox-list/translations.d.ts +13 -0
  36. package/checkbox-list/translations.js +14 -0
  37. package/color-radio-group/color-radio-group.d.ts +13 -0
  38. package/color-radio-group/color-radio-group.js +42 -0
  39. package/color-radio-group/color-radio-group.stories.d.ts +8 -0
  40. package/color-radio-group/color-radio-group.stories.js +62 -0
  41. package/color-radio-group/index.d.ts +1 -0
  42. package/color-radio-group/index.js +17 -0
  43. package/color-radio-group/translations.d.ts +13 -0
  44. package/color-radio-group/translations.js +14 -0
  45. package/combobox/combobox.d.ts +13 -0
  46. package/combobox/combobox.js +48 -0
  47. package/combobox/combobox.stories.d.ts +8 -0
  48. package/combobox/combobox.stories.js +30 -0
  49. package/combobox/index.d.ts +1 -0
  50. package/combobox/index.js +17 -0
  51. package/combobox/translations.d.ts +13 -0
  52. package/combobox/translations.js +14 -0
  53. package/components.d.ts +127 -0
  54. package/components.js +154 -0
  55. package/date-picker-input/date-picker-input.d.ts +15 -0
  56. package/date-picker-input/date-picker-input.js +102 -0
  57. package/date-picker-input/date-picker-input.stories.d.ts +8 -0
  58. package/date-picker-input/date-picker-input.stories.js +31 -0
  59. package/date-picker-input/index.d.ts +1 -0
  60. package/date-picker-input/index.js +17 -0
  61. package/date-picker-input/translations.d.ts +31 -0
  62. package/date-picker-input/translations.js +32 -0
  63. package/date-range-picker-input/date-range-picker-input.d.ts +12 -0
  64. package/date-range-picker-input/date-range-picker-input.js +115 -0
  65. package/date-range-picker-input/date-range-picker-input.stories.d.ts +8 -0
  66. package/date-range-picker-input/date-range-picker-input.stories.js +25 -0
  67. package/date-range-picker-input/index.d.ts +1 -0
  68. package/date-range-picker-input/index.js +17 -0
  69. package/date-range-picker-input/translations.d.ts +25 -0
  70. package/date-range-picker-input/translations.js +26 -0
  71. package/datetime-picker-input/datetime-picker-input.d.ts +15 -0
  72. package/datetime-picker-input/datetime-picker-input.js +103 -0
  73. package/datetime-picker-input/datetime-picker-input.stories.d.ts +2 -0
  74. package/datetime-picker-input/datetime-picker-input.stories.js +28 -0
  75. package/datetime-picker-input/index.d.ts +1 -0
  76. package/datetime-picker-input/index.js +17 -0
  77. package/datetime-picker-input/translations.d.ts +31 -0
  78. package/datetime-picker-input/translations.js +32 -0
  79. package/dropzone/dropzone-input.d.ts +13 -0
  80. package/dropzone/dropzone-input.js +67 -0
  81. package/dropzone/dropzone-list.d.ts +11 -0
  82. package/dropzone/dropzone-list.js +23 -0
  83. package/dropzone/dropzone.stories.d.ts +2 -0
  84. package/dropzone/dropzone.stories.js +50 -0
  85. package/dropzone/index.d.ts +9 -0
  86. package/dropzone/index.js +6 -0
  87. package/dropzone/translations.d.ts +31 -0
  88. package/dropzone/translations.js +32 -0
  89. package/file-input/file-input.d.ts +14 -0
  90. package/file-input/file-input.js +42 -0
  91. package/file-input/file-input.stories.d.ts +8 -0
  92. package/file-input/file-input.stories.js +31 -0
  93. package/file-input/index.d.ts +1 -0
  94. package/file-input/index.js +17 -0
  95. package/file-input/translations.d.ts +13 -0
  96. package/file-input/translations.js +14 -0
  97. package/form/form.d.ts +19 -0
  98. package/form/form.js +25 -0
  99. package/form/form.stories.d.ts +8 -0
  100. package/form/form.stories.js +24 -0
  101. package/form/index.d.ts +1 -0
  102. package/form/index.js +17 -0
  103. package/form-id-context/form-context.d.ts +7 -0
  104. package/form-id-context/form-context.js +12 -0
  105. package/form-id-context/form-id-context.d.ts +2 -0
  106. package/form-id-context/form-id-context.js +7 -0
  107. package/form-id-context/index.d.ts +1 -0
  108. package/form-id-context/index.js +17 -0
  109. package/form-renderer/big-test-schema.d.ts +33 -0
  110. package/form-renderer/big-test-schema.js +295 -0
  111. package/form-renderer/field/base-field.d.ts +4 -0
  112. package/form-renderer/field/base-field.js +72 -0
  113. package/form-renderer/field/embedded.d.ts +4 -0
  114. package/form-renderer/field/embedded.js +19 -0
  115. package/form-renderer/field/one-to-many.d.ts +4 -0
  116. package/form-renderer/field/one-to-many.js +52 -0
  117. package/form-renderer/form-renderer.d.ts +16 -0
  118. package/form-renderer/form-renderer.js +28 -0
  119. package/form-renderer/form-renderer.stories.d.ts +2 -0
  120. package/form-renderer/form-renderer.stories.js +23 -0
  121. package/form-renderer/index.d.ts +2 -0
  122. package/form-renderer/index.js +18 -0
  123. package/form-renderer/mapper.d.ts +2 -0
  124. package/form-renderer/mapper.js +30 -0
  125. package/form-renderer/translations.d.ts +33 -0
  126. package/form-renderer/translations.js +34 -0
  127. package/form-renderer/types.d.ts +39 -0
  128. package/form-renderer/types.js +2 -0
  129. package/gps-input/gps-input.d.ts +20 -0
  130. package/gps-input/gps-input.js +156 -0
  131. package/gps-input/gps-input.stories.d.ts +8 -0
  132. package/gps-input/gps-input.stories.js +22 -0
  133. package/gps-input/index.d.ts +1 -0
  134. package/gps-input/index.js +17 -0
  135. package/gps-input/translations.d.ts +31 -0
  136. package/gps-input/translations.js +32 -0
  137. package/money-input/index.d.ts +1 -0
  138. package/money-input/index.js +17 -0
  139. package/money-input/money-input.d.ts +24 -0
  140. package/money-input/money-input.js +112 -0
  141. package/money-input/money-input.stories.d.ts +2 -0
  142. package/money-input/money-input.stories.js +15 -0
  143. package/money-input/translations.d.ts +13 -0
  144. package/money-input/translations.js +14 -0
  145. package/multi-combobox/index.d.ts +1 -0
  146. package/multi-combobox/index.js +17 -0
  147. package/multi-combobox/multi-combobox.d.ts +13 -0
  148. package/multi-combobox/multi-combobox.js +48 -0
  149. package/multi-combobox/multi-combobox.stories.d.ts +8 -0
  150. package/multi-combobox/multi-combobox.stories.js +54 -0
  151. package/multi-combobox/translations.d.ts +13 -0
  152. package/multi-combobox/translations.js +14 -0
  153. package/multi-select/index.d.ts +1 -0
  154. package/multi-select/index.js +17 -0
  155. package/multi-select/multi-select.d.ts +13 -0
  156. package/multi-select/multi-select.js +43 -0
  157. package/multi-select/multi-select.stories.d.ts +8 -0
  158. package/multi-select/multi-select.stories.js +47 -0
  159. package/multi-select/translations.d.ts +13 -0
  160. package/multi-select/translations.js +14 -0
  161. package/number-input/index.d.ts +1 -0
  162. package/number-input/index.js +17 -0
  163. package/number-input/number-input.d.ts +17 -0
  164. package/number-input/number-input.js +87 -0
  165. package/number-input/number-input.stories.d.ts +8 -0
  166. package/number-input/number-input.stories.js +24 -0
  167. package/number-input/translations.d.ts +25 -0
  168. package/number-input/translations.js +26 -0
  169. package/package.json +3 -3
  170. package/password-input/index.d.ts +1 -0
  171. package/password-input/index.js +17 -0
  172. package/password-input/password-input.d.ts +15 -0
  173. package/password-input/password-input.js +108 -0
  174. package/password-input/password-input.stories.d.ts +8 -0
  175. package/password-input/password-input.stories.js +23 -0
  176. package/password-input/translations.d.ts +19 -0
  177. package/password-input/translations.js +20 -0
  178. package/radio-group/index.d.ts +1 -0
  179. package/radio-group/index.js +17 -0
  180. package/radio-group/radio-group.d.ts +13 -0
  181. package/radio-group/radio-group.js +42 -0
  182. package/radio-group/radio-group.stories.d.ts +8 -0
  183. package/radio-group/radio-group.stories.js +38 -0
  184. package/radio-group/translations.d.ts +13 -0
  185. package/radio-group/translations.js +14 -0
  186. package/readmes.d.ts +28 -0
  187. package/readmes.js +59 -0
  188. package/select/index.d.ts +1 -0
  189. package/select/index.js +17 -0
  190. package/select/select.d.ts +13 -0
  191. package/select/select.js +41 -0
  192. package/select/select.stories.d.ts +8 -0
  193. package/select/select.stories.js +44 -0
  194. package/select/translations.d.ts +13 -0
  195. package/select/translations.js +14 -0
  196. package/storybook/form-data-printer.d.ts +6 -0
  197. package/storybook/form-data-printer.js +12 -0
  198. package/storybook/storybook-form.d.ts +8 -0
  199. package/storybook/storybook-form.js +42 -0
  200. package/text-input/index.d.ts +1 -0
  201. package/text-input/index.js +17 -0
  202. package/text-input/text-input.d.ts +33 -0
  203. package/text-input/text-input.js +75 -0
  204. package/text-input/text-input.stories.d.ts +8 -0
  205. package/text-input/text-input.stories.js +26 -0
  206. package/text-input/translations.d.ts +31 -0
  207. package/text-input/translations.js +32 -0
  208. package/textarea/index.d.ts +1 -0
  209. package/textarea/index.js +17 -0
  210. package/textarea/textarea.d.ts +13 -0
  211. package/textarea/textarea.js +62 -0
  212. package/textarea/textarea.stories.d.ts +8 -0
  213. package/textarea/textarea.stories.js +22 -0
  214. package/textarea/translations.d.ts +13 -0
  215. package/textarea/translations.js +14 -0
  216. package/time-picker-input/index.d.ts +1 -0
  217. package/time-picker-input/index.js +17 -0
  218. package/time-picker-input/time-picker-input.d.ts +14 -0
  219. package/time-picker-input/time-picker-input.js +84 -0
  220. package/time-picker-input/time-picker-input.stories.d.ts +8 -0
  221. package/time-picker-input/time-picker-input.stories.js +25 -0
  222. package/time-picker-input/translations.d.ts +19 -0
  223. package/time-picker-input/translations.js +20 -0
  224. package/toggle/index.d.ts +1 -0
  225. package/toggle/index.js +17 -0
  226. package/toggle/toggle.d.ts +14 -0
  227. package/toggle/toggle.js +40 -0
  228. package/toggle/toggle.stories.d.ts +8 -0
  229. package/toggle/toggle.stories.js +23 -0
  230. package/toggle/translations.d.ts +13 -0
  231. package/toggle/translations.js +14 -0
  232. package/translations/cs.json +148 -0
  233. package/translations/de.json +148 -0
  234. package/translations/en.json +148 -0
  235. package/translations/sk.json +148 -0
  236. package/types.d.ts +4 -0
  237. package/types.js +2 -0
@@ -0,0 +1,16 @@
1
+ import { FormProps as UXFFormProps } from "@uxf/form/form";
2
+ import React, { FunctionComponent } from "react";
3
+ import { FieldValues, FormState } from "react-hook-form";
4
+ import { FormRendererFields, FormSchema } from "./types";
5
+ type SubmitButtonComponent<TFieldValues extends FieldValues = FieldValues> = FunctionComponent<{
6
+ formState: FormState<TFieldValues>;
7
+ }>;
8
+ interface FormRendererProps<T extends FieldValues> extends Omit<UXFFormProps<T>, "children"> {
9
+ className?: string;
10
+ schema: FormSchema;
11
+ fields: FormRendererFields;
12
+ isEditing?: boolean;
13
+ SubmitButton?: SubmitButtonComponent<T>;
14
+ }
15
+ export declare function FormRenderer<T extends FieldValues>(props: FormRendererProps<T>): React.JSX.Element;
16
+ export {};
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.FormRenderer = FormRenderer;
7
+ const translations_1 = require("@uxf/core-react/translations");
8
+ const form_1 = require("@uxf/form/form");
9
+ const button_1 = require("@uxf/ui/button");
10
+ const react_1 = __importDefault(require("react"));
11
+ const BaseSubmitButton = (props) => {
12
+ const { isSubmitting } = props.formState;
13
+ const t = (0, translations_1.useUxfTranslation)();
14
+ return (react_1.default.createElement(button_1.Button, { isDisabled: isSubmitting, type: "submit" }, t("uxf-form-form-renderer:submit-button")));
15
+ };
16
+ function FormRenderer(props) {
17
+ var _a;
18
+ const SubmitButton = (_a = props.SubmitButton) !== null && _a !== void 0 ? _a : BaseSubmitButton;
19
+ return (react_1.default.createElement(form_1.Form, { className: "uxf-form-renderer", formApi: props.formApi, id: props.id, onSubmit: props.onSubmit },
20
+ react_1.default.createElement("div", { className: "uxf-form-renderer__body" }, props.schema.fields.map((field, i) => {
21
+ var _a;
22
+ const Field = (_a = props.fields[field.type]) !== null && _a !== void 0 ? _a : props.fields.default;
23
+ return (react_1.default.createElement("div", { className: "p-4", key: i },
24
+ react_1.default.createElement(Field, { control: props.formApi.control, fieldSchema: field, fields: props.fields, isEditing: props.isEditing })));
25
+ })),
26
+ react_1.default.createElement("div", { className: "uxf-form-renderer__footer" },
27
+ react_1.default.createElement(SubmitButton, { formState: props.formApi.formState }))));
28
+ }
@@ -0,0 +1,2 @@
1
+ import React from "react";
2
+ export declare function Example(): React.JSX.Element;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ "use client";
3
+ var __importDefault = (this && this.__importDefault) || function (mod) {
4
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ exports.Example = Example;
8
+ const react_1 = __importDefault(require("react"));
9
+ const react_hook_form_1 = require("react-hook-form");
10
+ const big_test_schema_1 = require("./big-test-schema");
11
+ const base_field_1 = __importDefault(require("./field/base-field"));
12
+ const embedded_1 = __importDefault(require("./field/embedded"));
13
+ const one_to_many_1 = __importDefault(require("./field/one-to-many"));
14
+ const form_renderer_1 = require("./form-renderer");
15
+ const fields = {
16
+ default: base_field_1.default,
17
+ embedded: embedded_1.default,
18
+ oneToMany: one_to_many_1.default,
19
+ };
20
+ function Example() {
21
+ const formApi = (0, react_hook_form_1.useForm)({ defaultValues: {} });
22
+ return react_1.default.createElement(form_renderer_1.FormRenderer, { fields: fields, formApi: formApi, id: "example-form", onSubmit: console.log, schema: big_test_schema_1.schema });
23
+ }
@@ -0,0 +1,2 @@
1
+ export * from "./form-renderer";
2
+ export * from "./types";
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./form-renderer"), exports);
18
+ __exportStar(require("./types"), exports);
@@ -0,0 +1,2 @@
1
+ import { FormSchema } from "./types";
2
+ export declare const mapToRequestObject: (values: any, schema: FormSchema) => any;
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.mapToRequestObject = void 0;
4
+ const empty_array_1 = require("@uxf/core/constants/empty-array");
5
+ const mapToRequestObject = (values, schema) => {
6
+ var _a, _b;
7
+ const requestObject = { ...values };
8
+ for (const field of schema.fields) {
9
+ const { name, type } = field;
10
+ const value = requestObject[name];
11
+ switch (type) {
12
+ case "boolean":
13
+ requestObject[name] = Boolean(value);
14
+ break;
15
+ case "file":
16
+ case "image":
17
+ requestObject[name] = value ? value.id : value;
18
+ break;
19
+ case "content":
20
+ // TODO search string
21
+ requestObject[name] = value ? { data: (_a = value.data) !== null && _a !== void 0 ? _a : empty_array_1.EMPTY_ARRAY, search: (_b = value.search) !== null && _b !== void 0 ? _b : "" } : null;
22
+ break;
23
+ case "embedded":
24
+ requestObject[name] = (0, exports.mapToRequestObject)(value, field);
25
+ break;
26
+ }
27
+ }
28
+ return requestObject;
29
+ };
30
+ exports.mapToRequestObject = mapToRequestObject;
@@ -0,0 +1,33 @@
1
+ declare const _default: {
2
+ "uxf-form-form-renderer": {
3
+ "file-upload-error": {
4
+ cs: string;
5
+ en: string;
6
+ sk: string;
7
+ de: string;
8
+ };
9
+ "submit-button": {
10
+ cs: string;
11
+ en: string;
12
+ sk: string;
13
+ de: string;
14
+ };
15
+ fields: {
16
+ "one-to-many": {
17
+ "delete-item": {
18
+ cs: string;
19
+ en: string;
20
+ sk: string;
21
+ de: string;
22
+ };
23
+ "add-item": {
24
+ cs: string;
25
+ en: string;
26
+ sk: string;
27
+ de: string;
28
+ };
29
+ };
30
+ };
31
+ };
32
+ };
33
+ export default _default;
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ "uxf-form-form-renderer": {
5
+ "file-upload-error": {
6
+ cs: "Soubor se nepodařilo nahrát.",
7
+ en: "File could not be uploaded.",
8
+ sk: "Súbor sa nepodarilo nahrať.",
9
+ de: "Datei konnte nicht hochgeladen werden.",
10
+ },
11
+ "submit-button": {
12
+ cs: "Uložit",
13
+ en: "Save",
14
+ sk: "Uložiť",
15
+ de: "Speichern",
16
+ },
17
+ fields: {
18
+ "one-to-many": {
19
+ "delete-item": {
20
+ cs: "Smazat položku",
21
+ en: "Delete item",
22
+ sk: "Zmazať položku",
23
+ de: "Element löschen",
24
+ },
25
+ "add-item": {
26
+ cs: "Přidat položku",
27
+ en: "Add item",
28
+ sk: "Pridať položku",
29
+ de: "Element hinzufügen",
30
+ },
31
+ },
32
+ },
33
+ },
34
+ };
@@ -0,0 +1,39 @@
1
+ import { Autocomplete } from "@uxf/core/api/autocomplete";
2
+ import { OnUploadFileHandler } from "@uxf/core/types";
3
+ import { DropzoneFile } from "@uxf/ui/dropzone/types";
4
+ import { FunctionComponent } from "react";
5
+ import { Control } from "react-hook-form";
6
+ export interface FieldSchema {
7
+ autocomplete: string | null;
8
+ name: string;
9
+ type: string;
10
+ label: string;
11
+ required: boolean;
12
+ readOnly: boolean;
13
+ editable: boolean;
14
+ fields: FieldSchema[];
15
+ options: Array<{
16
+ id: string | number;
17
+ label: string;
18
+ }> | null;
19
+ }
20
+ export interface FormSchema {
21
+ fields: FieldSchema[];
22
+ }
23
+ export interface FieldProps {
24
+ fieldSchema: FieldSchema;
25
+ fields: FormRendererFields;
26
+ isEditing?: boolean;
27
+ prefix?: string;
28
+ control: Control<any>;
29
+ overrides?: {
30
+ autocomplete?: Autocomplete;
31
+ upload?: OnUploadFileHandler;
32
+ onRemoveConfirm?: (file: DropzoneFile) => Promise<boolean>;
33
+ };
34
+ }
35
+ export type FieldComponent = FunctionComponent<FieldProps>;
36
+ export type FormRendererFields = {
37
+ [type: string]: FieldComponent;
38
+ default: FieldComponent;
39
+ };
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
@@ -0,0 +1,20 @@
1
+ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
2
+ import { FormControlProps } from "@uxf/ui/types";
3
+ import React from "react";
4
+ import { FieldValues } from "react-hook-form";
5
+ import { ControlProps } from "../types";
6
+ export type Gps = {
7
+ lat: number;
8
+ lng: number;
9
+ };
10
+ type OnChangeHandler = FormControlProps<string>["onChange"];
11
+ export type GpsInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "pattern" | "step" | "value" | "type"> & {
12
+ onChange?: OnChangeHandler;
13
+ requiredMessage?: string;
14
+ };
15
+ export type GpsInputValue = Gps;
16
+ export declare function GpsInput<FormData extends Record<string, Gps | null | undefined>>(props: GpsInputProps<FormData>): React.JSX.Element;
17
+ export declare namespace GpsInput {
18
+ var displayName: string;
19
+ }
20
+ export {};
@@ -0,0 +1,156 @@
1
+ "use strict";
2
+ "use client";
3
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
4
+ if (k2 === undefined) k2 = k;
5
+ var desc = Object.getOwnPropertyDescriptor(m, k);
6
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
7
+ desc = { enumerable: true, get: function() { return m[k]; } };
8
+ }
9
+ Object.defineProperty(o, k2, desc);
10
+ }) : (function(o, m, k, k2) {
11
+ if (k2 === undefined) k2 = k;
12
+ o[k2] = m[k];
13
+ }));
14
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
15
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
16
+ }) : function(o, v) {
17
+ o["default"] = v;
18
+ });
19
+ var __importStar = (this && this.__importStar) || function (mod) {
20
+ if (mod && mod.__esModule) return mod;
21
+ var result = {};
22
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
23
+ __setModuleDefault(result, mod);
24
+ return result;
25
+ };
26
+ var __importDefault = (this && this.__importDefault) || function (mod) {
27
+ return (mod && mod.__esModule) ? mod : { "default": mod };
28
+ };
29
+ Object.defineProperty(exports, "__esModule", { value: true });
30
+ exports.GpsInput = GpsInput;
31
+ const translations_1 = require("@uxf/core-react/translations");
32
+ const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
33
+ const text_input_1 = require("@uxf/ui/text-input");
34
+ const tooltip_1 = require("@uxf/ui/tooltip");
35
+ const coordinate_parser_1 = __importDefault(require("coordinate-parser"));
36
+ const react_1 = __importStar(require("react"));
37
+ const react_hook_form_1 = require("react-hook-form");
38
+ const form_context_1 = require("../form-id-context/form-context");
39
+ const SUPPORTED_FORMATS = (react_1.default.createElement("div", null,
40
+ "40.123, -74.123",
41
+ react_1.default.createElement("br", null),
42
+ "40.123\u00B0 N 74.123\u00B0 W",
43
+ react_1.default.createElement("br", null),
44
+ "40\u00B0 7\u00B4 22.8\" N 74\u00B0 7\u00B4 22.8\" W",
45
+ react_1.default.createElement("br", null),
46
+ "40\u00B0 7.38\u2019 , -74\u00B0 7.38\u2019",
47
+ react_1.default.createElement("br", null),
48
+ "N40\u00B07\u201922.8, W74\u00B07\u201922.8\"",
49
+ react_1.default.createElement("br", null),
50
+ "40\u00B07\u201922.8\"N, 74\u00B07\u201922.8\"W",
51
+ react_1.default.createElement("br", null),
52
+ "40 7 22.8, -74 7 22.8",
53
+ react_1.default.createElement("br", null),
54
+ "40.123 -74.123",
55
+ react_1.default.createElement("br", null),
56
+ "40.123\u00B0,-74.123\u00B0",
57
+ react_1.default.createElement("br", null),
58
+ "144442800, -266842800",
59
+ react_1.default.createElement("br", null),
60
+ "40.123N74.123W",
61
+ react_1.default.createElement("br", null),
62
+ "4007.38N7407.38W",
63
+ react_1.default.createElement("br", null),
64
+ "40\u00B07\u201922.8\"N, 74\u00B07\u201922.8\"W",
65
+ react_1.default.createElement("br", null),
66
+ "400722.8N740722.8W",
67
+ react_1.default.createElement("br", null),
68
+ "N 40 7.38 W 74 7.38",
69
+ react_1.default.createElement("br", null),
70
+ "40:7:23N,74:7:23W",
71
+ react_1.default.createElement("br", null),
72
+ "40:7:22.8N 74:7:22.8W",
73
+ react_1.default.createElement("br", null),
74
+ "40\u00B07\u201923\"N 74\u00B07\u201923\"W",
75
+ react_1.default.createElement("br", null),
76
+ "40\u00B07\u201923\" -74\u00B07\u201923\"",
77
+ react_1.default.createElement("br", null),
78
+ "40d 7\u2019 23\" N 74d 7\u2019 23\" W",
79
+ react_1.default.createElement("br", null),
80
+ "40.123N 74.123W",
81
+ react_1.default.createElement("br", null),
82
+ "40\u00B0 7.38, -74\u00B0 7.38",
83
+ react_1.default.createElement("br", null)));
84
+ const getSupportedFormatsTooltip = (t) => (react_1.default.createElement("span", { className: "text-lightMedium" },
85
+ "(",
86
+ react_1.default.createElement(tooltip_1.Tooltip, { content: SUPPORTED_FORMATS },
87
+ react_1.default.createElement("span", { className: "underline" }, t("uxf-form-gps-input:validation.supported-formats"))),
88
+ ")"));
89
+ function GpsInput(props) {
90
+ var _a, _b;
91
+ const formContext = (0, form_context_1.useFormContext)();
92
+ const t = (0, translations_1.useUxfTranslation)();
93
+ const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
94
+ const [visualValue, setVisualValue] = (0, react_1.useState)("");
95
+ const [coordsFormatError, setCoordsFormatError] = (0, react_1.useState)(false);
96
+ const { field, fieldState } = (0, react_hook_form_1.useController)({
97
+ control: props.control,
98
+ name: props.name,
99
+ rules: {
100
+ ...props.rules,
101
+ validate: {
102
+ ...(_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate,
103
+ req: (value) => {
104
+ var _a;
105
+ return props.isRequired && value === undefined
106
+ ? ((_a = props.requiredMessage) !== null && _a !== void 0 ? _a : t("uxf-form-gps-input:validation.required", { value: value }))
107
+ : undefined;
108
+ },
109
+ format: (value) => {
110
+ return value === null
111
+ ? t("uxf-form-gps-input:validation.invalid-coordinates", { value: value })
112
+ : undefined;
113
+ },
114
+ },
115
+ },
116
+ shouldUnregister: props.shouldUnregister,
117
+ });
118
+ (0, react_1.useEffect)(() => {
119
+ if (field.value && visualValue === "") {
120
+ setVisualValue(`${field.value.lat}N, ${field.value.lng}E`);
121
+ }
122
+ }, [field.value, visualValue]);
123
+ const onBlur = (event) => {
124
+ var _a;
125
+ field.onBlur();
126
+ (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
127
+ };
128
+ const onChange = (value, event) => {
129
+ var _a, _b;
130
+ setVisualValue(value);
131
+ try {
132
+ const coords = new coordinate_parser_1.default(value);
133
+ setCoordsFormatError(false);
134
+ field.onChange({ lat: coords.getLatitude(), lng: coords.getLongitude() });
135
+ (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
136
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
137
+ }
138
+ catch (e) {
139
+ setCoordsFormatError(true);
140
+ field.onChange(null);
141
+ (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
142
+ }
143
+ };
144
+ const composedHelperText = (react_1.default.createElement(react_1.default.Fragment, null,
145
+ fieldState.error && !coordsFormatError && !field.value
146
+ ? `${fieldState.error.message}`
147
+ : field.value
148
+ ? `${field.value.lat}N, ${field.value.lng}E`
149
+ : visualValue
150
+ ? t("uxf-form-gps-input:validation.invalid-coordinates", { value: visualValue })
151
+ : t("uxf-form-gps-input:validation.empty-coordinates"),
152
+ " ",
153
+ getSupportedFormatsTooltip(t)));
154
+ return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: composedHelperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: ((0, is_not_nil_1.isNotNil)(fieldState.error) && !field.value) || coordsFormatError, isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, type: "text", value: visualValue, variant: props.variant }));
155
+ }
156
+ GpsInput.displayName = "UxfFormGpsInput";
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ import { GpsInput } from "./gps-input";
3
+ declare const _default: {
4
+ title: string;
5
+ component: typeof GpsInput;
6
+ };
7
+ export default _default;
8
+ export declare function Default(): React.JSX.Element;
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Default = Default;
7
+ const button_1 = require("@uxf/ui/button");
8
+ const react_1 = __importDefault(require("react"));
9
+ const storybook_form_1 = require("../storybook/storybook-form");
10
+ const gps_input_1 = require("./gps-input");
11
+ exports.default = {
12
+ title: "Form/GpsInput",
13
+ component: gps_input_1.GpsInput,
14
+ };
15
+ function Default() {
16
+ const storyFormGpsInputs = (control) => (react_1.default.createElement("div", { className: "space-y-4" },
17
+ react_1.default.createElement(gps_input_1.GpsInput, { control: control, label: "GPS", name: "gps", placeholder: "Zadejte sou\u0159adnice..." }),
18
+ react_1.default.createElement(gps_input_1.GpsInput, { control: control, isRequired: true, label: "GPS", name: "gps-required", placeholder: "Zadejte sou\u0159adnice..." }),
19
+ react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
20
+ return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
21
+ react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormGpsInputs(control))))));
22
+ }
@@ -0,0 +1 @@
1
+ export * from "./gps-input";
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./gps-input"), exports);
@@ -0,0 +1,31 @@
1
+ declare const _default: {
2
+ "uxf-form-gps-input": {
3
+ validation: {
4
+ "supported-formats": {
5
+ cs: string;
6
+ en: string;
7
+ sk: string;
8
+ de: string;
9
+ };
10
+ required: {
11
+ cs: string;
12
+ en: string;
13
+ sk: string;
14
+ de: string;
15
+ };
16
+ "empty-coordinates": {
17
+ cs: string;
18
+ en: string;
19
+ sk: string;
20
+ de: string;
21
+ };
22
+ "invalid-coordinates": {
23
+ cs: string;
24
+ en: string;
25
+ sk: string;
26
+ de: string;
27
+ };
28
+ };
29
+ };
30
+ };
31
+ export default _default;
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.default = {
4
+ "uxf-form-gps-input": {
5
+ validation: {
6
+ "supported-formats": {
7
+ cs: "podporované formáty",
8
+ en: "supported formats",
9
+ sk: "podporované formáty",
10
+ de: "unterstützte Formate",
11
+ },
12
+ required: {
13
+ cs: "Toto pole je povinné",
14
+ en: "This field is required",
15
+ sk: "Toto pole je povinné",
16
+ de: "Dieses Feld ist erforderlich",
17
+ },
18
+ "empty-coordinates": {
19
+ cs: "Zadejte souřadnice.",
20
+ en: "Enter coordinates.",
21
+ sk: "Zadajte súradnice.",
22
+ de: "Koordinaten eingeben.",
23
+ },
24
+ "invalid-coordinates": {
25
+ cs: "Souřadnice nejsou validní. Aktuální hodnota je {{value}}.",
26
+ en: "Coordinates are not valid. Current value is {{value}}.",
27
+ sk: "Súradnice nie sú platné. Aktuálna hodnota je {{value}}.",
28
+ de: "Koordinaten sind nicht gültig. Aktueller Wert ist {{value}}.",
29
+ },
30
+ },
31
+ },
32
+ };
@@ -0,0 +1 @@
1
+ export * from "./money-input";
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("./money-input"), exports);
@@ -0,0 +1,24 @@
1
+ import { Currency, Money } from "@uxf/core/money";
2
+ import { FormControlProps } from "@uxf/ui/types";
3
+ import React, { ReactNode } from "react";
4
+ import { FieldValues } from "react-hook-form";
5
+ import { ControlProps } from "../types";
6
+ export type MoneyInputValue = Money | null;
7
+ export type MoneyInputProps<FormData extends FieldValues> = Omit<ControlProps<FormData>, "defaultValue"> & Omit<FormControlProps<MoneyInputValue>, "value" | "onChange"> & {
8
+ defaultCurrency?: Currency;
9
+ id?: string;
10
+ label?: string;
11
+ leftAddon?: ReactNode;
12
+ leftElement?: ReactNode;
13
+ max?: number;
14
+ maxMessage?: (value: MoneyInputValue) => string;
15
+ min?: number;
16
+ minMessage?: (value: MoneyInputValue) => string;
17
+ onChange?: FormControlProps<MoneyInputValue>["onChange"];
18
+ requiredMessage?: string;
19
+ rightAddon?: ReactNode;
20
+ };
21
+ export declare function MoneyInput<FormData extends FieldValues>(props: MoneyInputProps<FormData>): React.JSX.Element;
22
+ export declare namespace MoneyInput {
23
+ var displayName: string;
24
+ }