@bodynarf/react.components 1.7.2 → 1.7.4

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/src/components/tag/types.ts

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

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";

package/src/hooks/useComponentOutsideClick.ts

@@ -0,0 +1,48 @@
+import { DependencyList, useCallback, useEffect } from "react";
+
+import { isNullOrUndefined, isNull } from "@bodynarf/utils";
+
+/**
+ * Subscribe to component outside click
+ * @param selector Component root selector
+ * @param clickHandleCondition Condition to handle document click
+ * @param clickHandleChange Handler of outside component click
+ * @param clickListenCondition Condition to start listening document clicks
+ * @param dependencies Additional dependencies to update hook
+ */
+export const useComponentOutsideClick = (
+    selector: string,
+    clickHandleCondition: boolean,
+    clickHandleChange: () => void,
+    clickListenCondition?: boolean,
+    dependencies?: DependencyList
+): void => {
+    const onDocumentClick = useCallback(
+        (event: MouseEvent): void => {
+            if (clickHandleCondition) {
+                const target: HTMLElement = event.target as HTMLElement;
+
+                if (isNullOrUndefined(target)) {
+                    return;
+                }
+
+                const relatedComponent: Element | null =
+                    target.closest(selector);
+
+                if (isNull(relatedComponent)) {
+                    clickHandleChange();
+                }
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [clickHandleCondition, selector, clickHandleChange, dependencies]);
+
+    useEffect(() => {
+        if (isNullOrUndefined(clickListenCondition) || clickListenCondition === true) {
+            document.addEventListener("click", onDocumentClick);
+
+            return (): void => document.removeEventListener("click", onDocumentClick);
+        }
+
+        return () => { };
+    }, [clickListenCondition, onDocumentClick]);
+};

package/src/hooks/usePagination.ts

@@ -0,0 +1,55 @@
+import { DependencyList, useCallback, useEffect, useMemo, useState } from "react";
+
+/** Paginator hook state */
+export interface PaginationState {
+    /** Number of current page */
+    currentPage: number;
+
+    /** Amount of pages */
+    pagesCount: number;
+
+    /** Handler of page change */
+    onPageChange: (page: number) => void;
+}
+
+/** Default page size */
+const defaultPageSize: number = 30;
+
+/**
+ * Hook to pagination state, return hooked values and handler for pagination
+ * @param length Pagionation items count
+ * @param size Page size. Default is 30
+ * @param initPage Initial page. Default is 1
+ * @param dependencies List of dependencies. On any dependency update current page will be set to 1
+ * @returns Pair of hook-stored state and handler for slicing current page items
+ */
+export const usePagination = (
+    length: number,
+    size: number = defaultPageSize,
+    initPage: number = 1,
+    dependencies: DependencyList = []
+): [PaginationState, (data: Array<any>) => Array<any>] => {
+    const [currentPage, setCurrentPage] = useState(initPage);
+    const count = useMemo(() => Math.ceil(length / size), [size, length]);
+    const onChange = useCallback((page: number) => setCurrentPage(page), [setCurrentPage]);
+
+    const paginate = useCallback(
+        (data: Array<any>): Array<any> => {
+            const limit = size;
+            const offstet = (currentPage - 1) * size;
+
+            return data.slice(offstet, offstet + limit);
+        },
+        [size, currentPage]
+    );
+
+    const state = useMemo(() => ({
+        currentPage: currentPage,
+        pagesCount: count,
+        onPageChange: onChange
+    }), [currentPage, count, onChange]);
+
+    useEffect(() => setCurrentPage(1), dependencies);
+
+    return [state, paginate];
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./utils";

package/src/utils/dataAttributes.ts

@@ -0,0 +1,26 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import { DataAttributes } from "@bbr";
+
+/**
+ * Map object with key-value pairs to html data attributes format
+ * @param dataAttributes Object with data attribute values
+ * @returns Object that could be injected into react html element as data-* attribute values
+ */
+export const mapDataAttributes = (dataAttributes: DataAttributes): object => {
+    const mappedAttributes =
+        Object
+            .entries(dataAttributes)
+            .reduce((result, [key, value]) => {
+                if (isNullOrUndefined(value)) {
+                    return result;
+                }
+
+                const newKey = key.startsWith("data-") ? key : `data-${key}`;
+
+                result[newKey] = value;
+                return result;
+            }, {} as any);
+
+    return mappedAttributes;
+};

package/src/utils/formValidation.ts

@@ -0,0 +1,42 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import { ElementColor, ValidationState, ValidationStatus } from "@bbr/components";
+
+/**
+ * Get current validation state values
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns [Is validation applicable; classname attribute value; validation messages]
+ */
+export const getValidationValues = (style?: ElementColor, validationState?: ValidationState): [boolean, string, Array<string>] => {
+    const validationStateDefined = !isNullOrUndefined(validationState) && validationState!.status !== ValidationStatus.None;
+    const styleClassName = getStyleClassName(style, validationState);
+
+    const messages = validationState?.messages ?? [];
+
+    return [validationStateDefined, styleClassName, messages];
+}
+
+/**
+ * Get classname attribute value based on current validation state and form item component style prop
+ * @param style Component style color
+ * @param validationState Current form item validation state
+ * @returns Classname attribute value
+ */
+export const getStyleClassName = (style?: ElementColor, validationState?: ValidationState): string => {
+    if (isNullOrUndefined(validationState)) {
+        return isNullOrUndefined(style) ? "" : `is-${style}`;
+    }
+
+    const { status } = validationState!;
+    switch (status) {
+        case ValidationStatus.Valid: {
+            return "is-success";
+        }
+        case ValidationStatus.Invalid: {
+            return "is-danger";
+        }
+    }
+
+    return isNullOrUndefined(style) ? "" : `is-${style}`;
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./formValidation";
+export * from "./dataAttributes";

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+	"compilerOptions": {
+		"target": "esnext",
+		"jsx": "react-jsx",
+		"module": "ESNext",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"skipLibCheck": true,
+		"declaration": true,
+		"declarationMap": true,
+		"outDir": "./dist",
+		"incremental": true,
+		"moduleResolution": "Node",
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"baseUrl": "./",
+		"paths": {
+			"@bbr": [
+				"./src"
+			],
+			"@bbr/components": [
+				"./src/components"
+			],
+			"@bbr/components/*": [
+				"./src/components/*",
+				"./src/components/primitives/*"
+			],
+			"@bbr/hooks": [
+				"./src/hooks"
+			],
+			"@bbr/utils": [
+				"./src/utils"
+			]
+		}
+	},
+	"exclude": [
+		"node_modules",
+		"dist"
+	]
+}