@bodynarf/react.components 1.7.1 → 1.7.2

package/components/tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/tag/index.js

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

package/{dist/components → components}/tag/types.d.ts

@@ -1,26 +1,27 @@
-import { BaseElementProps, ElementColor, ElementSize } from '../../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;
-    };
-}
+import { BaseElementProps, ElementColor, ElementSize } from "..";
+/** 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;
+    };
+}
+//# sourceMappingURL=types.d.ts.map

package/components/tag/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/tag/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9E,0BAA0B;AAC1B,MAAM,WAAW,QAAS,SAAQ,gBAAgB;IAC9C,kBAAkB;IAClB,OAAO,EAAE,MAAM,CAAC;IAEhB;;;MAGE;IACF,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,0BAA0B;IAC1B,WAAW,CAAC,EAAE;QACV,iBAAiB;QACjB,KAAK,EAAE,MAAM,CAAC;QAEd,uBAAuB;QACvB,eAAe,EAAE,MAAM,CAAC;KAC3B,CAAC;CACL"}

package/components/tag/types.js

@@ -0,0 +1 @@
+export {};

package/{dist/components → components}/types.d.ts

@@ -1,66 +1,67 @@
-/** 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 declare 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 declare 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;
-}
+/** 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 declare 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 declare 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 declare 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;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,MAAM,WAAW,gBAAgB;IAC7B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC;CACzB;AAED;;;EAGE;AACF,MAAM,WAAW,cAAc;IAC3B,oCAAoC;IACpC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,mCAAmC;AACnC,oBAAY,WAAW;IACnB,2BAA2B;IAC3B,KAAK,UAAU;IAEf,iCAAiC;IACjC,MAAM,WAAW;IAEjB,2BAA2B;IAC3B,MAAM,WAAW;IAEjB,0BAA0B;IAC1B,KAAK,UAAU;CAClB;AAED,wCAAwC;AACxC,oBAAY,YAAY;IACpB,yBAAyB;IACzB,OAAO,YAAY;IAEnB,2BAA2B;IAC3B,OAAO,YAAY;IAEnB,yBAAyB;IACzB,IAAI,SAAS;IAEb,sBAAsB;IACtB,IAAI,SAAS;IAEb,mBAAmB;IACnB,OAAO,YAAY;IAEnB,oBAAoB;IACpB,OAAO,YAAY;IAEnB,iBAAiB;IACjB,MAAM,WAAW;CACpB;AAED,4BAA4B;AAC5B,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,0BAA0B;AAC1B,MAAM,WAAW,WAAW;IACxB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B"}

package/components/types.js

@@ -0,0 +1,31 @@
+/** Input component size variety */
+export var ElementSize;
+(function (ElementSize) {
+    /** Font size is 0.75rem */
+    ElementSize["Small"] = "small";
+    /** Font size is 1rem. Default */
+    ElementSize["Normal"] = "normal";
+    /** Font size is 1.25rem */
+    ElementSize["Medium"] = "medium";
+    /** Font size is 1.5rem */
+    ElementSize["Large"] = "large";
+})(ElementSize || (ElementSize = {}));
+/** Input component border-color type */
+export var ElementColor;
+(function (ElementColor) {
+    /** color: transparent */
+    ElementColor["Default"] = "default";
+    /** color: seawave green */
+    ElementColor["Primary"] = "primary";
+    /** color: blue-violet */
+    ElementColor["Link"] = "link";
+    /** color: sky-blue */
+    ElementColor["Info"] = "info";
+    /** color: green */
+    ElementColor["Success"] = "success";
+    /** color: yellow */
+    ElementColor["Warning"] = "warning";
+    /** color: red */
+    ElementColor["Danger"] = "danger";
+})(ElementColor || (ElementColor = {}));
+;

package/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useComponentOutsideClick";
+export * from "./usePagination";
+//# sourceMappingURL=index.d.ts.map

package/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC"}

package/{dist/hooks/index.d.ts → hooks/index.js}

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

package/{dist/hooks → hooks}/useComponentOutsideClick.d.ts

@@ -1,10 +1,11 @@
-import { DependencyList } from "react";
-/**
- * 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 declare const useComponentOutsideClick: (selector: string, clickHandleCondition: boolean, clickHandleChange: () => void, clickListenCondition?: boolean, dependencies?: DependencyList) => void;
+import { DependencyList } from "react";
+/**
+ * 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 declare const useComponentOutsideClick: (selector: string, clickHandleCondition: boolean, clickHandleChange: () => void, clickListenCondition?: boolean, dependencies?: DependencyList) => void;
+//# sourceMappingURL=useComponentOutsideClick.d.ts.map

package/hooks/useComponentOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useComponentOutsideClick.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentOutsideClick.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA0B,MAAM,OAAO,CAAC;AAI/D;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,aACvB,MAAM,wBACM,OAAO,qBACV,MAAM,IAAI,yBACN,OAAO,iBACf,cAAc,KAC9B,IA6BF,CAAC"}

package/hooks/useComponentOutsideClick.js

@@ -0,0 +1,32 @@
+import { 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, clickHandleCondition, clickHandleChange, clickListenCondition, dependencies) => {
+    const onDocumentClick = useCallback((event) => {
+        if (clickHandleCondition) {
+            const target = event.target;
+            if (isNullOrUndefined(target)) {
+                return;
+            }
+            const relatedComponent = 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 () => document.removeEventListener("click", onDocumentClick);
+        }
+        return () => { };
+    }, [clickListenCondition, onDocumentClick]);
+};

package/{dist/hooks → hooks}/usePagination.d.ts

@@ -1,19 +1,20 @@
-import { DependencyList } 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;
-}
-/**
- * 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 declare const usePagination: (length: number, size?: number, initPage?: number, dependencies?: DependencyList) => [PaginationState, (data: Array<any>) => Array<any>];
+import { DependencyList } 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;
+}
+/**
+ * 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 declare const usePagination: (length: number, size?: number, initPage?: number, dependencies?: DependencyList) => [PaginationState, (data: Array<any>) => Array<any>];
+//# sourceMappingURL=usePagination.d.ts.map

package/hooks/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/hooks/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA6C,MAAM,OAAO,CAAC;AAElF,2BAA2B;AAC3B,MAAM,WAAW,eAAe;IAC5B,6BAA6B;IAC7B,WAAW,EAAE,MAAM,CAAC;IAEpB,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IAEnB,6BAA6B;IAC7B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAKD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,WACd,MAAM,SACR,MAAM,aACF,MAAM,6DAEQ,MAAM,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,CAwBpD,CAAC"}

package/hooks/usePagination.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+/** Default page size */
+const defaultPageSize = 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, size = defaultPageSize, initPage = 1, dependencies = []) => {
+    const [currentPage, setCurrentPage] = useState(initPage);
+    const count = useMemo(() => Math.ceil(length / size), [size, length]);
+    const onChange = useCallback((page) => setCurrentPage(page), [setCurrentPage]);
+    const paginate = useCallback((data) => {
+        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/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/{dist/index.d.ts → index.js}

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

package/package.json

@@ -1,45 +1,39 @@
-{
-  "name": "@bodynarf/react.components",
-  "version": "1.7.1",
-  "type": "module",
-  "main": "./dist/bbr-components.umd.cjs",
-  "module": "./dist/bbr-components.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": "./dist/bbr-components.js",
-      "require": "./dist/bbr-components.umd.cjs"
-    }
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "bulma": "^0.9.4"
-  },
-  "devDependencies": {
-    "@bodynarf/utils": "^1.1.7",
-    "@types/node": "^20.2.2",
-    "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.38.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "sass": "^1.62.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.2",
-    "vite-plugin-dts": "^2.3.0",
-    "vite-tsconfig-paths": "^4.2.0"
-  }
-}
+{
+    "name": "@bodynarf/react.components",
+    "version": "1.7.2",
+    "author": {
+        "name": "Artem",
+        "email": "bodynar@gmail.com"
+    },
+    "repository": {
+        "url": "https://github.com/bodynar/bodynarf.react-components",
+        "type": "git"
+    },
+    "bugs": {
+        "url": "https://github.com/bodynar/bodynarf.react-components/issues",
+        "email": "bodynar@gmail.com"
+    },
+    "keywords": [
+        "ts",
+        "typescript",
+        "react",
+        "react component",
+        "bulma"
+    ],
+    "scripts": {
+        "build": "npx tsc && tsc-alias -p tsconfig.json",
+        "publish": "npx tsc && copy package.json dist && copy readme.md dist && cd dist && npm publish --access=public"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.11",
+        "@types/react-dom": "^18.0.5",
+        "tsc-alias": "^1.8.6",
+        "typescript": "^4.7.3"
+    },
+    "dependencies": {
+        "@bodynarf/utils": "^1.1.1",
+        "bulma": "^0.9.4",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+    }
+}

package/readme.md

@@ -0,0 +1,56 @@
+# About
+Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
+	<img
+    	src="https://bulma.io/images/made-with-bulma.png"
+    	alt="Made with Bulma"
+    	width="128"
+    	height="24"/>
+</a>
+
+## Installation
+1. Install [React](https://reactjs.org/)
+2. Install [Bulma](https://bulma.io/)
+3. Make sure you imported bulma styles in parent container
+4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
+5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container
+
+## Description
+
+Mostly all components have root class with `bbr-` prefix. BBR - Bodynarf Bulma React
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
+ - **Anchor**
+ - **Button**
+ - **Number**
+ - **Password** - single line password input (requires icon, see *p.4*)
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+ - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)
+
+### Complex components
+Complex components is set of components built via combining simple components or represent complex logical component
+ - **Search** - Search bar with optional button to perform search
+ - **Paginator** - Pagination elements to navigate through paged list
+  
+	Example:
+	```tsx
+		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);
+		const pageItems = useMemo(() => paginate(items), [paginate, items]);
+
+		// ...
+
+		<Paginator
+			count={pagesCount}
+			currentPage={currentPage}
+			onPageChange={onPageChange}
+		/>
+	```
+ 
+### Hooks
+
+ - **useComponentOutsideClick** - Attach watcher for mouse clicks and emmit event when click was outside of component
+ - **usePagination** - Create a pagination config to easily manipulate with Paginator component