reactive-bulma 1.10.0 → 1.10.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +157 -32
- package/dist/cjs/index.js +13 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/functions/parsers.d.ts +16 -0
- package/dist/esm/index.js +13 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/functions/parsers.d.ts +16 -0
- package/package.json +1 -1
- package/dist/cjs/types/functions/persers.d.ts +0 -3
- package/dist/esm/types/functions/persers.d.ts +0 -3
package/README.md
CHANGED
|
@@ -1,53 +1,178 @@
|
|
|
1
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<a href="https://reactivebulma.netlify.app">
|
|
3
|
+
<img width="75" src="https://cdn.svgporn.com/logos/react.svg">
|
|
4
|
+
<img width="50" src="https://cdn.svgporn.com/logos/bulma.svg">
|
|
5
|
+
</a>
|
|
6
|
+
</p>
|
|
2
7
|
|
|
3
|
-
|
|
4
|
-
Component library based on React, Typescript, Bulma and Rollup
|
|
8
|
+
<h1 align="center">Reactive Bulma</h1>
|
|
5
9
|
|
|
6
|
-
|
|
7
|
-
Before cloning this repo, I recommend installing the following software:
|
|
8
|
-
- [Node](https://nodejs.org/en/download/) >=18 to install packages
|
|
10
|
+
<div align="center">
|
|
9
11
|
|
|
10
|
-
|
|
11
|
-
After cloning the repo, install the node packages in the project's root file.
|
|
12
|
-
```sh
|
|
13
|
-
git clone https://github.com/NicolasOmar/reactive-bulma.git
|
|
14
|
-
cd reactive-bulma
|
|
15
|
-
npm install
|
|
16
|
-
```
|
|
12
|
+
Component library based on React, Bulma, Typescript and Rollup
|
|
17
13
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
<div align="left">
|
|
15
|
+
|
|
16
|
+
## Table of contents
|
|
17
|
+
|
|
18
|
+
- [Status](#status)
|
|
19
|
+
- [Dependencies](#dependencies)
|
|
20
|
+
- [Quick start](#quick-start)
|
|
21
|
+
- [Folder structure](#folder-structure)
|
|
22
|
+
- [Documentation](#documentation)
|
|
23
|
+
- [Usage](#usage)
|
|
24
|
+
- [Versioning](#versioning)
|
|
25
|
+
- [Roadmap](#roadmap)
|
|
26
|
+
- [Changelog](#changelog)
|
|
27
|
+
- [Credit](#credit)
|
|
28
|
+
- [License](#license)
|
|
29
|
+
|
|
30
|
+
## Status
|
|
31
|
+
|
|
32
|
+
![reactive-bulma, Npm Version][badge-npm-version]
|
|
33
|
+
![reactive-bulma, Npm Bundle Size][badge-npm-size]
|
|
34
|
+
![reactive-bulma, Npm Downloads][badge-npm-downloads]
|
|
35
|
+
[![reactive-bulma, Netlify Status][badge-netlify-status]][link-netlify-status]
|
|
36
|
+
![reactive-bulma, Code Coverage][badge-code-coverage]
|
|
37
|
+
[![reactive-bulma, Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
|
|
38
|
+
[![reactive-bulma, Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
|
|
39
|
+
[![reactive-bulma, Security Rating][badge-soundcloud-security]][link-soundcloud-status]
|
|
40
|
+
[![reactive-bulma, Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
|
|
41
|
+
![reactive-bulma, GitHub Repo stars][badge-github-repo-stars]
|
|
42
|
+
![reactive-bulma, GitHub commit activity][badge-github-commits]
|
|
43
|
+
![reactive-bulma, GitHub last commit][badge-github-last-commit]
|
|
44
|
+
[![reactive-bulma, Semantic Commits][badge-semantic-commits]][link-semantic-commits]
|
|
45
|
+
|
|
46
|
+
[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
|
|
47
|
+
[badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
|
|
48
|
+
[badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
|
|
49
|
+
[badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
|
|
50
|
+
[link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
|
|
51
|
+
[badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
|
|
52
|
+
[badge-soundcloud-quality]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status
|
|
53
|
+
[badge-soundcloud-maintanibility]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating
|
|
54
|
+
[badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
|
|
55
|
+
[badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
|
|
56
|
+
[link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
|
|
57
|
+
[badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
|
|
58
|
+
[badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
|
|
59
|
+
[badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
|
|
60
|
+
[badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
|
|
61
|
+
[link-semantic-commits]: https://github.com/semantic-release/semantic-release
|
|
62
|
+
|
|
63
|
+
## Dependencies
|
|
64
|
+
|
|
65
|
+
![reactive-bulma, react dependency][badge-dependency-react]
|
|
66
|
+
![reactive-bulma, bulma dependency][badge-dependency-bulma]
|
|
67
|
+
![reactive-bulma, typescript dependency][badge-dependency-typescript]
|
|
68
|
+
![reactive-bulma, rollup dependency][badge-dependency-rollup]
|
|
69
|
+
![reactive-bulma, semantic-release dependency][badge-dependency-semantic-release]
|
|
70
|
+
![reactive-bulma, jest dependency][badge-dependency-jest]
|
|
71
|
+
![reactive-bulma, prettier dependency][badge-dependency-prettier]
|
|
72
|
+
![reactive-bulma, eslint dependency][badge-dependency-eslint]
|
|
73
|
+
![reactive-bulma, husky dependency][badge-dependency-husky]
|
|
74
|
+
![reactive-bulma, babel dependency][badge-dependency-babel]
|
|
75
|
+
|
|
76
|
+
[badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
|
|
77
|
+
[badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
|
|
78
|
+
[badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
|
|
79
|
+
[badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
|
|
80
|
+
[badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
|
|
81
|
+
[badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
|
|
82
|
+
[badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
|
|
83
|
+
[badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
|
|
84
|
+
[badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
|
|
85
|
+
[badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
|
|
86
|
+
|
|
87
|
+
## Quick start
|
|
88
|
+
|
|
89
|
+
Several quick start options are available:
|
|
90
|
+
|
|
91
|
+
- Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`
|
|
92
|
+
- Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
|
|
93
|
+
- Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=18` to install packages.
|
|
27
94
|
|
|
28
95
|
## Folder structure
|
|
29
|
-
|
|
96
|
+
|
|
97
|
+
In case you have cloned the repo, it will show you the following folders:
|
|
30
98
|
- `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
|
|
31
99
|
- `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
|
|
32
100
|
- `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
|
|
33
101
|
- `src:`
|
|
34
102
|
- `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/) (`atoms` -> `molecules` -> `organisms`).
|
|
35
103
|
|
|
104
|
+
## Documentation
|
|
105
|
+
|
|
106
|
+
Reactive bulma's documentation, included in this repo in the root directory, is built with [Storybook](https://storybook.js.org/) and publicly hosted on `Netlify` at <https://reactivebulma.netlify.app/>. The docs may also be run locally.
|
|
107
|
+
|
|
108
|
+
### Running documentation locally
|
|
109
|
+
- Go to `reactive-bulma` folder (where you cloned the repo before).
|
|
110
|
+
- Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
|
|
111
|
+
- Run `npm start`.
|
|
112
|
+
- Wait until a new tab opens with url <http://localhost:6006/> in your browser.
|
|
113
|
+
|
|
114
|
+
Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
|
|
115
|
+
|
|
116
|
+
## Usage
|
|
117
|
+
```jsx
|
|
118
|
+
import React from 'react'
|
|
119
|
+
import { Button } from 'reactive-bulma'
|
|
120
|
+
|
|
121
|
+
const App = () => (
|
|
122
|
+
<Button text="This is a test" />
|
|
123
|
+
);
|
|
124
|
+
```
|
|
125
|
+
To see all component's variants and its code snippets, go to [Documentation](#documentation) section
|
|
126
|
+
|
|
36
127
|
## Versioning
|
|
37
|
-
|
|
128
|
+
|
|
129
|
+
After investigating [semantic-release documentation](https://semantic-release.gitbook.io/semantic-release/) (reffer to [#3](https://github.com/NicolasOmar/reactive-bulma/issues/3)) and having a problematic implementation, I decided to change version meaning for this project with the following:
|
|
38
130
|
- Major versions (`1.0.0`, `2.0.0` and beyond) will reffer to milestones/version achievement.
|
|
39
131
|
- Minor versions (`1.1.0`, `1.2.0` and so on) will reffer to branch/story completition.
|
|
40
132
|
- Patch versions (`1.0.1`, `1.0.2` and so on) will reffer to bugfixes only.
|
|
41
133
|
|
|
42
|
-
|
|
134
|
+
In case you are interested in check current project's status, you can go to [Roadmap](#roadmap) section.
|
|
135
|
+
|
|
136
|
+
### Branching
|
|
137
|
+
|
|
138
|
+
Giving the mentioned release logic, `main` is the only static branch, and each developed feature or fix will have an unique branch with its PR and a merge commit following [semantic versioning](https://semver.org/) and [semantic commits](https://github.com/semantic-release/semantic-release#commit-message-format) specifications.
|
|
139
|
+
|
|
140
|
+
## Roadmap
|
|
43
141
|
|
|
44
|
-
|
|
45
|
-
I will maintain only one deployable site based on [Storybook](https://storybook.js.org/) with automated [Netlify](https://netlify.com/) deployments with each push to `main` branch. The mentioned site is on section `Find out more` -> `Storybook site`.
|
|
142
|
+
Having in mind the [versioning section](#versioning), repo's status in a glance can be observed in this table.
|
|
46
143
|
|
|
47
|
-
|
|
48
|
-
|
|
|
49
|
-
|
|
|
50
|
-
|
|
|
144
|
+
| Version | Progress | Open issues | Closed issues
|
|
145
|
+
| :---: | :---: | :---: | :---: |
|
|
146
|
+
| `v1.0.0` | ![reactive-bulma, v1.0.0, progress][badge-progress-100] | ![reactive-bulma, v1.0.0, open issues][badge-issues-open-100] | ![reactive-bulma, v1.0.0, closed issues][badge-issues-closed-100] |
|
|
147
|
+
| `v2.0.0` | ![reactive-bulma, v2.0.0, progress][badge-progress-200] | ![reactive-bulma, v2.0.0, open issues][badge-issues-open-200] | ![reactive-bulma, v2.0.0, closed issues][badge-issues-closed-200] |
|
|
148
|
+
| `v3.0.0` | ![reactive-bulma, v3.0.0, progress][badge-progress-300] | ![reactive-bulma, v3.0.0, open issues][badge-issues-open-300] | ![reactive-bulma, v3.0.0, closed issues][badge-issues-closed-300] |
|
|
149
|
+
| `v4.0.0` | ![reactive-bulma, v4.0.0, progress][badge-progress-400] | ![reactive-bulma, v4.0.0, open issues][badge-issues-open-400] | ![reactive-bulma, v4.0.0, closed issues][badge-issues-closed-400] |
|
|
150
|
+
|
|
151
|
+
[badge-progress-100]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/1?label=%20&style=flat
|
|
152
|
+
[badge-issues-open-100]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/1?label=%20&style=flat
|
|
153
|
+
[badge-issues-closed-100]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/1?label=%20&style=flat
|
|
154
|
+
[badge-progress-200]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/2?label=%20&style=flat
|
|
155
|
+
[badge-issues-open-200]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/2?label=%20&style=flat
|
|
156
|
+
[badge-issues-closed-200]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/2?label=%20&style=flat
|
|
157
|
+
[badge-progress-300]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/3?label=%20&style=flat
|
|
158
|
+
[badge-issues-open-300]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/3?label=%20&style=flat
|
|
159
|
+
[badge-issues-closed-300]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/3?label=%20&style=flat
|
|
160
|
+
[badge-progress-400]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/4?label=%20&style=flat
|
|
161
|
+
[badge-issues-open-400]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/4?label=%20&style=flat
|
|
162
|
+
[badge-issues-closed-400]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/4?label=%20&style=flat
|
|
163
|
+
|
|
164
|
+
In case you want the short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
|
|
165
|
+
|
|
166
|
+
In case you want the detailed list of current and future features, go to the [roadmap document](https://docs.google.com/document/d/1kWX-dDTD-cQUeB_Vbu0K6xRvtHaSA38h76yQnhiCe9U).
|
|
167
|
+
|
|
168
|
+
## Changelog
|
|
169
|
+
|
|
170
|
+
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.
|
|
171
|
+
|
|
172
|
+
## Credit
|
|
173
|
+
|
|
174
|
+
Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)
|
|
51
175
|
|
|
52
176
|
## License
|
|
53
|
-
|
|
177
|
+
|
|
178
|
+
Code released under the [MIT License](https://github.com/nicolasomar/reactive-bulma/blob/main/LICENSE).
|
package/dist/cjs/index.js
CHANGED
|
@@ -2840,7 +2840,20 @@ function requireReact_development () {
|
|
|
2840
2840
|
|
|
2841
2841
|
var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
|
|
2842
2842
|
|
|
2843
|
+
/**
|
|
2844
|
+
*
|
|
2845
|
+
* @param { Array<string | null> } _classes Required. Array of classNames on `string` (or `null`) values
|
|
2846
|
+
* @returns { string } A single string product of merge all classNames, separated by spaces
|
|
2847
|
+
*/
|
|
2843
2848
|
const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
|
|
2849
|
+
/**
|
|
2850
|
+
*
|
|
2851
|
+
* @param { ParseTestIdProps } config Configuration of tag, parsedClasses and tag
|
|
2852
|
+
* @param { string } config.tag Required. Component tag used between to build the final testId string.
|
|
2853
|
+
* @param { string } config.parsedClasses Required. A single string of previously parsed classes what will be joined with `tag` property.
|
|
2854
|
+
* @param { string } config.separator Optional. `''` by default. Will replace final string empty spaces with a configurable string.
|
|
2855
|
+
* @returns A single string product of merge all classNames, separated by `separator` value
|
|
2856
|
+
*/
|
|
2844
2857
|
const parseTestId = (config) => `test-${config.tag}${config.parsedClasses
|
|
2845
2858
|
.replace(`${config.tag}`, '')
|
|
2846
2859
|
.replace(/is-/gm, '-')
|