feat: updated viz plugin generator (apache#636)

* feat: hello world plugin

* Fix yeoman generator

* Adding Emotion to template and template result

* adding `reactify` technique to example code

* fixing errant comma

* annoying lint issue

* React needed for JSX

* questionable typing fix

* labelling options

* freshly generated hello world

* linting and freshly generated plugin

* add comments to buildQuery

* Add docs

* nixing word cloud console logs

* lint annoyance

* a note on multiple plugin exports

* second option for building a plugin is now enabled

* Officially supporting viz plugins ;)

* fresh plugin build

* Adding note about controls,  and TODOs for example controls

* linting

* new lock file

* adding file structure to readme

* more transform props notes

* better notes, better linting

* Adding a third option for rendering plugin

* fresh package rendering

* manually updated plugin. Now let's see if the generator matches it!

* template changes, fresh plugin render.

* moving file tree to the right place

* touchups to template (killing third option)

* thumbnail update

* Spit out form data, for good measure.

* more clarity

* dummy controls

* bold control works, fresh docs, fresh build!

* typing for fancy props

* bump superset-ui deps to 0.14

* Implement header text and font size

* Add tests + mcense headers + inor cleanup

* Replace YourPluginName with packageLabel in README

* remove trailing spaces

* fix hard coded reference to HelloWorld

* removing legacy generators

* plugin comment tweaks

* typescript comments, minor formatting

* adding option for badges in readme

* generator offers choice of function or class plugin

* Add timeseries option

* killing the plugin... we'll make that a separate PR.

* add new tests

* remove unnecessary imports

* fix timeseries type

* comment on value/label in select options

Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>

* moving renderTrigger note up to first instance

* control-utils -> chart-controls

* Wrapper -> Styles nomenclature

* Stronger typing (H/T @ktmud)

* ControlPanelConfig type on control config

* nixing requiresTime

* moving Styles component to be external, passing it props

* lint nits

* typing tweak

Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>
Co-authored-by: Jesse Yang <jesse.yang@airbnb.com>

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/README.md

@@ -7,7 +7,8 @@
 
 ## Installation
 
-First, install [Yeoman](http://yeoman.io) and `generator-superset` using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).
+First, install [Yeoman](http://yeoman.io) and `generator-superset` using
+[npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).
 
 ```bash
 npm install -g yo
@@ -16,7 +17,7 @@ npm install -g @superset-ui/generator-superset
 
 ## Usage
 
-Generate a new package in `@superset-ui`
+Generate a new package or visualization plugin in `@superset-ui`
 
 ```bash
 cd superset-ui/packages

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

@@ -25,14 +25,6 @@ module.exports = class extends Generator {
             name: 'Create superset-ui chart plugin package',
             value: 'plugin-chart',
           },
-          {
-            name: 'Create superset-ui-legacy package',
-            value: 'legacy-plugin-chart',
-          },
-          {
-            name: 'Create superset-ui-legacy chart demo in storybook',
-            value: 'legacy-plugin-chart-demo',
-          },
         ],
       },
     ]);

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

@@ -22,6 +22,42 @@ module.exports = class extends Generator {
         // Default to current folder name
         default: _.upperFirst(_.startCase(this.appname.replace('plugin chart', '').trim())),
       },
+      {
+        type: 'list',
+        name: 'componentType',
+        message: 'What type of React component would you like?',
+        choices: [
+          {
+            name: 'Class component',
+            value: 'class',
+          },
+          {
+            name: 'Function component (with hooks)',
+            value: 'function',
+          },
+        ],
+      },
+      {
+        type: 'list',
+        name: 'chartType',
+        message: 'What type of chart would you like?',
+        choices: [
+          {
+            name: 'Time-series chart',
+            value: 'timeseries',
+          },
+          {
+            name: 'Regular chart',
+            value: 'regular',
+          },
+        ],
+      },
+      {
+        type: 'confirm',
+        name: 'addBadges',
+        message: "Add superset-ui badges to your plugin's README.md",
+        default: true,
+      },
     ]);
   }
 
@@ -37,10 +73,14 @@ module.exports = class extends Generator {
       ['package.erb', 'package.json'],
       ['README.erb', 'README.md'],
       ['src/index.erb', 'src/index.ts'],
+      ['src/plugin/buildQuery.erb', 'src/plugin/buildQuery.ts'],
+      ['src/plugin/controlPanel.erb', 'src/plugin/controlPanel.ts'],
       ['src/plugin/index.erb', 'src/plugin/index.ts'],
-      ['src/plugin/transformProps.txt', 'src/plugin/transformProps.ts'],
+      ['src/plugin/transformProps.erb', 'src/plugin/transformProps.ts'],
       ['src/MyChart.erb', `src/${packageLabel}.tsx`],
       ['test/index.erb', 'test/index.test.ts'],
+      ['test/plugin/buildQuery.test.erb', 'test/plugin/buildQuery.test.ts'],
+      ['test/plugin/transformProps.test.erb', 'test/plugin/transformProps.test.ts'],
     ].forEach(([src, dest]) => {
       this.fs.copyTpl(this.templatePath(src), this.destinationPath(dest), params);
     });

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

@@ -1,7 +1,7 @@
 ## @superset-ui/plugin-chart-<%= packageName %>
 
-[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-<%= packageName %>.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/plugin-chart-<%= packageName %>.svg?style=flat-square)
-[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-plugin-chart-<%= packageName %>&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-<%= packageName %>)
+<%if (addBadges) { %>[![Version](https://img.shields.io/npm/v/@superset-ui/plugin-chart-<%= packageName %>.svg?style=flat-square)](https://img.shields.io/npm/v/@superset-ui/plugin-chart-<%= packageName %>.svg?style=flat-square)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-plugin-chart-<%= packageName %>&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-plugin-chart-<%= packageName %>)<% } %>
 
 This plugin provides <%= description %> for Superset.
 
@@ -29,4 +29,26 @@ Then use it via `SuperChart`. See [storybook](https://apache-superset.github.io/
     data: {...},
   }}
 />
+```
+
+### File structure generated
+
+```
+├── README.md
+├── package.json
+├── src
+│   ├── <%= packageLabel %>.tsx
+│   ├── images
+│   │   └── thumbnail.png
+│   ├── index.ts
+│   ├── plugin
+│   │   ├── buildQuery.ts
+│   │   ├── controlPanel.ts
+│   │   ├── index.ts
+│   │   └── transformProps.ts
+│   └── types.ts
+├── test
+│   └── index.test.ts
+└── types
+    └── external.d.ts
 ```

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/package.erb

@@ -26,7 +26,16 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@superset-ui/chart": "latest",
-    "@superset-ui/translation": "latest"
+    "@superset-ui/chart": "^0.14.1",
+    "@superset-ui/query": "^0.14.1",
+    "@superset-ui/chart-controls": "^0.14.0",
+    "@superset-ui/translation": "^0.14.0",
+    "@superset-ui/validator": "^0.14.1",
+    "@superset-ui/style": "^0.14.0",
+    "react": "^16.13.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^26.0.0",
+    "jest": "^26.0.1"
   }
 }