@uxf/form 1.0.0-beta.26 → 1.0.0-beta.29

package/combobox/combobox.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Combobox = void 0;
+const combobox_1 = require("@uxf/ui/combobox");
+const react_hook_form_1 = require("react-hook-form");
+const react_1 = __importDefault(require("react"));
+function Combobox(props) {
+    var _a;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control: props.control,
+        name: props.name,
+        defaultValue: props.defaultValue,
+        shouldUnregister: props.shouldUnregister,
+    });
+    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(combobox_1.Combobox, { id: props.id, name: props.name, value: field.value, onChange: (value) => field.onChange(value === null || value === void 0 ? void 0 : value.id), onFocus: props.onFocus, onBlur: onBlur, placeholder: props.placeholder, className: props.className, label: props.label, options: props.options, disabled: props.options.length === 0 || props.disabled, error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, invalid: fieldState.invalid, ref: field.ref, required: props.required, readOnly: props.readOnly }));
+}
+exports.Combobox = Combobox;

package/combobox/{combobox.stories.jsx → combobox.stories.js}

@@ -17,10 +17,7 @@ const options = [
     { id: "three", label: "Option three" },
 ];
 function Default() {
-    return (<form_1.Form>
-            {({ control }) => (<div className="space-y-4">
-                    <combobox_1.Combobox label="Combobox form" name="combobox" control={control} placeholder="placeholder" options={options} id="form-combobox"/>
-                </div>)}
-        </form_1.Form>);
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form", name: "combobox", control: control, placeholder: "placeholder", options: options, id: "form-combobox" })))));
 }
 exports.Default = Default;

package/package.json

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

package/select/select.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const select_1 = require("@uxf/ui/select");
+const react_hook_form_1 = require("react-hook-form");
+const react_1 = __importDefault(require("react"));
+function Select(props) {
+    var _a;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control: props.control,
+        name: props.name,
+        defaultValue: props.defaultValue,
+        shouldUnregister: props.shouldUnregister,
+    });
+    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(select_1.Select, { id: props.id, name: props.name, value: field.value, onChange: (value) => field.onChange(value === null || value === void 0 ? void 0 : value.id), onFocus: props.onFocus, onBlur: onBlur, placeholder: props.placeholder, className: props.className, label: props.label, options: props.options, disabled: props.options.length === 0 || props.disabled, error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, invalid: fieldState.invalid, ref: field.ref, required: props.required, readOnly: props.readOnly }));
+}
+exports.Select = Select;

package/select/{select.stories.jsx → select.stories.js}

@@ -17,10 +17,7 @@ const options = [
     { id: "three", label: "Option three" },
 ];
 function Default() {
-    return (<form_1.Form>
-            {({ control }) => (<div className="space-y-4">
-                    <select_1.Select label="Select form" name="select" control={control} placeholder="placeholder" options={options} id="form-select"/>
-                </div>)}
-        </form_1.Form>);
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(select_1.Select, { label: "Select form", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select" })))));
 }
 exports.Default = Default;

package/storybook/{form-data-printer.jsx → form-data-printer.js}

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormDataPrinter = void 0;
 const react_hook_form_1 = require("react-hook-form");
+const react_1 = __importDefault(require("react"));
 function FormDataPrinter(props) {
     const data = (0, react_hook_form_1.useWatch)({ control: props.control });
-    return <pre className="bg-gray-100 p-2 text-sm">{JSON.stringify(data, null, "    ")}</pre>;
+    return react_1.default.createElement("pre", { className: "bg-gray-100 p-2 text-sm" }, JSON.stringify(data, null, "    "));
 }
 exports.FormDataPrinter = FormDataPrinter;

package/storybook/form.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const react_hook_form_1 = require("react-hook-form");
+const react_1 = __importDefault(require("react"));
+const form_data_printer_1 = require("./form-data-printer");
+function Form(props) {
+    const form = (0, react_hook_form_1.useForm)();
+    return (
+    // 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 }))));
+}
+exports.Form = Form;

package/text-input/text-input.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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"));
+function TextInput(props) {
+    var _a, _b;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control: props.control,
+        name: props.name,
+    });
+    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 }));
+}
+exports.TextInput = TextInput;

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

@@ -0,0 +1,19 @@
+"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 react_1 = __importDefault(require("react"));
+const text_input_1 = require("./text-input");
+const form_1 = require("../storybook/form");
+exports.default = {
+    title: "Form/TextInput",
+    component: text_input_1.TextInput,
+};
+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" })))));
+}
+exports.Default = Default;

package/textarea/textarea.js

@@ -0,0 +1,51 @@
+"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.Textarea = void 0;
+const textarea_1 = require("@uxf/ui/textarea");
+const react_hook_form_1 = require("react-hook-form");
+const react_1 = __importStar(require("react"));
+function Textarea(props) {
+    var _a;
+    const { control, rules = {}, shouldUnregister, autoComplete, className, disabled, disableAutoHeight, form, label, maxLength, minLength, onBlur, onFocus, placeholder, readOnly, required, rows, style, name, } = props;
+    const { field, fieldState } = (0, react_hook_form_1.useController)({
+        control,
+        name,
+        rules: {
+            required: required ? "Toto pole je povinné" : undefined,
+            ...rules,
+        },
+        shouldUnregister,
+    });
+    const _onBlur = (0, react_1.useCallback)((e) => {
+        field.onBlur();
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [field, onBlur]);
+    const inputId = `${form ? form + "__" : ""}${name}`;
+    return (react_1.default.createElement(textarea_1.Textarea, { error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, form: form, id: inputId, invalid: fieldState.invalid, name: field.name, onBlur: _onBlur, onChange: field.onChange, ref: field.ref, required: required, value: field.value || "", autoComplete: autoComplete, className: className, disabled: disabled, disableAutoHeight: disableAutoHeight, label: label, maxLength: maxLength, minLength: minLength, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, rows: rows, style: style }));
+}
+exports.Textarea = Textarea;

package/textarea/{textarea.stories.jsx → textarea.stories.js}

@@ -12,10 +12,7 @@ exports.default = {
     component: textarea_1.Textarea,
 };
 function Default() {
-    return (<form_1.Form>
-            {({ control }) => (<div className="space-y-4">
-                    <textarea_1.Textarea label="Textarea" name="textarea" control={control} placeholder="placeholder" form="form-textarea"/>
-                </div>)}
-        </form_1.Form>);
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
+        react_1.default.createElement(textarea_1.Textarea, { label: "Textarea", name: "textarea", control: control, placeholder: "placeholder", form: "form-textarea" })))));
 }
 exports.Default = Default;

package/combobox/combobox.jsx

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Combobox = void 0;
-const combobox_1 = require("@uxf/ui/combobox");
-const react_hook_form_1 = require("react-hook-form");
-function Combobox(props) {
-    var _a;
-    const { field, fieldState } = (0, react_hook_form_1.useController)({
-        control: props.control,
-        name: props.name,
-        defaultValue: props.defaultValue,
-        shouldUnregister: props.shouldUnregister,
-    });
-    const onBlur = (event) => {
-        var _a;
-        field.onBlur();
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    };
-    return (<combobox_1.Combobox id={props.id} name={props.name} value={field.value} onChange={(value) => field.onChange(value === null || value === void 0 ? void 0 : value.id)} onFocus={props.onFocus} onBlur={onBlur} placeholder={props.placeholder} className={props.className} label={props.label} options={props.options} disabled={props.options.length === 0 || props.disabled} error={(_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message} invalid={fieldState.invalid} ref={field.ref} required={props.required} readOnly={props.readOnly}/>);
-}
-exports.Combobox = Combobox;

package/select/select.jsx

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const select_1 = require("@uxf/ui/select");
-const react_hook_form_1 = require("react-hook-form");
-function Select(props) {
-    var _a;
-    const { field, fieldState } = (0, react_hook_form_1.useController)({
-        control: props.control,
-        name: props.name,
-        defaultValue: props.defaultValue,
-        shouldUnregister: props.shouldUnregister,
-    });
-    const onBlur = (event) => {
-        var _a;
-        field.onBlur();
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    };
-    return (<select_1.Select id={props.id} name={props.name} value={field.value} onChange={(value) => field.onChange(value === null || value === void 0 ? void 0 : value.id)} onFocus={props.onFocus} onBlur={onBlur} placeholder={props.placeholder} className={props.className} label={props.label} options={props.options} disabled={props.options.length === 0 || props.disabled} error={(_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message} invalid={fieldState.invalid} ref={field.ref} required={props.required} readOnly={props.readOnly}/>);
-}
-exports.Select = Select;

package/storybook/form.jsx

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = void 0;
-const react_hook_form_1 = require("react-hook-form");
-const form_data_printer_1 = require("./form-data-printer");
-function Form(props) {
-    const form = (0, react_hook_form_1.useForm)();
-    return (
-    // eslint-disable-next-line no-console
-    <form onSubmit={form.handleSubmit(console.log)}>
-            {props.children(form)}
-            <div className="mt-4">
-                <form_data_printer_1.FormDataPrinter control={form.control}/>
-            </div>
-        </form>);
-}
-exports.Form = Form;

package/text-input/text-input.jsx

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
-const text_input_1 = require("@uxf/ui/text-input");
-const react_hook_form_1 = require("react-hook-form");
-function TextInput(props) {
-    var _a, _b;
-    const { field, fieldState } = (0, react_hook_form_1.useController)({
-        control: props.control,
-        name: props.name,
-    });
-    const onBlur = (event) => {
-        var _a;
-        field.onBlur();
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
-    };
-    return (<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}/>);
-}
-exports.TextInput = TextInput;

package/text-input/text-input.stories.jsx

@@ -1,22 +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 = void 0;
-const react_1 = __importDefault(require("react"));
-const text_input_1 = require("./text-input");
-const form_1 = require("../storybook/form");
-exports.default = {
-    title: "Form/TextInput",
-    component: text_input_1.TextInput,
-};
-function Default() {
-    return (<form_1.Form>
-            {({ control }) => (<div className="space-y-4">
-                    <text_input_1.TextInput label="Basic text input" name="textFieldBasic" control={control}/>
-                    <text_input_1.TextInput label="Full text input" name="textFieldFull" control={control} leftAddon="https://" rightAddon=".uxf.cz" leftElement="🌷" rightElement="🔔" helperText="Helper text" placeholder="placeholder"/>
-                </div>)}
-        </form_1.Form>);
-}
-exports.Default = Default;

package/textarea/textarea.jsx

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = void 0;
-const textarea_1 = require("@uxf/ui/textarea");
-const react_hook_form_1 = require("react-hook-form");
-const react_1 = require("react");
-function Textarea(props) {
-    var _a;
-    const { control, rules = {}, shouldUnregister, autoComplete, className, disabled, disableAutoHeight, form, label, maxLength, minLength, onBlur, onFocus, placeholder, readOnly, required, rows, style, name, } = props;
-    const { field, fieldState } = (0, react_hook_form_1.useController)({
-        control,
-        name,
-        rules: {
-            required: required ? "Toto pole je povinné" : undefined,
-            ...rules,
-        },
-        shouldUnregister,
-    });
-    const _onBlur = (0, react_1.useCallback)((e) => {
-        field.onBlur();
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [field, onBlur]);
-    const inputId = `${form ? form + "__" : ""}${name}`;
-    return (<textarea_1.Textarea error={(_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message} form={form} id={inputId} invalid={fieldState.invalid} name={field.name} onBlur={_onBlur} onChange={field.onChange} ref={field.ref} required={required} value={field.value || ""} autoComplete={autoComplete} className={className} disabled={disabled} disableAutoHeight={disableAutoHeight} label={label} maxLength={maxLength} minLength={minLength} onFocus={onFocus} placeholder={placeholder} readOnly={readOnly} rows={rows} style={style}/>);
-}
-exports.Textarea = Textarea;