Kitten
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 KissKissBankBank's styleguide and on Storybook.
Dependencies
- react >= 16.8.x
- react-dom >= 16.8.x
- @babel/polyfill if you support IE10 and previous versions
Table of content
Installation
$ npm install @kisskissbankbank/kitten
Usage
CSS components
Import kitten
and the components your want to use in your application:
@import 'kitten';
@include k-Button;
You can define your own font families, typography settings and colors by overriding the
the $k-fonts
, $k-typography
and $k-colors
options. Check out the
default config
for an example.
React components
You can render React components directly in your js bundle:
import { SimpleCard } from '@kisskissbankbank/kitten'
ReactDOM.render(
<SimpleCard ...props/>,
document.getElementById('main')
)
Development
Components
Check out the guidelines to start creating new components!
Install
$ bin/install
Cleanup
To cleanup installed modules:
bin/cleanup
Storybook
To launch storybook locally:
npm run storybook
Then visit http://localhost:6006
To release Storybook
simply run this command:
npm run deploy-storybook
Styleguide
To launch the styleguide using webpack:
$ npm run styleguide:start
Then visit http://localhost:3000
Production settings
To share the styleguide with production settings (to share via ngrok for example), you can compile the assets:
$ npm run styleguide:build
It will create a build
folder with static files. You can serve it as you wish
Component testing
To launch the JS tests:
$ npm test
Check out the guidelines to know how to test kitten.
Contributing
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
orWork 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:
- Make sure the code has been reviewed by someone.
- Make sure it has been tested.
- Merge using
Squash and merge
on GitHub. - Delete the branch.
Release
Only for KissKissBankBank collaborators
Login
If this is your first release, start by saving your npm credentials in
your ~/.npmrc
by calling:
$ npm login
Prepare the release pull request
- Pull
master
. - Update the
CHANGELOG.md
file:- Update the version following the Semantic Versioning.
- Add a new
[unreleased]
section. - Check that each merged PR from the last release has an entry.
- Update the
package.json
file:- Update the version with the version of the library.
- Update the
package-lock.json
file:- Update the version with the version of the library.
- Run this command:
bin/release NEW_VERSION
- Follow the link to create the pull request on Github.
- Announce the release on KissKissBankBank's #kit-ui Slack channel with the related CHANGELOG.
Release!
Once the pull request is accepted:
- Merge the pull request into master.
- Delete the release branch.
- Run this command:
bin/publish
- Update
our private project kanban:
move cards that are released from
done
column toreleased
column.