reactive-bulma 1.17.0 → 1.18.0

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/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2022 Nicolás Omar González Passerino
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2022 Nicolás Omar González Passerino
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,193 +1,193 @@
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>
7
-
8
- <h1 align="center">Reactive Bulma</h1>
9
-
10
- <div align="center">
11
-
12
- Component library based on React, Bulma, Typescript and Rollup
13
-
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
- ![Npm Version][badge-npm-version]
33
- ![Npm Bundle Size][badge-npm-size]
34
- [![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
35
- [![Netlify Status][badge-netlify-status]][link-netlify-status]
36
- [![Code Coverage][badge-code-coverage]][link-code-coverage]
37
- [![Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
38
- [![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
39
- [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
40
- [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
41
- [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
42
- ![GitHub Repo stars][badge-github-repo-stars]
43
- ![GitHub commit activity][badge-github-commits]
44
- ![GitHub last commit][badge-github-last-commit]
45
- [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
46
-
47
- [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
48
- [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
49
- [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
50
- [link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
51
- [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
52
- [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
53
- [badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
54
- [link-code-coverage]: https://app.codecov.io/gh/NicolasOmar/reactive-bulma
55
- [badge-soundcloud-quality]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status
56
- [badge-soundcloud-maintanibility]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating
57
- [badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
58
- [badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
59
- [link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
60
- [badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
61
- [link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
62
- [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
63
- [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
64
- [badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
65
- [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
66
- [link-semantic-commits]: https://github.com/semantic-release/semantic-release
67
-
68
- ## Dependencies
69
-
70
- ![react dependency][badge-dependency-react]
71
- ![bulma dependency][badge-dependency-bulma]
72
- ![material design dependency][badge-dependency-material-design]
73
- ![typescript dependency][badge-dependency-typescript]
74
- ![rollup dependency][badge-dependency-rollup]
75
- ![storybook dependency][badge-dependency-storybook]
76
- ![semantic release dependency][badge-dependency-semantic-release]
77
- ![babel dependency][badge-dependency-babel]
78
- ![jest dependency][badge-dependency-jest]
79
- ![react testing library dependency][badge-dependency-react-testing]
80
- ![prettier dependency][badge-dependency-prettier]
81
- ![eslint dependency][badge-dependency-eslint]
82
- ![husky dependency][badge-dependency-husky]
83
-
84
- [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
85
- [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
86
- [badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
87
- [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
88
- [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
89
- [badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
90
- [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
91
- [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
92
- [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
93
- [badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
94
- [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
95
- [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
96
- [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
97
-
98
- ## Quick start
99
-
100
- Several quick start options are available:
101
-
102
- - Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`
103
- - Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
104
- - Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=18` to install packages.
105
-
106
- ## Folder structure
107
-
108
- In case you have cloned the repo, it will show you the following folders:
109
- - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
110
- - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
111
- - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
112
- - `src:`
113
- - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
114
- - `atoms` (from `v1.0.0`).
115
- - `molecules` (from `v2.0.0`).
116
- - `organisms` (from `v3.0.0`).
117
-
118
- ## Documentation
119
-
120
- 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.
121
-
122
- ### Running documentation locally
123
- - Go to `reactive-bulma` folder (where you cloned the repo before).
124
- - Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
125
- - Run `npm start`.
126
- - Wait until a new tab opens with url <http://localhost:6006/> in your browser.
127
- - In case you want to initiate it on the background, you can run `npm run start:off`.
128
-
129
- Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
130
-
131
- ## Usage
132
- ```jsx
133
- import React from 'react'
134
- import { Button } from 'reactive-bulma'
135
-
136
- const App = () => (
137
- <Button text="This is a test" />
138
- );
139
- ```
140
- To see all component's variants and its code snippets, go to [Documentation](#documentation) section
141
-
142
- ## Versioning
143
-
144
- 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:
145
- - Major versions (`1.0.0`, `2.0.0` and beyond) will reffer to milestones/version achievement.
146
- - Minor versions (`1.1.0`, `1.2.0` and so on) will reffer to branch/story completition.
147
- - Patch versions (`1.0.1`, `1.0.2` and so on) will reffer to bugfixes only.
148
-
149
- In case you are interested in check current project's status, you can go to [Roadmap](#roadmap) section.
150
-
151
- ### Branching
152
-
153
- 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.
154
-
155
- ## Roadmap
156
-
157
- Having in mind the [versioning section](#versioning), repo's status in a glance can be observed in this table.
158
-
159
- | Version | Progress | Open issues | Closed issues
160
- | :---: | :---: | :---: | :---: |
161
- | `v1.0.0` | ![v1.0.0, progress][badge-progress-100] | ![v1.0.0, open][badge-issues-open-100] | ![v1.0.0, closed][badge-issues-closed-100] |
162
- | `v2.0.0` | ![v2.0.0, progress][badge-progress-200] | ![v2.0.0, open][badge-issues-open-200] | ![v2.0.0, closed][badge-issues-closed-200] |
163
- | `v3.0.0` | ![v3.0.0, progress][badge-progress-300] | ![v3.0.0, open][badge-issues-open-300] | ![v3.0.0, closed][badge-issues-closed-300] |
164
- | `v4.0.0` | ![v4.0.0, progress][badge-progress-400] | ![v4.0.0, open][badge-issues-open-400] | ![v4.0.0, closed][badge-issues-closed-400] |
165
-
166
- [badge-progress-100]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=informational
167
- [badge-issues-open-100]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=orange
168
- [badge-issues-closed-100]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=success
169
- [badge-progress-200]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=informational
170
- [badge-issues-open-200]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=orange
171
- [badge-issues-closed-200]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=success
172
- [badge-progress-300]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=informational
173
- [badge-issues-open-300]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=orange
174
- [badge-issues-closed-300]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=success
175
- [badge-progress-400]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=informational
176
- [badge-issues-open-400]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=orange
177
- [badge-issues-closed-400]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=success
178
-
179
- In case you want the short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
180
-
181
- 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).
182
-
183
- ## Changelog
184
-
185
- 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.
186
-
187
- ## Credit
188
-
189
- Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)
190
-
191
- ## License
192
-
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>
7
+
8
+ <h1 align="center">Reactive Bulma</h1>
9
+
10
+ <div align="center">
11
+
12
+ Component library based on React, Bulma, Typescript and Rollup
13
+
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
+ ![Npm Version][badge-npm-version]
33
+ ![Npm Bundle Size][badge-npm-size]
34
+ [![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
35
+ [![Netlify Status][badge-netlify-status]][link-netlify-status]
36
+ [![Code Coverage][badge-code-coverage]][link-code-coverage]
37
+ [![Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
38
+ [![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
39
+ [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
40
+ [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
41
+ [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
42
+ ![GitHub Repo stars][badge-github-repo-stars]
43
+ ![GitHub commit activity][badge-github-commits]
44
+ ![GitHub last commit][badge-github-last-commit]
45
+ [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
46
+
47
+ [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
48
+ [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
49
+ [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
50
+ [link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
51
+ [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
52
+ [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
53
+ [badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
54
+ [link-code-coverage]: https://app.codecov.io/gh/NicolasOmar/reactive-bulma
55
+ [badge-soundcloud-quality]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status
56
+ [badge-soundcloud-maintanibility]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating
57
+ [badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
58
+ [badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
59
+ [link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
60
+ [badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
61
+ [link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
62
+ [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
63
+ [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
64
+ [badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
65
+ [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
66
+ [link-semantic-commits]: https://github.com/semantic-release/semantic-release
67
+
68
+ ## Dependencies
69
+
70
+ ![react dependency][badge-dependency-react]
71
+ ![bulma dependency][badge-dependency-bulma]
72
+ ![material design dependency][badge-dependency-material-design]
73
+ ![typescript dependency][badge-dependency-typescript]
74
+ ![rollup dependency][badge-dependency-rollup]
75
+ ![storybook dependency][badge-dependency-storybook]
76
+ ![semantic release dependency][badge-dependency-semantic-release]
77
+ ![babel dependency][badge-dependency-babel]
78
+ ![jest dependency][badge-dependency-jest]
79
+ ![react testing library dependency][badge-dependency-react-testing]
80
+ ![prettier dependency][badge-dependency-prettier]
81
+ ![eslint dependency][badge-dependency-eslint]
82
+ ![husky dependency][badge-dependency-husky]
83
+
84
+ [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
85
+ [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
86
+ [badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
87
+ [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
88
+ [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
89
+ [badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
90
+ [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
91
+ [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
92
+ [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
93
+ [badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
94
+ [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
95
+ [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
96
+ [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
97
+
98
+ ## Quick start
99
+
100
+ Several quick start options are available:
101
+
102
+ - Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`
103
+ - Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
104
+ - Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=18` to install packages.
105
+
106
+ ## Folder structure
107
+
108
+ In case you have cloned the repo, it will show you the following folders:
109
+ - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
110
+ - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
111
+ - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
112
+ - `src:`
113
+ - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
114
+ - `atoms` (from `v1.0.0`).
115
+ - `molecules` (from `v2.0.0`).
116
+ - `organisms` (from `v3.0.0`).
117
+
118
+ ## Documentation
119
+
120
+ 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.
121
+
122
+ ### Running documentation locally
123
+ - Go to `reactive-bulma` folder (where you cloned the repo before).
124
+ - Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
125
+ - Run `npm start`.
126
+ - Wait until a new tab opens with url <http://localhost:6006/> in your browser.
127
+ - In case you want to initiate it on the background, you can run `npm run start:cli`.
128
+
129
+ Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
130
+
131
+ ## Usage
132
+ ```jsx
133
+ import React from 'react'
134
+ import { Button } from 'reactive-bulma'
135
+
136
+ const App = () => (
137
+ <Button text="This is a test" />
138
+ );
139
+ ```
140
+ To see all component's variants and its code snippets, go to [Documentation](#documentation) section
141
+
142
+ ## Versioning
143
+
144
+ 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:
145
+ - Major versions (`1.0.0`, `2.0.0` and beyond) will reffer to milestones/version achievement.
146
+ - Minor versions (`1.1.0`, `1.2.0` and so on) will reffer to branch/story completition.
147
+ - Patch versions (`1.0.1`, `1.0.2` and so on) will reffer to bugfixes only.
148
+
149
+ In case you are interested in check current project's status, you can go to [Roadmap](#roadmap) section.
150
+
151
+ ### Branching
152
+
153
+ 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.
154
+
155
+ ## Roadmap
156
+
157
+ Having in mind the [versioning section](#versioning), repo's status in a glance can be observed in this table.
158
+
159
+ | Version | Progress | Open issues | Closed issues
160
+ | :---: | :---: | :---: | :---: |
161
+ | `v1.0.0` | ![v1.0.0, progress][badge-progress-100] | ![v1.0.0, open][badge-issues-open-100] | ![v1.0.0, closed][badge-issues-closed-100] |
162
+ | `v2.0.0` | ![v2.0.0, progress][badge-progress-200] | ![v2.0.0, open][badge-issues-open-200] | ![v2.0.0, closed][badge-issues-closed-200] |
163
+ | `v3.0.0` | ![v3.0.0, progress][badge-progress-300] | ![v3.0.0, open][badge-issues-open-300] | ![v3.0.0, closed][badge-issues-closed-300] |
164
+ | `v4.0.0` | ![v4.0.0, progress][badge-progress-400] | ![v4.0.0, open][badge-issues-open-400] | ![v4.0.0, closed][badge-issues-closed-400] |
165
+
166
+ [badge-progress-100]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=informational
167
+ [badge-issues-open-100]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=orange
168
+ [badge-issues-closed-100]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=success
169
+ [badge-progress-200]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=informational
170
+ [badge-issues-open-200]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=orange
171
+ [badge-issues-closed-200]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=success
172
+ [badge-progress-300]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=informational
173
+ [badge-issues-open-300]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=orange
174
+ [badge-issues-closed-300]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=success
175
+ [badge-progress-400]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=informational
176
+ [badge-issues-open-400]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=orange
177
+ [badge-issues-closed-400]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=success
178
+
179
+ In case you want the short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
180
+
181
+ 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).
182
+
183
+ ## Changelog
184
+
185
+ 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.
186
+
187
+ ## Credit
188
+
189
+ Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)
190
+
191
+ ## License
192
+
193
193
  Code released under the [MIT License](https://github.com/nicolasomar/reactive-bulma/blob/main/LICENSE).
package/dist/cjs/index.js CHANGED
@@ -3047,6 +3047,24 @@ const Delete = ({ testId = null, style = null, size = null, onClick = null }) =>
3047
3047
  return (React.createElement("button", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: deleteClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
3048
3048
  };
3049
3049
 
3050
+ const Select = ({ testId = null, showOptions = 1, options = [], isMultiple = false, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null }) => {
3051
+ const selectClasses = parseClasses([
3052
+ 'select',
3053
+ color,
3054
+ size,
3055
+ isMultiple ? 'is-multiple' : null,
3056
+ isRounded ? 'is-rounded' : null,
3057
+ isHovered ? 'is-hovered' : null,
3058
+ isFocused ? 'is-focused' : null
3059
+ ]);
3060
+ const selectTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3061
+ tag: 'select',
3062
+ parsedClasses: selectClasses
3063
+ });
3064
+ return (React.createElement("section", { "data-testid": `${selectTestId}-container`, className: selectClasses },
3065
+ React.createElement("select", { multiple: isMultiple, size: showOptions, "data-testid": selectTestId }, 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))))));
3066
+ };
3067
+
3050
3068
  exports.Block = Block;
3051
3069
  exports.Box = Box;
3052
3070
  exports.Button = Button;
@@ -3055,6 +3073,7 @@ exports.Delete = Delete;
3055
3073
  exports.Icon = Icon;
3056
3074
  exports.Input = Input;
3057
3075
  exports.ProgressBar = ProgressBar;
3076
+ exports.Select = Select;
3058
3077
  exports.Tag = Tag;
3059
3078
  exports.TextArea = TextArea;
3060
3079
  exports.Title = Title;