@bodynarf/react.components 1.7.4 → 1.7.5

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/component/style.scss

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

@@ -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;
-    };
-}

package/src/components/types.ts

@@ -1,87 +0,0 @@
-/** 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

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

package/src/hooks/useComponentOutsideClick.ts

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

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

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

package/src/utils/dataAttributes.ts

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

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

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

package/tsconfig.json

@@ -1,42 +0,0 @@
-{
-	"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"
-	]
-}