KissKissBankBank's front-end components library
Kitten is a components library based on Sass and React. It provides mixins to create flexible components based on your own brand elements (colors, fonts, typographic scale, etc.).
You can check out Kitten's components on Storybook.
$ npm install @kisskissbankbank/kitten
CSS Utilities are classe that can be used for very basic styling. These utility classes are used by React Components. Kitten will not work properly without these utility classes.
@import '@kisskissbankbank/kitten/src/stylesheets/utilities';
Look at the doc to know if/when to use it.
It is recommended that you use an utility like Purge CSS
at build time, to remove all the unused CSS utilities (be sure to include the path of your Kitten dependency so it's taken into account).
You can render React components directly in your js bundle:
import { SimpleCard } from '@kisskissbankbank/kitten'
ReactDOM.render(
<SimpleCard {...props} />,
document.getElementById('main')
)
Check out the guidelines to start creating new components!
$ bin/install
To cleanup installed modules:
bin/cleanup
To launch storybook locally:
npm run storybook
The page http://localhost:6006 will be opened automatically.
To launch the JS tests:
$ npm test
Check out the guidelines to know how to test kitten.
To contribute code:
Create a pull request on GitHub with a clear title in English.
Tag it
with the right labels: Needs reviews
, Needs testing
or Work in progress
.
Don't forget to update the CHANGELOG.md
under the [unreleased]
section
with the following syntax:
- Breaking change: a breaking change.
- Feature: a new feature.
- Fix: a fix.
To merge code into master:
Squash and merge
on GitHub.Only for KissKissBankBank collaborators
If this is your first release, start by saving your npm credentials in
your ~/.npmrc
by calling:
$ npm login
master
.CHANGELOG.md
file:
[unreleased]
section.package.json
file:
package-lock.json
file:
bin/release NEW_VERSION
(replace NEW_VERSION
with your version number)Once the pull request is accepted:
bin/publish with-storybook