@bodynarf/react.components 1.7.2 → 1.7.4

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

@@ -0,0 +1,120 @@
+.bbr-dropdown {
+    min-width: 7.5rem;
+
+    &:not(.bbr-dropdown--compact) {
+        display: block;
+    }
+
+    &:not(.bbr-dropdown--compact) {
+        & .dropdown-menu {
+            min-width: 100%;
+        }
+    }
+
+    & .dropdown-menu {
+        & .dropdown-content {
+            overflow: auto;
+        }
+    }
+
+    &__label {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        justify-content: flex-start;
+
+        span {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow-x: hidden;
+            max-width: 15rem;
+        }
+
+        &--default span {
+            color: gray;
+            font-style: italic;
+        }
+
+        .bbr-icon {
+            &:hover {
+                color: #0d6efd;
+            }
+
+            &.bi-arrow-down {
+                margin-left: auto;
+                &::before {
+                    transition: 0.25s ease-in-out transform;
+                }
+            }
+
+            &.bi-plus-lg::before {
+                transform: rotate(45deg);
+            }
+        }
+
+        &.is-success--md {
+            border-color: #48c78e;
+        }
+        &.is-danger--md {
+            border-color: #f14668;
+        }
+    }
+
+    &-item {
+        cursor: pointer;
+        user-select: none;
+        white-space: normal;
+
+        transition: 0.25s ease-in-out;
+        transition-property: color, background-color;
+
+        &:hover {
+            background-color: rgba(0, 0, 0, 0.05);
+            color: #0a0a0a;
+        }
+        &:active {
+            background-color: rgba(0, 0, 0, 0.15);
+            color: #0a0a0a;
+        }
+
+        &.is-active {
+            background-color: #485fc7;
+            color: #fff;
+        }
+    }
+
+    &.is-active {
+        .bbr-dropdown__label .bbr-icon.bi-arrow-down::before {
+            transform: rotate(180deg);
+        }
+    }
+
+    &--height-default {
+        .dropdown-menu .dropdown-content {
+            max-height: 15vw;
+        }
+    }
+
+    &--compact {
+        width: fit-content;
+
+        & .dropdown-menu {
+            min-width: 11.75rem;
+        }
+    }
+
+    &--disabled {
+        .bbr-dropdown__label {
+            background-color: hsl(0deg, 0%, 96%);
+            border-color: hsl(0deg, 0%, 96%);
+            box-shadow: none;
+            color: hsl(0deg, 0%, 48%);
+
+            cursor: not-allowed;
+
+            .bbr-icon {
+                pointer-events: none;
+            }
+        }
+    }
+}

package/src/components/dropdown/components/compact/index.tsx

@@ -0,0 +1,121 @@
+import { useCallback, useId, useState, MouseEvent } from "react";
+
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+
+import { useComponentOutsideClick } from "@bbr/hooks";
+
+import { DropdownProps } from "@bbr/components/dropdown";
+import DropdownItem from "@bbr/components/dropdown/components/item";
+import DropdownLabel from "@bbr/components/dropdown/components/label";
+
+const DropdownCompact = ({
+    items,
+    value, onSelect,
+    deselectable,
+    className, hideOnOuterClick, listMaxHeight,
+    placeholder, compact, disabled,
+}: DropdownProps): JSX.Element => {
+    const id = useId();
+
+    const [isListVisible, setListVisible] = useState<boolean>(false);
+
+    const onItemClick = useCallback(
+        (event: React.MouseEvent<HTMLLIElement>) => {
+            if (disabled ?? false) {
+                return;
+            }
+
+            const target = event.target as HTMLLIElement;
+
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+
+            const dataValue = target.dataset["dropdownItemValue"];
+
+            if (isNullOrEmpty(dataValue)) {
+                return;
+            }
+
+            const item = items.find(x => x.value === dataValue);
+
+            if (isNullOrUndefined(item)) {
+                return;
+            }
+
+            if (value === item) {
+                setListVisible(false);
+                return;
+            }
+
+            onSelect(item);
+            setListVisible(false);
+        }, [setListVisible, value, items, onSelect, disabled]);
+
+    const onLabelClick = useCallback(
+        (event: MouseEvent<HTMLLabelElement>): void => {
+            if (disabled ?? false) {
+                return;
+            }
+
+            const target = event.target as HTMLElement;
+
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+
+            if (target.classList.contains("bi-plus-lg")) {
+                onSelect(undefined);
+            } else {
+                setListVisible(state => !state);
+            }
+        }, [onSelect, setListVisible, disabled]);
+
+    useComponentOutsideClick(
+        `[data-dropdown-id="${id}"]`, isListVisible,
+        () => setListVisible(false),
+        hideOnOuterClick,
+    );
+
+    const classNames: string = getClassName([
+        "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
+        (compact ?? false) ? "bbr-dropdown--compact" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+
+    return (
+        <div
+            key={id}
+            className={classNames}
+            data-dropdown-id={id}
+        >
+            <DropdownLabel
+                caption={placeholder}
+                deselectable={deselectable === true}
+                selectedItem={value}
+                onClick={onLabelClick}
+            />
+            <div className="dropdown-menu">
+                {items.length > 0
+                    ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
+                        {items.map(item =>
+                            <DropdownItem
+                                key={item.id}
+                                item={item}
+                                selected={value?.value === item.value}
+                                onClick={onItemClick}
+                            />
+                        )}
+                    </ul>
+                    : <span className="dropdown-content dropdown-item">No items found</span>
+                }
+            </div>
+        </div>
+    );
+};
+
+export default DropdownCompact;

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

@@ -0,0 +1,30 @@
+import { SelectableItem } from "@bbr/components/dropdown";
+
+/** Dropdown item props */
+interface DropdownItemProps {
+    /** Item to present in dropdown */
+    item: SelectableItem;
+
+    /** Is item selected*/
+    selected: boolean;
+
+    /** Item click handler */
+    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
+}
+
+/** Single item in dropdown component */
+const DropdownItem = ({ item, selected, onClick }: DropdownItemProps): JSX.Element => {
+    return (
+        <li
+            key={item.id}
+            className={`bbr-dropdown-item dropdown-item${selected ? " is-active" : ""}`}
+            onClick={onClick}
+            data-dropdown-item-value={item.value}
+            title={item.displayValue}
+        >
+            {item.displayValue}
+        </li>
+    );
+};
+
+export default DropdownItem;

package/src/components/dropdown/components/label/index.tsx

@@ -0,0 +1,68 @@
+import { MouseEvent } from "react";
+
+import { getClassName, isNullOrEmpty, isNullOrUndefined } from "@bodynarf/utils";
+
+import { ElementSize } from "@bbr/components";
+import Icon from "@bbr/components/icon";
+
+import { SelectableItem } from "@bbr/components/dropdown";
+
+export interface DropdownLabelProps {
+    /** Caption when no items selected */
+    caption: string;
+
+    /** Can user deselect */
+    deselectable: boolean;
+
+    /** Selected item */
+    selectedItem?: SelectableItem;
+
+    /** Element classnames */
+    className?: string;
+
+    /** Click handler*/
+    onClick: (event: MouseEvent<HTMLLabelElement>) => void;
+}
+
+/** Label component */
+const DropdownLabel = ({
+    caption,
+    selectedItem, onClick,
+    deselectable, className,
+}: DropdownLabelProps): JSX.Element => {
+    const itemSelected = !isNullOrUndefined(selectedItem);
+
+    const text = itemSelected
+        ? selectedItem?.displayValue
+        : caption;
+
+    const deselectVisible = deselectable && itemSelected;
+
+    const elClassName = getClassName([
+        "dropdown-trigger",
+        "bbr-dropdown__label",
+        isNullOrEmpty(className) ? "" : `${className}--md`,
+        itemSelected ? "" : "bbr-dropdown__label--default",
+        "button"
+    ]);
+
+    return (
+        <label
+            className={elClassName}
+            onClick={onClick}
+        >
+            {deselectVisible &&
+                <Icon name="plus-lg" size={ElementSize.Medium} />
+            }
+            <span
+                className={deselectVisible ? "mx-2" : "mr-2"}
+                title={itemSelected ? text : undefined}
+            >
+                {text}
+            </span>
+            <Icon name="arrow-down" size={ElementSize.Medium} />
+        </label>
+    );
+};
+
+export default DropdownLabel;

package/src/components/dropdown/components/withLabel/index.tsx

@@ -0,0 +1,201 @@
+import { MouseEvent, useCallback, useId, useState } from "react";
+
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
+
+import { getValidationValues } from "@bbr/utils";
+import { useComponentOutsideClick } from "@bbr/hooks";
+
+import { DropdownProps } from "@bbr/components/dropdown";
+import DropdownItem from "@bbr/components/dropdown/components/item";
+import DropdownLabel from "@bbr/components/dropdown/components/label";
+
+const DropdownWithLabel = ({
+    items,
+    value, onSelect, validationState,
+    deselectable,
+    className, hideOnOuterClick, listMaxHeight,
+
+    label, placeholder, disabled
+}: DropdownProps): JSX.Element => {
+    const id = useId();
+
+    const [isListVisible, setListVisible] = useState<boolean>(false);
+    const [isValidationDefined, styleClassName, validationMessages] = getValidationValues(undefined, validationState);
+
+    const onItemClick = useCallback(
+        (event: React.MouseEvent<HTMLLIElement>) => {
+            if (disabled ?? false) {
+                return;
+            }
+
+            const target = event.target as HTMLLIElement;
+
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+
+            const dataValue = target.dataset["dropdownItemValue"];
+
+            if (isNullOrEmpty(dataValue)) {
+                return;
+            }
+
+            const item = items.find(x => x.value === dataValue);
+
+            if (isNullOrUndefined(item)) {
+                return;
+            }
+
+            if (value === item) {
+                setListVisible(false);
+                return;
+            }
+
+            onSelect(item);
+            setListVisible(false);
+        }, [setListVisible, value, items, onSelect, disabled]);
+
+    const onLabelClick = useCallback(
+        (event: MouseEvent<HTMLLabelElement>): void => {
+            if (disabled ?? false) {
+                return;
+            }
+
+            const target = event.target as HTMLElement;
+
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+
+            if (target.classList.contains("bi-plus-lg")) {
+                onSelect(undefined);
+            } else {
+                setListVisible(state => !state);
+            }
+        }, [onSelect, setListVisible, disabled]);
+
+    useComponentOutsideClick(
+        `[data-dropdown-id="${id}"]`, isListVisible,
+        () => setListVisible(false),
+        hideOnOuterClick,
+    );
+
+    const classNames: string = getClassName([
+        "bbr-dropdown",
+        (disabled ?? false) ? "bbr-dropdown--disabled" : "",
+        isListVisible ? "is-active" : "",
+        isNullOrEmpty(listMaxHeight) ? "bbr-dropdown--height-default" : "",
+        className,
+        "dropdown"
+    ]);
+
+    const labelClassName = getClassName([
+        "label",
+        label!.className
+    ]);
+
+    if (label!.horizontal) {
+        const labelContainerClassName = getClassName([
+            "field-label",
+            "is-normal",
+            label!.horizontalContainerClassName
+        ]);
+
+        const fieldContainerClassName = getClassName([
+            "field-body",
+            label!.horizontalFieldContainerClassName
+        ]);
+
+        return (
+            <div className="bbr-dropdown__root-container--with-label bbr-input field is-horizontal">
+                <div className={labelContainerClassName}>
+                    <label
+                        className={labelClassName}
+                        htmlFor={id}
+                    >
+                        {label!.caption}
+                    </label>
+                </div>
+                <div className={fieldContainerClassName}>
+                    <div className="field">
+                        <div
+                            key={id}
+                            className={classNames}
+                            data-dropdown-id={id}
+                        >
+                            <DropdownLabel
+                                className={styleClassName}
+                                caption={placeholder}
+                                deselectable={deselectable === true}
+                                selectedItem={value}
+                                onClick={onLabelClick}
+                            />
+                            <div className="dropdown-menu">
+                                {items.length > 0
+                                    ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
+                                        {items.map(item =>
+                                            <DropdownItem
+                                                key={item.id}
+                                                item={item}
+                                                selected={value?.value === item.value}
+                                                onClick={onItemClick}
+                                            />
+                                        )}
+                                    </ul>
+                                    : <span className="dropdown-content dropdown-item">No items found</span>
+                                }
+                            </div>
+                        </div>
+                        {isValidationDefined && validationMessages.length > 0 &&
+                            <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+                        }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="field">
+            <label
+                className={labelClassName}
+                htmlFor={id}
+            >
+                {label!.caption}
+            </label>
+            <div
+                key={id}
+                className={classNames}
+                data-dropdown-id={id}
+            >
+                <DropdownLabel
+                    className={styleClassName}
+                    caption={placeholder}
+                    deselectable={deselectable === true}
+                    selectedItem={value}
+                    onClick={onLabelClick}
+                />
+                <div className="dropdown-menu">
+                    {items.length > 0
+                        ? <ul className="dropdown-content" style={{ maxHeight: listMaxHeight }}>
+                            {items.map(item =>
+                                <DropdownItem
+                                    key={item.id}
+                                    item={item}
+                                    selected={value?.value === item.value}
+                                    onClick={onItemClick}
+                                />
+                            )}
+                        </ul>
+                        : <span className="dropdown-content dropdown-item">No items found</span>
+                    }
+                </div>
+            </div>
+            {isValidationDefined && validationMessages.length > 0 &&
+                <p className={`help m-help ${styleClassName}`}>{validationMessages.join("\n")}</p>
+            }
+        </div>
+    );
+};
+
+export default DropdownWithLabel;

package/src/components/dropdown/index.ts

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

package/src/components/dropdown/types.ts

@@ -0,0 +1,59 @@
+import { BaseElementProps, InputLabel, ValidationState } from "@bbr/components";
+
+/** Dropdown item */
+export interface SelectableItem {
+    /** Unique item identifier */
+    id: string;
+
+    /** Item value */
+    value: string;
+
+    /** Displaying text */
+    displayValue: string;
+}
+
+/** Dropdown component props type */
+export interface DropdownProps extends BaseElementProps {
+    /** Items which can be selected */
+    items: Array<SelectableItem>;
+
+    /** Input element placeholder */
+    placeholder: string;
+
+    /**
+     * Action to update selected value, which stored outside
+    */
+    onSelect: (item?: SelectableItem) => void;
+
+    /**
+     * Selected value.
+     * Must be stored outside
+    */
+    value?: SelectableItem;
+
+    /** Hide dropdown list when its opened and user click outside */
+    hideOnOuterClick: boolean;
+
+    /** Can user deselect */
+    deselectable?: boolean;
+
+    /** Custom dropdown list max-height property */
+    listMaxHeight?: string;
+
+    /**
+     * Should dropdown be compact
+     * Will have width by maximum current selection item width
+     */
+    compact?: boolean;
+
+    /**
+     * Is element disabled
+     */
+    disabled?: boolean;
+
+    /** Label configuration */
+    label?: InputLabel;
+
+    /** Current validation state */
+    validationState?: ValidationState;
+}

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

@@ -0,0 +1,34 @@
+import { getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { ElementSize } from "@bbr/components";
+
+import { IconProps } from "@bbr/components/icon";
+
+const sizeToClassMap: Map<ElementSize, string> = new Map([
+    [ElementSize.Small, "bbr-icon--size-small"],
+    [ElementSize.Normal, ""],
+    [ElementSize.Medium, "bbr-icon--size-medium"],
+    [ElementSize.Large, "bbr-icon--size-large"]
+]);
+
+/**
+ * Icon component. Based on bootstrap icons
+ */
+export default function Icon({
+    name, size = ElementSize.Normal,
+    className,
+}: IconProps): JSX.Element {
+    const classNames = getClassName([
+        "bbr-icon",
+        "bi",
+        `bi-${name}`,
+        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
+        className
+    ]);
+
+    return (
+        <i className={classNames}></i>
+    );
+}

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

@@ -0,0 +1,21 @@
+.bbr-icon {
+    transition: 0.15s ease-in-out color;
+    font-size: 1rem;
+
+    &--size-small {
+        font-size: 0.85rem;
+    }
+    &--size-medium {
+        font-size: 1.25rem;
+    }
+    &--size-large {
+        font-size: 2rem;
+    }
+
+    &--right {
+        margin-left: 0.5rem;
+    }
+    &--left {
+        margin-right: 0.5rem;
+    }
+}

package/src/components/icon/index.ts

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

package/src/components/icon/types.ts

@@ -0,0 +1,18 @@
+import { ElementSize } from "@bbr/components";
+
+/** Icon component props */
+export interface IconProps {
+    /**
+     * 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;
+}

package/src/components/index.ts

@@ -0,0 +1,13 @@
+export * from "./accordion";
+export * from "./anchor";
+export * from "./button";
+export * from "./dropdown";
+export * from "./icon";
+export * from "./paginator";
+export * from "./search";
+export * from "./tabs";
+export * from "./tag";
+
+export * from "./primitives";
+
+export * from "./types";