@uxf/ui 1.0.0-beta.18 → 1.0.0-beta.23

package/dropdown/dropdown.d.ts

@@ -0,0 +1,10 @@
+import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
+import { AnchorHTMLAttributes, HTMLAttributes } from "react";
+interface ItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>, UseAnchorProps {
+}
+declare type ItemsProps = HTMLAttributes<HTMLDivElement>;
+export declare const Dropdown: {
+    Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Items: import("react").ForwardRefExoticComponent<ItemsProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};

package/dropdown/dropdown.jsx

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+const useAnchorProps_1 = require("@uxf/core/hooks/useAnchorProps");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function Item(props, ref) {
+    const { children, className, ...restProps } = props;
+    const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
+        className: `uxf-dropdown-item ${className || ""}`,
+        role: "menuitem",
+        ...restProps,
+    });
+    return (<a ref={ref} {...anchorProps}>
+      {children}
+    </a>);
+}
+function Items(props, ref) {
+    const { children, className, role = "menu", ...restProps } = props;
+    return (<div className={`uxf-dropdown-items`} ref={ref} role={role} {...restProps}>
+      {children}
+    </div>);
+}
+exports.Dropdown = {
+    Item: (0, forwardRef_1.forwardRef)("Item.", Item),
+    Items: (0, forwardRef_1.forwardRef)("Items", Items),
+};

package/dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown } from "./dropdown";

package/dropdown/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var dropdown_1 = require("./dropdown");
+Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return dropdown_1.Dropdown; } });

package/error-message/error-message.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+interface Props {
+    id?: string | undefined;
+    children?: ReactNode;
+}
+declare function ErrorMessage(props: Props): JSX.Element;
+export default ErrorMessage;

package/error-message/error-message.jsx

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function ErrorMessage(props) {
+    return (<p id={props.id} className="uxf-error-message">
+      {props.children}
+    </p>);
+}
+exports.default = ErrorMessage;

package/{avatar/avatar.stories.d.ts → error-message/error-message.stories.d.ts}

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

package/error-message/error-message.stories.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/ErrorMessage",
+    component: index_1.ErrorMessage,
+};
+function Default() {
+    return (<div className="space-y-2">
+      <index_1.ErrorMessage>This field is required.</index_1.ErrorMessage>
+    </div>);
+}
+exports.Default = Default;

package/error-message/index.d.ts

@@ -0,0 +1 @@
+export { default as ErrorMessage } from "./error-message";

package/error-message/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.ErrorMessage = void 0;
+var error_message_1 = require("./error-message");
+Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function () { return __importDefault(error_message_1).default; } });

package/hooks/use-dropdown.d.ts

@@ -0,0 +1,7 @@
+import { Placement } from "@floating-ui/react-dom";
+import { CSSProperties } from "react";
+export declare function useDropdown(placement: Placement, matchWidth?: boolean): {
+    floating: (node: HTMLElement | null) => void;
+    reference: (node: (Element | import("@floating-ui/core").VirtualElement) | null) => void;
+    style: Partial<CSSProperties>;
+};

package/hooks/use-dropdown.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdown = void 0;
+const react_dom_1 = require("@floating-ui/react-dom");
+const react_1 = require("react");
+function useDropdown(placement, matchWidth = false) {
+    var _a, _b;
+    const [sizeData, setSizeData] = (0, react_1.useState)(null);
+    const { floating, reference, refs, strategy, update, x, y } = (0, react_dom_1.useFloating)({
+        placement,
+        middleware: [
+            (0, react_dom_1.flip)(),
+            (0, react_dom_1.shift)(),
+            (0, react_dom_1.size)({
+                apply: setSizeData,
+            }),
+        ],
+    });
+    (0, react_1.useEffect)(() => {
+        if (!refs.reference.current || !refs.floating.current) {
+            return;
+        }
+        return (0, react_dom_1.autoUpdate)(refs.reference.current, refs.floating.current, update);
+    }, [refs.reference, refs.floating, update]);
+    return {
+        floating,
+        reference,
+        style: {
+            left: x !== null && x !== void 0 ? x : undefined,
+            maxHeight: (_a = sizeData === null || sizeData === void 0 ? void 0 : sizeData.height) !== null && _a !== void 0 ? _a : undefined,
+            maxWidth: matchWidth ? (_b = sizeData === null || sizeData === void 0 ? void 0 : sizeData.reference.width) !== null && _b !== void 0 ? _b : undefined : undefined,
+            position: strategy,
+            top: y !== null && y !== void 0 ? y : undefined,
+        },
+    };
+}
+exports.useDropdown = useDropdown;

package/label/index.d.ts

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

package/label/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.Label = void 0;
+var label_1 = require("./label");
+Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return __importDefault(label_1).default; } });

package/label/label.d.ts

@@ -0,0 +1,9 @@
+import { MouseEventHandler, ReactNode } from "react";
+export interface LabelProps {
+    children?: ReactNode;
+    htmlFor?: string;
+    form?: string;
+    onClick?: MouseEventHandler<HTMLLabelElement>;
+}
+declare const _default: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default _default;

package/label/label.jsx

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function Label(props, ref) {
+    return (<label className="uxf-label" ref={ref} htmlFor={props.htmlFor} form={props.form} onClick={props.onClick}>
+      {props.children}
+    </label>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("Label", Label);

package/label/label.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./label").LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/label/label.stories.jsx

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/Label",
+    component: index_1.Label,
+};
+function Default() {
+    return (<div className="space-y-2">
+      <index_1.Label>Label</index_1.Label>
+    </div>);
+}
+exports.Default = Default;

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.18",
+  "version": "1.0.0-beta.23",
   "description": "",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "yarn compile",
+    "build": "npm run compile",
     "compile": "tsc -P tsconfig.json",
-    "typecheck": "tsc --noEmit --skipLibCheck",
-    "prepublish": "yarn build"
+    "typecheck": "tsc --noEmit --skipLibCheck"
   },
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@floating-ui/react-dom": "^0.6.0",
+    "@headlessui/react": "^1.6.6",
     "@uxf/core": "latest"
-  },
-  "stableVersion": "1.0.0-beta.15"
-}
+  }
+}

package/select/index.d.ts

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

package/select/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.Select = void 0;
+var select_1 = require("./select");
+Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(select_1).default; } });

package/select/select.d.ts

@@ -0,0 +1,27 @@
+import { FocusEventHandler } from "react";
+export declare type SelectValue = number | string;
+export declare type SelectOption<T = SelectValue> = {
+    key?: number | string;
+    id: T;
+    label: string;
+    disabled?: boolean;
+};
+export interface SelectProps<V = SelectValue, O = SelectOption<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: import("react").ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/select/select.jsx

@@ -0,0 +1,47 @@
+"use strict";
+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 = require("react");
+const error_message_1 = require("../error-message");
+const label_1 = require("../label");
+const forwardRef_1 = require("@uxf/ui/utils/forwardRef");
+function Select(props, ref) {
+    const { className, disabled, error, id, invalid, label, onBlur, onChange, onFocus, options, placeholder = "Vyberte z možností...", readOnly, value, } = props;
+    const selectedOption = (0, react_2.useMemo)(() => options.find((option) => option.id === value), [options, value]);
+    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_1.Listbox as="div" className={`select-form-field ${className || ""}`} onChange={onChange} value={selectedOption}>
+      <react_1.Listbox.Label as={label_1.Label} onClick={!disabledOrReadOnly ? input.focus : undefined}>
+        {label}
+      </react_1.Listbox.Label>
+      <react_1.Listbox.Button as="div">
+        {(b) => (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div aria-invalid={invalid} aria-describedby={errorId} className={(0, cx_1.cx)("select-text-input__control select-text-input__control--select", (b.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, b.disabled && classes_1.CLASSES.IS_DISABLED, readOnly && classes_1.CLASSES.IS_READONLY, invalid && classes_1.CLASSES.IS_INVALID)} onBlur={input.onBlur} onFocus={input.onFocus} tabIndex={!disabledOrReadOnly ? 0 : undefined} ref={stableRef}>
+            <div className={`select-text-input ${!value ? "text-gray-muted" : ""}`}>
+              {(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || placeholder}
+            </div>
+            {b.open ? "▲" : "▼"}
+          </div>)}
+      </react_1.Listbox.Button>
+      {invalid && error && <error_message_1.ErrorMessage id={errorId}>{error}</error_message_1.ErrorMessage>}
+      <react_1.Listbox.Options as={dropdown_1.Dropdown.Items} className="w-full" ref={dropdown.floating} style={dropdown.style}>
+        {options.map((option) => (<react_1.Listbox.Option as={react_2.Fragment} key={option.key || option.id} value={option}>
+            {(o) => (<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}
+              </dropdown_1.Dropdown.Item>)}
+          </react_1.Listbox.Option>))}
+      </react_1.Listbox.Options>
+    </react_1.Listbox>);
+}
+exports.default = (0, forwardRef_1.forwardRef)("Select", Select);

package/select/select.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SelectOption, SelectValue } from "./select";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./select").SelectProps<SelectValue, SelectOption<SelectValue>> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/select/select.stories.jsx

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/Select",
+    component: index_1.Select,
+};
+const options = [
+    { id: "one", label: "Option one" },
+    { id: "two", label: "Option two" },
+    { id: "three", label: "Option three" },
+];
+function Default() {
+    const handleChange = (value) => {
+        console.log("Select value: ", value);
+    };
+    return (<div className="space-y-2">
+      <index_1.Select id={"select-1"} name="select" label="Choose option..." options={options} onChange={handleChange}/>
+    </div>);
+}
+exports.Default = Default;

package/utils/storybook-config.d.ts

@@ -8,6 +8,7 @@ export interface StorybookConfig {
         colors: Array<keyof ButtonColors>;
     };
     Input: {};
+    Select: {};
 }
 export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];
 interface StorybookContextProviderProps {

package/utils/storybook-config.jsx

@@ -32,6 +32,7 @@ exports.defaultConfig = {
         variants: ["outlined", "default"],
     },
     Input: {},
+    Select: {},
 };
 // Context
 const Context = react_1.default.createContext(exports.defaultConfig);

package/avatar/avatar.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { AvatarSizes } from "./theme";
-interface FileResponse {
-    uuid: string;
-    namespace?: string;
-    extension: string;
-}
-export interface AvatarProps {
-    src: FileResponse | string | null | undefined;
-    size?: keyof AvatarSizes;
-    rounded?: boolean;
-}
-export declare function Avatar(props: AvatarProps): JSX.Element;
-export {};

package/avatar/avatar.jsx

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = void 0;
-const cx_1 = require("@uxf/core/utils/cx");
-function Avatar(props) {
-    var _a;
-    const className = (0, cx_1.cx)("avatar", `avatar--size-${props.size}`, `avatar--variant-${(_a = props.circular) !== null && _a !== void 0 ? _a : "default"}`);
-    return <img src={props.src} className={className}/>;
-}
-exports.Avatar = Avatar;

package/avatar/avatar.stories.jsx

@@ -1,29 +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 storybook_config_1 = require("@uxf/ui/utils/storybook-config");
-const avatar_1 = require("./avatar");
-exports.default = {
-    title: "UI/Avatar",
-    component: avatar_1.Avatar,
-};
-function Default() {
-    const config = (0, storybook_config_1.useStorybookConfig)("Button");
-    return (<div className="space-y-4">
-      <div className="flex flex-row items-center space-x-4">
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12"/>
-      </div>
-      <div className="flex flex-row items-center space-x-4">
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="8" variant="circular"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="10" variant="circular"/>
-        <avatar_1.Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" size="12" variant="circular"/>
-      </div>
-    </div>);
-}
-exports.Default = Default;

package/avatar/theme.d.ts

@@ -1,5 +0,0 @@
-export interface AvatarSizes {
-    "8": true;
-    "10": true;
-    "12": true;
-}

package/avatar/theme.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });