@bodynarf/react.components 1.7.4 → 1.7.5

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

@@ -1,123 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

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

@@ -1,17 +0,0 @@
-/** 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

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

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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/** 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

@@ -1,88 +0,0 @@
-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

@@ -1,24 +0,0 @@
-.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

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

package/src/components/search/types.ts

@@ -1,35 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,86 +0,0 @@
-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>
-    );
-};