Homeday Blocks
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/homeday-blocks.git
$ cd homeday-blocks
$ git remote add upstream git@github.com:homeday-de/homeday-blocks.git
Prerequisites
Vue CLI requires Node.js version 8.9 or above (8.11.0+ recommended). You can manage multiple versions of Node on the same machine with nvm or nvm-windows.
Project setup
npm install
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
Gotchas
tests/
is an alias for<rootDir>/tests/
- The form components share many classes (mostly
field--*
), to avoid repeatedly defining some of them in each form test, FIELD_CLASSES.js contains the most common classes we need for testing. Feel free to add more classes.
Deployment
The CI will deploy storybook automatically to our showcase env, once PR is merged to develop
branch.
Consuming in other projects
Homeday Blocks makes use of the Webpack Alias feature, which need to be set up in a parent project (the project that consumes this library).
To help with that, a helper function is provided inside this project which should be included in the parent project as in the following example:
// vue.config.js
getHdBlockWebpackAlias = require('homeday-blocks/webpack-alias');
module.exports = {
// ...
chainWebpack: ({ resolve: { alias } }) => {
const hdBlocksAlias = getHdBlockWebpackAlias();
Object.keys(hdBlocksAlias).forEach(aliasKey => alias.set(
aliasKey, hdBlocksAlias[aliasKey],
));
},
// ...
};
We can then include the components from Homeday Blocks by using the hd-blocks
alias, like so:
import HdDynamicForm from 'hd-blocks/components/form/HdDynamicForm.vue';