@uxf/form 1.0.0-beta.28 → 1.0.0-beta.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "1.0.0-beta.28",
+  "version": "1.0.0-beta.31",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "^1.0.0-beta.27",
+    "@uxf/ui": "^1.0.0-beta.31",
     "react-hook-form": "latest"
   }
 }

package/storybook/form.js

@@ -13,7 +13,8 @@ function Form(props) {
     // eslint-disable-next-line no-console
     react_1.default.createElement("form", { onSubmit: form.handleSubmit(console.log) },
         props.children(form),
-        react_1.default.createElement("div", { className: "mt-4" },
-            react_1.default.createElement(form_data_printer_1.FormDataPrinter, { control: form.control }))));
+        react_1.default.createElement("div", { className: "my-4" },
+            react_1.default.createElement(form_data_printer_1.FormDataPrinter, { control: form.control })),
+        react_1.default.createElement("button", { type: "submit" }, "Submit form")));
 }
 exports.Form = Form;

package/text-input/text-input.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
-export declare type TextInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "value" | "onChange">;
+export declare type TextInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "value" | "onChange"> & {
+    requiredMessage?: string;
+};
 export declare function TextInput<FormData extends Record<string, any>>(props: TextInputProps<FormData>): JSX.Element;

package/text-input/text-input.js

@@ -7,17 +7,33 @@ exports.TextInput = void 0;
 const text_input_1 = require("@uxf/ui/text-input");
 const react_hook_form_1 = require("react-hook-form");
 const react_1 = __importDefault(require("react"));
+const EMAIL_REGEXP = /^(([^<>()[\]\\.,;:\s@À-ÖÙ-öù-ÿĀ-žḀ-ỿ"]+(\.[^<>()[\]\\.,;:\s@À-ÖÙ-öù-ÿĀ-žḀ-ỿ"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const PHONE_REGEXP = /^(\+)?[\d\s]*$/;
 function TextInput(props) {
     var _a, _b;
     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,
+            pattern: props.type === "email"
+                ? {
+                    value: EMAIL_REGEXP,
+                    message: "E-mail by měl být ve\xa0formátu: info@email.cz",
+                }
+                : props.type === "tel"
+                    ? {
+                        value: PHONE_REGEXP,
+                        message: "Zadaný telefon není ve správném formátu",
+                    }
+                    : undefined,
+        },
     });
     const onBlur = (event) => {
         var _a;
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(text_input_1.TextInput, { id: props.id, name: props.name, value: field.value, onChange: field.onChange, onFocus: props.onFocus, onBlur: onBlur, isRequired: props.isRequired, isReadOnly: props.isReadOnly, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : props.helperText, placeholder: props.placeholder, leftElement: props.leftElement, rightElement: props.rightElement, variant: props.variant, size: props.size, className: props.className, label: props.label, form: props.form, inputMode: props.inputMode, leftAddon: props.leftAddon, rightAddon: props.rightAddon, autoComplete: props.autoComplete, enterKeyHint: props.enterKeyHint }));
+    return (react_1.default.createElement(text_input_1.TextInput, { id: props.id, name: props.name, value: field.value, onChange: field.onChange, onFocus: props.onFocus, onBlur: onBlur, isRequired: props.isRequired, isReadOnly: props.isReadOnly, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : props.helperText, placeholder: props.placeholder, leftElement: props.leftElement, rightElement: props.rightElement, variant: props.variant, size: props.size, className: props.className, label: props.label, form: props.form, inputMode: props.inputMode, leftAddon: props.leftAddon, rightAddon: props.rightAddon, autoComplete: props.autoComplete, enterKeyHint: props.enterKeyHint, type: props.type }));
 }
 exports.TextInput = TextInput;

package/text-input/text-input.stories.js

@@ -13,7 +13,10 @@ exports.default = {
 };
 function Default() {
     return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(text_input_1.TextInput, { label: "Basic text input", name: "textFieldBasic", control: control }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Full text input", name: "textFieldFull", control: control, leftAddon: "https://", rightAddon: ".uxf.cz", leftElement: "\uD83C\uDF37", rightElement: "\uD83D\uDD14", helperText: "Helper text", placeholder: "placeholder" })))));
+        react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: control }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Required input", name: "required", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "E-mail required input", name: "email", type: "email", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Phone required input", name: "phone", type: "tel", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Password input", name: "password", type: "password", control: control })))));
 }
 exports.Default = Default;