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