@bodynarf/react.components 1.7.4 → 1.7.6

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"
-	]
-}