@bodynarf/react.components 1.2.0 → 1.2.3

package/components/dropdown/components/dropdownLabel/index.js

@@ -15,6 +15,6 @@ const DropdownLabel = ({ caption, selectedItem, onClick, deselectable }) => {
         "button"
     ]);
     return (_jsxs("label", { className: className, onClick: onClick, children: [deselectVisible &&
-                _jsx(Icon, { className: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { className: "arrow-up" })] }));
+                _jsx(Icon, { name: "plus-lg" }), _jsx("span", { className: deselectVisible ? "mx-2" : "mr-2", title: itemSelected ? text : undefined, children: text }), _jsx(Icon, { name: "arrow-up" })] }));
 };
 export default DropdownLabel;

package/components/dropdown/index.d.ts

@@ -10,8 +10,7 @@ export declare type DropdownProps = BaseElementProps & {
     */
     value?: SelectableItem;
     /**
-     * Action to update selected value,
-     *  which stored outside
+     * Action to update selected value, which stored outside
      */
     onSelect: (item?: SelectableItem) => void;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAIzB,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C,oBAAY,aAAa,GAAG,gBAAgB,GAAG;IAC3C,kCAAkC;IAClC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAE7B;;;MAGE;IACF,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;IAE1C;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB,gEAAgE;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAE1B,wBAAwB;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAA;AAED,yBAAyB;AACzB,QAAA,MAAM,QAAQ,mFAAoF,aAAa,KAAG,WA2FjH,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/icon/index.d.ts

@@ -4,15 +4,19 @@ import { ElementSize } from '../types';
 /** Icon component props */
 export declare type IconProps = {
     /**
-     * Class name for icon.
-     * Used to display icon from bootstrap-icons
+     * Icon name. Must be without `bi-`
+     * @example ["Arrow repeat", "arrow-repeat"]
+     * // Icon name to icon class name.
+     * // For class name check bootstrap icons website
     */
-    className: string;
+    name: string;
+    /** Additional classname */
+    className?: string;
     /** Icon size */
     size?: ElementSize;
 };
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon(props: IconProps): JSX.Element;
+export default function Icon({ size, name, className }: IconProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAQ1D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvC,2BAA2B;AAC3B,oBAAY,SAAS,GAAG;IACpB;;;;;MAKE;IACF,IAAI,EAAE,MAAM,CAAC;IAEb,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAA;AAQD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,IAAe,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAYzF"}

package/components/icon/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import './icon.scss';
+import { getClassName } from '@bodynarf/utils';
 const sizeToClassMap = new Map([
     ['small', ' app-icon--smal'],
     ['medium', ''],
@@ -8,8 +9,13 @@ const sizeToClassMap = new Map([
 /**
  * Icon component. Based on bootstrap icons
  */
-export default function Icon(props) {
-    const size = props.size || 'medium';
-    const className = `app-icon bi bi-${props.className}${sizeToClassMap.get(size)}`;
+export default function Icon({ size = 'medium', name, className }) {
+    const classNames = getClassName([
+        "app-icon",
+        "bi",
+        `bi-${name}`,
+        sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
+        className
+    ]);
     return (_jsx("i", { className: className }));
 }

package/components/paginator/index.d.ts

@@ -5,11 +5,11 @@ export declare type PaginatorProps = {
     count: number;
     /** Page change handler */
     onPageChange: (page: number) => void;
-    /** Current page. Starts from 1 */
+    /** Current page */
     currentPage?: number;
     /**
      * Page numbers position.
-     * Usefull with showNextButtons = true
+     * Usefull with `showNextButtons = true`
     */
     position?: 'left' | 'center' | 'right';
     /** Buttons should have rounded borders */
@@ -20,10 +20,15 @@ export declare type PaginatorProps = {
     className?: string;
     /** Display "Previous" \ "Next" buttons */
     showNextButtons?: boolean;
+    /**
+     * Max amount of pages from left & right from current page. `3` by default
+     * @description If set to 2 it will show `[1, 2], 3, [4, 5]`
+    */
+    nearPagesCount?: number;
 };
 /**
  * Paginator component.
  * Used for visualization of pagging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, }: PaginatorProps): JSX.Element;
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }: PaginatorProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,oBAAY,cAAc,GAAG;IACzB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAA;AAED;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,GAClB,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA4G9B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/paginator/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIvC,oBAAY,cAAc,GAAG;IACzB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;MAGE;IACF,QAAQ,CAAC,EACP,MAAM,GACN,QAAQ,GACR,OAAO,CACR;IAED,0CAA0C;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;MAGE;IACF,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAA;AAED;;;EAGE;AACF,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,KAAK,EAAE,YAAY,EAAE,WAAW,EAChC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAClC,eAAe,EAAE,cAAc,EAClC,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA2G9B"}

package/components/paginator/index.js

@@ -6,7 +6,7 @@ import { generatePageNumbers } from './utils';
  * Paginator component.
  * Used for visualization of pagging configuration
 */
-export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, }) {
+export default function Paginator({ count, onPageChange, currentPage, position, rounded, size, className, showNextButtons, nearPagesCount }) {
     const page = currentPage || 0;
     const pageChange = useCallback((event) => {
         const target = event.target;
@@ -15,12 +15,11 @@ export default function Paginator({ count, onPageChange, currentPage, position,
             return;
         }
         const page = +pageRaw;
-        if (page !== currentPage
-            && page > 0 && page <= count) {
+        if (page !== currentPage && page > 0 && page <= count) {
             onPageChange(page);
         }
     }, [onPageChange, currentPage, count]);
-    const pageNumbers = useMemo(() => generatePageNumbers(page, count), [page, count]);
+    const pageNumbers = useMemo(() => generatePageNumbers(page, count, nearPagesCount), [page, count]);
     const canGoBack = useMemo(() => page > 1, [page]);
     const canGoForward = useMemo(() => page < count, [page, count]);
     if (pageNumbers.length === 0) {

package/components/paginator/utils.js

@@ -8,7 +8,7 @@
  */
 export const generatePageNumbers = (page, count, size = 3) => {
     if (page < 0 || count <= 0 || page > count || size > count) {
-        throw new Error("getPageNumbers has ivalid config");
+        return [];
     }
     return [
         ...new Array(size).fill(page).map((_, i) => page - i - 1).filter(x => x > 0 && x < page).reverse(),

package/components/search/index.d.ts

@@ -10,7 +10,7 @@ export declare type SearchProps = {
     /**
      * Search type: by typing, starts from minimum characters to search
      * or by clicking on button next to search bar.
-     * Default is byTyping
+     * Default `is byTyping`
     */
     searchType?: 'byTyping' | 'byButton';
     /** Control name. If empty - will be replaced by random guid */
@@ -23,7 +23,7 @@ export declare type SearchProps = {
     rounded?: boolean;
     /** Is search bar disabled */
     disabled?: boolean;
-    /** Should loading icon be displayed in search bar*/
+    /** Should loading icon be displayed in search bar */
     isLoading?: boolean;
 };
 /** Search component */

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+E9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAIvB,oBAAY,WAAW,GAAG;IACtB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;MAIE;IACF,UAAU,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAErC,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,qDAAqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA+E9D"}

package/components/types.d.ts

@@ -17,10 +17,14 @@ export declare type IconPosition = 'left' | 'right';
 /** Icon for component  */
 export declare type ElementIcon = {
     /**
-     * Class name for icon.
-     * Used to display icon from bootstrap-icons
+     * Icon name. Must be without `bi-`
+     * @example ["Arrow repeat", "arrow-repeat"]
+     * // Icon name to icon class name.
+     * // For class name check bootstrap icons website
     */
-    className: string;
+    name: string;
+    /** Additional classname */
+    className?: string;
     /** Icon size */
     size?: ElementSize;
     /**

package/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,4BAA4B;AAC5B,oBAAY,WAAW,GACjB,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,4BAA4B;AAC5B,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,0BAA0B;AAC1B,oBAAY,WAAW,GAAG;IACtB;;;MAGE;IACF,SAAS,EAAE,MAAM,CAAC;IAElB,gBAAgB;IAChB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;MAGE;IACF,QAAQ,CAAC,EAAE,YAAY,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AAAA,yCAAyC;AACzC,oBAAY,gBAAgB,GAAG;IAC3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8BAA8B;IAC9B,IAAI,CAAC,EAAE;QACH,8CAA8C;QAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACtB,CAAC;CACL,CAAC;AAEF,4BAA4B;AAC5B,oBAAY,WAAW,GACjB,OAAO,GACP,QAAQ,CAAC,mBAAmB,GAC5B,OAAO,CAAC;AAEd,4BAA4B;AAC5B,oBAAY,YAAY,GAClB,MAAM,GACN,OAAO,CAAC;AAEd,0BAA0B;AAC1B,oBAAY,WAAW,GAAG;IACtB;;;;;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,CAAC"}

package/dist

@@ -0,0 +1,32 @@
+# 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
+
+## Description
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
+ - **Anchor**
+ - **Button**
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+
+### 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
+ 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.2.0",
+    "version": "1.2.3",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -22,7 +22,7 @@
     ],
     "scripts": {
         "build": "npx tsc",
-        "publish": "npx tsc && copy package.json dist && cd dist && npm publish --access=public"
+        "package": "npx tsc && copy package.json dist && copy readme.md dist && cd dist && npm publish --access=public"
     },
     "devDependencies": {
         "@types/react": "^18.0.11",

package/readme.md

@@ -1,7 +1,5 @@
 # About
-Small library with react components based on Bulma
-
-<a href="https://bulma.io" title="Bulma css framework">
+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"
@@ -9,13 +7,26 @@ Small library with react components based on Bulma
     	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
+
 ## Description
-Contained components:
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
  - **Anchor**
  - **Button**
- - **Dropdown**
- - **Icon**
- - **Search**
- - **Date** - primitive date input;
- - **Multiline** - primitive multiline text input;
- - **Text**- primitive single line text input;
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+
+### 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
+