feat: adding Storybook to Superset (#10383)

* Storybook added!

* starting to configure junk....

* Storybook works!!!

* Now with theme!

* apache boilerplate

* more apache comments

* lots o' knobs for the Button.... taking stock of the codebase

* more classes, but killing the knob for now.

* nixing unused module

* linting

* fresh package-lock

* now with tooltip!

* adding path and zlip because the linter told me to

* upgrading storybook packages from devdeps

* linting

* removing cruft

* killing an annoying (and old?) lint issue

* lint fix, take 2.

* removing zlib/path

* package lock reset from master

* re-adding new packages for this here PR

* nixing console log, simplifying

* nixing comment TODOs (done enough!)

* basic docs.

CONTRIBUTING.md

@@ -703,6 +703,17 @@ npm run cypress open
 
 See [`superset-frontend/cypress_build.sh`](https://github.com/apache/incubator-superset/blob/master/superset-frontend/cypress_build.sh).
 
+### Storybook
+
+Superset includes a [Storybook](https://storybook.js.org/) to preview the layout/styling of various Superset components, and variations thereof. To open and view the Storybook: 
+
+```bash
+cd superset-frontend
+npm run storybool
+```
+
+When contributing new React components to Superset, please try to add a Story alongside the component's `jsx/tsx` file.
+
 ## Translating
 
 We use [Babel](http://babel.pocoo.org/en/latest/) to translate Superset.

superset-frontend/.storybook/main.js

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+const path = require('path');
+
+// Suerset's webpack.config.js
+const customConfig = require('../webpack.config.js');
+
+module.exports = {
+ stories: ['../src/components/**/*.stories.jsx'],
+ addons: [
+ '@storybook/addon-actions',
+ '@storybook/addon-links',
+ '@storybook/preset-typescript',
+ 'storybook-addon-jsx',
+ '@storybook/addon-knobs/register',
+ ],
+ webpackFinal: config => ({
+ ...config,
+ module: {
+ ...config.module,
+ rules: customConfig.module.rules,
+ },
+ plugins: [...config.plugins, ...customConfig.plugins],
+ }),
+};

superset-frontend/.storybook/preview.jsx

@@ -0,0 +1,32 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { addDecorator } from '@storybook/react';
+import { jsxDecorator } from 'storybook-addon-jsx';
+
+import { supersetTheme, ThemeProvider } from '@superset-ui/style';
+
+import '../src/theme.ts';
+
+const themeDecorator = storyFn => (
+ <ThemeProvider theme={supersetTheme}>{storyFn()}</ThemeProvider>
+);
+
+addDecorator(jsxDecorator);
+addDecorator(themeDecorator);