breadandbutter v2.4.1

breadandbutter

Welcome to breadandbutter, Bonify's components library

TODO

Motivation

With the isolated UI environment as breadandbutter, we would like to

• Have consistency in styles across our projects
• Do not reinvent same components every time
• Isolate UI from business logic
• Speed up development of features

Setup & run

$ npm i
$ npm run storybook
$ open http://localhost:6006

Build

$ npm run storybook-build

This will build static pages to storybook-static directory

Deploy

Project is deployed to breadandbutter.bonify.de every time master branch is updated. (Should be fixed, manual build on Jenkins at the moment)

Release

We do use semantic versioning for breadandbutter. To release, use npm version ie

$ npm version minor

This will increase version in package.json, create version commit and tag it with a new version. Since we use breadandbutter as a git dependency, we use git tags for target version, so version of breadandbutter in package.json for web/web-marketing repositories should be updated as well.

Usage

From the repository you want to use the breadandbutter:

$ npm i -S git+ssh://git@bitbucket.org/forteil/breadandbutter.git#0.1.0

After dependency has been installed, you can import components as

import { H1 } from 'breadandbutter'

Note: webpack tree-shaking works good in this case and only components that were imported will be added to the bundle

Link to Repos

https://docs.npmjs.com/cli/link

In order to see breadandbutter changes done locally in other repository, we must link breadandbutter to the repositories. The following commands are used:

From the breadandbutter repository:

$ npm link

From other repository:

$ npm link breadandbutter

After any changes done locally in breadandbutter, run the following command so changes appear in other repository:

$ npm run prepare

Testing

WE DO NOT plan to test components with snaphsot testing (or screenshot testing) due to their ineffectiveness More on the topic

WE DO plan to test components that have functionality and state (ie datepickers, accordeons)

Software design decisions

There are design-decisions folder where some details for decisions are included