@bodynarf/react.components 1.7.2 → 1.7.4

package/src/components/primitives/text/components/textWithLabel/index.tsx

@@ -0,0 +1,123 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault, } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { TextProps } from "@bbr/components/text";
+
+/** Textual input with describing label */
+const TextWithLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    label, placeholder,
+    onBlur,
+}: TextProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const id = name || generateGuid();
+    const elSizeClassName = "is-{0}".format(getValueOrDefault(size, ElementSize.Normal));
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+
+    const elClassName = getClassName([
+        className,
+        elSizeClassName,
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+
+    const inputContainerClassName = getClassName([
+        "control",
+        loading === true ? "is-loading" : "",
+    ]);
+
+    const labelClassName = getClassName([
+        "label",
+        !label!.horizontal ? elSizeClassName : "",
+        label!.className
+    ]);
+
+    if (label!.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            elSizeClassName,
+            label!.horizontalContainerClassName
+        ]);
+
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label!.horizontalFieldContainerClassName
+        ]);
+
+        return (
+            <div className="bbr-input field is-horizontal">
+                <div className={labelContainerClassName}>
+                    <label
+                        className={labelClassName}
+                        htmlFor={id}
+                    >
+                        {label!.caption}
+                    </label>
+                </div>
+                <div className={fieldContainerClassName}>
+                    <div className="field">
+                        <div className={inputContainerClassName}>
+                            <input
+                                type="text"
+                                className={elClassName}
+                                placeholder={placeholder}
+                                readOnly={readonly}
+                                disabled={disabled}
+                                defaultValue={defaultValue}
+                                onChange={onChange}
+                                onBlur={onBlur}
+                                name={id}
+                                id={id}
+                            />
+                        </div>
+                        {isValidationDefined && validationMessages.length > 0 &&
+                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bbr-input field">
+            <label
+                className={labelClassName}
+                htmlFor={id}
+            >
+                {label!.caption}
+            </label>
+            <div className={inputContainerClassName}>
+                <input
+                    type="text"
+                    className={elClassName}
+                    placeholder={placeholder}
+                    readOnly={readonly}
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    name={id}
+                    id={id}
+                />
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default TextWithLabel;

package/src/components/primitives/text/components/textWithoutLabel/index.tsx

@@ -0,0 +1,64 @@
+import { ChangeEvent, useCallback } from "react";
+
+import { generateGuid, getClassName, getValueOrDefault } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import { getValidationValues } from "@bbr/utils";
+
+import { TextProps } from "@bbr/components/text";
+
+/** Textual input without describing label */
+const TextWithoutLabel = ({
+    onValueChange, readonly, disabled, defaultValue, validationState,
+    name,
+    className, size, style, rounded, loading,
+    placeholder,
+    onBlur,
+}: TextProps): JSX.Element => {
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => onValueChange(event.target.value),
+        [onValueChange]
+    );
+
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(style, validationState);
+
+    const elClassName = getClassName([
+        className,
+        "is-{0}".format(getValueOrDefault(size, ElementSize.Normal)),
+        rounded === true ? "is-rounded" : "",
+        styleClassName,
+        "input",
+    ]);
+
+    const containerClassName = getClassName([
+        "control",
+        "bbr-input",
+        loading === true ? "is-loading" : "",
+    ]);
+
+    const id = name || generateGuid();
+
+    return (
+        <>
+            <div className={containerClassName}>
+                <input
+                    className={elClassName}
+                    type="text"
+                    placeholder={placeholder}
+                    readOnly={readonly}
+                    disabled={disabled}
+                    defaultValue={defaultValue}
+                    onChange={onChange}
+                    onBlur={onBlur}
+                    name={id}
+                    id={id}
+                />
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </>
+    );
+};
+
+export default TextWithoutLabel;

package/src/components/primitives/text/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/src/components/primitives/text/types.ts

@@ -0,0 +1,7 @@
+import { BaseInputElementProps } from "@bbr/components";
+
+/** Text input component props type */
+export interface TextProps extends BaseInputElementProps<string> {
+    /** Focus out event handler */
+    onBlur?: () => void;
+}

package/src/components/primitives/types/baseProps.ts

@@ -0,0 +1,42 @@
+import { BaseElementProps, ElementColor, ElementSize } from "@bbr/components";
+
+import { InputLabel, ValidationState } from ".";
+
+/** Base properties for input components */
+export interface BaseInputElementProps<TValue> extends BaseElementProps {
+    /** Value change handler. Changed value must be stored outside of component */
+    onValueChange: (value?: TValue) => void;
+
+    /** Default value of input component*/
+    defaultValue?: TValue;
+
+    /** Input element placeholder */
+    placeholder?: string;
+
+    /** Is component borders are rounded */
+    rounded?: boolean;
+
+    /** Should be component disabled. Selecting is not allowed */
+    disabled?: boolean;
+
+    /** Should be component int read only mode. Selecting is allowed */
+    readonly?: boolean;
+
+    /** Component size */
+    size?: ElementSize;
+
+    /** Label configuration */
+    label?: InputLabel;
+
+    /** Displaying loading state of component as spinner in right end of component */
+    loading?: boolean;
+
+    /** Style. Colors the border */
+    style?: ElementColor;
+
+    /** Name of element. Required for form elements */
+    name?: string;
+
+    /** Current validation state */
+    validationState?: ValidationState;
+}

package/src/components/primitives/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./baseProps";
+export * from "./label";
+export * from "./validation";

package/src/components/primitives/types/label.ts

@@ -0,0 +1,17 @@
+/** Input label configuration */
+export interface InputLabel {
+    /** Label textual content to describe input requirements */
+    caption: string;
+
+    /** Should component be on same line with label */
+    horizontal: boolean;
+
+    /** Additional class names */
+    className?: string;
+
+    /** Class name for label parent container in horizontal mode */
+    horizontalContainerClassName?: string;
+
+    /** Class name for input parent container in horizontal mode */
+    horizontalFieldContainerClassName?: string;
+}

package/src/components/primitives/types/validation/index.ts

@@ -0,0 +1,2 @@
+export * from "./status";
+export * from "./state";

package/src/components/primitives/types/validation/state.ts

@@ -0,0 +1,10 @@
+import { ValidationStatus } from "./status";
+
+/** Form component value validation state */
+export interface ValidationState {
+    /** Current status */
+    status: ValidationStatus;
+
+    /** Current status messages */
+    messages: Array<string>;
+};

package/src/components/primitives/types/validation/status.ts

@@ -0,0 +1,11 @@
+/** Input component value validation status */
+export enum ValidationStatus {
+    /** Validation wasn"t been performed */
+    None = "none",
+
+    /** Value is valid */
+    Valid = "valid",
+
+    /** Value is invalid due some validator check */
+    Invalid = "invalid",
+};

package/src/components/search/component/index.tsx

@@ -0,0 +1,88 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
+import { generateGuid, getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import Button from "@bbr/components/button";
+
+import { SearchProps } from "@bbr/components/search";
+
+/** Search component */
+export default function Search({
+    searchType, onSearch, caption,
+    name, defaultValue,
+    size, isLoading, rounded, disabled,
+}: SearchProps): JSX.Element {
+    const [elementName] = useState<string>(name || generateGuid());
+    const [searchValue, setSearchValue] = useState<string>(defaultValue || "");
+
+    const onChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            const elementValue: string = event.target.value;
+
+            if (searchType === "byTyping") {
+                onSearch(elementValue);
+            }
+
+            setSearchValue(elementValue);
+        }, [onSearch, searchType]);
+
+    const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
+
+    const className: string = getClassName([
+        "bbr-search",
+        "control",
+        `is-${(size || "normal")}`,
+        isLoading === true ? "is-loading" : "",
+        searchType === "byButton" ? "is-expanded" : "",
+    ]);
+
+    const inputClassName: string = getClassName([
+        "input",
+        "is-unselectable",
+        `is-${(size || "normal")}`,
+        rounded === true ? "is-rounded" : "",
+    ]);
+
+    if (searchType === "byButton") {
+        return (
+            <div className="field has-addons">
+                <div className={className}>
+                    <input
+                        type="search"
+                        name={elementName}
+                        defaultValue={searchValue}
+                        className={inputClassName}
+                        disabled={disabled}
+                        onChange={onChange}
+                        placeholder={caption}
+                    />
+                </div>
+                <div className="control">
+                    <Button
+                        caption="Search"
+                        type="info"
+                        onClick={onSearchButtonClick}
+                        isLoading={isLoading}
+                    />
+                </div>
+            </div>
+        );
+    }
+    else {
+        return (
+            <div className={className}>
+                <input
+                    type="search"
+                    name={elementName}
+                    defaultValue={searchValue}
+                    className={inputClassName}
+                    disabled={disabled}
+                    onChange={onChange}
+                    placeholder={caption}
+                />
+            </div>
+        );
+    }
+}

package/src/components/search/component/style.scss

@@ -0,0 +1,24 @@
+.bbr-search {
+    input[type="search"] {
+        transition: 0.15s ease-out;
+        transition-property: border-color, color, background-color;
+
+        &::placeholder {
+            user-select: none;
+        }
+
+        &::-webkit-input-placeholder {
+            transition: 0.15s ease-out color;
+        }
+
+        &::-webkit-search-cancel-button {
+            cursor: pointer;
+            font-size: 1.25rem;
+        }
+    }
+
+    &.is-loading::after {
+        right: 1rem;
+        top: 0.725rem;
+    }
+}

package/src/components/search/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/src/components/search/types.ts

@@ -0,0 +1,35 @@
+import { ElementSize } from "@bbr/components";
+
+/** Search component props type */
+export interface SearchProps {
+    /** 
+     * Search type: by typing, starts from minimum characters to search
+     * or by clicking on button next to search bar.
+     * Default `is byTyping`
+    */
+    searchType: "byTyping" | "byButton";
+
+    /** Search caption */
+    caption: string;
+
+    /** Search handler */
+    onSearch: (searchPattern: string) => void;
+
+    /** Initial search value */
+    defaultValue?: string;
+
+    /** Control name. If empty - will be replaced by random guid */
+    name?: string;
+
+    /** Size of search bar */
+    size?: ElementSize;
+
+    /** Should search bar be rounded */
+    rounded?: boolean;
+
+    /** Is search bar disabled */
+    disabled?: boolean;
+
+    /** Should loading icon be displayed in search bar */
+    isLoading?: boolean;
+}

package/src/components/tabs/component/index.tsx

@@ -0,0 +1,147 @@
+import { useCallback, useState, MouseEvent, useEffect, useRef } from "react";
+
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { BaseElementProps, ElementSize } from "@bbr/components";
+import { mapDataAttributes } from "@bbr/utils";
+
+import { TabItem, TabsPosition, TabsStyle } from "@bbr/components/tabs";
+import TabItemComponent from "@bbr/components/tabs/components/item";
+
+/** Tabs component props type */
+export interface TabsProps extends BaseElementProps {
+    /** Tabs */
+    items: Array<TabItem>;
+
+    /** Handler of changing current active item */
+    onActiveItemChange: (item: TabItem) => void;
+
+    /**
+     * Active item by default.
+     * If not set - first item will be active
+     */
+    defaultActive?: TabItem;
+
+    /**
+     * Component size.
+     * Default is `normal`
+     */
+    size?: ElementSize;
+
+    /** Component position */
+    position?: TabsPosition;
+
+    /** Component style */
+    style?: TabsStyle;
+
+    /** Is component tabs should take all width of parent */
+    fullWidth?: boolean;
+}
+
+/**
+ * Tabs panel
+ * @throws Items are empty
+ */
+const Tabs = ({
+    items, onActiveItemChange,
+    defaultActive,
+    size, position, style, fullWidth,
+
+    className, title, data,
+}: TabsProps): JSX.Element => {
+    if (items.length === 0) {
+        throw new Error("Invalid configuration. Tab items must be defined");
+    }
+
+    const [activeItem, setActiveItem] = useState<TabItem>(defaultActive ?? items[0]);
+    const isFirstRun = useRef(true);
+
+    const onTabsClick = useCallback(
+        (container: MouseEvent<HTMLElement>) => {
+            const closestTab = (container.target as HTMLElement).closest(".bbr-tabs__tab");
+
+            if (isNullOrUndefined(closestTab)) {
+                return;
+            }
+
+            const itemId = closestTab!.attributes.getNamedItem("data-item-id")?.value ?? "";
+
+            if (isNullOrEmpty(itemId)) {
+                return;
+            }
+
+            const item = items.find(({ id }) => id === itemId);
+
+            if (isNullOrUndefined(item) || item === activeItem) {
+                return;
+            }
+
+            setActiveItem(item!);
+        },
+        [activeItem, items]
+    );
+
+    useEffect(
+        () => {
+            if (isFirstRun.current) {
+                isFirstRun.current = false;
+                return;
+            }
+
+            onActiveItemChange(activeItem);
+        },
+        [activeItem, onActiveItemChange]
+    );
+
+    const elClassName = getClassName([
+        "bbr-tabs",
+        "tabs",
+        position ?? TabsPosition.left,
+        getSizeClassName(size, [ElementSize.Normal]),
+        style ?? TabsStyle.default,
+        fullWidth === true ? "is-fullwidth" : "",
+        className,
+    ]);
+
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data!);
+
+    return (
+        <nav
+            className={elClassName}
+            onClick={onTabsClick}
+            title={title}
+            {...dataAttributes}
+        >
+            <ul>
+                {items.map(item =>
+                    <TabItemComponent
+                        key={item.id}
+                        item={item}
+                        activeItem={activeItem.id}
+                    />
+                )}
+            </ul>
+        </nav>
+    );
+};
+
+export default Tabs;
+
+/**
+ * Get class name for specified size and constraints
+ * @param size Component size
+ * @param notAllowedSizes Sizes that not applicable to component
+ * @returns Class name for react element
+ */
+const getSizeClassName = (size?: ElementSize, notAllowedSizes?: Array<ElementSize>): string => {
+    notAllowedSizes ??= [];
+    if (isNullOrUndefined(size) || notAllowedSizes.includes(size!)) {
+        return "";
+    }
+
+    return `is-${size}`;
+};

package/src/components/tabs/component/style.scss

@@ -0,0 +1,12 @@
+.bbr-tabs {
+    &__tab {
+        .bbr-icon {
+            &:first-child {
+                margin-right: 0.5rem;
+            }
+            &:last-child {
+                margin-left: 0.5rem;
+            }
+        }
+    }
+}

package/src/components/tabs/components/item/index.tsx

@@ -0,0 +1,86 @@
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+
+import Icon from "@bbr/components/icon";
+
+import { TabItem as Item } from "@bbr/components/tabs";
+
+/** Tabs panel single tab item component props type */
+export interface TabItemProps {
+    /** Tab item */
+    item: Item;
+
+    /** Active item identifier */
+    activeItem: string;
+}
+
+/** Tabs panel single tab item component */
+const TabItem = ({
+    item, activeItem
+}: TabItemProps): JSX.Element => {
+    if (!isNullOrUndefined(item.icon)) {
+        return <TabItemWithIcon item={item} activeItem={activeItem} />;
+    }
+
+    const className = getClassName([
+        "bbr-tabs__tab",
+        activeItem === item.id ? "is-active" : undefined,
+    ]);
+
+    return (
+        <li
+            key={item.id}
+            className={className}
+            data-item-id={item.id}
+        >
+            <a>
+                {item.caption}
+            </a>
+        </li>
+    );
+};
+
+export default TabItem;
+
+/** Tabs panel single tab item with icon component */
+const TabItemWithIcon = ({
+    item, activeItem
+}: TabItemProps): JSX.Element => {
+    const iconConfig = item.icon!;
+
+    const className = getClassName([
+        "bbr-tabs__tab",
+        activeItem === item.id ? "is-active" : undefined,
+    ]);
+
+    if (iconConfig.position === "left") {
+        return (
+            <li
+                key={item.id}
+                className={className}
+                data-item-id={item.id}
+            >
+                <a>
+                    <Icon {...iconConfig} />
+                    <span>
+                        {item.caption}
+                    </span>
+                </a>
+            </li>
+        );
+    }
+
+    return (
+        <li
+            key={item.id}
+            className={className}
+            data-item-id={item.id}
+        >
+            <a>
+                <span>
+                    {item.caption}
+                </span>
+                <Icon {...iconConfig} />
+            </a>
+        </li>
+    );
+};