feat: Getting fancier with Storybook (#10647)

* Niftier paddings

* upgrading storybook, fixing glob pattern

* moving a couple storybook dependencies to dev dependencies

* fixing annoying lint issue about dev dependencies needing to be dependencies

* adds essential addons, fixes backgrounds

* newline tweaks

* comment about no-extraneous-dependencies, higher specificity on that rule, other linting stuff

* a *python* linter doesn't like this whitespace?!

* putting the linespace back

* ugh, found the space causing CI issues... I think

superset-frontend/.eslintrc.js

@@ -87,12 +87,18 @@ module.exports = {
         'no-prototype-builtins': 0,
         'no-restricted-properties': 0,
         'no-restricted-syntax': 0,
-        'no-restricted-imports': ['error', {
-          'paths': [{
-            'name': 'antd',
-            'message': 'Please import Ant components from the index of common/components',
-          }]
-        }],
+        'no-restricted-imports': [
+          'error',
+          {
+            paths: [
+              {
+                name: 'antd',
+                message:
+                  'Please import Ant components from the index of common/components',
+              },
+            ],
+          },
+        ],
         'padded-blocks': 0,
         'prefer-arrow-callback': 0,
         'react/forbid-prop-types': 0,
@@ -114,6 +120,17 @@ module.exports = {
         },
       },
     },
+    {
+      files: ['*.stories.jsx', '*.stories.tsx'],
+      rules: {
+        // this is to keep eslint from complaining about storybook addons,
+        // since they are included as dev dependencies rather than direct dependencies.
+        'import/no-extraneous-dependencies': [
+          'error',
+          { devDependencies: true },
+        ],
+      },
+    },
   ],
   rules: {
     camelcase: [
@@ -152,12 +169,18 @@ module.exports = {
     'no-prototype-builtins': 0,
     'no-restricted-properties': 0,
     'no-restricted-syntax': 0,
-    'no-restricted-imports': ['error', {
-      'paths': [{
-        'name': 'antd',
-        'message': 'Please import Ant components from the index of common/components',
-      }]
-    }],
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'antd',
+            message:
+              'Please import Ant components from the index of common/components',
+          },
+        ],
+      },
+    ],
     'padded-blocks': 0,
     'prefer-arrow-callback': 0,
     'prefer-object-spread': 1,

superset-frontend/.storybook/main.js

@@ -22,13 +22,14 @@ const path = require('path');
 const customConfig = require('../webpack.config.js');
 
 module.exports = {
-  stories: ['../src/components/**/*.stories.(t|j)sx'],
+  stories: ['../src/components/**/*.stories.@(t|j)sx'],
   addons: [
-    '@storybook/addon-actions',
+    '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/preset-typescript',
     'storybook-addon-jsx',
     '@storybook/addon-knobs/register',
+    'storybook-addon-paddings',
   ],
   webpackFinal: config => ({
     ...config,

superset-frontend/.storybook/preview.jsx

@@ -19,10 +19,13 @@
 import React from 'react';
 import { addDecorator } from '@storybook/react';
 import { jsxDecorator } from 'storybook-addon-jsx';
+import { addParameters } from '@storybook/react';
+import { withPaddings } from 'storybook-addon-paddings';
 
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 
 import '../src/theme.ts';
+import './storybook.css';
 
 const themeDecorator = storyFn => (
   <ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider>
@@ -30,3 +33,13 @@ const themeDecorator = storyFn => (
 
 addDecorator(jsxDecorator);
 addDecorator(themeDecorator);
+addDecorator(withPaddings);
+
+addParameters({
+  paddings: [
+    { name: 'None', value: '0px' },
+    { name: 'Small', value: '16px' },
+    { name: 'Medium', value: '32px', default: true },
+    { name: 'Large', value: '64px' },
+  ],
+});

superset-frontend/.storybook/storybook.css

@@ -0,0 +1,3 @@
+body{
+  background: transparent;
+}

superset-frontend/package.json

@@ -61,8 +61,6 @@
     "@babel/runtime-corejs3": "^7.8.4",
     "@data-ui/sparkline": "^0.0.54",
     "@emotion/core": "^10.0.28",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
     "@superset-ui/chart": "^0.14.9",
     "@superset-ui/chart-composition": "^0.14.9",
     "@superset-ui/chart-controls": "^0.14.22",
@@ -209,10 +207,13 @@
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@hot-loader/react-dom": "^16.13.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.1",
+    "@storybook/addon-actions": "^6.0.13",
+    "@storybook/addon-essentials": "^6.0.13",
+    "@storybook/addon-knobs": "^6.0.13",
     "@storybook/addon-links": "^5.3.19",
     "@storybook/addons": "^5.3.19",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^5.3.19",
+    "@storybook/react": "^6.0.13",
     "@svgr/webpack": "^5.4.0",
     "@types/classnames": "^2.2.9",
     "@types/dom-to-image": "^2.6.0",
@@ -275,6 +276,7 @@
     "source-map-support": "^0.5.16",
     "speed-measure-webpack-plugin": "^1.2.3",
     "storybook-addon-jsx": "^7.3.3",
+    "storybook-addon-paddings": "^2.0.2",
     "style-loader": "^1.0.0",
     "terser-webpack-plugin": "^1.1.0",
     "thread-loader": "^1.2.0",

superset-frontend/src/components/Button/button.stories.jsx

@@ -100,7 +100,7 @@ const hrefKnob = {
 };
 
 export const ButtonGallery = () => (
-  <div style={{ padding: '10px', backgroundColor: 'white' }}>
+  <>
     {Object.values(bsSizeKnob.options)
       .filter(a => a)
       .map(size => (
@@ -121,47 +121,45 @@ export const ButtonGallery = () => (
             ))}
         </div>
       ))}
-  </div>
+  </>
 );
 
 export const InteractiveButton = () => (
-  <div style={{ padding: '10px', backgroundColor: 'white' }}>
-    <Button
-      disabled={boolean('Disabled', false)}
-      bsStyle={select(
-        bsStyleKnob.label,
-        bsStyleKnob.options,
-        bsStyleKnob.defaultValue,
-        bsStyleKnob.groupId,
-      )}
-      bsSize={select(
-        bsSizeKnob.label,
-        bsSizeKnob.options,
-        bsSizeKnob.defaultValue,
-        bsSizeKnob.groupId,
-      )}
-      onClick={action('clicked')}
-      type={select(
-        typeKnob.label,
-        typeKnob.options,
-        typeKnob.defaultValue,
-        typeKnob.groupId,
-      )}
-      target={select(
-        targetKnob.label,
-        targetKnob.options,
-        targetKnob.defaultValue,
-        targetKnob.groupId,
-      )}
-      href={select(
-        hrefKnob.label,
-        hrefKnob.options,
-        hrefKnob.defaultValue,
-        hrefKnob.groupId,
-      )}
-      tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
-    >
-      {text('Label', 'Button!')}
-    </Button>
-  </div>
+  <Button
+    disabled={boolean('Disabled', false)}
+    bsStyle={select(
+      bsStyleKnob.label,
+      bsStyleKnob.options,
+      bsStyleKnob.defaultValue,
+      bsStyleKnob.groupId,
+    )}
+    bsSize={select(
+      bsSizeKnob.label,
+      bsSizeKnob.options,
+      bsSizeKnob.defaultValue,
+      bsSizeKnob.groupId,
+    )}
+    onClick={action('clicked')}
+    type={select(
+      typeKnob.label,
+      typeKnob.options,
+      typeKnob.defaultValue,
+      typeKnob.groupId,
+    )}
+    target={select(
+      targetKnob.label,
+      targetKnob.options,
+      targetKnob.defaultValue,
+      targetKnob.groupId,
+    )}
+    href={select(
+      hrefKnob.label,
+      hrefKnob.options,
+      hrefKnob.defaultValue,
+      hrefKnob.groupId,
+    )}
+    tooltip={boolean('Tooltip', false) === true ? 'This is a tooltip!' : null}
+  >
+    {text('Label', 'Button!')}
+  </Button>
 );

superset-frontend/src/components/Label/Label.stories.tsx

@@ -43,7 +43,7 @@ export const bsStyleKnob = {
 };
 
 export const LabelGallery = () => (
-  <div style={{ padding: '10px' }}>
+  <>
     {Object.values(bsStyleKnob.options).map(opt => (
       <Label
         key={opt}
@@ -54,22 +54,20 @@ export const LabelGallery = () => (
         {`style: "${opt}"`}
       </Label>
     ))}
-  </div>
+  </>
 );
 
 export const InteractiveLabel = () => (
-  <div style={{ padding: '10px' }}>
-    <Label
-      bsStyle={select(
-        bsStyleKnob.label,
-        bsStyleKnob.options,
-        bsStyleKnob.defaultValue,
-      )}
-      onClick={
-        boolean('Has onClick action', false) ? action('clicked') : undefined
-      }
-    >
-      {text('Label', 'Label!')}
-    </Label>
-  </div>
+  <Label
+    bsStyle={select(
+      bsStyleKnob.label,
+      bsStyleKnob.options,
+      bsStyleKnob.defaultValue,
+    )}
+    onClick={
+      boolean('Has onClick action', false) ? action('clicked') : undefined
+    }
+  >
+    {text('Label', 'Label!')}
+  </Label>
 );