kipp-ui

Introduction

This Storybook are made to agroup all core components used on Kipp.

How to install

To install all dependencies use yarn inside the source folder.

How to Run

There's a script to run inside package.json

yarn run storybook-dev

which will execute rm -rf ./node_modules/@types/react && start-storybook -p 30303

• rm -rf ./node_modules/@types/react it was a workaround to remove some typings errors due to jsx use.

How to write a new Component Story

All new components must follow some rules to work:

• Uses @Component decorator.
• Create a new component story using storiesOf passing as params ("componentName", module).
• Uses stories.add to render the current component story.
• Wrap the current component with KippThemeProvider

import { storiesOf } from '@storybook/vue'

import Vue from 'vue'
import { Component } from 'vue-property-decorator'
import { KippBanner } from '.'
import KippThemeProvider from '@/config/theme/provider'

const stories = storiesOf('KippBanner', module)



@Component({})
class KippBannerStory extends Vue {
	render() {
		return (
			<KippThemeProvider>
				<KippBanner
					icon='info'
					bg={'###ffffff'}
				>
					KippBanner	
				</KippBanner>
			</KippThemeProvider>
		)
	}
}



stories.add('KippBanner', () => KippBannerStory)

How to ADD a new Icon

All Icons must be added on config/theme/icons.js.

In order to add a new one, a key must be added following the same name from figma.

Pay attention to the viewBox property, must follow the same value as the svg itself.

isLight property define if the svg is a lighteen one, in sake of add a shadowed background and make the svg shows up.

...
"new-icon":{
    path: `
      <svg viewBox="0 0 365 101">
	  	...
	  </svg> 
    `,
    isLight: false,
    viewBox: "0 0 365 101"
  }
...

Rules to import a new Kipp Component

• All imported components must have Kipp as prefix and must be founded in @/component/kipp The main idea is to add just core components ( but we can discuss about it later ).

• Must change "nuxt-property-decorator" imports to "vue-property-decorator".

• Do Not use Optional chaining (?.) Operator. If Something was written using it, have to be refactored to work.

Example: change ``this.user?.name`` to ``this.user && this.user.name``

• Must change this.$theme to this.$chakra.theme on components how extends VueComponent interface.