reactive-bulma 1.20.1 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Nicolás Omar González Passerino
+Copyright (c) 2023 Nicolás Omar González Passerino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -15,8 +15,8 @@ Component library based on React, Bulma, Typescript and Rollup
 
 ## Table of contents
 
-- [Status](#status)
 - [Purpose](#purpose)
+- [Status](#status)
 - [Dependencies](#dependencies)
 - [Quick start](#quick-start)
 - [Folder structure](#folder-structure)
@@ -25,16 +25,18 @@ Component library based on React, Bulma, Typescript and Rollup
 - [Versioning](#versioning)
 - [Roadmap](#roadmap)
 - [Changelog](#changelog)
+- [Contributing](#contributing)
 - [Credit](#credit)
 - [License](#license)
 
 ## Purpose
-After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
+
+After studying [an Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
 
 ## Status
 
-![Npm Version][badge-npm-version]
-![Npm Bundle Size][badge-npm-size]
+[![Npm Version][badge-npm-version]][link-npm]
+[![Npm Bundle Size][badge-npm-size]][link-npm]
 [![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
 [![Netlify Status][badge-netlify-status]][link-netlify-status]
 [![Code Coverage][badge-code-coverage]][link-code-coverage]
@@ -43,14 +45,16 @@ After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/
 [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
 [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
 [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
-![GitHub Repo stars][badge-github-repo-stars]
-![GitHub commit activity][badge-github-commits]
-![GitHub last commit][badge-github-last-commit]
+[![GitHub Repo stars][badge-github-repo-stars]][link-github-stars]
+[![GitHub commit activity][badge-github-commits]][link-github-commit-activity]
+[![GitHub last commit][badge-github-last-commit]][link-github-commit-history]
 [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
+[![Contributor Covenant][badge-code-of-conduct]][link-code-of-conduct]
 
 [badge-npm-version]: https://img.shields.io/github/package-json/v/nicolasomar/reactive-bulma?label=npm%20version&logo=npm&labelColor=535353&color=success&style=flat
 [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
 [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
+[link-npm]: https://www.npmjs.com/package/reactive-bulma
 [link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
 [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
 [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
@@ -61,29 +65,34 @@ After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/
 [badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
 [badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
 [link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
-[badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
+[badge-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma/badge.svg
 [link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
 [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
 [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
 [badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
+[link-github-stars]: https://github.com/NicolasOmar/reactive-bulma/activity
+[link-github-commit-activity]: https://github.com/NicolasOmar/reactive-bulma/activity
+[link-github-commit-history]: https://github.com/NicolasOmar/reactive-bulma/commits/main
 [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
 [link-semantic-commits]: https://github.com/semantic-release/semantic-release
+[badge-code-of-conduct]: https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg
+[link-code-of-conduct]: code_of_conduct.md
 
 ## Dependencies
 
-![react dependency][badge-dependency-react]
-![bulma dependency][badge-dependency-bulma]
-![material design dependency][badge-dependency-material-design]
-![typescript dependency][badge-dependency-typescript]
-![rollup dependency][badge-dependency-rollup]
-![storybook dependency][badge-dependency-storybook]
-![semantic release dependency][badge-dependency-semantic-release]
-![babel dependency][badge-dependency-babel]
-![jest dependency][badge-dependency-jest]
-![react testing library dependency][badge-dependency-react-testing]
-![prettier dependency][badge-dependency-prettier]
-![eslint dependency][badge-dependency-eslint]
-![husky dependency][badge-dependency-husky]
+[![react dependency][badge-dependency-react]][link-package-dependencies]
+[![bulma dependency][badge-dependency-bulma]][link-package-dependencies]
+[![material design dependency][badge-dependency-material-design]][link-package-dependencies]
+[![typescript dependency][badge-dependency-typescript]][link-package-dependencies]
+[![rollup dependency][badge-dependency-rollup]][link-package-dependencies]
+[![storybook dependency][badge-dependency-storybook]][link-package-dependencies]
+[![semantic release dependency][badge-dependency-semantic-release]][link-package-dependencies]
+[![babel dependency][badge-dependency-babel]][link-package-dependencies]
+[![jest dependency][badge-dependency-jest]][link-package-dependencies]
+[![react testing library dependency][badge-dependency-react-testing]][link-package-dependencies]
+[![prettier dependency][badge-dependency-prettier]][link-package-dependencies]
+[![eslint dependency][badge-dependency-eslint]][link-package-dependencies]
+[![husky dependency][badge-dependency-husky]][link-package-dependencies]
 
 [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
 [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
@@ -98,6 +107,7 @@ After studying [a Udemy course about Typescript](https://github.com/NicolasOmar/
 [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
 [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
 [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
+[link-package-dependencies]: https://github.com/NicolasOmar/reactive-bulma/blob/main/package.json
 
 ## Quick start
 
@@ -133,6 +143,7 @@ Reactive bulma's documentation, included in this repo in the root directory, is
 Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
 
 ## Usage
+
 ```jsx
 import React from 'react'
 import { Button } from 'reactive-bulma'
@@ -188,6 +199,11 @@ In case you want the detailed list of current and future features, go to the [ro
 
 The [changelog](https://github.com/NicolasOmar/reactive-bulma/blob/main/CHANGELOG.md) (powered by `semantic-release`) is regularly updated to reflect what's changed in each new release.
 
+## Contributing
+
+If you're interested in contributing to Reactive Bulma, please read [our contributing docs](./CONTRIBUTING.md) before submitting a pull request.
+
+
 ## Credit
 
 Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)

package/dist/cjs/index.js

@@ -2835,15 +2835,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) => {
@@ -2851,7 +2851,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 {
@@ -2974,8 +2974,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: ''
             }
         ]
     });
@@ -3001,12 +3001,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: '-'
@@ -3050,12 +3050,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: '-'
             }
         ]
     });
@@ -3088,7 +3088,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 }) => {
@@ -3107,12 +3107,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: ''
             }
         ]
     });
@@ -3127,15 +3127,62 @@ const File = ({ testId = null, containerTestId = null, cssClasses = null, contai
             fileName ? React.createElement("span", { className: 'file-name' }, fileName) : null)));
 };
 
+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))));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.Button = Button;
+exports.Checkbox = CheckBox;
 exports.Column = Column;
 exports.Delete = Delete;
 exports.File = File;
 exports.Icon = Icon;
 exports.Input = Input;
 exports.ProgressBar = ProgressBar;
+exports.RadioButton = RadioButton;
 exports.Select = Select;
 exports.Tag = Tag;
 exports.TextArea = TextArea;