@uxf/form 11.15.3 → 11.16.0

package/components.d.ts

@@ -13,6 +13,7 @@ import * as gpsInputStories from "./gps-input/gps-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";
+import * as passwordInputStories from "./password-input/password-input.stories";
 import * as radioGroupStories from "./radio-group/radio-group.stories";
 import * as selectStories from "./select/select.stories";
 import * as textInputStories from "./text-input/text-input.stories";
@@ -80,6 +81,10 @@ export declare const components: {
         readonly title: "NumberInput";
         readonly stories: typeof numberInputStories;
     };
+    readonly "password-input": {
+        readonly title: "PasswordInput";
+        readonly stories: typeof passwordInputStories;
+    };
     readonly "radio-group": {
         readonly title: "RadioGroup";
         readonly stories: typeof radioGroupStories;

package/components.js

@@ -40,6 +40,7 @@ const gpsInputStories = __importStar(require("./gps-input/gps-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"));
+const passwordInputStories = __importStar(require("./password-input/password-input.stories"));
 const radioGroupStories = __importStar(require("./radio-group/radio-group.stories"));
 const selectStories = __importStar(require("./select/select.stories"));
 const textInputStories = __importStar(require("./text-input/text-input.stories"));
@@ -107,6 +108,10 @@ exports.components = {
         title: "NumberInput",
         stories: numberInputStories
     },
+    "password-input": {
+        title: "PasswordInput",
+        stories: passwordInputStories
+    },
     "radio-group": {
         title: "RadioGroup",
         stories: radioGroupStories

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "11.15.3",
+  "version": "11.16.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "11.15.3",
+    "@uxf/ui": "11.16.0",
     "coordinate-parser": "1.0.7",
     "dayjs": "1.11.10",
     "react-hook-form": "7.51.0"

package/password-input/README.md

@@ -0,0 +1 @@
+# PasswordInput

package/password-input/index.d.ts

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

package/password-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("./password-input"), exports);

package/password-input/password-input.d.ts

@@ -0,0 +1,14 @@
+import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
+import { FormControlProps } from "@uxf/ui/types";
+import React, { ReactNode } from "react";
+import { FieldValues, UseControllerProps } from "react-hook-form";
+export type PasswordInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "isInvalid" | "max" | "min" | "name" | "onChange" | "value" | "type"> & {
+    minLengthMessage?: string;
+    onChange?: FormControlProps<string | null>["onChange"];
+    renderVisibilitySetter?: (isVisible: boolean, onToggle: () => void) => ReactNode;
+    requiredMessage?: string;
+};
+export declare function PasswordInput<FormData extends FieldValues>(props: PasswordInputProps<FormData>): React.JSX.Element;
+export declare namespace PasswordInput {
+    var displayName: string;
+}

package/password-input/password-input.js

@@ -0,0 +1,93 @@
+"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.PasswordInput = void 0;
+const useOnUnmount_1 = require("@uxf/core/hooks/useOnUnmount");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const button_1 = require("@uxf/ui/button");
+const icon_1 = require("@uxf/ui/icon");
+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 form_id_context_1 = require("../form-id-context");
+function usePasswordVisibility() {
+    const inputRef = (0, react_1.useRef)(null);
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)();
+    const visibilityChangeHandler = () => {
+        if ((0, is_nil_1.isNil)(inputRef.current)) {
+            return;
+        }
+        setIsVisible((prev) => !prev);
+        timer.current = window.setTimeout(() => {
+            if ((0, is_nil_1.isNil)(inputRef.current)) {
+                return;
+            }
+            const newCursorPosition = inputRef.current.value.length;
+            inputRef.current.selectionStart = newCursorPosition;
+            inputRef.current.selectionEnd = newCursorPosition;
+        }, 0);
+    };
+    (0, useOnUnmount_1.useOnUnmount)(() => clearTimeout(timer.current));
+    return { isVisible, inputRef, onToggle: visibilityChangeHandler };
+}
+function PasswordInput(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    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,
+        defaultValue: props.defaultValue,
+        name: props.name,
+        shouldUnregister: props.shouldUnregister,
+        rules: {
+            minLength: props.minLength
+                ? {
+                    value: Number(props.minLength),
+                    message: props.minLengthMessage || `Heslo musí být nejméně ${props.minLength} znaků dlouhé.`,
+                }
+                : undefined,
+            required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
+            ...((_b = props.rules) !== null && _b !== void 0 ? _b : {}),
+        },
+    });
+    const passwordVisibility = usePasswordVisibility();
+    const inputRef = (0, composeRefs_1.composeRefs)(field.ref, passwordVisibility.inputRef);
+    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(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: 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, pattern: props.pattern, placeholder: props.placeholder, ref: inputRef, rightAddon: props.rightAddon, rightElement: (_f = (_e = props.renderVisibilitySetter) === null || _e === void 0 ? void 0 : _e.call(props, passwordVisibility.isVisible, passwordVisibility.onToggle)) !== null && _f !== void 0 ? _f : (react_1.default.createElement(button_1.Button, { onClick: passwordVisibility.onToggle, size: "xs", variant: "text" },
+            react_1.default.createElement(icon_1.Icon, { size: 20, name: passwordVisibility.isVisible ? "eye" : "eye-slash" }))), size: props.size, style: props.style, type: passwordVisibility.isVisible ? "text" : "password", value: (_g = field.value) !== null && _g !== void 0 ? _g : "", variant: props.variant }));
+}
+exports.PasswordInput = PasswordInput;
+PasswordInput.displayName = "UxfFormPasswordInput";

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

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

package/password-input/password-input.stories.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const button_1 = require("@uxf/ui/button");
+const react_1 = __importDefault(require("react"));
+const storybook_form_1 = require("../storybook/storybook-form");
+const password_input_1 = require("./password-input");
+exports.default = {
+    title: "Form/PasswordInput",
+    component: password_input_1.PasswordInput,
+};
+function Default() {
+    const storyFormPasswordInputs = (control) => (react_1.default.createElement("div", { className: "mb-4 space-y-4 p-4" },
+        react_1.default.createElement(password_input_1.PasswordInput, { control: control, label: "Default input", name: "default" }),
+        react_1.default.createElement(password_input_1.PasswordInput, { control: control, label: "Min length 8", minLength: 12, name: "minLength", isRequired: true }),
+        react_1.default.createElement(password_input_1.PasswordInput, { control: control, label: "Required input", name: "required", isRequired: true }),
+        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" }, storyFormPasswordInputs(control))))));
+}
+exports.Default = Default;

package/readmes.d.ts

@@ -16,6 +16,7 @@ export declare const readmes: {
     readonly "multi-combobox": typeof avatarFileInputReadme;
     readonly "multi-select": typeof avatarFileInputReadme;
     readonly "number-input": typeof avatarFileInputReadme;
+    readonly "password-input": typeof avatarFileInputReadme;
     readonly "radio-group": typeof avatarFileInputReadme;
     readonly select: typeof avatarFileInputReadme;
     readonly "text-input": typeof avatarFileInputReadme;

package/readmes.js

@@ -20,12 +20,13 @@ 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("./radio-group/README.md"));
-const README_md_17 = __importDefault(require("./select/README.md"));
-const README_md_18 = __importDefault(require("./text-input/README.md"));
-const README_md_19 = __importDefault(require("./textarea/README.md"));
-const README_md_20 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_21 = __importDefault(require("./toggle/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"));
 exports.readmes = {
     "avatar-file-input": README_md_1.default,
     "checkbox-button": README_md_2.default,
@@ -42,10 +43,11 @@ exports.readmes = {
     "multi-combobox": README_md_13.default,
     "multi-select": README_md_14.default,
     "number-input": README_md_15.default,
-    "radio-group": README_md_16.default,
-    "select": README_md_17.default,
-    "text-input": README_md_18.default,
-    "textarea": README_md_19.default,
-    "time-picker-input": README_md_20.default,
-    "toggle": README_md_21.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,
 };