@astar-network/astar-ui
v0.0.142
Published
## Tech stack Vue3, SCSS, Storybook, Typescript, Vite
Downloads
453
Keywords
Readme
Astar-UI
Tech stack
Vue3, SCSS, Storybook, Typescript, Vite
Storybook
https://main--625fa762a035be003a9814c1.chromatic.com/
Project setup
Install
yarn install
Build Library
yarn build:lib
Run Storybook
yarn storybook
Build Storybook
yarn build-storybook
Run Play ground for testing (option)
yarn dev
Usage Of Components Built
As Component
import { Header } from 'astar-ui';
...
components:{
Header
}
As Plugin
import astarUI from 'astar-ui';
...
app.use(astarUI)
then use like
<astar-button @click="click" />
<astar-simple-modal>Test</astar-simple-modal>
How to contribute
Implement components in /packages
[DirectoryName]
> src
>> [Component.vue]
> index.ts (need to register as plugin, keep following the rule of component name :: app.component('astar-[component-name]', ComponentName) )
Implement story for the component in /src/stories
stories
> [DirectoryName]
>> [Component].stories.js
refer to: https://storybook.js.org/docs/vue/writing-stories/introduction
Run storybook in local
yarn storybook
Hot reloading support
Send PR for reviewing
Once it merged to main
, it automatically deploy & publish to npm with new version in github action workflow and deployed storybook as well.
there's no need to update version manually or build library & storybook before sending PR.
View updated storybook
https://main--625fa762a035be003a9814c1.chromatic.com/
Use component in Vue project
Update latest ui library(astar-ui) version then use like
<astar-button @click="click" />
<astar-simple-modal>Test</astar-simple-modal>