@bodynarf/react.components 1.7.3 → 1.7.4

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

@@ -0,0 +1,15 @@
+.bbr-anchor {
+    text-decoration: none;
+    color: inherit;
+
+    transition: 0.15s ease-in-out color;
+
+    &:not(&--unhoverable):hover {
+        text-decoration: underline;
+        color: #3273dc;
+    }
+
+    .bbr-icon {
+        transition: none;
+    }
+}

package/src/components/anchor/components/anchorWithIcon/index.tsx

@@ -0,0 +1,45 @@
+import { isNullOrEmpty } from "@bodynarf/utils";
+
+import Icon from "@bbr/components/icon";
+
+import { AnchorWithIconProps } from "@bbr/components/anchor";
+
+/** Anchor with icon component */
+export const AnchorWithIcon = ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps): JSX.Element => {
+    const iconPosition = icon.position || "left";
+
+    const iconClassName: string | undefined = isNullOrEmpty(caption)
+        ? icon.className
+        : iconPosition === "left"
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
+
+
+    if (iconPosition === "left") {
+        return (
+            <a
+                href={href}
+                className={className}
+                title={title}
+                target={target}
+                onClick={onClick}
+            >
+                <Icon {...icon} className={iconClassName} />
+                {caption}
+            </a>
+        );
+    }
+
+    return (
+        <a
+            href={href}
+            className={className}
+            title={title}
+            target={target}
+            onClick={onClick}
+        >
+            {caption}
+            <Icon {...icon} className={iconClassName} />
+        </a>
+    );
+};

package/src/components/anchor/components/simpleAnchor/index.tsx

@@ -0,0 +1,16 @@
+import { SimpleAnchorProps } from "@bbr/components/anchor";
+
+/** Simple anchor component, without icon */
+export const SimpleAnchor = ({ href, className, onClick, caption, title, target }: SimpleAnchorProps): JSX.Element => {
+    return (
+        <a
+            className={className}
+            href={href}
+            title={title}
+            target={target}
+            onClick={onClick}
+        >
+            {caption}
+        </a>
+    );
+};

package/src/components/anchor/index.ts

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

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

@@ -1,39 +1,54 @@
 import { ElementIcon } from "@bbr/components";
+
 /** Anchor component props type */
 export interface AnchorProps {
     /** Link destination */
     href?: string;
+
     /** Link caption  */
     caption?: string;
+
     /** Click handler */
     onClick?: () => void;
+
     /** Configuration od inner icon */
     icon?: ElementIcon;
+
     /** Title of anchor */
     title?: string;
+
     /** Where to open the linked document */
     target?: "_blank" | "_top";
+
     /** Additional class names */
     className?: string;
+
     /** Should css hovering effects be disabled */
     disableHovering?: boolean;
 }
+
 export interface SimpleAnchorProps {
     /** Link destination */
     href?: string;
+
     /** Class names */
     className: string;
+
     /** Click handler */
     onClick?: () => void;
+
     /** Link caption  */
     caption?: string;
+
     /** Title of anchor */
     title?: string;
+
     /** Where to open the linked document */
     target?: "_blank" | "_top";
 }
+
 export interface AnchorWithIconProps extends SimpleAnchorProps {
     /** Configuration of icon */
     icon: ElementIcon;
 }
-//# sourceMappingURL=types.d.ts.map
+

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

@@ -0,0 +1,58 @@
+import { isNullOrEmpty, isNullOrUndefined, getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { ButtonProps, ElementIcon } from "@bbr/components";
+
+import { mapDataAttributes } from "@bbr/utils";
+
+import { ButtonWithIcon } from "@bbr/components/button/components/buttonWithIcon";
+import { SimpleButton } from "@bbr/components/button/components/simpleButton";
+
+/**
+ * Button component
+ * @throws Caption is not defined and icon configuration is not defined at the same time
+ */
+export default function Button(props: ButtonProps): JSX.Element {
+    if (isNullOrEmpty(props.caption) && isNullOrUndefined(props.icon)) {
+        throw new Error("No button content provided.");
+    }
+
+    const className: string = getClassName([
+        "button",
+        "bbr-button",
+        props.className,
+        `is-${props.type}`,
+        props.light === true ? "is-light" : "",
+        !isNullOrUndefined(props.size) ? `is-${props.size}` : "",
+        props.outlined === true ? "is-outlined" : "",
+        props.rounded === true ? "is-rounded" : "",
+        props.isLoading === true ? "is-loading" : "",
+        props.static === true ? "is-static" : "",
+    ]);
+
+    const data = isNullOrUndefined(props.data)
+        ? undefined
+        : mapDataAttributes(props.data!);
+
+    if (!isNullOrUndefined(props.icon)) {
+        return (
+            <ButtonWithIcon
+                {...props}
+                className={className}
+                onClick={props.onClick}
+                icon={props.icon as ElementIcon}
+                data={data}
+            />
+        );
+    } else {
+        return (
+            <SimpleButton
+                {...props}
+                className={className}
+                onClick={props.onClick}
+                data={data}
+            />
+        );
+    }
+}

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

@@ -0,0 +1,12 @@
+.bbr-button {
+    transition: 0.15s ease-in-out;
+    transition-property: background-color, border-color;
+
+    &--icon-only {
+        padding: 0.55rem !important;
+    }
+
+    &.is-warning.is-outlined:not([disabled]):hover {
+        color: #000 !important;
+    }
+}

package/src/components/button/components/buttonWithIcon/index.tsx

@@ -0,0 +1,53 @@
+import { isNullOrEmpty } from "@bodynarf/utils";
+
+import Icon from "@bbr/components/icon";
+
+import { ButtonWithIconProps } from "@bbr/components/button";
+
+/** Button with icon component */
+export const ButtonWithIcon = ({
+    className, disabled,
+    onClick,
+    caption, title, icon,
+    data,
+}: ButtonWithIconProps): JSX.Element => {
+    const iconPosition = icon.position || "left";
+
+    const iconClassName: string | undefined = isNullOrEmpty(caption)
+        ? icon.className
+        : iconPosition === "left"
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
+
+    className = isNullOrEmpty(caption)
+        ? `${className} bbr-button--icon-only`
+        : className;
+
+    if (iconPosition === "left") {
+        return (
+            <button
+                className={className}
+                disabled={disabled}
+                onClick={onClick}
+                title={title}
+                {...data}
+            >
+                <Icon {...icon} className={iconClassName} />
+                {caption}
+            </button>
+        );
+    }
+
+    return (
+        <button
+            className={className}
+            disabled={disabled}
+            onClick={onClick}
+            title={title}
+            {...data}
+        >
+            {caption}
+            <Icon {...icon} className={iconClassName} />
+        </button>
+    );
+};

package/src/components/button/components/simpleButton/index.tsx

@@ -0,0 +1,21 @@
+import { SimpleButtonProps } from "@bbr/components/button";
+
+/** Simple button component, without icon */
+export const SimpleButton = ({
+    className, disabled,
+    onClick,
+    caption, title,
+    data
+}: SimpleButtonProps): JSX.Element => {
+    return (
+        <button
+            className={className}
+            disabled={disabled}
+            onClick={onClick}
+            title={title}
+            {...data}
+        >
+            {caption}
+        </button>
+    );
+};

package/src/components/button/index.ts

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

package/src/components/button/types.ts

@@ -0,0 +1,64 @@
+import { BaseElementProps, ElementIcon, ElementSize } from "@bbr/components";
+
+export interface ButtonProps extends BaseElementProps {
+    /** Button displaying text */
+    caption?: string;
+
+    /** Type of button (color)  */
+    type: ButtonType;
+
+    /** Configuration of inner icon */
+    icon?: ElementIcon;
+
+    /** Button size  */
+    size?: ElementSize;
+
+    /** Is button uses light version of color  */
+    light?: boolean;
+
+    /** Is button outlined */
+    outlined?: boolean;
+
+    /** Should button corners be rounded  */
+    rounded?: boolean;
+
+    /** Display loading icon */
+    isLoading?: boolean;
+
+    /** Is button disabled */
+    disabled?: boolean;
+
+    /** Is non-interactive button */
+    static?: boolean;
+
+    /** Click action handler */
+    onClick?: () => void;
+};
+
+/** Button types according to Bulma framework */
+export type ButtonType =
+    "default" /** color: transparent */
+    | "primary" /** color: sea-wave green */
+    | "link" /** color: blue-violet */
+    | "info" /** color: sky-blue */
+    | "success" /** color: green */
+    | "warning" /** color: yellow */
+    | "danger" /** color: red */
+    | "white" /** color: white */
+    | "light" /** color: light-gray */
+    | "dark" /** color: dark-gray */
+    | "black" /** color: black */
+    | "text" /** Underline text with color: gray */
+    | "ghost" /** Blue underline text with color: transparent */
+    ;
+
+/** Simple button props type */
+export interface SimpleButtonProps extends Omit<ButtonProps, 'className'> {
+    /** Button class name*/
+    className: string;
+};
+
+export interface ButtonWithIconProps extends SimpleButtonProps {
+    /** Icon configuration */
+    icon: ElementIcon;
+};

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

@@ -0,0 +1,20 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import DropdownWithLabel from "@bbr/components/dropdown/components/withLabel";
+import DropdownCompact from "@bbr/components/dropdown/components/compact";
+
+import { DropdownProps } from "@bbr/components/dropdown";
+
+/** Dropdown component */
+const Dropdown = (props: DropdownProps): JSX.Element => {
+    if (!isNullOrUndefined(props.label)) {
+        return <DropdownWithLabel {...props} />;
+    } else {
+        return <DropdownCompact {...props} />;
+    }
+};
+
+export default Dropdown;
+

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;