@bodynarf/react.components 1.7.4 → 1.7.6

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

package/src/components/tabs/index.ts

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

package/src/components/tabs/types.ts

@@ -1,52 +0,0 @@
-import { ElementIcon } from "@bbr/components";
-
-/** Tabs component style */
-export enum TabsStyle {
-    /**
-     * Default style.
-     * Single border at the bottom
-     */
-    default = "",
-
-    /**
-     * Classic style with borders.
-     * Borders all except bottom
-     */
-    boxed = "is-boxed",
-
-    /**
-     * Styled as buttons
-     */
-    radioButton = "is-toggle",
-
-    /**
-     * Styled as rounded buttons
-     */
-    radioButtonRounded = "is-toggle is-toggle-rounded",
-}
-
-/**
- * Tabs items position on component
- */
-export enum TabsPosition {
-    /** On the left side. Default value */
-    "left" = "",
-
-    /** Center*/
-    "center" = "is-centered",
-
-    /** Pulled to right */
-    "right" = "is-right",
-}
-
-/** Tab item */
-export interface TabItem {
-    /** Unique identifier across all tab items */
-    id: string;
-
-    /** Displayable caption */
-    caption: string;
-
-    /** Icon configuration */
-    icon?: ElementIcon;
-}

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

@@ -1,52 +0,0 @@
-import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
-
-import { ElementColor, ElementSize } from "@bbr/components";
-import { TagProps } from "@bbr/components/tag";
-
-import "./style.scss";
-
-/** Single tag item */
-const Tag = ({
-    content,
-    size, style, rounded, lightColor, customColor,
-    onClick,
-
-    className, title,
-}: TagProps): JSX.Element => {
-
-    size ??= ElementSize.Normal;
-    style ??= ElementColor.Default;
-
-    if (!isNullOrUndefined(customColor)) {
-        style = ElementColor.Default;
-    }
-
-    const elClassName = getClassName([
-        "bbr-tag",
-        "tag",
-        style === ElementColor.Default ? "" : `is-${style}`,
-        !isNullOrUndefined(customColor) ? "bbr-tag--custom" : "",
-        lightColor === true && isNullOrUndefined(customColor) ? "is-light" : "",
-        rounded === true ? "is-rounded" : "",
-        size === ElementSize.Normal || size === ElementSize.Small ? "" : `is-${size}`,
-        isNullOrUndefined(onClick) ? "" : "bbr-tag--clickable",
-        className,
-    ]);
-
-    return (
-        <span
-            className={elClassName}
-            onClick={onClick}
-            title={title}
-            color={customColor?.color}
-            style={{
-                color: customColor?.color,
-                backgroundColor: customColor?.backgroundColor,
-            }}
-        >
-            {content}
-        </span>
-    );
-};
-
-export default Tag;

package/src/components/tag/index.ts

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

package/src/components/tag/types.ts

@@ -1,34 +0,0 @@
-import { BaseElementProps, ElementColor, ElementSize } from "@bbr/components";
-
-/** Tag item prop types */
-export interface TagProps extends BaseElementProps {
-    /** Tag content */
-    content: string;
-
-    /**
-     * Element size.
-     * `Small` isn"t allowed
-    */
-    size?: ElementSize;
-
-    /** Element color */
-    style?: ElementColor;
-
-    /** Is element with rounded border */
-    rounded?: boolean;
-
-    /** Is element has light color */
-    lightColor?: boolean;
-
-    /** Click handler */
-    onClick?: () => void;
-
-    /** Manual color scheme */
-    customColor?: {
-        /** Text color */
-        color: string;
-
-        /** Background color */
-        backgroundColor: string;
-    };
-}