@adomni/vue-components

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.

Structure

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 src/components/NewComponent)

• 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 scoped.
• 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 test before 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 master.

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 master and 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 master before merging)
• 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.json of the repo on master should always reflect the latest version in NPM. You can also check the package on npmjs.org.

Connecting

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 yarn build-link

# 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

Simply run yarn unlink "@adomni/vue-components" in the consuming project's repo.