Skip to content
KissKissBankBank's front-end components library
JavaScript CSS Other
Branch: master
Clone or download

Latest commit

Latest commit a4967a7 May 25, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci [StyledComponents] Update `5.1.0` (#2032) Apr 28, 2020
.github Update PULL_REQUEST_TEMPLATE.md (#2000) Apr 10, 2020
.storybook Next Modal (#2038) May 5, 2020
assets
bin [Tech] Add start command (#1936) Feb 18, 2020
doc Create utilities.stories.mdx (#2012) Apr 17, 2020
src Modal : no SSR (#2063) May 25, 2020
styleguide [Utilities] Add `k-u-link--$color` utilities (#1911) Jan 20, 2020
.dockerignore Kitten next (#1442) Dec 6, 2018
.eslintrc.js Add eslint (#1973) Apr 1, 2020
.gitattributes Reduce CHANGELOG conflicts (#69) Aug 18, 2016
.gitignore Kitten next (#1442) Dec 6, 2018
.npmignore Kitten next (#1442) Dec 6, 2018
.nvmrc Update node to 12 (#1946) Feb 27, 2020
CHANGELOG.md
Dockerfile Kitten next (#1442) Dec 6, 2018
KARL_CHANGELOG.md add built js files for v.1.7.0 (#1508) Jan 22, 2019
LICENCE.txt Update module for open-sourcing publication (#263) Dec 8, 2016
README.md [Tech] Initialize index exportation (#1582) Apr 10, 2019
babel.config.js [StyledComponents] Update `5.1.0` (#2032) Apr 28, 2020
buildspec.yml Kitten next (#1442) Dec 6, 2018
package-lock.json v2.70.0 (#2051) May 15, 2020
package.json v2.70.0 (#2051) May 15, 2020
prettier.config.js [Quality] Apply eslint (#1986) Apr 6, 2020
webpack.config.build.js [Tech] Add babel-polyfill for styleguide (#1536) Feb 1, 2019
webpack.config.js Kitten next (#1442) Dec 6, 2018
webpack.config.sass.js Kitten next (#1442) Dec 6, 2018

README.md

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.

Kittens

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 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:

  • 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 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
You can’t perform that action at this time.