@uxf/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/avatar-file-input/avatar-file-input.d.ts

@@ -0,0 +1,32 @@
+import React, { CSSProperties, FocusEventHandler } from "react";
+interface FileResponse {
+    extension: string;
+    id: number;
+    name: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export declare type AvatarFileInputChangeEventHandler = (file: FileResponse | null) => Promise<void>;
+export declare type AvatarFileInputUploadHandler = (file: File, namespace?: string) => Promise<FileResponse>;
+export interface AvatarFileInputProps {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    form?: string;
+    id: string;
+    invalid?: boolean;
+    label: string;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onChange: AvatarFileInputChangeEventHandler;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onUploadError: (err: unknown) => void;
+    readOnly?: boolean;
+    required?: boolean;
+    style?: CSSProperties;
+    uploadHandler: AvatarFileInputUploadHandler;
+    value?: FileResponse | null | undefined;
+    namespace?: "default" | "user-files";
+}
+declare const _default: React.ForwardRefExoticComponent<AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/avatar-file-input/avatar-file-input.js

@@ -0,0 +1,73 @@
+"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 });
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = __importStar(require("react"));
+const forwardRef_1 = require("../utils/forwardRef");
+const error_message_1 = require("../error-message");
+const raster_image_1 = require("../raster-image");
+function CameraIcon() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: { height: "36px" } },
+        react_1.default.createElement("path", { d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" })));
+}
+function AvatarFileInput(props, ref) {
+    const { className, disabled, error, form, id, invalid, label, name, onBlur, onChange, onFocus, onUploadError, readOnly, required, style, uploadHandler, value, } = props;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const errorId = invalid && id ? `${id}--errormessage` : undefined;
+    const [uploading, setUploading] = (0, react_1.useState)(false);
+    const _onChange = (0, react_1.useCallback)(async (e) => {
+        var _a;
+        e.persist();
+        const files = (_a = e.target.files) !== null && _a !== void 0 ? _a : [];
+        if (files.length === 1) {
+            const file = files[0];
+            try {
+                setUploading(true);
+                const response = await uploadHandler(file);
+                await onChange(response);
+            }
+            catch (err) {
+                onUploadError(err);
+            }
+            finally {
+                setUploading(false);
+            }
+        }
+    }, [onChange, onUploadError, uploadHandler]);
+    return (react_1.default.createElement("div", { className: `_form-field ${className || ""}`, style: style },
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input", input.focused && classes_1.CLASSES.IS_FOCUSED, disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID, value && "is-disabled:opacity-50") },
+            react_1.default.createElement("label", { className: "sr-only", htmlFor: id }, label),
+            react_1.default.createElement("div", { className: "rounded-inherit relative flex h-full w-full flex-col items-center justify-center" },
+                react_1.default.createElement(CameraIcon, null),
+                react_1.default.createElement("p", { className: "mt-1 text-xs" }, uploading ? "nahrávám..." : value ? "změnit foto" : "přidat foto")),
+            !!value && (react_1.default.createElement(raster_image_1.RasterImage, { alt: "", className: (0, cx_1.cx)("rounded-inherit absolute left-0 top-0 block h-full w-full object-cover", uploading && "opacity-0"), height: 96, src: value, width: 96 })),
+            react_1.default.createElement("input", { accept: "image/*", "aria-describedby": errorId, "aria-invalid": invalid, className: "input-reset rounded-inherit absolute left-0 top-0 h-full w-full cursor-pointer opacity-0", disabled: disabled, form: form, id: id, name: name, onBlur: input.onBlur, onChange: _onChange, onFocus: input.onFocus, readOnly: readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: required, tabIndex: readOnly ? -1 : undefined, type: "file" })),
+        invalid && error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+}
+exports.default = (0, forwardRef_1.forwardRef)("AvatarFileInput", AvatarFileInput);

package/avatar-file-input/avatar-file-input.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./avatar-file-input").AvatarFileInputProps & React.RefAttributes<HTMLInputElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/avatar-file-input/avatar-file-input.stories.js

@@ -0,0 +1,30 @@
+"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 index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/AvatarFileInput",
+    component: index_1.AvatarFileInput,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.AvatarFileInput, { id: "afi", label: "Vyberte Avatar", onChange: (value) => {
+                return new Promise(() => {
+                    // eslint-disable-next-line no-console
+                    console.log("Changed:", value);
+                });
+            }, onUploadError: () => {
+                // eslint-disable-next-line no-console
+                console.log("Upload error");
+            }, uploadHandler: () => {
+                return new Promise(() => {
+                    // eslint-disable-next-line no-console
+                    console.log("Upload handler");
+                });
+            } })));
+}
+exports.Default = Default;

package/avatar-file-input/index.d.ts

@@ -0,0 +1 @@
+export { default as AvatarFileInput } from "./avatar-file-input";

package/avatar-file-input/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarFileInput = void 0;
+var avatar_file_input_1 = require("./avatar-file-input");
+Object.defineProperty(exports, "AvatarFileInput", { enumerable: true, get: function () { return __importDefault(avatar_file_input_1).default; } });

package/button/button.d.ts

@@ -1,14 +1,14 @@
-import { ReactNode } from "react";
-import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button";
-interface ButtonProps {
-    variant?: keyof ButtonVariants;
-    color?: keyof ButtonColors;
-    size?: keyof ButtonSizes;
-    disabled?: boolean;
-    loading?: boolean;
-    startAdornment?: ReactNode;
-    endAdornment?: ReactNode;
-    children: ReactNode;
+import React, { AnchorHTMLAttributes } from "react";
+import { ButtonColors, ButtonSizes, ButtonVariants } from "@uxf/ui/button/theme";
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+export declare type ButtonVariant = keyof ButtonVariants;
+export declare type ButtonSize = keyof ButtonSizes;
+export declare type ButtonColor = keyof ButtonColors;
+export interface ButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    isFullWidth?: boolean;
 }
-declare function Button(props: ButtonProps): JSX.Element;
-export default Button;
+declare const _default: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+export default _default;

package/button/button.js

@@ -3,17 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var theme_1 = require("@uxf/ui/theme");
-var cx_1 = require("@uxf/core/utils/cx");
-function Button(props) {
+const react_1 = __importDefault(require("react"));
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("../utils/forwardRef");
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const classes_1 = require("@uxf/core/constants/classes");
+function Button(props, ref) {
     var _a, _b, _c;
-    var theme = (0, theme_1.useTheme)().Button;
-    var className = (0, cx_1.cx)("button", theme.color[(_a = props.color) !== null && _a !== void 0 ? _a : theme.defaultColor], theme.size[(_b = props.size) !== null && _b !== void 0 ? _b : theme.defaultSize], theme.variant[(_c = props.variant) !== null && _c !== void 0 ? _c : theme.defaultVariant], props.disabled && theme.disabled);
-    return (react_1.default.createElement("button", { type: "button", className: className },
-        props.startAdornment,
-        props.children,
-        props.endAdornment));
+    const className = (0, cx_1.cx)("uxf-button", `uxf-button--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-button--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-button--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, props.disabled && classes_1.CLASSES.IS_DISABLED, props.loading && "is-loading", props.isFullWidth && "uxf-button--full-width");
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        ...props,
+        className,
+    });
+    return (react_1.default.createElement("a", { ref: ref, ...anchorProps, className: className },
+        typeof props.children === "string" ? (react_1.default.createElement("span", { className: "uxf-button__text" }, props.children)) : (props.children),
+        react_1.default.createElement("div", { className: "loader" })));
 }
-exports.default = Button;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2J1dHRvbi9idXR0b24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O0FBQUEsZ0RBQXlDO0FBQ3pDLHVDQUF5QztBQUV6Qyx5Q0FBd0M7QUFheEMsU0FBUyxNQUFNLENBQUMsS0FBa0I7O0lBQ2hDLElBQU0sS0FBSyxHQUFHLElBQUEsZ0JBQVEsR0FBRSxDQUFDLE1BQU0sQ0FBQztJQUVoQyxJQUFNLFNBQVMsR0FBRyxJQUFBLE9BQUUsRUFDbEIsUUFBUSxFQUNSLEtBQUssQ0FBQyxLQUFLLENBQUMsTUFBQSxLQUFLLENBQUMsS0FBSyxtQ0FBSSxLQUFLLENBQUMsWUFBWSxDQUFDLEVBQzlDLEtBQUssQ0FBQyxJQUFJLENBQUMsTUFBQSxLQUFLLENBQUMsSUFBSSxtQ0FBSSxLQUFLLENBQUMsV0FBVyxDQUFDLEVBQzNDLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBQSxLQUFLLENBQUMsT0FBTyxtQ0FBSSxLQUFLLENBQUMsY0FBYyxDQUFDLEVBQ3BELEtBQUssQ0FBQyxRQUFRLElBQUksS0FBSyxDQUFDLFFBQVEsQ0FDakMsQ0FBQztJQUVGLE9BQU8sQ0FDTCwwQ0FBUSxJQUFJLEVBQUMsUUFBUSxFQUFDLFNBQVMsRUFBRSxTQUFTO1FBQ3ZDLEtBQUssQ0FBQyxjQUFjO1FBQ3BCLEtBQUssQ0FBQyxRQUFRO1FBQ2QsS0FBSyxDQUFDLFlBQVksQ0FDWixDQUNWLENBQUM7QUFDSixDQUFDO0FBRUQsa0JBQWUsTUFBTSxDQUFDIn0=
+exports.default = (0, forwardRef_1.forwardRef)("Button", Button);

package/button/button.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("@uxf/ui/button").ButtonProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/button/button.stories.js

@@ -0,0 +1,52 @@
+"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.Default = void 0;
+const react_1 = __importStar(require("react"));
+const button_1 = require("@uxf/ui/button");
+const storybook_config_1 = require("@uxf/ui/utils/storybook-config");
+exports.default = {
+    title: "UI/Button",
+    component: button_1.Button,
+};
+function Default() {
+    const config = (0, storybook_config_1.useStorybookConfig)("Button");
+    return (react_1.default.createElement("div", { className: "space-y-2" }, config.variants.map((variant) => (react_1.default.createElement(react_1.Fragment, { key: variant }, config.colors.map((color) => (react_1.default.createElement(react_1.Fragment, { key: color }, config.sizes.map((size) => (react_1.default.createElement("div", { key: `${size}${color}${variant}`, className: "pb-4" },
+        react_1.default.createElement("div", { className: "mb-2 text-sm" },
+            "Variant: ",
+            react_1.default.createElement("span", { className: "font-semibold" }, variant),
+            ", Color:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, color),
+            ", Size:",
+            " ",
+            react_1.default.createElement("span", { className: "font-semibold" }, size)),
+        react_1.default.createElement("div", { className: "mb-2 flex flex-row gap-2" },
+            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size }, "Default"),
+            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, loading: true }, "Loading"),
+            react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, disabled: true }, "Disabled")),
+        react_1.default.createElement(button_1.Button, { variant: variant, color: color, size: size, isFullWidth: true }, "Full width"))))))))))));
+}
+exports.Default = Default;

package/button/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Button } from "./button";
-export * from "@uxf/ui/button/theme";
+export { default as Button } from "@uxf/ui/button/button";
+export * from "@uxf/ui/button/button";

package/button/index.js

@@ -18,7 +18,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
-var button_1 = require("./button");
+var button_1 = require("@uxf/ui/button/button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
-__exportStar(require("@uxf/ui/button/theme"), exports);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsbUNBQTZDO0FBQXBDLGlIQUFBLE9BQU8sT0FBVTtBQUMxQix1REFBcUMifQ==
+__exportStar(require("@uxf/ui/button/button"), exports);

package/button/theme.d.ts

@@ -1,15 +1,18 @@
 export interface ButtonVariants {
     outlined: true;
-    contained: true;
+    default: true;
 }
 export interface ButtonSizes {
     xs: true;
     sm: true;
-    md: true;
+    default: true;
     lg: true;
     xl: true;
 }
 export interface ButtonColors {
-    primary: true;
-    secondary: true;
+    default: true;
+    white: true;
+    success: true;
+    warning: true;
+    error: true;
 }

package/button/theme.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvYnV0dG9uL3RoZW1lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

package/checkbox/checkbox.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from "react";
+interface Props {
+    className?: string;
+    checked: boolean;
+    disabled?: boolean;
+    intermediate?: boolean;
+    label: string;
+    onChange: (checked: boolean) => void;
+    style?: Partial<CSSProperties>;
+}
+declare function Checkbox(props: Props): JSX.Element;
+export default Checkbox;

package/checkbox/checkbox.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 });
+const react_1 = require("@headlessui/react");
+const react_2 = __importDefault(require("react"));
+const cx_1 = require("@uxf/core/utils/cx");
+const classes_1 = require("@uxf/core/constants/classes");
+function CheckIcon() {
+    return (react_2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: { height: "24" } },
+        react_2.default.createElement("path", { d: "M211.8 339.8C200.9 350.7 183.1 350.7 172.2 339.8L108.2 275.8C97.27 264.9 97.27 247.1 108.2 236.2C119.1 225.3 136.9 225.3 147.8 236.2L192 280.4L300.2 172.2C311.1 161.3 328.9 161.3 339.8 172.2C350.7 183.1 350.7 200.9 339.8 211.8L211.8 339.8zM0 96C0 60.65 28.65 32 64 32H384C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96zM48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80H64C55.16 80 48 87.16 48 96z" })));
+}
+function SquareIcon() {
+    return (react_2.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", style: { height: "24" } },
+        react_2.default.createElement("path", { d: "M384 32C419.3 32 448 60.65 448 96V416C448 451.3 419.3 480 384 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H384zM384 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H384C392.8 432 400 424.8 400 416V96C400 87.16 392.8 80 384 80z" })));
+}
+function Checkbox(props) {
+    const { checked, className, disabled, label, onChange, style } = props;
+    return (react_2.default.createElement(react_1.Switch, { checked: checked, className: (0, cx_1.cx)(checked && classes_1.CLASSES.IS_SELECTED, disabled && classes_1.CLASSES.IS_DISABLED, "uxf-checkbox", className), disabled: disabled, onChange: onChange, style: style },
+        react_2.default.createElement("span", { className: "sr-only" }, label),
+        checked ? react_2.default.createElement(CheckIcon, null) : react_2.default.createElement(SquareIcon, null)));
+}
+exports.default = Checkbox;

package/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Checkbox } from "./index";
+declare const _default: {
+    title: string;
+    component: typeof Checkbox;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/checkbox/checkbox.stories.js

@@ -0,0 +1,40 @@
+"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.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+exports.default = {
+    title: "UI/Checkbox",
+    component: index_1.Checkbox,
+};
+function Default() {
+    const [checked, setChecked] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.Checkbox, { label: "Opravdu?", onChange: () => {
+                setChecked(!checked);
+            }, checked: checked })));
+}
+exports.Default = Default;

package/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from "./checkbox";

package/checkbox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var checkbox_1 = require("./checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return __importDefault(checkbox_1).default; } });

package/checkbox-input/checkbox-input.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function CheckboxInput(): JSX.Element;
+export default CheckboxInput;

package/checkbox-input/checkbox-input.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+function CheckboxInput() {
+    return react_1.default.createElement("div", { className: "uxf-checkbox-input" }, "xx");
+}
+exports.default = CheckboxInput;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CheckboxInput } from "./index";
+declare const _default: {
+    title: string;
+    component: typeof CheckboxInput;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/checkbox-input/checkbox-input.stories.js

@@ -0,0 +1,17 @@
+"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 index_1 = require("./index");
+const react_1 = __importDefault(require("react"));
+exports.default = {
+    title: "UI/CheckboxInput",
+    component: index_1.CheckboxInput,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.CheckboxInput, null)));
+}
+exports.Default = Default;

package/checkbox-input/index.d.ts

@@ -0,0 +1 @@
+export { default as CheckboxInput } from "./checkbox-input";

package/checkbox-input/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInput = void 0;
+var checkbox_input_1 = require("./checkbox-input");
+Object.defineProperty(exports, "CheckboxInput", { enumerable: true, get: function () { return __importDefault(checkbox_input_1).default; } });

package/combobox/combobox.d.ts

@@ -0,0 +1,27 @@
+import React, { FocusEventHandler } from "react";
+declare type ComboboxValue = number | string;
+export declare type ComboboxOption<T = ComboboxValue> = {
+    key?: number | string;
+    id: T;
+    label: string;
+    disabled?: boolean;
+};
+export interface ComboboxProps<V = ComboboxValue, O = ComboboxOption<V>> {
+    className?: string;
+    disabled?: boolean;
+    error?: string;
+    invalid?: boolean;
+    onChange: (value: O | null) => void;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    name: string;
+    id: string;
+    label: string;
+    placeholder?: string;
+    options: O[];
+    readOnly?: boolean;
+    required?: boolean;
+    value?: V;
+}
+declare const _default: React.ForwardRefExoticComponent<ComboboxProps<ComboboxValue, ComboboxOption<ComboboxValue>> & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/combobox/combobox.js

@@ -0,0 +1,56 @@
+"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 });
+const react_1 = require("@headlessui/react");
+const dropdown_1 = require("../dropdown");
+const use_dropdown_1 = require("../hooks/use-dropdown");
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_2 = __importStar(require("react"));
+const error_message_1 = require("../error-message");
+const label_1 = require("../label");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function Combobox(props, ref) {
+    const { className, disabled, error, id, invalid, label, onBlur, onChange, onFocus, options, placeholder, readOnly, value, } = props;
+    const [query, setQuery] = (0, react_2.useState)("");
+    const selectedOption = options.find((option) => option.id === value);
+    const filteredData = query === ""
+        ? options
+        : options.filter((item) => String(item.label).toLowerCase().includes(query.toLowerCase()));
+    const innerRef = (0, react_2.useRef)(null);
+    const disabledOrReadOnly = disabled || readOnly;
+    const errorId = invalid ? `${id}--errormessage` : undefined;
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const dropdown = (0, use_dropdown_1.useDropdown)("bottom", true);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
+    return (react_2.default.createElement(react_1.Combobox, { as: "div", className: `autocomplete-form-field ${className || ""}`, onChange: onChange, value: selectedOption },
+        react_2.default.createElement(react_1.Combobox.Label, { as: label_1.Label, onClick: !disabledOrReadOnly ? input.focus : undefined }, label),
+        react_2.default.createElement(react_1.Combobox.Input, { className: (0, cx_1.cx)("border-grey w-full rounded-lg border p-4 tracking-wider outline-none", invalid && error && "outline-red border-transparent outline"), displayValue: (item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : ""; }, onBlur: onBlur, onChange: (event) => setQuery(event.target.value), placeholder: placeholder, ref: stableRef, type: "text" }),
+        invalid && error && react_2.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error),
+        react_2.default.createElement(react_1.Combobox.Options, { as: dropdown_1.Dropdown.Items, className: "w-full", ref: dropdown.floating, style: dropdown.style }, filteredData.map((option) => (react_2.default.createElement(react_1.Combobox.Option, { as: react_2.Fragment, key: option.key || option.id, value: option }, (o) => (react_2.default.createElement(dropdown_1.Dropdown.Item, { className: (0, cx_1.cx)(o.active && classes_1.CLASSES.IS_ACTIVE, o.disabled && classes_1.CLASSES.IS_DISABLED, o.selected && classes_1.CLASSES.IS_SELECTED) }, option.label))))))));
+}
+exports.default = (0, forwardRef_1.forwardRef)("Combobox", Combobox);

package/combobox/combobox.stories.d.ts

@@ -0,0 +1,8 @@
+import { ComboboxOption } from "./combobox";
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./combobox").ComboboxProps<string | number, ComboboxOption<string | number>> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;