@uxf/form 11.72.3 → 11.74.0

package/README.md

@@ -1,9 +1,11 @@
 # @uxf/form
 
+> **Note:** This package contains translations. For proper functionality, you must use the `TranslationsProvider` from `@uxf/core-react/translations`. See the [core-react documentation](https://fe.uxf.dev/docs/core-react) for more information.
+
 ## [Documentation](https://ui.uxf.dev)
 
 ## How to install
 
 ```bash
 yarn add @uxf/form
-```
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/form",
-    "version": "11.72.3",
+    "version": "11.74.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -16,7 +16,9 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@uxf/ui": "11.72.3",
+        "@uxf/core": "11.72.3",
+        "@uxf/core-react": "11.74.0",
+        "@uxf/ui": "11.74.0",
         "coordinate-parser": "1.0.7",
         "dayjs": "1.11.13",
         "react-hook-form": "7.53.0"

package/translations/translations.d.ts

@@ -0,0 +1,389 @@
+declare const _default: {
+    "uxf-form-toggle": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-time-picker-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-time-format": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-textarea": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-text-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-email": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-phone": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-url": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-select": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-radio-group": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-password-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-length": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-number-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "max-value": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-value": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-multi-select": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-multi-combobox": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-money-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-gps-input": {
+        validation: {
+            "supported-formats": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "empty-coordinates": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-coordinates": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-form-renderer": {
+        "file-upload-error": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+        "submit-button": {
+            cs: string;
+            en: string;
+            sk: string;
+            de: string;
+        };
+        fields: {
+            "one-to-many": {
+                "delete-item": {
+                    cs: string;
+                    en: string;
+                    sk: string;
+                    de: string;
+                };
+                "add-item": {
+                    cs: string;
+                    en: string;
+                    sk: string;
+                    de: string;
+                };
+            };
+        };
+    };
+    "uxf-form-file-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-dropzone": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "max-files-count": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-files-count": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "upload-not-completed": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-datetime-picker-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-datetime-format": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-date": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "max-date": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-date-range-picker-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-date-range-format": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-date-range-order": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-date-picker-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "invalid-date-format": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "min-date": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+            "max-date": {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-combobox": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-color-radio-group": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-checkbox-list": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-checkbox-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-checkbox-button": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+    "uxf-form-avatar-file-input": {
+        validation: {
+            required: {
+                cs: string;
+                en: string;
+                sk: string;
+                de: string;
+            };
+        };
+    };
+};
+export default _default;

package/translations/translations.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const translations_1 = __importDefault(require("@uxf/form/avatar-file-input/translations"));
+const translations_2 = __importDefault(require("@uxf/form/checkbox-button/translations"));
+const translations_3 = __importDefault(require("@uxf/form/checkbox-input/translations"));
+const translations_4 = __importDefault(require("@uxf/form/checkbox-list/translations"));
+const translations_5 = __importDefault(require("@uxf/form/color-radio-group/translations"));
+const translations_6 = __importDefault(require("@uxf/form/combobox/translations"));
+const translations_7 = __importDefault(require("@uxf/form/date-picker-input/translations"));
+const translations_8 = __importDefault(require("@uxf/form/date-range-picker-input/translations"));
+const translations_9 = __importDefault(require("@uxf/form/datetime-picker-input/translations"));
+const translations_10 = __importDefault(require("@uxf/form/dropzone/translations"));
+const translations_11 = __importDefault(require("@uxf/form/file-input/translations"));
+const translations_12 = __importDefault(require("@uxf/form/form-renderer/translations"));
+const translations_13 = __importDefault(require("@uxf/form/gps-input/translations"));
+const translations_14 = __importDefault(require("@uxf/form/money-input/translations"));
+const translations_15 = __importDefault(require("@uxf/form/multi-combobox/translations"));
+const translations_16 = __importDefault(require("@uxf/form/multi-select/translations"));
+const translations_17 = __importDefault(require("@uxf/form/number-input/translations"));
+const translations_18 = __importDefault(require("@uxf/form/password-input/translations"));
+const translations_19 = __importDefault(require("@uxf/form/radio-group/translations"));
+const translations_20 = __importDefault(require("@uxf/form/select/translations"));
+const translations_21 = __importDefault(require("@uxf/form/text-input/translations"));
+const translations_22 = __importDefault(require("@uxf/form/textarea/translations"));
+const translations_23 = __importDefault(require("@uxf/form/time-picker-input/translations"));
+const translations_24 = __importDefault(require("@uxf/form/toggle/translations"));
+exports.default = {
+    ...translations_1.default,
+    ...translations_2.default,
+    ...translations_3.default,
+    ...translations_4.default,
+    ...translations_5.default,
+    ...translations_6.default,
+    ...translations_7.default,
+    ...translations_8.default,
+    ...translations_9.default,
+    ...translations_10.default,
+    ...translations_11.default,
+    ...translations_12.default,
+    ...translations_13.default,
+    ...translations_14.default,
+    ...translations_15.default,
+    ...translations_16.default,
+    ...translations_17.default,
+    ...translations_18.default,
+    ...translations_19.default,
+    ...translations_20.default,
+    ...translations_21.default,
+    ...translations_22.default,
+    ...translations_23.default,
+    ...translations_24.default,
+};

package/_code-generator/form-code-generator.d.ts

@@ -1,16 +0,0 @@
-import { components } from "../components";
-export interface FieldDefinition {
-    type: keyof typeof components;
-    name: string;
-    label: string;
-    isRequired?: boolean;
-}
-export declare class FormCodeGenerator {
-    private formName;
-    private fields;
-    constructor(formName: string);
-    getFieldsCount(): number;
-    add(field: FieldDefinition): this;
-    generateComponent(field: FieldDefinition): string | null;
-    generate(): string;
-}

package/_code-generator/form-code-generator.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormCodeGenerator = void 0;
-function unique(value, index, array) {
-    return array.indexOf(value) === index;
-}
-function camelize(text) {
-    return text
-        .split(/[-_]+/)
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join("");
-}
-class FormCodeGenerator {
-    constructor(formName) {
-        this.fields = [];
-        this.formName = formName;
-    }
-    getFieldsCount() {
-        return this.fields.length;
-    }
-    add(field) {
-        this.fields.push(field);
-        return this;
-    }
-    generateComponent(field) {
-        return `<${camelize(field.type)} control={formApi.control} name="${field.name}" label="${field.label}" ${field.isRequired ? "isRequired " : ""}/>`;
-    }
-    generate() {
-        const componentName = camelize(this.formName);
-        return `import React from "react";
-import { Form } from "@uxf/form/form";
-import { useForm, SubmitHandler } from "react-hook-form";
-${this.fields
-            .map((field) => field.type)
-            .filter(unique)
-            .map((type) => `import { ${camelize(type)}, ${camelize(type)}Value } from "@uxf/form/${type}";`)
-            .join("\n")}
-
-export interface ${componentName}Data {
-${this.fields.map((field) => `    ${field.name}: ${camelize(field.type)}Value;`).join("\n")}
-}        
-
-export interface ${componentName}Props {
-    onSubmit: SubmitHandler<${componentName}Data>;
-    defaultValues: ${componentName}Data;
-}
-
-export function mapToFormData(values: any): ${componentName}Data  {
-    return {
-${this.fields.map((field) => `        ${field.name}: values.TODO`).join(",\n")}
-    }
-}
-        
-export function ${componentName}(props: ${componentName}Props) 
-{
-    const formApi = useForm({
-        defaultValues: props.defaultValues,
-    });
-    
-    return (
-        <Form formApi={formApi} onSubmit={props.onSubmit} id="${this.formName}">
-${this.fields.map((field) => `            ${this.generateComponent(field)}`).join("\n")}
-        </Form>
-    );
-}
-`;
-    }
-}
-exports.FormCodeGenerator = FormCodeGenerator;

package/avatar-file-input/avatar-file-input.d.ts

@@ -1,14 +0,0 @@
-import { FileResponse } from "@uxf/core/types";
-import { AvatarFileInputProps as UIAvatarFileInputProps } from "@uxf/ui/avatar-file-input";
-import React from "react";
-import { FieldValues } from "react-hook-form";
-import { ControlProps } from "../types";
-export type AvatarFileInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIAvatarFileInputProps, "isFocused" | "isInvalid" | "onChange" | "value"> & {
-    onChange?: UIAvatarFileInputProps["onChange"];
-    requiredMessage?: string;
-};
-export type AvatarFileInputValue = FileResponse | null;
-export declare function AvatarFileInput<FormData extends FieldValues>(props: AvatarFileInputProps<FormData>): React.JSX.Element;
-export declare namespace AvatarFileInput {
-    var displayName: string;
-}

package/avatar-file-input/avatar-file-input.js

@@ -1,38 +0,0 @@
-"use strict";
-"use client";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarFileInput = AvatarFileInput;
-const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
-const avatar_file_input_1 = require("@uxf/ui/avatar-file-input");
-const react_1 = __importDefault(require("react"));
-const react_hook_form_1 = require("react-hook-form");
-const form_context_1 = require("../form-id-context/form-context");
-function AvatarFileInput(props) {
-    var _a, _b, _c;
-    const formContext = (0, form_context_1.useFormContext)();
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
-    const { field, fieldState } = (0, react_hook_form_1.useController)({
-        control: props.control,
-        name: props.name,
-        rules: {
-            required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
-            ...props.rules,
-        },
-        shouldUnregister: props.shouldUnregister,
-    });
-    const onBlur = (event) => {
-        var _a;
-        field.onBlur();
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    };
-    const onChange = (value, event) => {
-        var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
-    };
-    return (react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { accept: props.accept, "aria-describedby": props["aria-describedby"], className: props.className, customControls: props.customControls, form: props.form, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, icon: props.icon, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, maxFileSize: props.maxFileSize, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, removeFileLabel: props.removeFileLabel, selectFileLabel: props.selectFileLabel, value: field.value, variant: props.variant }));
-}
-AvatarFileInput.displayName = "UxfFormAvatarFileInput";

package/avatar-file-input/avatar-file-input.stories.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { AvatarFileInput } from "./avatar-file-input";
-declare const _default: {
-    title: string;
-    component: typeof AvatarFileInput;
-};
-export default _default;
-export declare function Default(): React.JSX.Element;

package/avatar-file-input/avatar-file-input.stories.js

@@ -1,23 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = Default;
-const button_1 = require("@uxf/ui/button");
-const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
-const react_1 = __importDefault(require("react"));
-const storybook_form_1 = require("../storybook/storybook-form");
-const avatar_file_input_1 = require("./avatar-file-input");
-exports.default = {
-    title: "Form/AvatarFileInput",
-    component: avatar_file_input_1.AvatarFileInput,
-};
-function Default() {
-    const storyFormAvatarFileInputs = (control, mode) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { control: control, label: "Default file input", name: `default-${mode}`, onUploadFile: upload_file_mock_1.uploadFile }),
-        react_1.default.createElement(avatar_file_input_1.AvatarFileInput, { control: control, id: `required-${mode}`, isRequired: true, label: "Required file input", name: `required-${mode}`, onUploadFile: upload_file_mock_1.uploadFile }),
-        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
-    return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-        react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormAvatarFileInputs(control, "light"))))));
-}

package/avatar-file-input/index.d.ts

@@ -1 +0,0 @@
-export * from "./avatar-file-input";

package/avatar-file-input/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./avatar-file-input"), exports);

package/bin/form-code-generator.d.ts

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-export {};