Home

Awesome

<p align="center"> <a href="https://reactivebulma.netlify.app"> <img width="75" src="https://cdn.svgporn.com/logos/react.svg"> <img width="50" src="https://cdn.svgporn.com/logos/bulma.svg"> </a> </p> <h1 align="center">Reactive Bulma</h1> <div align="center">

Component library based on React, Bulma, Typescript and Rollup

<div align="left">

Table of contents

Purpose

After studying an Udemy course about Typescript, I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I began 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.

Now I have finished (Jan 31th) the last story related to my proposed roadmap; I will change the repo's objectives to the following:

Status

Npm Version Npm Bundle Size Npm Downloads Netlify Status Code Coverage Quality Gate Status Maintainability Rating Security Rating Technical Debt Known Vulnerabilities GitHub Repo stars GitHub commit activity GitHub last commit Semantic Commits Contributor Covenant

Dependencies

react dependency bulma dependency material design dependency typescript dependency rollup dependency postcss dependency storybook dependency semantic release dependency babel dependency jest dependency react testing library dependency lint-staged dependency prettier dependency eslint dependency husky dependency hygen dependency

Quick start

Several quick start options are available:

Folder structure

In case you have cloned the repo, it will show you the following folders:

Documentation

Reactive bulma's documentation, included in this repo in the root directory, is built with Storybook and publicly hosted on Netlify at https://reactivebulma.netlify.app/. The docs may also be run locally.

Running documentation locally

Learn more about Storybook by reading its documentation.

Usage

import React from 'react'
import { Button } from 'reactive-bulma'

const App = () => (
  <Button text="This is a test" />
);

To see all component variants and code snippets go to the Documentation section.

If you want to create a custom component for your forked Reactive Bulma version, the easiest way is by running the creation script I made, which instructions are here.

How to create a template component

After some time, I understood that creating component files is a repetitive and time-consuming task, so I made issue #180 to implement a library called Hygen, whose function is to provide a way to generate templates for generic files that can consume time at the long term. You can run the script by the following steps:

Learn more about Hygen by reading its documentation.

How to update all dependencies

In case you want to make your fork, I recommend you to update at least weekly using a custom command npm run update, which will run the following commands in order:

Versioning

After investigating semantic-release documentation (refer to #3) and finishing the last version according to the original roadmap, I decided to give the following meaning to project's versions after v4.0.0:

To check the current project's status, go to the Roadmap section.

Branching

Given the mentioned release logic, main is the only static branch, and each developed feature or fix will have a unique branch with its PR and a merge commit following semantic versioning and semantic commits specifications.

Roadmap

After finishing the last story related to v4.0.0, ReactiveBulma's current work is now focused on updating its dependencies in a weekly manner, as well as checking every issue or discussion raised by visitors who are interested in improving the project by proposing new ideas in shape of tickets or issues with its related PR.

In case you want actual short-term status, go to the project board (powered by GitHub Projects).

<details> <summary>Here is the status table I used to keep track of the worked milestones/versions.</summary>
VersionProgressOpen issuesClosed issues
v1.0.0v1.0.0, progressv1.0.0, openv1.0.0, closed
v2.0.0v2.0.0, progressv2.0.0, openv2.0.0, closed
v3.0.0v3.0.0, progressv3.0.0, openv3.0.0, closed
v4.0.0v4.0.0, progressv4.0.0, openv4.0.0, closed

In case you want the detailed list of current and future features, go to the roadmap document.

</details>

Changelog

The changelog (powered by semantic-release) is regularly updated to reflect what's changed in each new release.

Contributing

If you're interested in contributing to Reactive Bulma, please read our contributing docs before submitting a pull request.

Credit

Bulma was beautifully crafted by @jgthms

License

Code released under the MIT License.