Add more subgenerators to create package and demo in superset-ui-lega…

…cy (#86)

* feat: add new subgenerators for legacy package and demo
* feat: make the default generator provide choices to choose subgenerators

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/app/index.js

@@ -1,12 +1,45 @@
+/* eslint-disable sort-keys */
+
 const Generator = require('yeoman-generator');
+const chalk = require('chalk');
+const yosay = require('yosay');
 
 module.exports = class extends Generator {
-  initializing() {
+  async prompting() {
+    // Have Yeoman greet the user.
+    this.log(yosay(`Welcome to the rad ${chalk.red('generator-superset')} generator!`));
+
+    this.option('skipInstall');
+
+    this.answers = await this.prompt([
+      {
+        type: 'list',
+        name: 'subgenerator',
+        message: 'What do you want to do?',
+        choices: [
+          {
+            name: 'Create superset-ui package in the monorepo',
+            value: 'package',
+          },
+          {
+            name: 'Create superset-ui-legacy package in the monorepo',
+            value: 'legacy-plugin-chart',
+          },
+          {
+            name: 'Create superset-ui-legacy chart demo in storybook',
+            value: 'legacy-plugin-chart-demo',
+          },
+        ],
+      },
+    ]);
+  }
+
+  configuring() {
     // Redirect the default 'app' generator
     // to 'package' subgenerator
     // until there are multiple subgenerators
     // then this can be changed into a menu to select
     // subgenerator.
-    this.composeWith(require.resolve('../package'));
+    this.composeWith(require.resolve(`../${this.answers.subgenerator}`));
   }
 };

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/legacy-plugin-chart-demo/index.js

@@ -0,0 +1,39 @@
+/* eslint-disable sort-keys */
+
+const Generator = require('yeoman-generator');
+const chalk = require('chalk');
+const yosay = require('yosay');
+const _ = require('lodash');
+
+module.exports = class extends Generator {
+  async prompting() {
+    // Have Yeoman greet the user.
+    this.log(yosay(`Welcome to the rad ${chalk.red('generator-superset')} generator!`));
+
+    this.option('skipInstall');
+
+    this.answers = await this.prompt([
+      {
+        type: 'input',
+        name: 'packageName',
+        message: 'Package name:',
+        default: _.kebabCase(this.appname.replace('legacy plugin chart', '').trim()), // Default to current folder name
+      },
+      {
+        type: 'input',
+        name: 'packageLabel',
+        message: 'Package label:',
+        default: _.capitalize(_.camelCase(this.appname.replace('legacy plugin chart', '').trim())), // Default to current folder name
+      },
+    ]);
+  }
+
+  writing() {
+    this.fs.copyTpl(this.templatePath('index.js'), this.destinationPath('index.js'), this.answers);
+    this.fs.copyTpl(
+      this.templatePath('Stories.jsx'),
+      this.destinationPath('Stories.jsx'),
+      this.answers,
+    );
+  }
+};

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/legacy-plugin-chart-demo/templates/Stories.jsx

@@ -0,0 +1,23 @@
+/* eslint-disable no-magic-numbers */
+import React from 'react';
+import { SuperChart } from '@superset-ui/chart';
+
+export default [
+  {
+    renderStory: () => (
+      <SuperChart
+        chartType="<%= packageName %>"
+        chartProps={{
+          formData: {},
+          height: 600,
+          payload: {
+            data: [],
+          },
+          width: 600,
+        }}
+      />
+    ),
+    storyName: '<%= packageLabel %>ChartPlugin',
+    storyPath: 'plugin-chart-<%= packageName %>',
+  },
+];

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/legacy-plugin-chart-demo/templates/index.js

@@ -0,0 +1,8 @@
+import <%= packageLabel %>ChartPlugin from '@superset-ui/legacy-plugin-chart-<%= packageName %>';
+import Stories from './Stories';
+
+new <%= packageLabel %>ChartPlugin().configure({ key: '<%= packageName %>' }).register();
+
+export default {
+  examples: [...Stories],
+};

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/legacy-plugin-chart/index.js

@@ -0,0 +1,44 @@
+/* eslint-disable sort-keys */
+
+const Generator = require('yeoman-generator');
+const chalk = require('chalk');
+const yosay = require('yosay');
+const _ = require('lodash');
+
+module.exports = class extends Generator {
+  async prompting() {
+    // Have Yeoman greet the user.
+    this.log(yosay(`Welcome to the rad ${chalk.red('generator-superset')} generator!`));
+
+    this.option('skipInstall');
+
+    this.answers = await this.prompt([
+      {
+        type: 'input',
+        name: 'packageName',
+        message: 'Package name:',
+        default: _.kebabCase(this.appname.replace('superset ui legacy plugin chart', '').trim()), // Default to current folder name
+      },
+      {
+        type: 'input',
+        name: 'description',
+        message: 'Description:',
+        default: _.capitalize(
+          _.startCase(this.appname.replace('superset ui legacy plugin chart', '').trim()),
+        ), // Default to current folder name
+      },
+    ]);
+  }
+
+  writing() {
+    this.fs.copyTpl(
+      this.templatePath('_package.json'),
+      this.destinationPath('package.json'),
+      this.answers,
+    );
+    this.fs.copyTpl(this.templatePath('README.md'), this.destinationPath('README.md'), {
+      ...this.answers,
+      packageLabel: _.capitalize(_.camelCase(this.answers.packageName)),
+    });
+  }
+};

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/legacy-plugin-chart/templates/README.md

@@ -0,0 +1,34 @@
+## @superset-ui/legacy-plugin-chart-<%= packageName %>
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-<%= packageName %>.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/legacy-plugin-chart-<%= packageName %>.svg?style=flat-square)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-legacy-plugin-chart-<%= packageName %>&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-legacy-plugin-chart-<%= packageName %>)
+
+This plugin provides <%= description %> for Superset.
+
+### Usage
+
+Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.
+
+```js
+import <%= packageLabel %>ChartPlugin from '@superset-ui/legacy-plugin-chart-<%= packageName %>';
+
+new <%= packageLabel %>ChartPlugin()
+  .configure({ key: '<%= packageName %>' })
+  .register();
+```
+
+Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/superset-ui-legacy/?selectedKind=plugin-chart-<%= packageName %>) for more details.
+
+```js
+<SuperChart
+  chartType="<%= packageName %>"
+  chartProps={{
+    width: 600,
+    height: 600,
+    formData: {...},
+    payload: {
+      data: {...},
+    },
+  }}
+/>
+```

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/legacy-plugin-chart/templates/_package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@superset-ui/legacy-plugin-chart-<%= packageName %>",
+  "version": "0.0.0",
+  "description": "Superset Legacy Chart - <%= description %>",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui-legacy.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui-legacy/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui-legacy#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@superset-ui/core": "^0.9.0",
+    "prop-types": "^15.6.2"
+  },
+  "devDependencies": {
+    "@superset-ui/chart": "^0.9.0",
+    "@superset-ui/translation": "^0.9.1"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.9.0",
+    "@superset-ui/translation": "^0.9.1"
+  }
+}

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/package/index.js

@@ -3,6 +3,7 @@
 const Generator = require('yeoman-generator');
 const chalk = require('chalk');
 const yosay = require('yosay');
+const _ = require('lodash');
 
 module.exports = class extends Generator {
   async prompting() {
@@ -16,7 +17,7 @@ module.exports = class extends Generator {
         type: 'input',
         name: 'name',
         message: 'Package name:',
-        default: this.appname.replace('superset ui ', ''), // Default to current folder name
+        default: _.kebabCase(this.appname.replace('superset ui', '').trim()), // Default to current folder name
       },
     ]);
   }

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/package.json

@@ -30,6 +30,7 @@
   },
   "dependencies": {
     "chalk": "^2.4.1",
+    "lodash": "^4.17.11",
     "yeoman-generator": "^3.1.1",
     "yosay": "^2.0.2"
   },

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/test/app.test.js

@@ -8,9 +8,10 @@ describe('generator-superset:app', () => {
   beforeAll(() => {
     dir = process.cwd();
 
-    return helpers
-      .run(path.join(__dirname, '../generators/app'))
-      .withPrompts({ name: 'my-package' });
+    return helpers.run(path.join(__dirname, '../generators/app')).withPrompts({
+      subgenerator: 'package',
+      name: 'my-package',
+    });
   });
 
   it('creates files', () => {

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/test/legacy-plugin-chart-demo.test.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const assert = require('yeoman-assert');
+const helpers = require('yeoman-test');
+
+describe('generator-superset:legacy-plugin-chart-demo', () => {
+  let dir;
+
+  beforeAll(() => {
+    dir = process.cwd();
+
+    return helpers
+      .run(path.join(__dirname, '../generators/legacy-plugin-chart-demo'))
+      .withPrompts({ packageName: '4d-pie-chart', packageLabel: '4DPieChart' })
+      .withOptions({ skipInstall: true });
+  });
+
+  it('creates files', () => {
+    assert.file(['index.js', 'Stories.jsx']);
+  });
+
+  /*
+   * Change working directory back to original working directory
+   * after the test has completed.
+   * yeoman tests switch to tmp directory and write files there.
+   * Usually this is fine for solo package.
+   * However, for a monorepo like this one,
+   * it made jest confuses with current directory
+   * (being in tmp directory instead of superset-ui root)
+   * and interferes with other tests in sibling packages
+   * that are run after the yeoman tests.
+   */
+  afterAll(() => {
+    process.chdir(dir);
+  });
+});

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/test/legacy-plugin-chart.test.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const assert = require('yeoman-assert');
+const helpers = require('yeoman-test');
+
+describe('generator-superset:legacy-plugin-chart', () => {
+  let dir;
+
+  beforeAll(() => {
+    dir = process.cwd();
+
+    return helpers
+      .run(path.join(__dirname, '../generators/legacy-plugin-chart'))
+      .withPrompts({ packageName: '4d-pie-chart', description: '4D Pie Chart' })
+      .withOptions({ skipInstall: true });
+  });
+
+  it('creates files', () => {
+    assert.file(['package.json']);
+  });
+
+  /*
+   * Change working directory back to original working directory
+   * after the test has completed.
+   * yeoman tests switch to tmp directory and write files there.
+   * Usually this is fine for solo package.
+   * However, for a monorepo like this one,
+   * it made jest confuses with current directory
+   * (being in tmp directory instead of superset-ui root)
+   * and interferes with other tests in sibling packages
+   * that are run after the yeoman tests.
+   */
+  afterAll(() => {
+    process.chdir(dir);
+  });
+});