feat: Getting fancier with Storybook

superset-frontend/.eslintrc.js

@@ -114,6 +114,12 @@ module.exports = {
         },
       },
     },
+    {
+      files: ['*.stories.jsx','*.stories.tsx'],
+      rules: {
+        'import/no-extraneous-dependencies': 0,
+      }
+    },
   ],
   rules: {
     camelcase: [

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;
+}