homeday-blocks
v19.18.1
Published
A Vue component library built by Homeday's frontend team.
Downloads
135
Readme
Homeday Blocks
A library of Vue components and tokens used across Homeday projects - here
Local setup
Fork the main repository, clone your fork to your local machine and add the main repo as upstream.
$ git clone [email protected]:YOUR_USERNAME/homeday-blocks.git
$ cd homeday-blocks
$ git remote add upstream [email protected]:homeday-de/homeday-blocks.git
Prerequisites
Homeday Blocks requires Node.js version 14.17.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 breif explanation of what is being install, 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 master
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 the library
npm run build
For a brief explanation of how the library is built, checkout this documentation.
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/homeday-blocks
Gotchas
tests/
is an alias for<rootDir>/tests/
TypeScript
For a basic explanation of what it is and how to use it, please read TYPESCRIPT.md.
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 Git Feature Branch Workflow. See project setup to get started locally. That means that all code changes enter the project by PR to master
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.
- :boom: - marks breaking changes (MAJOR version change)
- :sparkles: - marks new feature (MINOR version change)
- The other gitmojis are either a patch or have no effect at all.
It is important to follow this convention, because our automated releases are based on it.
Examples
Major change
:boom: Removed HdNotNeeded component
Minor change
:sparkles: Added HdAwesomeComponent
Patch
:bug: Fixed that annoying bug
Version release
Releasing a new version is as easy as pushing your changes to master
😎
- Github Actions will automatically deploy the storybook to our showcase env.
- And this Github workflow will automatically create a release on Github and publish a new version to NPM.
Consuming in other projects
import { HdDynamicForm } from 'homeday-blocks';
Customize configuration
Services
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.
Infrastructure
Homeday Blocks has its own infrastructure repository: blocks-infra. Whenever changes need to be made, you can do it in the repository and "deploy". If it is an emergency, you can also use AWS Console but your next step is to update it in the repository to avoid future inconsistencies.