Experimenting with generating doc for ui component

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

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

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

@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = (baseConfig, env, config) => {
+
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     use: [
@@ -9,6 +10,7 @@ module.exports = (baseConfig, env, config) => {
       },
     ],
   });
+
   config.module.rules.push({
     test: /\.scss$/,
     use: [
@@ -34,6 +36,21 @@ module.exports = (baseConfig, env, config) => {
       { loader: 'sass-loader', options: { sourceMap: false } },
     ],
   });
+
+  config.module.rules.push({
+    test: require.resolve('jquery'),
+    use: [
+      {
+        loader: 'expose-loader',
+        query: 'jQuery',
+      },
+      {
+        loader: 'expose-loader',
+        query: '$',
+      },
+    ],
+  });
+
   config.resolve.extensions.push('.ts', '.tsx');
   return config;
 };

packages/grafana-ui/package.json

@@ -28,7 +28,7 @@
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
-    "@storybook/addon-info": "^4.1.4",
+    "@storybook/addon-info": "^4.1.6",
     "@storybook/react": "^4.1.4",
     "@types/classnames": "^2.2.6",
     "@types/jest": "^23.3.2",
@@ -36,13 +36,15 @@
     "@types/lodash": "^4.14.119",
     "@types/node": "^10.12.18",
     "@types/react": "^16.7.6",
-    "@types/storybook__react": "^4.0.0",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-test-renderer": "^16.0.3",
     "@types/react-transition-group": "^2.0.15",
+    "@types/storybook__addon-info": "^3.4.2",
+    "@types/storybook__react": "^4.0.0",
     "@types/tether-drop": "^1.4.8",
     "@types/tinycolor2": "^1.4.1",
     "awesome-typescript-loader": "^5.2.1",
+    "react-docgen-typescript-loader": "^3.0.0",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
     "react-test-renderer": "^16.7.0",
     "typescript": "^3.2.2"

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -0,0 +1,25 @@
+import React, { FunctionComponent } from 'react';
+import { storiesOf } from '@storybook/react';
+import { ColorPicker } from '@grafana/ui';
+import { withInfo } from '@storybook/addon-info';
+
+const CenteredStory: FunctionComponent<{}> = ({ children }) => {
+  return (
+    <div
+      style={{
+        height: '100vh  ',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+storiesOf('UI/ColorPicker', module)
+  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
+  .add('default', withInfo({inline: true})(() => {
+    return <ColorPicker color="#ff0000" onChange={() => {}} />;
+  }));

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import Drop from 'tether-drop';
 import { ColorPickerPopover } from './ColorPickerPopover';
 
-export interface Props {
+interface Props {
+  /**
+   * Value to display, either empty (" ") or "X" / "O".
+   *
+   * @default " "
+   **/
   color: string;
   onChange: (c: string) => void;
 }
 
-export class ColorPicker extends React.Component<Props, any> {
+export class ColorPicker extends Component<Props, any> {
   pickerElem: HTMLElement | null;
   colorPickerDrop: any;
 
@@ -59,3 +64,5 @@ export class ColorPicker extends React.Component<Props, any> {
     );
   }
 }
+
+export default ColorPicker;

packages/grafana-ui/src/components/DeleteButton/DeleteButton.story.tsx

@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from 'react';
+import { storiesOf } from '@storybook/react';
+import { DeleteButton } from '@grafana/ui';
+
+const CenteredStory: FunctionComponent<{}> = ({ children }) => {
+  return (
+    <div
+      style={{
+        height: '100vh  ',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+storiesOf('UI/DeleteButton', module)
+  .addDecorator(story => <CenteredStory>{story()}</CenteredStory>)
+  .add('default', () => {
+    return <DeleteButton onConfirm={() => {}} />;
+  });

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

@@ -1,11 +0,0 @@
-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>;
-});

public/sass/_grafana.scss

@@ -1,4 +1,4 @@
- // DEPENDENCIES
+   // DEPENDENCIES
 @import '../../node_modules/react-table/react-table.css';
 
 // VENDOR