@uxf/ui 1.0.0-beta.22 → 1.0.0-beta.27

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

package/textarea/textarea.d.ts

@@ -0,0 +1,26 @@
+import React, { ChangeEventHandler, CSSProperties, FocusEventHandler } from "react";
+export interface TextareaProps {
+    autoComplete?: string;
+    className?: string;
+    disabled?: boolean;
+    disableAutoHeight?: boolean;
+    error?: string;
+    form?: string;
+    id: string;
+    invalid?: boolean;
+    label: string;
+    maxLength?: number | undefined;
+    minLength?: number | undefined;
+    name?: string;
+    onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    onFocus?: FocusEventHandler<HTMLTextAreaElement>;
+    placeholder?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    rows?: number;
+    style?: CSSProperties;
+    value?: string | null;
+}
+declare const _default: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default _default;

package/textarea/textarea.js

@@ -0,0 +1,74 @@
+"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 = __importStar(require("react"));
+const forwardRef_1 = require("../utils/forwardRef");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const label_1 = require("../label");
+const cx_1 = require("@uxf/core/utils/cx");
+const error_message_1 = require("../error-message");
+const use_fix_android_on_focus_1 = require("../hooks/use-fix-android-on-focus");
+const use_latest_1 = require("../hooks/use-latest");
+const classes_1 = require("@uxf/core/constants/classes");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+function autoHeightHandler(element, rows = 4) {
+    element.style.height = "auto";
+    if (rows > 1) {
+        const contentHeight = element.scrollHeight;
+        const lineHeight = parseInt(window.getComputedStyle(element).getPropertyValue("line-height"), 10);
+        const fontSize = parseInt(window.getComputedStyle(element).getPropertyValue("font-size"), 10);
+        const targetHeight = rows * fontSize * (lineHeight / fontSize);
+        element.style.height = Math.max(targetHeight, contentHeight) + "px";
+    }
+}
+const EVENTS = ["input", "cut", "paste", "drop"];
+function Textarea(props, ref) {
+    const { autoComplete, className, disabled, disableAutoHeight, error, form, id, invalid, label, maxLength, minLength, name, onBlur, onChange, onFocus, placeholder, readOnly, required, rows, style, value, } = props;
+    const innerRef = (0, react_1.useRef)(null);
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, onBlur, onFocus);
+    const fixedOnFocus = (0, use_fix_android_on_focus_1.useFixAndroidOnFocus)(input.onFocus);
+    const errorId = invalid && id ? `${id}--errormessage` : undefined;
+    const latestRows = (0, use_latest_1.useLatest)(rows);
+    (0, react_1.useEffect)(() => {
+        const node = innerRef.current;
+        if (!node || disableAutoHeight) {
+            return;
+        }
+        const handler = () => autoHeightHandler(node, latestRows.current);
+        handler();
+        EVENTS.map((e) => node.addEventListener(e, handler));
+        window.addEventListener("resize", handler);
+        return () => {
+            EVENTS.map((e) => node.removeEventListener(e, handler));
+            window.removeEventListener("resize", handler);
+        };
+    }, [disableAutoHeight, latestRows]);
+    return (react_1.default.createElement("div", { className: `uxf-textarea-wrapper ${className || ""}`, style: style },
+        react_1.default.createElement(label_1.Label, { htmlFor: id }, label),
+        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-textarea-nextwrapper h-auto", 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), onClick: !disabled ? input.focus : undefined },
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": invalid, autoComplete: autoComplete, className: "uxf-textarea-textarea", disabled: disabled, form: form, id: id, maxLength: maxLength, minLength: minLength, name: name, onBlur: input.onBlur, onChange: onChange, onFocus: fixedOnFocus, placeholder: placeholder, readOnly: readOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: required, value: value !== null && value !== void 0 ? value : undefined })),
+        invalid && error && react_1.default.createElement(error_message_1.ErrorMessage, { id: errorId }, error)));
+}
+exports.default = (0, forwardRef_1.forwardRef)("Textarea", Textarea);

package/textarea/textarea.stories.d.ts

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

package/textarea/textarea.stories.js

@@ -0,0 +1,32 @@
+"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/Textarea",
+    component: index_1.Textarea,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", onChange: () => {
+                // eslint-disable-next-line no-console
+                console.log("textarea onChange");
+            }, placeholder: "Placeholder text...." }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", readOnly: true, onChange: () => {
+                // eslint-disable-next-line no-console
+                console.log("textarea OnChange");
+            } }),
+        react_1.default.createElement(index_1.Textarea, { disabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: () => {
+                // eslint-disable-next-line no-console
+                console.log("textarea OnChange");
+            } }),
+        react_1.default.createElement(index_1.Textarea, { rows: 10, id: "textarea-rows10", label: "Textarea rows = 10", placeholder: "Placeholder text....", onChange: () => {
+                // eslint-disable-next-line no-console
+                console.log("textarea OnChange");
+            } })));
+}
+exports.Default = Default;

package/types/form-control-props.d.ts

@@ -0,0 +1,24 @@
+import { ChangeEvent, FocusEventHandler } from "react";
+export interface FormControlProps<ValueType, ElementType = HTMLInputElement, RestParams extends unknown[] = []> {
+    value?: ValueType;
+    onChange?: (value: ValueType, event?: ChangeEvent<ElementType>, ...args: RestParams) => void;
+    onBlur?: FocusEventHandler<ElementType>;
+    onFocus?: FocusEventHandler<ElementType>;
+    name?: string;
+    /**
+     * @about
+     * The input element will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * @about
+     * It prevents the user from changing the value of the field (not from interacting with the field).
+     */
+    isReadOnly?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+}
+export declare type OptionType<ValueType = string, LabelType = string> = {
+    value: ValueType;
+    label: LabelType;
+};

package/types/form-control-props.js

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

package/types/index.d.ts

@@ -0,0 +1 @@
+export * from "./form-control-props";

package/types/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("./form-control-props"), exports);

package/utils/action.d.ts

@@ -0,0 +1,2 @@
+import { HandlerFunction } from "@storybook/addon-actions";
+export declare function action(name: string, handler: HandlerFunction): HandlerFunction;

package/utils/action.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.action = void 0;
+const addon_actions_1 = require("@storybook/addon-actions");
+function action(name, handler) {
+    return function (...args) {
+        (0, addon_actions_1.action)(name)(...args);
+        handler(...args);
+    };
+}
+exports.action = action;

package/utils/component-structure-analyzer.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+interface ComponentStructureAnalyzerProps {
+    children: ReactNode;
+}
+declare function ComponentStructureAnalyzer(props: ComponentStructureAnalyzerProps): JSX.Element;
+export default ComponentStructureAnalyzer;

package/utils/component-structure-analyzer.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 ComponentStructureAnalyzer(props) {
+    return react_1.default.createElement("div", { className: "uxf-component-structure-analyzer" }, props.children);
+}
+exports.default = ComponentStructureAnalyzer;

package/utils/cx.d.ts

@@ -0,0 +1,3 @@
+export declare type ClassArray = ClassValue[];
+export declare type ClassValue = ClassArray | Record<string, any> | string | number | null | boolean | undefined;
+export declare function cx(...classes: ClassValue[]): string;

package/utils/cx.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+function toVal(mix) {
+    let k;
+    let y;
+    let str = "";
+    if (typeof mix === "string" || typeof mix === "number") {
+        str += mix;
+    }
+    else if (typeof mix === "object") {
+        if (Array.isArray(mix)) {
+            for (k = 0; k < mix.length; k++) {
+                if (mix[k]) {
+                    if ((y = toVal(mix[k]))) {
+                        if (str) {
+                            str += " ";
+                        }
+                        str += y;
+                    }
+                }
+            }
+        }
+        else {
+            for (k in mix) {
+                if (mix === null || mix === void 0 ? void 0 : mix[k]) {
+                    if (str) {
+                        str += " ";
+                    }
+                    str += k;
+                }
+            }
+        }
+    }
+    return str;
+}
+function cx(...classes) {
+    let i = 0;
+    let tmp;
+    let x;
+    let str = "";
+    while (i < classes.length) {
+        if ((tmp = classes[i++])) {
+            if ((x = toVal(tmp))) {
+                if (str) {
+                    str += " ";
+                }
+                str += x;
+            }
+        }
+    }
+    return str;
+}
+exports.cx = cx;

package/utils/forwardRef.d.ts

@@ -0,0 +1,12 @@
+import { ForwardedRef, ForwardRefExoticComponent, PropsWithoutRef, ReactElement, RefAttributes } from "react";
+export declare type ForwardRefRenderFunction<T, P> = {
+    (props: P, ref: ForwardedRef<T>): ReactElement | null;
+    displayName?: string;
+    /** defaultProps are not supported on render functions */
+    defaultProps?: never;
+    /** propTypes are not supported on render functions */
+    propTypes?: never;
+    /** used by Chakra */
+    id?: string;
+};
+export declare const forwardRef: <T, P>(name: string, render: ForwardRefRenderFunction<T, P>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;

package/utils/forwardRef.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.forwardRef = void 0;
+const react_1 = require("react");
+const forwardRef = (name, render) => {
+    const Component = (0, react_1.forwardRef)(render);
+    Component.displayName = name;
+    return Component;
+};
+exports.forwardRef = forwardRef;

package/utils/image.d.ts

@@ -0,0 +1,9 @@
+import { ResizerImageProps } from "@uxf/core/utils/resizer";
+import { ReactElement } from "react";
+export interface FileResponse {
+    extension: string;
+    namespace?: string | null;
+    uuid: string;
+}
+export declare function getImgSrcSet(file?: FileResponse, width?: number, height?: number, options?: ResizerImageProps): string | null;
+export declare function getImgSources(file?: FileResponse, width?: number, height?: number): ReactElement | null;

package/utils/image.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.getImgSources = exports.getImgSrcSet = void 0;
+const resizer_1 = require("@uxf/core/utils/resizer");
+const react_1 = __importDefault(require("react"));
+const TYPES = ["avif", "webp"];
+function getImgSrcSet(file, width = 200, height = 300, options = {}) {
+    if (!file || !file.uuid || !file.extension || file.extension === "svg") {
+        return null;
+    }
+    const toFormat = TYPES.includes(file.extension) ? "png" : file.extension;
+    return [3, 2, 1]
+        .map((size) => (0, resizer_1.resizerImageUrl)(file, width * size, height * size, { toFormat, ...options }) +
+        (size > 1 ? ` ${size}x` : ""))
+        .join(", ");
+}
+exports.getImgSrcSet = getImgSrcSet;
+function getImgSources(file, width = 200, height = 300) {
+    if (!file || !file.uuid || !file.extension || file.extension === "svg") {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null, TYPES.map((type) => {
+        var _a;
+        return (react_1.default.createElement("source", { key: type, srcSet: (_a = getImgSrcSet(file, width, height, { toFormat: type })) !== null && _a !== void 0 ? _a : undefined, type: `image/${type}` }));
+    })));
+}
+exports.getImgSources = getImgSources;

package/utils/rem.d.ts

@@ -0,0 +1 @@
+export declare const rem: (size?: number) => string | undefined;

package/utils/rem.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rem = void 0;
+const rem = (size) => (size ? `${size / 16}rem` : undefined);
+exports.rem = rem;

package/utils/storybook-config.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { ButtonColor, ButtonSize, ButtonVariant } from "@uxf/ui/button";
+export declare const defaultConfig: StorybookConfig;
+export interface StorybookConfig {
+    Button: {
+        sizes: ButtonSize[];
+        variants: ButtonVariant[];
+        colors: ButtonColor[];
+    };
+    Input: any;
+    Select: any;
+}
+export declare function useStorybookConfig<T extends keyof StorybookConfig>(key: T): StorybookConfig[T];
+interface StorybookContextProviderProps {
+    config: StorybookConfig;
+    children: ReactNode;
+}
+export declare function StorybookContextProvider(props: StorybookContextProviderProps): JSX.Element;
+export {};

package/utils/storybook-config.js

@@ -0,0 +1,47 @@
+"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.StorybookContextProvider = exports.useStorybookConfig = exports.defaultConfig = void 0;
+const react_1 = __importStar(require("react"));
+exports.defaultConfig = {
+    Button: {
+        sizes: ["xs", "sm", "default", "lg", "xl"],
+        colors: ["default", "white", "success", "warning", "error"],
+        variants: ["outlined", "default"],
+    },
+    Input: {},
+    Select: {},
+};
+// Context
+const Context = (0, react_1.createContext)(exports.defaultConfig);
+// consumer
+function useStorybookConfig(key) {
+    return (0, react_1.useContext)(Context)[key];
+}
+exports.useStorybookConfig = useStorybookConfig;
+function StorybookContextProvider(props) {
+    return react_1.default.createElement(Context.Provider, { value: props.config }, props.children);
+}
+exports.StorybookContextProvider = StorybookContextProvider;

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;
-}