Add storybook to ui-components

packages/ui-components/.storybook/config.js

@@ -0,0 +1,5 @@
+import { configure } from '@storybook/react';
+
+const req = require.context('../stories', true, /.stories.tsx$/);
+
+configure(req, module);

packages/ui-components/.storybook/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "allowSyntheticDefaultImports": true,
+    "module": "es2015",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "../",
+    "outDir": "dist",
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "declaration": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}

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

@@ -0,0 +1,22 @@
+const path = require('path');
+const SRC_PATH = path.join(__dirname, '../src');
+const STORIES_PATH = path.join(__dirname, '../stories');
+
+//dont need stories path if you have your stories inside your src folder
+module.exports = ({ config }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    include: [SRC_PATH, STORIES_PATH],
+    use: [
+      {
+        loader: require.resolve('awesome-typescript-loader'),
+        options: {
+          configFileName: './.storybook/tsconfig.json'
+        }
+      },
+      { loader: require.resolve('react-docgen-typescript-loader') }
+    ]
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+};

packages/ui-components/babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ]
+  ]
+};

packages/ui-components/package.json

@@ -30,6 +30,7 @@
     "clean": "rimraf lib",
     "docs": "typedoc src",
     "prepublishOnly": "npm run build",
+    "storybook": "start-storybook -p 9001 -c .storybook",
     "watch": "tsc -b --watch"
   },
   "dependencies": {
@@ -44,8 +45,15 @@
     "typestyle": "^2.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.5.0",
+    "@babel/preset-env": "^7.5.0",
+    "@storybook/addon-actions": "^5.2.5",
+    "@storybook/react": "^5.2.5",
     "@types/react": "~16.8.18",
     "@types/webpack-env": "^1.13.9",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
+    "react-docgen-typescript-loader": "^3.3.0",
     "rimraf": "~2.6.2",
     "typedoc": "^0.15.2",
     "typescript": "~3.7.2"

packages/ui-components/stories/button.stories.tsx

@@ -0,0 +1,25 @@
+/**
+ * Example story for styling a button.
+ */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import '@jupyterlab/application/style/index.css';
+import '@jupyterlab/theme-light-extension/style/index.css';
+import { Button } from '@blueprintjs/core/lib/cjs/components/button/buttons';
+
+export default {
+  component: Button,
+  title: 'Button'
+};
+
+export const text = () => (
+  <Button onClick={action('clicked')}>Hello Button</Button>
+);
+
+export const emoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);