feat(cli): Add template categories (#76)

This PR adds categories to templates.

## Why

1. Order the templates: as we're getting more templates, it's better to distinguish web templates from mobile templates.

2. Hide templates from the CLI: templates having no `category` in their `.template.js` file don't show up in the CLI. This is a way to hide them but to still compile them to the `templates` branch for CodeSandbox (for the client, helper and AutoComplete.js templates).

## Preview

![image](https://user-images.githubusercontent.com/6137112/42315441-bb34a234-8047-11e8-97c1-ebc805763827.png)

Author: francoischalifour

src/cli/index.js

@@ -13,6 +13,7 @@ const {
   getAppTemplateConfig,
   fetchLibraryVersions,
   getAllTemplates,
+  getTemplatesByCategory,
   getTemplatePath,
 } = require('../utils');
 const getOptionsFromArguments = require('./getOptionsFromArguments');
@@ -89,9 +90,21 @@ try {
 const questions = [
   {
     type: 'list',
+    pageSize: 10,
     name: 'template',
     message: 'InstantSearch template',
-    choices: getAllTemplates(),
+    choices: () => {
+      const templatesByCategory = getTemplatesByCategory();
+
+      return Object.entries(templatesByCategory).reduce(
+        (templates, [category, values]) => [
+          ...templates,
+          new inquirer.Separator(category),
+          ...values,
+        ],
+        []
+      );
+    },
     validate(input) {
       return Boolean(input);
     },

src/templates/Angular InstantSearch/.template.js

@@ -2,6 +2,7 @@ const install = require('../../tasks/node/install');
 const teardown = require('../../tasks/node/teardown');
 
 module.exports = {
+  category: 'Web',
   libraryName: 'angular-instantsearch',
   templateName: 'angular-instantsearch',
   appName: 'angular-instantsearch-app',

src/templates/InstantSearch Android/.template.js

@@ -3,6 +3,7 @@ const install = require('../../tasks/ios/install');
 const teardown = require('../../tasks/android/teardown');
 
 module.exports = {
+  category: 'Mobile',
   templateName: 'instantsearch-android',
   appName: 'instantsearch-android-app',
   tasks: {

src/templates/InstantSearch iOS/.template.js

@@ -3,6 +3,7 @@ const install = require('../../tasks/ios/install');
 const teardown = require('../../tasks/ios/teardown');
 
 module.exports = {
+  category: 'Mobile',
   templateName: 'instantsearch-ios',
   appName: 'instantsearch-ios-app',
   tasks: {

src/templates/InstantSearch.js/.template.js

@@ -2,6 +2,7 @@ const install = require('../../tasks/node/install');
 const teardown = require('../../tasks/node/teardown');
 
 module.exports = {
+  category: 'Web',
   libraryName: 'instantsearch.js',
   templateName: 'instantsearch.js',
   appName: 'instantsearch.js-app',

src/templates/React InstantSearch Native/.template.js

@@ -3,6 +3,7 @@ const install = require('../../tasks/node/install');
 const teardown = require('../../tasks/node/teardown');
 
 module.exports = {
+  category: 'Mobile',
   libraryName: 'react-instantsearch-native',
   templateName: 'react-instantsearch-native',
   appName: 'react-instantsearch-native-app',

src/templates/React InstantSearch/.template.js

@@ -2,6 +2,7 @@ const install = require('../../tasks/node/install');
 const teardown = require('../../tasks/node/teardown');
 
 module.exports = {
+  category: 'Web',
   libraryName: 'react-instantsearch-dom',
   templateName: 'react-instantsearch',
   appName: 'react-instantsearch-app',

src/templates/Vue InstantSearch/.template.js

@@ -2,6 +2,7 @@ const install = require('../../tasks/node/install');
 const teardown = require('../../tasks/node/teardown');
 
 module.exports = {
+  category: 'Web',
   libraryName: 'vue-instantsearch',
   templateName: 'vue-instantsearch',
   appName: 'vue-instantsearch-app',

src/utils/__tests__/index.test.js

@@ -85,3 +85,39 @@ describe('checkTemplateConfigFile', () => {
     }).not.toThrow();
   });
 });
+
+describe('getTemplatesByCategory', () => {
+  beforeAll(() => {
+    mockReaddirSync.mockImplementation(() => [
+      'InstantSearch.js',
+      'Angular InstantSearch',
+      'React InstantSearch',
+      'Vue InstantSearch',
+      'React InstantSearch Native',
+      'InstantSearch iOS',
+      'InstantSearch Android',
+    ]);
+    mockLstatSync.mockImplementation(() => ({ isDirectory: () => true }));
+  });
+
+  test('return the correct templates and categories', () => {
+    expect(utils.getTemplatesByCategory()).toEqual({
+      Web: expect.arrayContaining([
+        'InstantSearch.js',
+        'Angular InstantSearch',
+        'React InstantSearch',
+        'Vue InstantSearch',
+      ]),
+      Mobile: expect.arrayContaining([
+        'React InstantSearch Native',
+        'InstantSearch iOS',
+        'InstantSearch Android',
+      ]),
+    });
+  });
+
+  afterAll(() => {
+    mockReaddirSync.mockReset();
+    mockLstatSync.mockReset();
+  });
+});

src/utils/index.js

@@ -88,6 +88,30 @@ function getAllTemplates() {
   return templates;
 }
 
+function getTemplatesByCategory() {
+  const templatePaths = fs
+    .readdirSync(TEMPLATES_FOLDER)
+    .map(name => path.join(TEMPLATES_FOLDER, name))
+    .filter(source => fs.lstatSync(source).isDirectory());
+
+  const templates = templatePaths.reduce((allTemplates, source) => {
+    const name = path.basename(source);
+
+    const { category } = require(`${source}/.template.js`);
+
+    if (!category) {
+      return allTemplates;
+    }
+
+    return {
+      ...allTemplates,
+      [category]: [...(allTemplates[category] || []), name],
+    };
+  }, {});
+
+  return templates;
+}
+
 function getTemplatePath(templateName) {
   const supportedTemplates = getAllTemplates();
 
@@ -114,4 +138,5 @@ module.exports = {
   fetchLibraryVersions,
   getAllTemplates,
   getTemplatePath,
+  getTemplatesByCategory,
 };