kipp-ui v1.0.2
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
tothis.user && this.user.name
Must change
this.$theme
tothis.$chakra.theme
on components how extends VueComponent interface.