UI Component Library using Vue

This project was built for becoming a playground to learn about creating ui component library using vue and bootstrap 5.

Project Setup

• Clone this repository
• Run npm install
• Run npm run serve
• Run npm run storybook

How to Create a New Component

• Create new file with .vue extension inside lib-components folder
• Add name property at script section
• Create component structure, styling, and behavior
• Import as default the component at lib-components/index.js
• Import and declare the component at dev/serve.vue
• Create stories file with (Component Name).stories.js format inside stories folder
• Create stories for the component
• Create file for unit test case with (Component Name).spec.js inside test/unit folder
• Create unit test case for the component
• Run npm run test:unit

How to Update Existing Component

• Create changes for component inside lib-components folder
• Add new test case for changes that made for component, if it's needed
• Add changes for component inside it's stories file

How to Publish New Version

• Run npm run build
• Change package version inside package.json file
• Do new account registration on npmjs website if don't have the npm account yet
• Run npm login
• Insert npm account username and password
• Run npm publish
• Insert OTP code if it's needed

Technologies

This library are built using frameworks, libraries, and packages below:

| Name | Version | | ------------------------- | ------- | | Vue | 2.6.14 | | Bootstrap | 5.1.3 | | @storybook/vue | 6.4.19 | | @vue/cli-plugin-unit-jest | 4.5.15 | | @vue/test-utils | 1.3.0 | | vue-sfc-rollup | 4.1.1 |

Maintainer

• Bagas

License

(c) 2022 Afwa Bagas Wahuda, under MIT License.