Rebilly Recomponents

As the number of Web Apps developed at Rebilly grows larger, it has become apparent that we need a way to share UI components across projects. Recomponents offers similar levels of customization to projects like Twitter Bootstrap, but comes default with the familiar look and feel. This library also delivers consistency of implementation and usage to Rebilly developers (and in the future, the greater Vue community).

View the storybook

Repository structure

• packages/recomponents Recomponents project
• packages/nuxt Demo project with Nuxt

We use Yarn Workspaces to make development easier and efficient. Workspaces allow developers to check how the latest local build of Recomponents work within an application created with Gridsome or Nuxt without needing to release that version. Running your application (Gridsome/Nuxt/others) against a local version of recomponents allows manually detecting issues that are not covered by unit tests with SSR support before releasing. If you would like to setup a similar workflow with your own project, Yarn Link could provide same functionality.

Development workflow

When you run Recomponents in developer mode, any update in Recomponents will automatically trigger the rebuild of Recomponents and that also will trigger the rebuild of the end client application. In result, you can check local Recompomnent's updates in your application immediately.

Enabling workspaces

First step is running yarn from project's root to enable workspaces

• yarn

Then, with workspaces you can choose running any npm script from inside of packages/recomponents or from the project's root.

Running Recomponents in developer mode from /packages/recomponents

• yarn dev

Running Recomponents in developer mode from project's root:

• yarn workspace @rebilly/recomponents dev

With workspaces there is no need to install dependencies inside of each folder - single run of yarn inside of project root is enough.

Browser support

Currently we support all modern browsers.

Actual status

Browser	Version	Status
Chrome	78	Main development
Firefox	70	Main development
Safari	13	Supported
Edge	?	?
Internet Explorer	11	Not supported

Partial support of Internet Explorer 11 is in progress and will be added soon. Some features like webcomponent mode won't be supported.

Contribution guide

This package is following the Semantic Versioning specification and using the Semantic Release tool. To make it work, we should keep our commit messages consistent. It's possible to create any commit type but only types below can trigger npm publish:

Commit	Version
perf(datepicker): ...	Patch release
fix(datepicker): use margin of parent component in picker allocation	Patch release
feat(datepicker): add option to specify picker vertical alignment	Minor Feature release
feat(datepicker): BREAKING CHANGE migrate from vuejs-datepicker to vue-date-picker	Major Breaking release

Other types like docs, test doesn't affect components build itself so there is no need to perform publish.

There are several ways to follow this convention:

Use a console application like Commitizen

Use a plugin for Webstorm like Git Commit Template

Use an extension for Visual Studio Code like Visual Studio Code Commitizen Support

Or create commits manually