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

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
 ```
 

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

@@ -31,47 +31,50 @@ 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,
     };
 
     [
@@ -79,6 +82,7 @@ module.exports = class extends Generator {
       ['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'],

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
 ```
 

superset-frontend/packages/generator-superset/generators/plugin-chart/templates/src/MyChart.erb

@@ -31,15 +31,22 @@ const Styles = styled.div<<%= packageLabel %>StylesProps>`
   background-color: ${({ theme }) => theme.colors.secondary.light2};
   padding: ${({ theme }) => theme.gridUnit * 4}px;
   border-radius: ${({ theme }) => theme.gridUnit * 2}px;
-  height: ${({ height }) => height};
-  width: ${({ width }) => width};
-  overflow-y: scroll;
+  height: ${({ height }) => height}px;
+  width: ${({ width }) => width}px;
 
   h3 {
     /* You can use your props to control CSS! */
-    font-size: ${({ theme, headerFontSize }) => theme.typography.sizes[headerFontSize]};
+    margin-top: 0;
+    margin-bottom: ${({ theme }) => theme.gridUnit * 3}px;
+    font-size: ${({ theme, headerFontSize }) => theme.typography.sizes[headerFontSize]}px;
     font-weight: ${({ theme, boldText }) => theme.typography.weights[boldText ? 'bold' : 'normal']};
   }
+
+  pre {
+    height: ${({ theme, headerFontSize, height }) => (
+      height - theme.gridUnit * 12 - theme.typography.sizes[headerFontSize]
+    )}px;
+  }
 `;
 
 /**