@bodynarf/react.components 1.4.7 → 1.4.9

package/components/anchor/anchor.scss

@@ -1,4 +1,4 @@
-.app-anchor {
+.bbr-anchor {
     text-decoration: none;
     color: inherit;
 
@@ -9,7 +9,7 @@
         color: #3273dc;
     }
 
-    .app-icon {
+    .bbr-icon {
         transition: none;
     }
 }

package/components/anchor/components/anchorWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnchorWithIconProps } from "../../types";
 /** Anchor with icon component */
 export declare const AnchorWithIcon: ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps) => JSX.Element;

package/components/anchor/components/anchorWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/anchor/components/anchorWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,+DAAgE,mBAAmB,KAAG,WAqChH,CAAC"}

package/components/anchor/components/anchorWithIcon/index.js

@@ -7,8 +7,8 @@ export const AnchorWithIcon = ({ href, className, onClick, caption, title, targe
     const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
-            ? `${icon.className} app-icon--left`
-            : `${icon.className} app-icon--right`;
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
     if (iconPosition === 'left') {
         return (_jsxs("a", { href: href, className: className, title: title, target: target, onClick: onClick, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAKvC,oBAAY,WAAW,GAAG;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA2B9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/anchor/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAKvC,oBAAY,WAAW,GAAG;IACtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAE3B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA6B9D"}

package/components/anchor/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isNullOrUndefined, isNullOrEmpty } from '@bodynarf/utils';
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from '@bodynarf/utils';
 import './anchor.scss';
 import { SimpleAnchor } from './components/simpleAnchor';
 import { AnchorWithIcon } from './components/anchorWithIcon';
@@ -8,9 +8,11 @@ export default function Anchor(props) {
     if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
         throw new Error("No anchor content provided");
     }
-    const className = 'app-anchor'
-        + (!isNullOrEmpty(props.className) ? ` ${props.className}` : '')
-        + (props.disableHovering === true ? ' app-anchor--unhoverable' : '');
+    const className = getClassName([
+        'bbr-anchor',
+        !isNullOrEmpty(props.className) ? ` ${props.className}` : '',
+        props.disableHovering === true ? ' bbr-anchor--unhoverable' : ''
+    ]);
     if (isNullOrUndefined(props.icon)) {
         return (_jsx(SimpleAnchor, { ...props, className: className, onClick: props.onClick }));
     }

package/components/button/button.scss

@@ -1,4 +1,4 @@
-.button {
+.bbr-button {
     transition: 0.15s ease-in-out;
     transition-property: background-color, border-color;
 

package/components/button/components/buttonWithIcon/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonWithIconProps } from '../../types';
 /** Button with icon component */
 export declare const ButtonWithIcon: ({ className, disabled, onClick, caption, title, icon }: ButtonWithIconProps) => JSX.Element;

package/components/button/components/buttonWithIcon/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/button/components/buttonWithIcon/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,iCAAiC;AACjC,eAAO,MAAM,cAAc,2DAA4D,mBAAmB,KAAG,WAsC5G,CAAC"}

package/components/button/components/buttonWithIcon/index.js

@@ -7,10 +7,10 @@ export const ButtonWithIcon = ({ className, disabled, onClick, caption, title, i
     const iconClassName = isNullOrEmpty(caption)
         ? icon.className
         : iconPosition === 'left'
-            ? `${icon.className} app-icon--left`
-            : `${icon.className} app-icon--right`;
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
     className = isNullOrEmpty(caption)
-        ? `${className} button--icon-only`
+        ? `${className} bbr-button--icon-only`
         : className;
     if (iconPosition === 'left') {
         return (_jsxs("button", { className: className, disabled: disabled, onClick: onClick, title: title, children: [_jsx(Icon, { ...icon, className: iconClassName }), caption] }));

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAgC9D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAEvB,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,oBAAY,WAAW,GAAG;IACtB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8BAA8B;IAC9B,IAAI,EAAE,UAAU,CAAC;IAEjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAkC9D"}

package/components/button/index.js

@@ -12,7 +12,9 @@ export default function Button(props) {
         throw new Error("No button content provided.");
     }
     const className = getClassName([
-        `button is-${props.type}`,
+        "button",
+        "bbr-button",
+        `is-${props.type}`,
         props.light === true ? 'is-light' : '',
         !isNullOrUndefined(props.size) ? `is-${props.size}` : '',
         props.outlined === true ? 'is-outlined' : '',

package/components/icon/icon.scss

@@ -1,4 +1,4 @@
-.app-icon {
+.bbr-icon {
     transition: 0.15s ease-in-out color;
     font-size: 1.3rem;
 

package/components/icon/index.js

@@ -11,7 +11,7 @@ const sizeToClassMap = new Map([
  */
 export default function Icon({ size = 'medium', name, className }) {
     const classNames = getClassName([
-        "app-icon",
+        "bbr-icon",
         "bi",
         `bi-${name}`,
         sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",

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;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACtB;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,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,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,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,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GACrC,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAsE3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search/index.tsx"],"names":[],"mappings":";AAIA,OAAO,eAAe,CAAC;AAGvB,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,oBAAY,WAAW,GAAG;IACtB;;;;MAIE;IACF,UAAU,EAAE,UAAU,GAAG,UAAU,CAAC;IAEpC,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,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yBAAyB;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,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,EAC3B,UAAU,EAAE,QAAQ,EAAE,OAAO,EAC7B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,GACrC,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CAwE3B"}

package/components/search/index.js

@@ -16,13 +16,15 @@ export default function Search({ searchType, onSearch, caption, name, defaultVal
     }, [onSearch, searchType]);
     const onSearchButtonClick = useCallback(() => onSearch(searchValue), [onSearch, searchValue]);
     const className = getClassName([
-        'app-search control',
+        "bbr-search",
+        "control",
         `is-${(size || 'normal')}`,
         isLoading === true ? 'is-loading' : '',
         searchType === 'byButton' ? 'is-expanded' : '',
     ]);
     const inputClassName = getClassName([
-        'input is-unselectable',
+        "input",
+        "is-unselectable",
         `is-${(size || 'normal')}`,
         rounded === true ? 'is-rounded' : '',
     ]);

package/components/search/search.scss

@@ -1,4 +1,4 @@
-.app-search {
+.bbr-search {
     input[type="search"] {
         transition: 0.15s ease-out;
         transition-property: border-color, color, background-color;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.4.7",
+    "version": "1.4.9",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"

package/readme.md

@@ -15,6 +15,8 @@ Small library with react components based on Bulma CSS framework&nbsp; <a href="
 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.
 
@@ -23,6 +25,8 @@ Simple react components based on html elements.
  - **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)