fix(generator): add lockfile and fix styling issues (#18073)

* fix(generator): add lockfile and fix styling issues * fix margins and remove redundant scroll * update tutorial
apache · Jan 18, 2022 · 5bfe2d4 · 5bfe2d4
1 parent 3b64563
commit 5bfe2d4
Show file tree

Hide file tree

Showing 5 changed files with 28,426 additions and 22 deletions.
diff --git a/docs/src/pages/docs/Contributing/creating-viz-plugins.mdx b/docs/src/pages/docs/Contributing/creating-viz-plugins.mdx
@@ -59,6 +59,7 @@ After that the generator will ask a few questions (the defaults should be fine):
 ```
 $ yo @superset-ui/superset
 
+
      _-----_     ╭──────────────────────────╮
     |       |    │      Welcome to the      │
     |--(o)--|    │    generator-superset    │
@@ -70,12 +71,14 @@ $ yo @superset-ui/superset
  ´   `  |° ´ Y `
 
 ? Package name: superset-plugin-chart-hello-world
-? Description: Hello World
-? What type of chart would you like? Time-series chart
+? Plugin name: Hello World
+? Description: Superset Plugin Chart Hello World
+? What type of chart would you like? Regular chart
    create package.json
    create .gitignore
    create babel.config.js
    create jest.config.js
+   create package-lock.json
    create README.md
    create tsconfig.json
    create src/index.ts
@@ -96,7 +99,7 @@ $ yo @superset-ui/superset
 To build the viz plugin, run the following commands:
 
 ```
-npm i --force
+npm ci
 npm run build
 ```
 

diff --git a/superset-frontend/packages/generator-superset/generators/plugin-chart/index.js b/superset-frontend/packages/generator-superset/generators/plugin-chart/index.js
@@ -31,54 +31,58 @@ module.exports = class extends Generator {
         type: 'input',
         name: 'packageName',
         message: 'Package name:',
-        // Default to current folder name
+        // Default to current folder name, e.g. superset-plugin-chart-hello-world
         default: _.kebabCase(this.appname),
       },
+      {
+        type: 'input',
+        name: 'pluginName',
+        message: 'Plugin name:',
+        // Hello World
+        default: _.startCase(
+          _.camelCase(this.appname.replace('superset plugin chart', '').trim()),
+        ),
+      },
       {
         type: 'input',
         name: 'description',
         message: 'Description:',
-        // Default to current folder name
-        default: _.upperFirst(
-          _.startCase(this.appname.replace('superset plugin chart', '').trim()),
-        ),
+        // Superset Plugin Chart Hello World
+        default: _.upperFirst(_.startCase(this.appname)),
       },
       {
         type: 'list',
         name: 'chartType',
         message: 'What type of chart would you like?',
         choices: [
-          {
-            name: 'Time-series chart',
-            value: 'timeseries',
-          },
           {
             name: 'Regular chart',
             value: 'regular',
           },
+          {
+            name: 'Time-series chart',
+            value: 'timeseries',
+          },
         ],
       },
     ]);
   }
 
   writing() {
-    // 'hello-world' -> 'HelloWorld'
+    // SupersetPluginChartHelloWorld
     const packageLabel = _.upperFirst(_.camelCase(this.answers.packageName));
 
-    // 'hello-world' -> 'Hello World'
-    const pluginName = _.startCase(_.camelCase(this.answers.packageName));
-
     const params = {
       ...this.answers,
       packageLabel,
-      pluginName,
     };
 
     [
       ['gitignore.erb', '.gitignore'],
       ['babel.config.erb', 'babel.config.js'],
       ['jest.config.erb', 'jest.config.js'],
       ['package.erb', 'package.json'],
+      ['package-lock.erb', 'package-lock.json'],
       ['README.erb', 'README.md'],
       ['tsconfig.json', 'tsconfig.json'],
       ['src/index.erb', 'src/index.ts'],

diff --git a/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/README.erb b/superset-frontend/packages/generator-superset/generators/plugin-chart/templates/README.erb
@@ -7,7 +7,7 @@ This is the <%= description %> Superset Chart Plugin.
 To build the plugin, run the following commands:
 
 ```
-npm i --force
+npm ci
 npm run build
 ```