DossierData Component Library

A library of Vue components used across Homeday projects - here

Local setup

Fork the main repository, clone it to your local machine and add main repo as upstream.

$ git clone git@github.com:YOUR_USERNAME/component.library.git
$ cd dossierdata-component-library
$ git remote add upstream git@github.com:dossierdata/component.library.git

Prerequisites

DossierData Component Library requires Node.js version 10.22.0 (.nvmrc). It's recommended to manage multiple versions of Node on the same machine with nvm or nvm-windows.

Don't forget to setup the deeper shell integration in your console to take full advantage of nvm. You can achieve this by adding the following alias into your ~/.bashrc, or ~/.zshrc file:

alias cd="cdnvm(){ cd $1; if [[ -f .nvmrc && -s .nvmrc && -r .nvmrc ]]; then <.nvmrc nvm install; elif [[ $(nvm current) != $(nvm version default) ]]; then nvm use default; fi; };cdnvm"

Project setup

Download and install dependencies

For a brief explanation of what is being installed, please read our setup documentation file.

OSX

To install all our dependencies on OSX, run scripts/setup.osx.sh.

Ubuntu

To install all our dependencies on Ubuntu, run scripts/setup.ubuntu.sh.

It is recommended to run the setup script everytime you pull from the develop branch. This way you can always be sure to have all the project dependencies up to date.

Lints and fixes files

npm run lint

Storybook

Development

npm run serve:storybook

Build

npm run build:storybook

Build as a library

npm run build:lib

Testing

To just run all unit tests:

npm run test:unit

To watch for changes while writing tests:

npm run test:unit:watch

To watch for changes while writing tests for a single component:

npm run test:unit:watch ComponentName

Screenshot tests on Percy

Make sure you've PERCY_TOKEN exported first and the project is built.

The token can be obtained from Percy dashboard if you've access to it.

npm run test:percy

You can also follow build statuses in https://percy.io/Homeday/dossierdata-component-library

Gotchas

• tests/ is an alias for <rootDir>/tests/

Generators

We use Hygen as a code generator tool to save time when we need to scaffold some structure.

Just run:

npm run new component
npm run new service

And follow the wizzard in order to generate a base component structure or a service.

Contribution guide

This project follows forking workflow. See project setup to get started locally. That means that all code changes enter the project by PR to develop branch. Once you open the PR with suggested changes, the checks for build and coverage will run. If those fail, your PR needs some more work. :)

Each PR should be reviewed by at least two team members. Once reviewed and approved, it can be merged. Please follow the conventional commit specification when writing commit messages.

If this is not followed semantic release won't be able to determine a new version automatically and tests will fail.

Consuming in other projects

import { DDButton } from 'dossierdata-component-library';

Customize configuration

See Configuration Reference.

Services

Together with the components, DossierData Component Library also provides useful services that can be reused across projects. You can read more about them in the services documentation.