This Storybook are made to agroup all core components used on Kipp.
To install all dependencies use
yarn
inside the source folder.
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.
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)
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"
}
...
-
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
tothis.$chakra.theme
on components how extends VueComponent interface.