reactive-bulma 1.10.0 → 1.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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, '-')
|