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

packages/grafana-ui/package.json

@@ -5,7 +5,8 @@
   "main": "src/index.ts",
   "scripts": {
     "tslint": "tslint -c tslint.json --project tsconfig.json",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "start-storybook -p 9001 -c .storybook"
   },
   "author": "",
   "license": "ISC",
@@ -23,11 +24,20 @@
     "react-virtualized": "^9.21.0"
   },
   "devDependencies": {
+    "@storybook/addon-info": "^4.1.4",
+    "@storybook/react": "^4.1.4",
+    "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
+    "@types/jquery": "^1.10.35",
     "@types/lodash": "^4.14.119",
+    "@types/node": "^10.12.18",
     "@types/react": "^16.7.6",
-    "@types/classnames": "^2.2.6",
-    "@types/jquery": "^1.10.35",
+    "@types/storybook__react": "^4.0.0",
+    "awesome-typescript-loader": "^5.2.1",
+    "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "typescript": "^3.2.2"
+  },
+  "resolutions": {
+    "@types/lodash": "4.14.119"
   }
 }

packages/grafana-ui/stories/Test.story.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { DeleteButton } from '@grafana/ui';
+
+storiesOf('Test story', module)
+.addDecorator((story) => (
+  <div style={{padding: '20px'}}>{story()}</div>
+))
+  .add('with text', () => {
+  return <DeleteButton onConfirm={() => { }}></DeleteButton>;
+});

packages/grafana-ui/tsconfig.json

@@ -5,14 +5,17 @@
     "src/**/*.tsx"
   ],
   "exclude": [
-    "dist"
+    "dist",
+    "node_modules"
   ],
   "compilerOptions": {
-    "rootDir": ".",
+    "rootDirs": [".", "stories"],
     "module": "esnext",
     "outDir": "dist",
     "declaration": true,
     "noImplicitAny": true,
-    "strictNullChecks": true
-  }
+    "strictNullChecks": true,
+    "typeRoots": ["./node_modules/@types", "types"],
+    "skipLibCheck": true // Temp workaround for Duplicate identifier tsc errors
+  },
 }

tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "public/dist",
     "target": "es5",
     "lib": ["es6", "dom"],
-    "rootDir": "public/",
+    "rootDirs": ["public/"],
     "jsx": "react",
     "module": "esnext",
     "declaration": false,