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';

Customize configuration

See Configuration Reference.