Merge pull request #508 from homeday-de/develop

[Release]  Add scaffolding tool, Support redirect link on HDGallery and HdTabsMenu update

README.md

@@ -17,7 +17,7 @@ $ git remote add upstream [email protected]:homeday-de/homeday-blocks.git
 
 ## Prerequisites
 
-Homeday Blocks requires [Node.js](https://nodejs.org/) version 8.9 or above (8.11.0+ recommended). It's recommended to manage multiple versions of Node on the same machine with [nvm](https://github.com/nvm-sh/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
+Homeday Blocks requires [Node.js](https://nodejs.org/) version 10.22.0 (.nvmrc). It's recommended to manage multiple versions of Node on the same machine with [nvm](https://github.com/nvm-sh/nvm) or [nvm-windows](https://github.com/coreybutler/nvm-windows).
 
 Don't forget to setup the [deeper shell integration](https://github.com/nvm-sh/nvm#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:
 
@@ -93,6 +93,19 @@ You can also follow build statuses in https://percy.io/Homeday/homeday-blocks
 - `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](https://github.com/homeday-de/homeday-blocks/blob/develop/tests/unit/components/form/FIELD_CLASSES.js) contains the most common classes we need for testing. Feel free to add more classes.
 
+## Generators
+
+We use [Hygen](https://www.hygen.io/) 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](https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow). See [project setup](#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. :) 

_templates/new/component/main.ejs.t

@@ -0,0 +1,8 @@
+---
+inject: true
+before: "Services"
+eof_last: false
+skip_if: <%= name %>
+to: main.js
+---
+export { default as <%= name %> } from './src/<%= path %>/<%= name %>.vue';

_templates/new/component/prompt.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const _ = require('lodash');
+
+module.exports = [
+  {
+    type: 'input',
+    name: 'name',
+    message: "What's your component name?",
+    validate(value) {
+      if (!value.length) {
+        return 'Components must have a name.';
+      }
+      const fileName = _.kebabCase(value);
+      if (fileName.indexOf('-') === -1) {
+        return 'Component names should contain at least two words to avoid conflicts with existing and future HTML elements.';
+      }
+      return true;
+    },
+  },
+  {
+    type: 'input',
+    name: 'path',
+    message: "The path to the component? (default: 'components')",
+    initial: 'components',
+    result: value => path.normalize(value),
+  },
+];

_templates/new/component/story.ejs.t

@@ -0,0 +1,15 @@
+---
+to: src/stories/<%= name %>.stories.js
+---
+/* eslint-disable import/no-extraneous-dependencies */
+import { storiesOf } from '@storybook/vue';
+import { <%= name %> } from 'homeday-blocks';
+
+const stories = storiesOf('Components|<%= name %>', module);
+
+stories.add('Default', () => ({
+  components: { <%= name %> },
+  template: `
+    <<%= name %> />
+  `,
+}));

_templates/new/component/test.ejs.t

@@ -0,0 +1,26 @@
+---
+to: tests/unit/<%= path %>/<%= name %>.spec.js
+---
+import { wrapperFactoryBuilder } from 'tests/unit/helpers';
+import <%= name %> from '@/<%= path %>/<%= name %>.vue';
+
+const wrapperBuilder = wrapperFactoryBuilder(<%= name %>);
+
+describe('<%= name %>', () => {
+  const build = (overrideProps = {}) => {
+    const props = {
+      ...overrideProps,
+    };
+
+    const wrapper = wrapperBuilder({ props });
+
+    return {
+      wrapper,
+    };
+  };
+
+  it('should render', () => {
+    const { wrapper } = build();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

_templates/new/component/vue.ejs.t

@@ -0,0 +1,18 @@
+---
+to: src/<%= path %>/<%= name %>.vue
+---
+<template>
+  <div>
+    Your new awesome component: <%= name %>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '<%= name %>',
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'homeday-blocks/src/styles/mixins.scss';
+</style>

_templates/new/help/index.ejs.t

@@ -0,0 +1,5 @@
+---
+message: |
+  - hygen new {bold component} --name [NAME] --path [PATH] (default: components)
+  - hygen new {bold service} --name [NAME]
+---

_templates/new/service/main.ejs.t

@@ -0,0 +1,7 @@
+---
+inject: true
+append: true
+skip_if: <%= name %>
+to: main.js
+---
+export { default as <%= h.changeCase.camel(name) %>Service } from './src/services/<%= name %>';

_templates/new/service/prompt.js

@@ -0,0 +1,13 @@
+module.exports = [
+  {
+    type: 'input',
+    name: 'name',
+    message: "What's your service name?",
+    validate(value) {
+      if (!value.length) {
+        return 'A service must have a name.';
+      }
+      return true;
+    },
+  },
+];

_templates/new/service/service.ejs.t

@@ -0,0 +1,8 @@
+---
+to: src/services/<%= name %>.js
+---
+export const myMethod = () => true;
+
+export default {
+  myMethod,
+};

_templates/new/service/test.ejs.t

@@ -0,0 +1,10 @@
+---
+to: tests/unit/services/<%= name %>.spec.js
+---
+import { myMethod } from '@/services/<%= name %>';
+
+describe('<%= h.changeCase.camel(name) %> service', () => {
+  it('works', () => {
+    expect(myMethod()).toBe(true);
+  });
+});