Adomni's VueJS Component Library
This repository holds all of Adomni's VueJS Components that are used throughout any VueJS projects. Currently, this is only used in the Unicorn project.
The project is structured to hold all the components inside the
src/components/* folder. Each new component should have the following files inside the component's folder to stay consistent:
NewComponent (main directory found inside
- NewComponent.vue - Main VueJS Single File Component that holds the display HTML and the component's business logic
- NewComponent.scss - This is the SASS styling to style the component. Depending on complexity of the component and styling the SASS can be
- NewComponent.stories.js - In order for the component to be listed and displayed on our publicly accessible Once Upon A Time Storybook component playground this file is necessary. This file should contain all the different permutations of the component so that the Product and QA team can test the different UI/UX outcomes.
- NewComponent.md - This file should hold any documentation about the component which will be visible in Storybook and on the Github repo.
- NewComponent.spec.js - This will contain all the unit tests for the component to ensure it is fully vetted and ready for production use. These tests will be run during deployments so make sure they are all passing by running
yarn testbefore pushing up your code.
Releasing a New Version
Deploying a new version of the Adomni-VueJS-Component library to NPM is an automatic process completed after merging a feature branch into
The steps to follow from beginning of feature until merging into
master to trigger the automated process described above would be:
- pull down the current master branch
- create a feature branch off of the current
masterand add/alter code as needed
- commit and push up your feature branch
- create PR into master & request approvals (Be sure you're once again current with
- once approved and merged the deployment flow will automatically increment the version and publish that new version to NPM. The new incremented version will be committed and pushed back to master.
Note: The version in the
package.jsonof the repo on master should always reflect the latest version in NPM. You can also check the package on npmjs.org.
While you're working on a style change or new component inside of the Adomni Vue Component Library, you'll like want to see it in action prior to publishing the change.
In order to test a change made locally to the Adomni-VueJS-Components library, we can use
yarn link to connect this project to others that traditionally consume the published NPM package.
Create a link
# Navigate to `Adomni-VueJS-Components` project $ yarn build-bundle $ yarn link yarn link v1.22.10 success Registered "@adomni/vue-components". info You can now run `yarn link "@adomni/vue-components"` in the projects where you want to use this package and it will be used instead.
Please note, if the command is run again you will see an error warning you that the project has already been registered. Additionally, a shortcut was made to run both commands shown above with
# Navigate to project consuming the component library (i.e. Unicorn) $ yarn link "@adomni/vue-components" yarn link v1.22.10 success Registered "@adomni/vue-components". info You can now run `yarn link "@adomni/vue-components"` in the projects where you want to use this package and it will be used instead.
And you should be all set! It's worth making a small and obvious change inside of the VueJS component library to ensure the link is working as expected before diving too deep into any complex work.
Refreshing the link
Because the consuming project is referencing the compiled build, you will need to re-build to VueJS component library to see any changes. This can be completed by running:
# Navigate to `Adomni-VueJS-Components` project $ yarn build-bundle
Breaking the link
yarn unlink "@adomni/vue-components" in the consuming project's repo.