Add react storybook

.gitignore

@@ -19,6 +19,7 @@ sentry-package.json
 /env
 /tmp
 /node_modules/
+/docs-ui/node_modules/
 /docs/_build
 example/db.sqlite
 /src/sentry/assets.json
@@ -33,4 +34,4 @@ example/db.sqlite
 /test_cli/
 Gemfile.lock
 .idea/
-.vscode/tags
+.vscode/tags

.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -0,0 +1,23 @@
+import {configure, setAddon} from '@storybook/react';
+import infoAddon, {setDefaults} from '@storybook/addon-info';
+import './storybook.less';
+
+setDefaults({
+  inline: true,
+  header: false,
+  source: true
+});
+setAddon(infoAddon);
+
+// Use webpack's require.context to load modules dynamically
+// From https://storybook.js.org/basics/writing-stories/
+const req = require.context('../docs-ui/components', true, /\.stories\.js$/);
+
+configure(function() {
+  require('../docs-ui/index.js');
+  req.keys().forEach(filename => req(filename));
+}, module);
+
+// For percy integration
+if (typeof window === 'object')
+  window.__storybook_stories__ = require('@storybook/react').getStorybook();

.storybook/storybook.less

@@ -0,0 +1,15 @@
+html > body {
+  background-color: rgba(0, 0, 0, 0.05);
+  background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, 0.1) 1px, transparent 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, 0.1) 1px, transparent 8px);
+  background-size: 8px 8px;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+

.storybook/webpack.config.js

@@ -0,0 +1,62 @@
+const path = require('path');
+const webpack = require('webpack');
+
+const staticPath = path.resolve(__dirname, '..', 'src', 'sentry', 'static', 'sentry');
+const componentPath = path.resolve(staticPath, 'app', 'components');
+
+const sentryConfig = require('../webpack.config');
+const appConfig = sentryConfig[0];
+const legacyCssConfig = sentryConfig[1];
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.po$/,
+        loader: 'po-catalog-loader',
+        query: {
+          referenceExtensions: ['.js', '.jsx'],
+          domain: 'sentry'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      {
+        test: /\.less$/,
+        use: [
+          {
+            loader: 'style-loader'
+          },
+          {
+            loader: 'css-loader'
+          },
+          {
+            loader: 'less-loader'
+          }
+        ]
+      },
+      {
+        test: /\.(woff|woff2|ttf|eot|svg|png|gif|ico|jpg)($|\?)/,
+        loader: 'file-loader?name=' + '[name].[ext]'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+      'window.jQuery': 'jquery',
+      'root.jQuery': 'jquery',
+      Raven: 'raven-js',
+      underscore: 'underscore',
+      _: 'underscore'
+    })
+  ],
+  resolve: {
+    alias: Object.assign({}, appConfig.resolve.alias, {
+      'sentry-ui': componentPath
+    })
+  }
+};

.travis.yml

@@ -79,7 +79,7 @@ matrix:
         - redis-server
         - postgresql
     - python: 2.7
-      env: TEST_SUITE=js
+      env: TEST_SUITE=js PERCY_TOKEN=$STORYBOOK_PERCY_TOKEN PERCY_PROJECT=$STORYBOOK_PERCY_PROJECT
     - python: 2.7
       env: TEST_SUITE=cli
       services:

Makefile

@@ -114,6 +114,7 @@ test-js:
 	@${NPM_ROOT}/.bin/webpack
 	@echo "--> Running JavaScript tests"
 	@npm run test-ci
+	@npm run snapshot
 	@echo ""
 
 test-python:

docs-ui/components/pills.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {storiesOf} from '@storybook/react';
+
+import Pills from 'sentry-ui/pills';
+import Pill from 'sentry-ui/pill';
+
+// eslint-disable-next-line
+storiesOf(
+  'Pills'
+).addWithInfo('primary', 'When you have key/value data but are tight on space.', () => (
+  <Pills>
+    <Pill name="key" value="value" />
+    <Pill name="good" value={true}>thing</Pill>
+    <Pill name="bad" value={false}>thing</Pill>
+    <Pill name="generic">thing</Pill>
+  </Pills>
+));

docs-ui/index.js

@@ -0,0 +1,4 @@
+// Required for tooltip
+import 'jquery';
+import 'bootstrap/js/tooltip';
+import './less/sentry.less';

docs-ui/less/sentry.less

@@ -0,0 +1,6 @@
+@import url("../../src/sentry/static/sentry/less/sentry.less");
+
+body {
+  padding: 24px;
+  background: transparent;
+}