A library of Vue components used across Homeday projects - here
Fork the main repository, clone it to your local machine and add main repo as upstream.
$ git clone git@github.com:YOUR_USERNAME/homeday-blocks.git
$ cd homeday-blocks
$ git remote add upstream git@github.com:homeday-de/homeday-blocks.git
Homeday Blocks 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"
For a breif explanation of what is being install, please read our setup documentation file.
To install all our dependencies on OSX, run scripts/setup.osx.sh
.
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.
npm run lint
npm run serve:storybook
npm run build:storybook
npm run build:lib
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
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/homeday-blocks
tests/
is an alias for<rootDir>/tests/
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.
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 following convention when merging the PR:
- Use "Squash and merge" to merge the PR.
- Use a meaningful title when merging your PR.
- Give title a semantic meaning through emojis. Please use emoji first, then the text.
- 💥 - marks breaking changes (MAJOR version change)
- ✨ - marks new feature (MINOR version change)
- Everything else is consider a patch change.
It is important to follow this convention, because it makese generating changelog much easier (automatic). We use changelog github action to automatically generate the changelog. Please see the action documentation for more details on supported conventions.
💥 Removed HdNotNeeded component (#32)
✨ Added HdAwesomeComponent (#33)
🔧 Updated travis configuration and run lint on build(#34)
When a new version is ready to be released, these are the steps we need to take:
- Create a release PR from
develop
tomaster
- Changelog will be generated during the checks. Check it to determed the release type -
MAJOR
,MINOR
orPATCH
.For more info, please see contribuiton guide. If in doubt, consult with rest of the team. - Create a version bump PR to develop (use
npm version
to make sure version is updated everywhere). This should be merged as last PR before releasing. - Once version bump PR is merged to
develop
and all checks on release PR have passed, merge the release PR. - Draft a github release with corresponding version (target
master
branch), include the generated changelog, and publish it. Version naming convention isvx.x.x
. - After publishing the release on github, new version will be published automatically to the npm registry (using github action) that's hooked to the release event. Double check that the new version has been correctly published on npm registry
The CI will automatically deploy the storybook to our showcase env, once the PR is merged to master
branch.
import { HdDynamicForm } from 'homeday-blocks';
Together with the components, Homeday Blocks also provides useful services that can be reused across projects. You can read more about them in the services documentation.