@bodynarf/react.components 1.7.3 → 1.7.4

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/{components/search/types.d.ts → src/components/search/types.ts}

@@ -1,27 +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;
 }
-//# sourceMappingURL=types.d.ts.map

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

package/src/components/tabs/index.ts

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

package/src/components/tabs/types.ts

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

@@ -0,0 +1,52 @@
+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/component/style.scss

@@ -0,0 +1,27 @@
+.bbr-tag {
+    border: 1px solid transparent;
+    transition: border-color 0.15s ease-in-out;
+
+    &--clickable {
+        cursor: pointer;
+
+        &.is-light {
+            &:hover {
+                border-color: rgba(0, 0, 0, 0.25);
+            }
+            &:focus,
+            &:active {
+                border-color: rgba(0, 0, 0, 0.5);
+            }
+        }
+        &:not(.is-light) {
+            &:hover {
+                border-color: rgba(0, 0, 0, 0.35);
+            }
+            &:focus,
+            &:active {
+                border-color: rgba(0, 0, 0, 0.75);
+            }
+        }
+    }
+}

package/src/components/tag/index.ts

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

package/{components/tag/types.d.ts → src/components/tag/types.ts}

@@ -1,27 +1,34 @@
 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;
     };
 }
-//# sourceMappingURL=types.d.ts.map

package/src/components/types.ts

@@ -0,0 +1,87 @@
+/** Base interface for component props */
+export interface BaseElementProps {
+    /** Additional class names */
+    className?: string;
+
+    /** Title */
+    title?: string;
+
+    /** Extra data-* attributes */
+    data?: DataAttributes;
+}
+
+/**
+ * Html data-* attributes
+ * @description All keys with defined values will be mapped injected into html element as data-{key} attributes
+*/
+export interface DataAttributes {
+    /** Single data-* attribute value */
+    [key: string]: any;
+}
+
+/** Input component size variety */
+export enum ElementSize {
+    /** Font size is 0.75rem */
+    Small = "small",
+
+    /** Font size is 1rem. Default */
+    Normal = "normal",
+
+    /** Font size is 1.25rem */
+    Medium = "medium",
+
+    /** Font size is 1.5rem */
+    Large = "large",
+}
+
+/** Input component border-color type */
+export enum ElementColor {
+    /** color: transparent */
+    Default = "default",
+
+    /** color: seawave green */
+    Primary = "primary",
+
+    /** color: blue-violet */
+    Link = "link",
+
+    /** color: sky-blue */
+    Info = "info",
+
+    /** color: green */
+    Success = "success",
+
+    /** color: yellow */
+    Warning = "warning",
+
+    /** color: red */
+    Danger = "danger",
+};
+
+/** Allowed icon position */
+export type IconPosition =
+    | "left"
+    | "right";
+
+/** Icon for component  */
+export interface ElementIcon {
+    /**
+     * Icon name. Must be without `bi-`
+     * @example ["Arrow repeat", "arrow-repeat"]
+     * // Icon name to icon class name.
+     * // For class name check bootstrap icons website
+    */
+    name: string;
+
+    /** Additional classname */
+    className?: string;
+
+    /** Icon size */
+    size?: ElementSize;
+
+    /**
+     * Position
+     * Works only with other content
+    */
+    position?: IconPosition;
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from "./useComponentOutsideClick";
+export * from "./usePagination";