reactive-bulma 1.20.1 → 1.21.0

package/dist/cjs/types/components/atoms/RadioButton/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RadioButtonProps } from '../../../interfaces/atomProps';
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

package/dist/cjs/types/components/atoms/index.d.ts

@@ -11,3 +11,5 @@ export { default as TextArea } from './TextArea';
 export { default as Delete } from './Delete';
 export { default as Select } from './Select';
 export { default as File } from './File';
+export { default as Checkbox } from './Checkbox';
+export { default as RadioButton } from './RadioButton';

package/dist/cjs/types/functions/parsers.d.ts

@@ -1,14 +1,14 @@
 import { ParseTestIdProps } from '../interfaces/functionProps';
 /**
- * @param { Array<string | null> } _classes Required. Array of classNames on `string` (or `null`) values
+ * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
  * @returns { string } A single string product of merge all classNames, separated by spaces
  */
 export declare const parseClasses: (_classes: Array<string | null | undefined>) => string;
 /**
  * @param { ParseTestIdProps } config Configuration object
- * @param { string } config.tag Required. Component tag used between to build the final testId string.
- * @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
- * @param { { usedRegExp?: RegExp, regExpReplacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
+ * @param { string } config.tag `Required`. Component tag used between to build the final testId string.
+ * @param { string } config.parsedClasses `Required`. A single string of previously parsed classes what will be joined with `tag` property.
+ * @param { { regExp?: RegExp, replacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
  * @returns A single string product of merge all classNames, separated by `separator` value
  */
 export declare const parseTestId: (config: ParseTestIdProps) => string;

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -220,14 +220,24 @@ export interface CheckBoxProps extends BasicProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-interface RadioButtonItemProps {
+export interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
+    /** `Attribute` `Required` Sets checkbox's text*/
     label: string;
-    name: string;
+    /** `Attribute` Sets the name that will relate this checkbox with the others */
+    name?: string;
+    /** `Attribute` Shows the checkbox as checked or unchecked */
     isChecked?: boolean;
+    /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
+    onChange?: () => void;
 }
 export interface RadioButtonProps extends BasicProps {
+    /** `Attribute` `Required` Indicates the options contained to be selected */
     options: RadioButtonItemProps[];
+    /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */
+    name: string;
+    /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
 export {};

package/dist/cjs/types/interfaces/functionProps.d.ts

@@ -1,6 +1,6 @@
 interface RegExpRule {
-    usedRegExp?: RegExp;
-    regExpReplacer?: string;
+    regExp?: RegExp;
+    replacer?: string;
 }
 export interface ParseTestIdProps {
     tag: string;

package/dist/esm/index.js

@@ -2833,15 +2833,15 @@ var reactExports = react.exports;
 var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
 
 /**
- * @param { Array<string | null> } _classes Required. Array of classNames on `string` (or `null`) values
+ * @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
  * @returns { string } A single string product of merge all classNames, separated by spaces
  */
 const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
 /**
  * @param { ParseTestIdProps } config Configuration object
- * @param { string } config.tag Required. Component tag used between to build the final testId string.
- * @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
- * @param { { usedRegExp?: RegExp, regExpReplacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
+ * @param { string } config.tag `Required`. Component tag used between to build the final testId string.
+ * @param { string } config.parsedClasses `Required`. A single string of previously parsed classes what will be joined with `tag` property.
+ * @param { { regExp?: RegExp, replacer?: string }[] } config.rules Optional. An array of objects used with a regular expression to check each case and a replacer for each one, giving oportunity to handle specific cases of component class names.
  * @returns A single string product of merge all classNames, separated by `separator` value
  */
 const parseTestId = (config) => {
@@ -2849,7 +2849,7 @@ const parseTestId = (config) => {
     let fixedClassString = config.parsedClasses;
     if (config.rules) {
         for (const rule of config.rules) {
-            fixedClassString = fixedClassString.replace(rule.usedRegExp, rule.regExpReplacer);
+            fixedClassString = fixedClassString.replace(rule.regExp, rule.replacer);
         }
     }
     else {
@@ -2972,8 +2972,8 @@ const generateIconContainer = (icon, color) => {
         parsedClasses: (_a = color === null || color === void 0 ? void 0 : color.toString()) !== null && _a !== void 0 ? _a : '',
         rules: [
             {
-                usedRegExp: /has-text/gm,
-                regExpReplacer: ''
+                regExp: /has-text/gm,
+                replacer: ''
             }
         ]
     });
@@ -2999,12 +2999,12 @@ const Icon = ({ testId = null, containerTestId = null, cssClasses = null, contai
         parsedClasses: iconClasses,
         rules: [
             {
-                usedRegExp: /mdi-|mdi--/gm,
-                regExpReplacer: ''
+                regExp: /mdi-|mdi--/gm,
+                replacer: ''
             },
             {
-                usedRegExp: /mdi /gm,
-                regExpReplacer: '-'
+                regExp: /mdi /gm,
+                replacer: '-'
             }
         ],
         separator: '-'
@@ -3048,12 +3048,12 @@ const TextArea = ({ testId = null, cssClasses = null, style = null, text = null,
         parsedClasses: textAreaClasses,
         rules: [
             {
-                usedRegExp: /textarea/gm,
-                regExpReplacer: ''
+                regExp: /textarea/gm,
+                replacer: ''
             },
             {
-                usedRegExp: /is-|has-/gm,
-                regExpReplacer: '-'
+                regExp: /is-|has-/gm,
+                replacer: '-'
             }
         ]
     });
@@ -3086,7 +3086,7 @@ const Select = ({ testId = null, containerTestId = null, cssClasses = null, cont
     });
     const containerSelectTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : `${selectTestId}-container`;
     return (React.createElement("section", { "data-testid": containerSelectTestId, className: containerSelectClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
-        React.createElement("select", { "data-testid": selectTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, multiple: isMultiple, size: showOptions }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), selected: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
+        React.createElement("select", { "data-testid": selectTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, multiple: isMultiple, size: showOptions }, options.map(({ id, name, selected }, i) => (React.createElement("option", { "data-testid": `${selectTestId}-option-${i}`, key: id.toString(), defaultChecked: selected !== null && selected !== void 0 ? selected : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, name))))));
 };
 
 const File = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, fileName = null, uploadIcon = { iconLabel: 'upload' }, uploadText = 'Choose a file…', buttonOnRight = false, isFullWidth = false, isBoxed = false, color = null, size = null, onClick = null }) => {
@@ -3105,12 +3105,12 @@ const File = ({ testId = null, containerTestId = null, cssClasses = null, contai
         parsedClasses: fileContainerClasses,
         rules: [
             {
-                usedRegExp: /has/gm,
-                regExpReplacer: '-has'
+                regExp: /has/gm,
+                replacer: '-has'
             },
             {
-                usedRegExp: /is|file/gm,
-                regExpReplacer: ''
+                regExp: /is|file/gm,
+                replacer: ''
             }
         ]
     });
@@ -3125,5 +3125,50 @@ const File = ({ testId = null, containerTestId = null, cssClasses = null, contai
             fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
 };
 
-export { Block, Box, Button, Column, Delete, File, Icon, Input, ProgressBar, Select, Tag, TextArea, Title };
+const parseContentTestId = (content) => {
+    if (typeof content === 'string')
+        return `-${content === null || content === void 0 ? void 0 : content.toString()}`;
+    if (content !== null)
+        return '-with-component';
+    return '';
+};
+const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, content = null, isDisabled = null, onChange = null }) => {
+    const checkboxContainerClasses = parseClasses([
+        'checkbox',
+        containerCssClasses
+    ]);
+    const checkboxContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'checkbox-container',
+        parsedClasses: parseContentTestId(content)
+    });
+    const checkboxTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'checkbox',
+        parsedClasses: parseContentTestId(content)
+    });
+    return (React.createElement("label", { "data-testid": checkboxContainerTestId, className: checkboxContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("input", { "data-testid": checkboxTestId, type: 'checkbox', className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }),
+        content));
+};
+
+// PARSERS
+const renderRadioButton = (config, index) => {
+    const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
+    const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
+    return (React.createElement("label", { key: index, className: 'radio' },
+        React.createElement("input", { "data-testid": radioButtonTestId, type: 'radio', style: style !== null && style !== void 0 ? style : undefined, name: name, defaultChecked: isChecked, disabled: isDisabled, onChange: onChange }),
+        label));
+};
+const RadioButton = ({ containerTestId = null, containerCssClasses = null, containerStyle = null, options, name, onChange = null }) => {
+    const radioButtonContainerClasses = parseClasses([
+        'control',
+        containerCssClasses
+    ]);
+    const radioButtonContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'container-',
+        parsedClasses: radioButtonContainerClasses
+    });
+    return (React.createElement("section", { "data-testid": radioButtonContainerTestId, className: radioButtonContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined }, options.map((_option, i) => renderRadioButton(Object.assign(Object.assign({}, _option), { name, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }), i))));
+};
+
+export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map