reactive-bulma 1.19.0 → 1.20.0

Sign up to get free protection for your applications and to get access to all the features.
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,197 +1,197 @@
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
- - [Purpose](#purpose)
20
- - [Dependencies](#dependencies)
21
- - [Quick start](#quick-start)
22
- - [Folder structure](#folder-structure)
23
- - [Documentation](#documentation)
24
- - [Usage](#usage)
25
- - [Versioning](#versioning)
26
- - [Roadmap](#roadmap)
27
- - [Changelog](#changelog)
28
- - [Credit](#credit)
29
- - [License](#license)
30
-
31
- ## Purpose
32
- 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.
33
-
34
- ## Status
35
-
36
- ![Npm Version][badge-npm-version]
37
- ![Npm Bundle Size][badge-npm-size]
38
- [![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
39
- [![Netlify Status][badge-netlify-status]][link-netlify-status]
40
- [![Code Coverage][badge-code-coverage]][link-code-coverage]
41
- [![Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
42
- [![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
43
- [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
44
- [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
45
- [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
46
- ![GitHub Repo stars][badge-github-repo-stars]
47
- ![GitHub commit activity][badge-github-commits]
48
- ![GitHub last commit][badge-github-last-commit]
49
- [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
50
-
51
- [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
52
- [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
53
- [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
54
- [link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
55
- [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
56
- [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
57
- [badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
58
- [link-code-coverage]: https://app.codecov.io/gh/NicolasOmar/reactive-bulma
59
- [badge-soundcloud-quality]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status
60
- [badge-soundcloud-maintanibility]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating
61
- [badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
62
- [badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
63
- [link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
64
- [badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
65
- [link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
66
- [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
67
- [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
68
- [badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
69
- [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
70
- [link-semantic-commits]: https://github.com/semantic-release/semantic-release
71
-
72
- ## Dependencies
73
-
74
- ![react dependency][badge-dependency-react]
75
- ![bulma dependency][badge-dependency-bulma]
76
- ![material design dependency][badge-dependency-material-design]
77
- ![typescript dependency][badge-dependency-typescript]
78
- ![rollup dependency][badge-dependency-rollup]
79
- ![storybook dependency][badge-dependency-storybook]
80
- ![semantic release dependency][badge-dependency-semantic-release]
81
- ![babel dependency][badge-dependency-babel]
82
- ![jest dependency][badge-dependency-jest]
83
- ![react testing library dependency][badge-dependency-react-testing]
84
- ![prettier dependency][badge-dependency-prettier]
85
- ![eslint dependency][badge-dependency-eslint]
86
- ![husky dependency][badge-dependency-husky]
87
-
88
- [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
89
- [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
90
- [badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
91
- [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
92
- [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
93
- [badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
94
- [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
95
- [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
96
- [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
97
- [badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
98
- [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
99
- [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
100
- [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
101
-
102
- ## Quick start
103
-
104
- Several quick start options are available:
105
-
106
- - Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`
107
- - Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
108
- - Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=18` to install packages.
109
-
110
- ## Folder structure
111
-
112
- In case you have cloned the repo, it will show you the following folders:
113
- - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
114
- - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
115
- - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
116
- - `src:`
117
- - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
118
- - `atoms` (from `v1.0.0`).
119
- - `molecules` (from `v2.0.0`).
120
- - `organisms` (from `v3.0.0`).
121
-
122
- ## Documentation
123
-
124
- 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.
125
-
126
- ### Running documentation locally
127
- - Go to `reactive-bulma` folder (where you cloned the repo before).
128
- - Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
129
- - Run `npm start`.
130
- - Wait until a new tab opens with url <http://localhost:6006/> in your browser.
131
- - In case you want to initiate it on the background, you can run `npm run start:cli`.
132
-
133
- Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
134
-
135
- ## Usage
136
- ```jsx
137
- import React from 'react'
138
- import { Button } from 'reactive-bulma'
139
-
140
- const App = () => (
141
- <Button text="This is a test" />
142
- );
143
- ```
144
- To see all component's variants and its code snippets, go to [Documentation](#documentation) section
145
-
146
- ## Versioning
147
-
148
- 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:
149
- - Major versions (`1.0.0`, `2.0.0` and beyond) will reffer to milestones/version achievement.
150
- - Minor versions (`1.1.0`, `1.2.0` and so on) will reffer to branch/story completition.
151
- - Patch versions (`1.0.1`, `1.0.2` and so on) will reffer to bugfixes only.
152
-
153
- In case you are interested in check current project's status, you can go to [Roadmap](#roadmap) section.
154
-
155
- ### Branching
156
-
157
- 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.
158
-
159
- ## Roadmap
160
-
161
- Having in mind the [versioning section](#versioning), repo's status in a glance can be observed in this table.
162
-
163
- | Version | Progress | Open issues | Closed issues
164
- | :---: | :---: | :---: | :---: |
165
- | `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] |
166
- | `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] |
167
- | `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] |
168
- | `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] |
169
-
170
- [badge-progress-100]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=informational
171
- [badge-issues-open-100]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=orange
172
- [badge-issues-closed-100]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=success
173
- [badge-progress-200]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=informational
174
- [badge-issues-open-200]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=orange
175
- [badge-issues-closed-200]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=success
176
- [badge-progress-300]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=informational
177
- [badge-issues-open-300]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=orange
178
- [badge-issues-closed-300]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=success
179
- [badge-progress-400]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=informational
180
- [badge-issues-open-400]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=orange
181
- [badge-issues-closed-400]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=success
182
-
183
- In case you want the short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
184
-
185
- 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).
186
-
187
- ## Changelog
188
-
189
- 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.
190
-
191
- ## Credit
192
-
193
- Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)
194
-
195
- ## License
196
-
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
+ - [Purpose](#purpose)
20
+ - [Dependencies](#dependencies)
21
+ - [Quick start](#quick-start)
22
+ - [Folder structure](#folder-structure)
23
+ - [Documentation](#documentation)
24
+ - [Usage](#usage)
25
+ - [Versioning](#versioning)
26
+ - [Roadmap](#roadmap)
27
+ - [Changelog](#changelog)
28
+ - [Credit](#credit)
29
+ - [License](#license)
30
+
31
+ ## Purpose
32
+ 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.
33
+
34
+ ## Status
35
+
36
+ ![Npm Version][badge-npm-version]
37
+ ![Npm Bundle Size][badge-npm-size]
38
+ [![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
39
+ [![Netlify Status][badge-netlify-status]][link-netlify-status]
40
+ [![Code Coverage][badge-code-coverage]][link-code-coverage]
41
+ [![Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
42
+ [![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
43
+ [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
44
+ [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
45
+ [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
46
+ ![GitHub Repo stars][badge-github-repo-stars]
47
+ ![GitHub commit activity][badge-github-commits]
48
+ ![GitHub last commit][badge-github-last-commit]
49
+ [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
50
+
51
+ [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
52
+ [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
53
+ [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
54
+ [link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
55
+ [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
56
+ [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
57
+ [badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
58
+ [link-code-coverage]: https://app.codecov.io/gh/NicolasOmar/reactive-bulma
59
+ [badge-soundcloud-quality]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status
60
+ [badge-soundcloud-maintanibility]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating
61
+ [badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
62
+ [badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
63
+ [link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
64
+ [badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
65
+ [link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
66
+ [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
67
+ [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
68
+ [badge-github-last-commit]: https://img.shields.io/github/last-commit/nicolasomar/reactive-bulma?logo=github
69
+ [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
70
+ [link-semantic-commits]: https://github.com/semantic-release/semantic-release
71
+
72
+ ## Dependencies
73
+
74
+ ![react dependency][badge-dependency-react]
75
+ ![bulma dependency][badge-dependency-bulma]
76
+ ![material design dependency][badge-dependency-material-design]
77
+ ![typescript dependency][badge-dependency-typescript]
78
+ ![rollup dependency][badge-dependency-rollup]
79
+ ![storybook dependency][badge-dependency-storybook]
80
+ ![semantic release dependency][badge-dependency-semantic-release]
81
+ ![babel dependency][badge-dependency-babel]
82
+ ![jest dependency][badge-dependency-jest]
83
+ ![react testing library dependency][badge-dependency-react-testing]
84
+ ![prettier dependency][badge-dependency-prettier]
85
+ ![eslint dependency][badge-dependency-eslint]
86
+ ![husky dependency][badge-dependency-husky]
87
+
88
+ [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
89
+ [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
90
+ [badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
91
+ [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
92
+ [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
93
+ [badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
94
+ [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
95
+ [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
96
+ [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
97
+ [badge-dependency-react-testing]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@testing-library/react/main?logo=testing-library
98
+ [badge-dependency-prettier]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/prettier/main?logo=prettier
99
+ [badge-dependency-eslint]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/eslint/main?logo=eslint
100
+ [badge-dependency-husky]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/husky/main?logo=husky
101
+
102
+ ## Quick start
103
+
104
+ Several quick start options are available:
105
+
106
+ - Clone the repo: `git clone https://github.com/NicolasOmar/reactive-bulma.git`
107
+ - Install with [npm](https://www.npmjs.com/package/reactive-bulma): `npm install reactive-bulma@latest`
108
+ - Before cloning this repo, I recommend installing [Node](https://nodejs.org/en/download/) `>=18` to install packages.
109
+
110
+ ## Folder structure
111
+
112
+ In case you have cloned the repo, it will show you the following folders:
113
+ - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
114
+ - `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
115
+ - `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
116
+ - `src:`
117
+ - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
118
+ - `atoms` (from `v1.0.0`).
119
+ - `molecules` (from `v2.0.0`).
120
+ - `organisms` (from `v3.0.0`).
121
+
122
+ ## Documentation
123
+
124
+ 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.
125
+
126
+ ### Running documentation locally
127
+ - Go to `reactive-bulma` folder (where you cloned the repo before).
128
+ - Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
129
+ - Run `npm start`.
130
+ - Wait until a new tab opens with url <http://localhost:6006/> in your browser.
131
+ - In case you want to initiate it on the background, you can run `npm run start:cli`.
132
+
133
+ Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
134
+
135
+ ## Usage
136
+ ```jsx
137
+ import React from 'react'
138
+ import { Button } from 'reactive-bulma'
139
+
140
+ const App = () => (
141
+ <Button text="This is a test" />
142
+ );
143
+ ```
144
+ To see all component's variants and its code snippets, go to [Documentation](#documentation) section
145
+
146
+ ## Versioning
147
+
148
+ 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:
149
+ - Major versions (`1.0.0`, `2.0.0` and beyond) will reffer to milestones/version achievement.
150
+ - Minor versions (`1.1.0`, `1.2.0` and so on) will reffer to branch/story completition.
151
+ - Patch versions (`1.0.1`, `1.0.2` and so on) will reffer to bugfixes only.
152
+
153
+ In case you are interested in check current project's status, you can go to [Roadmap](#roadmap) section.
154
+
155
+ ### Branching
156
+
157
+ 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.
158
+
159
+ ## Roadmap
160
+
161
+ Having in mind the [versioning section](#versioning), repo's status in a glance can be observed in this table.
162
+
163
+ | Version | Progress | Open issues | Closed issues
164
+ | :---: | :---: | :---: | :---: |
165
+ | `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] |
166
+ | `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] |
167
+ | `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] |
168
+ | `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] |
169
+
170
+ [badge-progress-100]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=informational
171
+ [badge-issues-open-100]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=orange
172
+ [badge-issues-closed-100]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/1?label=%20&style=flat&color=success
173
+ [badge-progress-200]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=informational
174
+ [badge-issues-open-200]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=orange
175
+ [badge-issues-closed-200]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/2?label=%20&style=flat&color=success
176
+ [badge-progress-300]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=informational
177
+ [badge-issues-open-300]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=orange
178
+ [badge-issues-closed-300]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/3?label=%20&style=flat&color=success
179
+ [badge-progress-400]: https://img.shields.io/github/milestones/progress-percent/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=informational
180
+ [badge-issues-open-400]: https://img.shields.io/github/milestones/issues-open/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=orange
181
+ [badge-issues-closed-400]: https://img.shields.io/github/milestones/issues-closed/nicolasomar/reactive-bulma/4?label=%20&style=flat&color=success
182
+
183
+ In case you want the short-term status, go to the [project board](https://github.com/users/NicolasOmar/projects/3) (powered by `GitHub Projects`).
184
+
185
+ 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).
186
+
187
+ ## Changelog
188
+
189
+ 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.
190
+
191
+ ## Credit
192
+
193
+ Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)
194
+
195
+ ## License
196
+
197
197
  Code released under the [MIT License](https://github.com/nicolasomar/reactive-bulma/blob/main/LICENSE).
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { CheckboxProps } from '../../../interfaces/atomProps';
3
+ declare const Checkbox: React.FC<CheckboxProps>;
4
+ export default Checkbox;
@@ -121,4 +121,9 @@ export interface FileProps extends BasicProps {
121
121
  size?: basicSizeType;
122
122
  onClick?: () => void;
123
123
  }
124
+ export interface CheckboxProps extends BasicProps {
125
+ content?: string | React.ReactElement;
126
+ isDisabled?: boolean;
127
+ onChange?: () => void;
128
+ }
124
129
  export {};
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { CheckboxProps } from '../../../interfaces/atomProps';
3
+ declare const Checkbox: React.FC<CheckboxProps>;
4
+ export default Checkbox;
@@ -121,4 +121,9 @@ export interface FileProps extends BasicProps {
121
121
  size?: basicSizeType;
122
122
  onClick?: () => void;
123
123
  }
124
+ export interface CheckboxProps extends BasicProps {
125
+ content?: string | React.ReactElement;
126
+ isDisabled?: boolean;
127
+ onChange?: () => void;
128
+ }
124
129
  export {};
package/package.json CHANGED
@@ -1,106 +1,106 @@
1
- {
2
- "name": "reactive-bulma",
3
- "version": "1.19.0",
4
- "description": "A typescript-react-based component library based on bulma",
5
- "keywords": [
6
- "typescript",
7
- "react",
8
- "bulma",
9
- "rollup",
10
- "semantic-release",
11
- "jest",
12
- "prettier",
13
- "eslint",
14
- "husky",
15
- "component-library"
16
- ],
17
- "author": "Nicolás Omar González Passerino",
18
- "license": "MIT",
19
- "homepage": "https://github.com/NicolasOmar/reactive-bulma#readme",
20
- "repository": {
21
- "type": "git",
22
- "url": "https://github.com/NicolasOmar/reactive-bulma.git"
23
- },
24
- "bugs": {
25
- "url": "https://github.com/NicolasOmar/reactive-bulma/issues"
26
- },
27
- "main": "dist/cjs/index.js",
28
- "module": "dist/esm/index.js",
29
- "files": [
30
- "dist"
31
- ],
32
- "types": "dist/index.d.ts",
33
- "scripts": {
34
- "start": "storybook dev -p 6006",
35
- "start:cli": "npm start -- --no-open",
36
- "test": "jest --watchAll=false --verbose",
37
- "test:ci": "npm test -- --coverage",
38
- "lint": "eslint src/**/*.tsx",
39
- "prettier": "prettier src/**/*.{tsx,ts} --write",
40
- "lint-staged": "lint-staged -v",
41
- "setup": "npm i && husky install",
42
- "prepare": "npm run build",
43
- "build": "rollup -c --bundleConfigAsCjs",
44
- "build:storybook": "storybook build",
45
- "semantic-release": "semantic-release"
46
- },
47
- "devDependencies": {
48
- "@babel/core": "^7.22.5",
49
- "@babel/preset-env": "^7.22.5",
50
- "@babel/preset-react": "^7.22.5",
51
- "@babel/preset-typescript": "^7.22.5",
52
- "@mdi/font": "^7.2.96",
53
- "@rollup/plugin-commonjs": "^25.0.2",
54
- "@rollup/plugin-node-resolve": "^15.1.0",
55
- "@rollup/plugin-typescript": "^11.1.2",
56
- "@semantic-release/changelog": "^6.0.3",
57
- "@semantic-release/commit-analyzer": "^10.0.1",
58
- "@semantic-release/exec": "^6.0.3",
59
- "@semantic-release/git": "^10.0.1",
60
- "@semantic-release/github": "^9.0.3",
61
- "@semantic-release/npm": "^10.0.4",
62
- "@semantic-release/release-notes-generator": "^11.0.3",
63
- "@storybook/addon-actions": "^7.0.25",
64
- "@storybook/addon-essentials": "^7.0.25",
65
- "@storybook/addon-interactions": "^7.0.25",
66
- "@storybook/addon-links": "^7.0.25",
67
- "@storybook/addon-mdx-gfm": "^7.0.25",
68
- "@storybook/cli": "^7.0.25",
69
- "@storybook/react": "^7.0.25",
70
- "@storybook/react-webpack5": "^7.0.25",
71
- "@storybook/testing-library": "^0.2.0",
72
- "@testing-library/jest-dom": "^5.16.5",
73
- "@testing-library/react": "^14.0.0",
74
- "@types/jest": "^29.5.2",
75
- "@types/react": "^18.2.14",
76
- "@typescript-eslint/eslint-plugin": "^5.60.1",
77
- "@typescript-eslint/parser": "^5.60.1",
78
- "babel-jest": "^29.5.0",
79
- "babel-loader": "^9.1.2",
80
- "bulma": "^0.9.4",
81
- "eslint": "^8.44.0",
82
- "eslint-config-prettier": "^8.8.0",
83
- "eslint-plugin-react": "^7.32.2",
84
- "husky": "^8.0.3",
85
- "jest": "^29.5.0",
86
- "jest-environment-jsdom": "^29.5.0",
87
- "lint-staged": "^13.2.3",
88
- "postcss": "^8.4.24",
89
- "prettier": "^2.8.8",
90
- "react": "^18.2.0",
91
- "react-dom": "^18.2.0",
92
- "rollup": "^3.26.0",
93
- "rollup-plugin-dts": "^5.3.0",
94
- "rollup-plugin-postcss": "^4.0.2",
95
- "semantic-release": "^21.0.6",
96
- "storybook": "^7.0.25",
97
- "tslib": "^2.6.0",
98
- "typescript": "^5.1.6"
99
- },
100
- "lint-staged": {
101
- "src/**/*.(ts|tsx)": [
102
- "prettier --write",
103
- "eslint --fix"
104
- ]
105
- }
106
- }
1
+ {
2
+ "name": "reactive-bulma",
3
+ "version": "1.20.0",
4
+ "description": "A typescript-react-based component library based on bulma",
5
+ "keywords": [
6
+ "typescript",
7
+ "react",
8
+ "bulma",
9
+ "rollup",
10
+ "semantic-release",
11
+ "jest",
12
+ "prettier",
13
+ "eslint",
14
+ "husky",
15
+ "component-library"
16
+ ],
17
+ "author": "Nicolás Omar González Passerino",
18
+ "license": "MIT",
19
+ "homepage": "https://github.com/NicolasOmar/reactive-bulma#readme",
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/NicolasOmar/reactive-bulma.git"
23
+ },
24
+ "bugs": {
25
+ "url": "https://github.com/NicolasOmar/reactive-bulma/issues"
26
+ },
27
+ "main": "dist/cjs/index.js",
28
+ "module": "dist/esm/index.js",
29
+ "files": [
30
+ "dist"
31
+ ],
32
+ "types": "dist/index.d.ts",
33
+ "scripts": {
34
+ "start": "storybook dev -p 6006",
35
+ "start:cli": "npm start -- --no-open",
36
+ "test": "jest --watchAll=false --verbose",
37
+ "test:ci": "npm test -- --coverage",
38
+ "lint": "eslint src/**/*.tsx",
39
+ "prettier": "prettier src/**/*.{tsx,ts} --write",
40
+ "lint-staged": "lint-staged -v",
41
+ "setup": "npm i && husky install",
42
+ "prepare": "npm run build",
43
+ "build": "rollup -c --bundleConfigAsCjs",
44
+ "build:storybook": "storybook build",
45
+ "semantic-release": "semantic-release"
46
+ },
47
+ "devDependencies": {
48
+ "@babel/core": "^7.22.8",
49
+ "@babel/preset-env": "^7.22.7",
50
+ "@babel/preset-react": "^7.22.5",
51
+ "@babel/preset-typescript": "^7.22.5",
52
+ "@mdi/font": "^7.2.96",
53
+ "@rollup/plugin-commonjs": "^25.0.2",
54
+ "@rollup/plugin-node-resolve": "^15.1.0",
55
+ "@rollup/plugin-typescript": "^11.1.2",
56
+ "@semantic-release/changelog": "^6.0.3",
57
+ "@semantic-release/commit-analyzer": "^10.0.1",
58
+ "@semantic-release/exec": "^6.0.3",
59
+ "@semantic-release/git": "^10.0.1",
60
+ "@semantic-release/github": "^9.0.3",
61
+ "@semantic-release/npm": "^10.0.4",
62
+ "@semantic-release/release-notes-generator": "^11.0.4",
63
+ "@storybook/addon-actions": "^7.0.26",
64
+ "@storybook/addon-essentials": "^7.0.26",
65
+ "@storybook/addon-interactions": "^7.0.26",
66
+ "@storybook/addon-links": "^7.0.26",
67
+ "@storybook/addon-mdx-gfm": "^7.0.26",
68
+ "@storybook/cli": "^7.0.26",
69
+ "@storybook/react": "^7.0.26",
70
+ "@storybook/react-webpack5": "^7.0.26",
71
+ "@storybook/testing-library": "^0.2.0",
72
+ "@testing-library/jest-dom": "^5.16.5",
73
+ "@testing-library/react": "^14.0.0",
74
+ "@types/jest": "^29.5.2",
75
+ "@types/react": "^18.2.14",
76
+ "@typescript-eslint/eslint-plugin": "^5.61.0",
77
+ "@typescript-eslint/parser": "^5.61.0",
78
+ "babel-jest": "^29.6.1",
79
+ "babel-loader": "^9.1.3",
80
+ "bulma": "^0.9.4",
81
+ "eslint": "^8.44.0",
82
+ "eslint-config-prettier": "^8.8.0",
83
+ "eslint-plugin-react": "^7.32.2",
84
+ "husky": "^8.0.3",
85
+ "jest": "^29.6.1",
86
+ "jest-environment-jsdom": "^29.6.1",
87
+ "lint-staged": "^13.2.3",
88
+ "postcss": "^8.4.25",
89
+ "prettier": "^3.0.0",
90
+ "react": "^18.2.0",
91
+ "react-dom": "^18.2.0",
92
+ "rollup": "^3.26.2",
93
+ "rollup-plugin-dts": "^5.3.0",
94
+ "rollup-plugin-postcss": "^4.0.2",
95
+ "semantic-release": "^21.0.7",
96
+ "storybook": "^7.0.26",
97
+ "tslib": "^2.6.0",
98
+ "typescript": "^5.1.6"
99
+ },
100
+ "lint-staged": {
101
+ "src/**/*.(ts|tsx)": [
102
+ "prettier --write",
103
+ "eslint --fix"
104
+ ]
105
+ }
106
+ }
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { ButtonProps } from '../../../interfaces/atomProps';
3
- declare const Button: React.FC<ButtonProps>;
4
- export default Button;
@@ -1,38 +0,0 @@
1
- export declare enum columnSiteEnum {
2
- 'is-three-quarters' = 0,
3
- 'is-two-thirds' = 1,
4
- 'is-half' = 2,
5
- 'is-one-third' = 3,
6
- 'is-one-quarter' = 4,
7
- 'is-full' = 5,
8
- 'is-four-fifths' = 6,
9
- 'is-three-fifths' = 7,
10
- 'is-two-fifths' = 8,
11
- 'is-one-fifth' = 9,
12
- 'is-1' = 10,
13
- 'is-2' = 11,
14
- 'is-3' = 12,
15
- 'is-4' = 13,
16
- 'is-5' = 14,
17
- 'is-6' = 15,
18
- 'is-7' = 16,
19
- 'is-8' = 17,
20
- 'is-9' = 18,
21
- 'is-10' = 19,
22
- 'is-11' = 20,
23
- 'is-12' = 21
24
- }
25
- export declare enum columnOffsetEnum {
26
- 'is-offset-1' = 0,
27
- 'is-offset-2' = 1,
28
- 'is-offset-3' = 2,
29
- 'is-offset-4' = 3,
30
- 'is-offset-5' = 4,
31
- 'is-offset-6' = 5,
32
- 'is-offset-7' = 6,
33
- 'is-offset-8' = 7,
34
- 'is-offset-9' = 8,
35
- 'is-offset-10' = 9,
36
- 'is-offset-11' = 10,
37
- 'is-offset-12' = 11
38
- }
@@ -1,3 +0,0 @@
1
- import { ParseTestIdProps } from '../interfaces/functionProps';
2
- export declare const parseClasses: (_classes: Array<string | null>) => string;
3
- export declare const parseTestId: (config: ParseTestIdProps) => string;
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { ButtonProps } from '../../../interfaces/atomProps';
3
- declare const Button: React.FC<ButtonProps>;
4
- export default Button;
@@ -1,38 +0,0 @@
1
- export declare enum columnSiteEnum {
2
- 'is-three-quarters' = 0,
3
- 'is-two-thirds' = 1,
4
- 'is-half' = 2,
5
- 'is-one-third' = 3,
6
- 'is-one-quarter' = 4,
7
- 'is-full' = 5,
8
- 'is-four-fifths' = 6,
9
- 'is-three-fifths' = 7,
10
- 'is-two-fifths' = 8,
11
- 'is-one-fifth' = 9,
12
- 'is-1' = 10,
13
- 'is-2' = 11,
14
- 'is-3' = 12,
15
- 'is-4' = 13,
16
- 'is-5' = 14,
17
- 'is-6' = 15,
18
- 'is-7' = 16,
19
- 'is-8' = 17,
20
- 'is-9' = 18,
21
- 'is-10' = 19,
22
- 'is-11' = 20,
23
- 'is-12' = 21
24
- }
25
- export declare enum columnOffsetEnum {
26
- 'is-offset-1' = 0,
27
- 'is-offset-2' = 1,
28
- 'is-offset-3' = 2,
29
- 'is-offset-4' = 3,
30
- 'is-offset-5' = 4,
31
- 'is-offset-6' = 5,
32
- 'is-offset-7' = 6,
33
- 'is-offset-8' = 7,
34
- 'is-offset-9' = 8,
35
- 'is-offset-10' = 9,
36
- 'is-offset-11' = 10,
37
- 'is-offset-12' = 11
38
- }
@@ -1,3 +0,0 @@
1
- import { ParseTestIdProps } from '../interfaces/functionProps';
2
- export declare const parseClasses: (_classes: Array<string | null>) => string;
3
- export declare const parseTestId: (config: ParseTestIdProps) => string;