@bodynarf/react.components 1.2.2 → 1.3.0

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

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

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

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

package/components/icon/index.js

@@ -17,5 +17,5 @@ export default function Icon({ size = 'medium', name, className }) {
         sizeToClassMap.has(size) ? sizeToClassMap.get(size) : "",
         className
     ]);
-    return (_jsx("i", { className: className }));
+    return (_jsx("i", { className: classNames }));
 }

package/components/primitives/checkbox/checkbox.scss

@@ -0,0 +1,4 @@
+.is-checkradio[type="checkbox"].has-background-color.m-has-background-color:not(:checked) + label::before {
+    border-color: #dbdbdb !important;
+    background-color: transparent !important;
+}

package/components/primitives/checkbox/index.d.ts

@@ -0,0 +1,18 @@
+import './checkbox.scss';
+import { BaseInputElementProps } from "../types";
+export declare type CheckBoxProps = BaseInputElementProps<boolean> & {
+    /** Is full colored checkbox */
+    block?: boolean;
+    /** Remove the checkbox border */
+    withoutBorder?: boolean;
+    /** Checkbox has background color */
+    hasBackgroundColor?: boolean;
+    /**
+     * Set unchecked background as transparent.
+     * Only used with `hasBackgroundColor`
+    */
+    fixBackgroundColor?: boolean;
+};
+declare const CheckBox: ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }: CheckBoxProps) => JSX.Element;
+export default CheckBox;
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAEzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEjD,oBAAY,aAAa,GAAG,qBAAqB,CAAC,OAAO,CAAC,GAAG;IACzD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,iCAAiC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,oCAAoC;IACpC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B;;;MAGE;IACF,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,QAAQ,+IAKX,aAAa,KAAG,WAsClB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/primitives/checkbox/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { generateGuid, getClassName, isNullOrUndefined } from "@bodynarf/utils";
+import './checkbox.scss';
+const CheckBox = ({ label, onValueChange, defaultValue, name, disabled, rounded, size, style, block, withoutBorder, hasBackgroundColor, fixBackgroundColor }) => {
+    const onChecked = useCallback((event) => onValueChange(event.target.checked), [onValueChange]);
+    const id = name || generateGuid();
+    const className = getClassName([
+        "m-check-radio",
+        "is-checkradio",
+        hasBackgroundColor == true ? "has-background-color" : "",
+        fixBackgroundColor === true && hasBackgroundColor == true ? "m-has-background-color" : "",
+        isNullOrUndefined(style) ? "" : size === 'normal' ? "" : `is-${size}`,
+        rounded === true ? "is-circle" : "",
+        isNullOrUndefined(style) ? "" : `is-${style}`,
+        block === true ? "is-block" : "",
+        withoutBorder === true ? "has-no-border" : "",
+    ]);
+    return (_jsxs("div", { className: "field", children: [_jsx("input", { type: "checkbox", name: id, id: id, disabled: disabled, onChange: onChecked, className: className, defaultChecked: defaultValue }), _jsx("label", { htmlFor: id, children: label?.caption })] }));
+};
+export default CheckBox;

package/components/primitives/index.d.ts

@@ -1,5 +1,6 @@
 export * from './date';
 export * from './multiline';
 export * from './text';
+export * from './checkbox';
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/components/primitives/index.js

@@ -1,4 +1,5 @@
 export * from './date';
 export * from './multiline';
 export * from './text';
+export * from './checkbox';
 export * from './types';

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.2.2",
+    "version": "1.3.0",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -22,7 +22,7 @@
     ],
     "scripts": {
         "build": "npx tsc",
-        "publish": "npx tsc && copy package.json dist && copy readme.md dist && cd dist && npm publish --access=public"
+        "publish_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

@@ -12,6 +12,7 @@ Small library with react components based on Bulma CSS framework&nbsp; <a href="
 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
 ### Simple components
@@ -24,6 +25,7 @@ Simple react components based on html elements.
  - **Button**
  - **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/1)
 
 ### Complex components
 Complex components is set of components built via combining simple components or represent complex logical component