feat: Getting fancier with Storybook

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,14 +19,27 @@
 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>
 );
 
 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;
+}