@uxf/form 11.47.0 → 11.48.0

package/checkbox-list/README.md

@@ -0,0 +1,9 @@
+# CheckboxList
+
+## Css dependencies
+
+```css
+@import url("@uxf/ui/checkbox-list/checkbox-list.css");
+@import url("@uxf/ui/checkbox-input/checkbox-input.css");
+@import url("@uxf/ui/checkbox/checkbox.css");
+```

package/checkbox-list/checkbox-list.d.ts

@@ -0,0 +1,18 @@
+import { CheckboxInputProps as UICheckboxInputProps } from "@uxf/ui/checkbox-input";
+import { FormControlProps } from "@uxf/ui/types";
+import React, { ReactNode } from "react";
+import { FieldValues, UseControllerProps } from "react-hook-form";
+type ValueType = string | number;
+export type CheckboxListOption = {
+    id: ValueType;
+    label: ReactNode;
+    isDisabled?: boolean;
+};
+export type CheckboxListValue = ValueType[] | null;
+type Props<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UICheckboxInputProps, "isInvalid" | "name" | "onChange" | "value"> & {
+    onChange?: FormControlProps<CheckboxListValue>["onChange"];
+    options: CheckboxListOption[];
+    requiredMessage?: string;
+};
+export declare function CheckboxList<FormData extends FieldValues>(props: Props<FormData>): React.JSX.Element;
+export {};

package/checkbox-list/checkbox-list.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxList = CheckboxList;
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const form_id_context_1 = require("@uxf/form/form-id-context");
+const checkbox_list_1 = require("@uxf/ui/checkbox-list");
+const react_1 = __importDefault(require("react"));
+const react_hook_form_1 = require("react-hook-form");
+function CheckboxList(props) {
+    var _a, _b, _c, _d;
+    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,
+        rules: {
+            required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
+            ...((_b = props.rules) !== null && _b !== void 0 ? _b : {}),
+        },
+        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(checkbox_list_1.CheckboxList, { className: props.className, hasHiddenLabel: props.hiddenLabel, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: props.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, value: field.value }));
+}

package/checkbox-list/checkbox-list.stories.d.ts

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

package/checkbox-list/checkbox-list.stories.js

@@ -0,0 +1,22 @@
+"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 react_1 = __importDefault(require("react"));
+const storybook_form_1 = require("../storybook/storybook-form");
+const checkbox_list_1 = require("./checkbox-list");
+const CHECKBOX_LIST_OPTIONS = [
+    { id: "1", label: "Option1" },
+    { id: "2", label: "Option2" },
+    { id: "3", label: "Option3" },
+];
+function Default() {
+    return (react_1.default.createElement(storybook_form_1.StorybookForm, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-2 p-20" },
+        react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, label: "CheckboxList default", name: "checkboxList1", options: CHECKBOX_LIST_OPTIONS }),
+        react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, isRequired: true, label: "CheckboxList required", name: "checkboxList2", options: CHECKBOX_LIST_OPTIONS }),
+        react_1.default.createElement(checkbox_list_1.CheckboxList, { control: control, hiddenLabel: true, label: "CheckboxList with hidden label", name: "checkboxList3", options: CHECKBOX_LIST_OPTIONS }),
+        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")))));
+}

package/checkbox-list/index.d.ts

@@ -0,0 +1 @@
+export * from "./checkbox-list";

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

package/components.d.ts

@@ -1,6 +1,7 @@
 import * as avatarFileInputStories from "./avatar-file-input/avatar-file-input.stories";
 import * as checkboxButtonStories from "./checkbox-button/checkbox-button.stories";
 import * as checkboxInputStories from "./checkbox-input/checkbox-input.stories";
+import * as checkboxListStories from "./checkbox-list/checkbox-list.stories";
 import * as colorRadioGroupStories from "./color-radio-group/color-radio-group.stories";
 import * as comboboxStories from "./combobox/combobox.stories";
 import * as datePickerInputStories from "./date-picker-input/date-picker-input.stories";
@@ -34,6 +35,10 @@ export declare const components: {
         readonly title: "CheckboxInput";
         readonly stories: typeof checkboxInputStories;
     };
+    readonly "checkbox-list": {
+        readonly title: "CheckboxList";
+        readonly stories: typeof checkboxListStories;
+    };
     readonly "color-radio-group": {
         readonly title: "ColorRadioGroup";
         readonly stories: typeof colorRadioGroupStories;

package/components.js

@@ -28,6 +28,7 @@ exports.components = void 0;
 const avatarFileInputStories = __importStar(require("./avatar-file-input/avatar-file-input.stories"));
 const checkboxButtonStories = __importStar(require("./checkbox-button/checkbox-button.stories"));
 const checkboxInputStories = __importStar(require("./checkbox-input/checkbox-input.stories"));
+const checkboxListStories = __importStar(require("./checkbox-list/checkbox-list.stories"));
 const colorRadioGroupStories = __importStar(require("./color-radio-group/color-radio-group.stories"));
 const comboboxStories = __importStar(require("./combobox/combobox.stories"));
 const datePickerInputStories = __importStar(require("./date-picker-input/date-picker-input.stories"));
@@ -61,6 +62,10 @@ exports.components = {
         title: "CheckboxInput",
         stories: checkboxInputStories
     },
+    "checkbox-list": {
+        title: "CheckboxList",
+        stories: checkboxListStories
+    },
     "color-radio-group": {
         title: "ColorRadioGroup",
         stories: colorRadioGroupStories

package/package.json

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

package/readmes.d.ts

@@ -3,6 +3,7 @@ export declare const readmes: {
     readonly "avatar-file-input": typeof avatarFileInputReadme;
     readonly "checkbox-button": typeof avatarFileInputReadme;
     readonly "checkbox-input": typeof avatarFileInputReadme;
+    readonly "checkbox-list": typeof avatarFileInputReadme;
     readonly "color-radio-group": typeof avatarFileInputReadme;
     readonly combobox: typeof avatarFileInputReadme;
     readonly "date-picker-input": typeof avatarFileInputReadme;

package/readmes.js

@@ -8,48 +8,50 @@ exports.readmes = void 0;
 const README_md_1 = __importDefault(require("./avatar-file-input/README.md"));
 const README_md_2 = __importDefault(require("./checkbox-button/README.md"));
 const README_md_3 = __importDefault(require("./checkbox-input/README.md"));
-const README_md_4 = __importDefault(require("./color-radio-group/README.md"));
-const README_md_5 = __importDefault(require("./combobox/README.md"));
-const README_md_6 = __importDefault(require("./date-picker-input/README.md"));
-const README_md_7 = __importDefault(require("./date-range-picker-input/README.md"));
-const README_md_8 = __importDefault(require("./datetime-picker-input/README.md"));
-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("./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"));
+const README_md_4 = __importDefault(require("./checkbox-list/README.md"));
+const README_md_5 = __importDefault(require("./color-radio-group/README.md"));
+const README_md_6 = __importDefault(require("./combobox/README.md"));
+const README_md_7 = __importDefault(require("./date-picker-input/README.md"));
+const README_md_8 = __importDefault(require("./date-range-picker-input/README.md"));
+const README_md_9 = __importDefault(require("./datetime-picker-input/README.md"));
+const README_md_10 = __importDefault(require("./dropzone/README.md"));
+const README_md_11 = __importDefault(require("./file-input/README.md"));
+const README_md_12 = __importDefault(require("./form/README.md"));
+const README_md_13 = __importDefault(require("./gps-input/README.md"));
+const README_md_14 = __importDefault(require("./money-input/README.md"));
+const README_md_15 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_16 = __importDefault(require("./multi-select/README.md"));
+const README_md_17 = __importDefault(require("./number-input/README.md"));
+const README_md_18 = __importDefault(require("./password-input/README.md"));
+const README_md_19 = __importDefault(require("./radio-group/README.md"));
+const README_md_20 = __importDefault(require("./select/README.md"));
+const README_md_21 = __importDefault(require("./text-input/README.md"));
+const README_md_22 = __importDefault(require("./textarea/README.md"));
+const README_md_23 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_24 = __importDefault(require("./toggle/README.md"));
 exports.readmes = {
     "avatar-file-input": README_md_1.default,
     "checkbox-button": README_md_2.default,
     "checkbox-input": README_md_3.default,
-    "color-radio-group": README_md_4.default,
-    "combobox": README_md_5.default,
-    "date-picker-input": README_md_6.default,
-    "date-range-picker-input": README_md_7.default,
-    "datetime-picker-input": README_md_8.default,
-    "dropzone": README_md_9.default,
-    "file-input": README_md_10.default,
-    "form": README_md_11.default,
-    "gps-input": README_md_12.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,
+    "checkbox-list": README_md_4.default,
+    "color-radio-group": README_md_5.default,
+    "combobox": README_md_6.default,
+    "date-picker-input": README_md_7.default,
+    "date-range-picker-input": README_md_8.default,
+    "datetime-picker-input": README_md_9.default,
+    "dropzone": README_md_10.default,
+    "file-input": README_md_11.default,
+    "form": README_md_12.default,
+    "gps-input": README_md_13.default,
+    "money-input": README_md_14.default,
+    "multi-combobox": README_md_15.default,
+    "multi-select": README_md_16.default,
+    "number-input": README_md_17.default,
+    "password-input": README_md_18.default,
+    "radio-group": README_md_19.default,
+    "select": README_md_20.default,
+    "text-input": README_md_21.default,
+    "textarea": README_md_22.default,
+    "time-picker-input": README_md_23.default,
+    "toggle": README_md_24.default,
 };