WIP

packages/grafana-ui/.storybook/config.ts

@@ -0,0 +1,11 @@
+import { configure } from '@storybook/react';
+import '../../../public/sass/grafana.dark.scss';
+
+// automatically import all files ending in *.stories.tsx
+const req = require.context('../stories', true, /.story.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

packages/grafana-ui/.storybook/webpack.config.js

@@ -0,0 +1,43 @@
+const path = require('path');
+
+module.exports = (baseConfig, env, config) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve('awesome-typescript-loader'),
+      },
+    ],
+  });
+  config.module.rules.push({
+    test: /\.scss$/,
+    use: [
+      {
+        loader: 'style-loader',
+      },
+      {
+        loader: 'css-loader',
+        options: {
+          importLoaders: 2,
+          url: false,
+          sourceMap: false,
+          minimize: false,
+        },
+      },
+      {
+        loader: 'postcss-loader',
+        options: {
+          sourceMap: false,
+          config: { path: __dirname + '../../../../scripts/webpack/postcss.config.js' },
+        },
+      },
+      { loader: 'sass-loader', options: { sourceMap: false } },
+    ],
+  });
+  config.module.rules.push({
+    test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
+    loader: 'file-loader',
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};