@uxf/form 11.46.0 → 11.47.1

package/components.d.ts

@@ -10,6 +10,7 @@ import * as dropzoneStories from "./dropzone/dropzone.stories";
 import * as fileInputStories from "./file-input/file-input.stories";
 import * as formStories from "./form/form.stories";
 import * as gpsInputStories from "./gps-input/gps-input.stories";
+import * as moneyInputStories from "./money-input/money-input.stories";
 import * as multiComboboxStories from "./multi-combobox/multi-combobox.stories";
 import * as multiSelectStories from "./multi-select/multi-select.stories";
 import * as numberInputStories from "./number-input/number-input.stories";
@@ -69,6 +70,10 @@ export declare const components: {
         readonly title: "GpsInput";
         readonly stories: typeof gpsInputStories;
     };
+    readonly "money-input": {
+        readonly title: "MoneyInput";
+        readonly stories: typeof moneyInputStories;
+    };
     readonly "multi-combobox": {
         readonly title: "MultiCombobox";
         readonly stories: typeof multiComboboxStories;

package/components.js

@@ -37,6 +37,7 @@ const dropzoneStories = __importStar(require("./dropzone/dropzone.stories"));
 const fileInputStories = __importStar(require("./file-input/file-input.stories"));
 const formStories = __importStar(require("./form/form.stories"));
 const gpsInputStories = __importStar(require("./gps-input/gps-input.stories"));
+const moneyInputStories = __importStar(require("./money-input/money-input.stories"));
 const multiComboboxStories = __importStar(require("./multi-combobox/multi-combobox.stories"));
 const multiSelectStories = __importStar(require("./multi-select/multi-select.stories"));
 const numberInputStories = __importStar(require("./number-input/number-input.stories"));
@@ -96,6 +97,10 @@ exports.components = {
         title: "GpsInput",
         stories: gpsInputStories
     },
+    "money-input": {
+        title: "MoneyInput",
+        stories: moneyInputStories
+    },
     "multi-combobox": {
         title: "MultiCombobox",
         stories: multiComboboxStories

package/money-input/README.md

@@ -0,0 +1,7 @@
+# MoneyInput
+
+- Pracuje s hodnotou `Money | null`.
+
+Důležité props:
+
+- `defaultCurrency: Currency`

package/money-input/index.d.ts

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

package/money-input/index.js

@@ -0,0 +1,17 @@
+"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("./money-input"), exports);

package/money-input/money-input.d.ts

@@ -0,0 +1,16 @@
+import { Currency, Money } from "@uxf/core/money";
+import { FormControlProps } from "@uxf/ui/types";
+import React from "react";
+import { FieldValues, UseControllerProps } from "react-hook-form";
+export type MoneyInputValue = Money | null;
+export type MoneyInputProps<FormData extends FieldValues> = Omit<UseControllerProps<FormData>, "defaultValue"> & Omit<FormControlProps<MoneyInputValue>, "value" | "onChange"> & {
+    id?: string;
+    requiredMessage?: string;
+    defaultCurrency?: Currency;
+    label?: string;
+    onChange?: FormControlProps<MoneyInputValue>["onChange"];
+};
+export declare function MoneyInput<FormData extends FieldValues>(props: MoneyInputProps<FormData>): React.JSX.Element;
+export declare namespace MoneyInput {
+    var displayName: string;
+}

package/money-input/money-input.js

@@ -0,0 +1,82 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MoneyInput = MoneyInput;
+const currencies_1 = require("@uxf/core/money/currencies");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const form_id_context_1 = require("@uxf/form/form-id-context");
+const text_input_1 = require("@uxf/ui/text-input");
+const react_1 = __importStar(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+const SPECIAL_KEYS = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Tab"];
+// Allow keys for copy/paste/select/cut
+const CONTROL_KEYS = ["v", "V", "c", "C", "x", "X", "a", "A"];
+// Allow digits and decimal point (.,)
+const ALLOWED_KEYS = /[0-9+\-.,]/;
+function MoneyInput(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const formId = (0, form_id_context_1.useFormIdContext)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${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,
+        },
+        shouldUnregister: props.shouldUnregister,
+    });
+    const [lastCurrency, setLastCurrency] = (0, react_1.useState)((_d = (_c = (_b = field.value) === null || _b === void 0 ? void 0 : _b.currency) !== null && _c !== void 0 ? _c : props.defaultCurrency) !== null && _d !== void 0 ? _d : "CZK");
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((0, is_not_nil_1.isNotNil)(field.value) && ((_a = field.value) === null || _a === void 0 ? void 0 : _a.currency) !== lastCurrency) {
+            setLastCurrency(field.value.currency);
+        }
+    }, [field.value, lastCurrency]);
+    const keyDownHandler = (event) => {
+        const key = event.key;
+        // Check if the key is allowed
+        if (!SPECIAL_KEYS.includes(key) && !ALLOWED_KEYS.test(key)) {
+            // Check if Ctrl or Command key is pressed along with control key
+            if (!(event.ctrlKey || event.metaKey) || !CONTROL_KEYS.includes(key)) {
+                event.preventDefault();
+            }
+        }
+    };
+    const changeHandler = (value, event) => {
+        var _a, _b, _c;
+        const newValue = (0, is_nil_1.isNil)(value) || (0, is_empty_1.isEmpty)(value)
+            ? null
+            : {
+                amount: value,
+                currency: (_b = (_a = field.value) === null || _a === void 0 ? void 0 : _a.currency) !== null && _b !== void 0 ? _b : lastCurrency,
+            };
+        field.onChange(newValue);
+        (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, newValue, event);
+    };
+    return (react_1.default.createElement(text_input_1.TextInput, { className: "uxf-money-input uxf-input--no-spin-buttons", helperText: (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message, id: id, inputMode: "decimal", isDisabled: props.isDisabled, isInvalid: Boolean(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onChange: changeHandler, onKeyDown: keyDownHandler, ref: field.ref, rightElement: currencies_1.currencies[(_g = (_f = field.value) === null || _f === void 0 ? void 0 : _f.currency) !== null && _g !== void 0 ? _g : lastCurrency].symbol, step: 2, type: "number", value: (_j = (_h = field.value) === null || _h === void 0 ? void 0 : _h.amount) !== null && _j !== void 0 ? _j : "" }));
+}
+MoneyInput.displayName = "UxfFormMoneyInput";

package/money-input/money-input.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/money-input/money-input.stories.js

@@ -0,0 +1,15 @@
+"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 react_1 = __importDefault(require("react"));
+const storybook_form_1 = require("../storybook/storybook-form");
+const money_input_1 = require("./money-input");
+function Default() {
+    return (react_1.default.createElement(storybook_form_1.StorybookForm, { className: "space-y-4 p-4", defaultValues: { "default-value": { amount: "100", currency: "USD" } } }, ({ control }) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Default money input", name: "default" }),
+        react_1.default.createElement(money_input_1.MoneyInput, { control: control, defaultCurrency: "EUR", label: "Money input with default currency", name: "default-currency" }),
+        react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Money input with default value", name: "default-value" })))));
+}

package/package.json

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

package/readmes.d.ts

@@ -12,6 +12,7 @@ export declare const readmes: {
     readonly "file-input": typeof avatarFileInputReadme;
     readonly form: typeof avatarFileInputReadme;
     readonly "gps-input": typeof avatarFileInputReadme;
+    readonly "money-input": typeof avatarFileInputReadme;
     readonly "multi-combobox": typeof avatarFileInputReadme;
     readonly "multi-select": typeof avatarFileInputReadme;
     readonly "number-input": typeof avatarFileInputReadme;

package/readmes.js

@@ -17,16 +17,17 @@ const README_md_9 = __importDefault(require("./dropzone/README.md"));
 const README_md_10 = __importDefault(require("./file-input/README.md"));
 const README_md_11 = __importDefault(require("./form/README.md"));
 const README_md_12 = __importDefault(require("./gps-input/README.md"));
-const README_md_13 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_14 = __importDefault(require("./multi-select/README.md"));
-const README_md_15 = __importDefault(require("./number-input/README.md"));
-const README_md_16 = __importDefault(require("./password-input/README.md"));
-const README_md_17 = __importDefault(require("./radio-group/README.md"));
-const README_md_18 = __importDefault(require("./select/README.md"));
-const README_md_19 = __importDefault(require("./text-input/README.md"));
-const README_md_20 = __importDefault(require("./textarea/README.md"));
-const README_md_21 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_22 = __importDefault(require("./toggle/README.md"));
+const README_md_13 = __importDefault(require("./money-input/README.md"));
+const README_md_14 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_15 = __importDefault(require("./multi-select/README.md"));
+const README_md_16 = __importDefault(require("./number-input/README.md"));
+const README_md_17 = __importDefault(require("./password-input/README.md"));
+const README_md_18 = __importDefault(require("./radio-group/README.md"));
+const README_md_19 = __importDefault(require("./select/README.md"));
+const README_md_20 = __importDefault(require("./text-input/README.md"));
+const README_md_21 = __importDefault(require("./textarea/README.md"));
+const README_md_22 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_23 = __importDefault(require("./toggle/README.md"));
 exports.readmes = {
     "avatar-file-input": README_md_1.default,
     "checkbox-button": README_md_2.default,
@@ -40,14 +41,15 @@ exports.readmes = {
     "file-input": README_md_10.default,
     "form": README_md_11.default,
     "gps-input": README_md_12.default,
-    "multi-combobox": README_md_13.default,
-    "multi-select": README_md_14.default,
-    "number-input": README_md_15.default,
-    "password-input": README_md_16.default,
-    "radio-group": README_md_17.default,
-    "select": README_md_18.default,
-    "text-input": README_md_19.default,
-    "textarea": README_md_20.default,
-    "time-picker-input": README_md_21.default,
-    "toggle": README_md_22.default,
+    "money-input": README_md_13.default,
+    "multi-combobox": README_md_14.default,
+    "multi-select": README_md_15.default,
+    "number-input": README_md_16.default,
+    "password-input": README_md_17.default,
+    "radio-group": README_md_18.default,
+    "select": README_md_19.default,
+    "text-input": README_md_20.default,
+    "textarea": README_md_21.default,
+    "time-picker-input": README_md_22.default,
+    "toggle": README_md_23.default,
 };