component library prototype


100.0.73 years ago3 years agoMinified + gzip package size for @kunukn/component-library-example in KB


Component library example in ReactJS

methodology and strategy

  • Semantic HTML
  • Atomic design, bottom up.
  • BEM naming for styling.
  • Eliminate dead CSS. Only needed styling are compiled. The React components import the needed styling.
  • Component based architecture. Each component owns the style-guide definition, styling and unit testing.
  • A css bundle is generated which can be shared to other projects than ReactJS. (markup pattern)

tech used

  • Babel 7, ECMAScript 8
  • Webpack, Webpack-dev-server
  • React, Storybook
  • Context Api using the (Redux + Redux thunk) pattern

quick start

view component library

view storybook

  • git clone/download
  • yarn install
  • yarn storybook
  • open localhost:6006 in a browser

demo of prototype

library usage example with npm

import { Button, Icon } from '@kunukn/ComponentLibraryExample';

let IconAndButtonExample = () => <div>

  <Icon name='triangle' fill='red' />

     modifiers="call-to-action full-width"
     icon={<Icon name='chevron'/>}
   Click me





supported browsers

modern browsers + IE 11

run tests

  • yarn test

design principles

  • simplicity - BEM and composable components
  • overview - component library using storybook with code snippets and responsive web design test using view ports
  • portability - css bundle with icons and font. It's just markup and css classnames
  • availability - CDN: umd bundle, css bundle, svg icons
  • testable - unit tests for all components
  • playability - online demo website
  • off the shelf and conventions - using BEM, component architecture and standard tools (Webpack, React, Storybook)



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.