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