grafana/ui: Enable storybook docs (#19930)

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

@@ -1,7 +1,3 @@
-import { configure, addDecorator } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
-import { withTheme } from '../src/utils/storybook/withTheme';
-import { withPaddedStory } from '../src/utils/storybook/withPaddedStory';
 import 'jquery';
 import '../../../public/vendor/flot/jquery.flot.js';
 import '../../../public/vendor/flot/jquery.flot.selection';
@@ -13,12 +9,16 @@ import '../../../public/vendor/flot/jquery.flot.fillbelow';
 import '../../../public/vendor/flot/jquery.flot.crosshair';
 import '../../../public/vendor/flot/jquery.flot.dashes';
 import '../../../public/vendor/flot/jquery.flot.gauge';
+import { withTheme } from '../src/utils/storybook/withTheme';
+import { withPaddedStory } from '../src/utils/storybook/withPaddedStory';
 // @ts-ignore
 import lightTheme from '../../../public/sass/grafana.light.scss';
 // @ts-ignore
 import darkTheme from '../../../public/sass/grafana.dark.scss';
+import { configure, addDecorator, addParameters } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
 
-const handleThemeChange = (theme: string) => {
+const handleThemeChange = (theme: any) => {
   if (theme !== 'light') {
     lightTheme.unuse();
     darkTheme.use();
@@ -27,15 +27,24 @@ const handleThemeChange = (theme: string) => {
     lightTheme.use();
   }
 };
-// automatically import all files ending in *.stories.tsx
-const req = require.context('../src', true, /.story.tsx$/);
 
+addDecorator(withTheme(handleThemeChange));
 addDecorator(withKnobs);
 addDecorator(withPaddedStory);
-addDecorator(withTheme(handleThemeChange));
 
-function loadStories() {
-  req.keys().forEach(req);
-}
+addParameters({
+  options: {
+    showPanel: true,
+    panelPosition: 'bottom',
+    showNav: true,
+    isFullscreen: false,
+    isToolshown: true,
+    storySort: (a: any, b: any) => a[1].id.localeCompare(b[1].id),
+  },
+  knobs: {
+    escapeHTML: false,
+  },
+});
 
-configure(loadStories, module);
+// @ts-ignore
+configure(require.context('../src', true, /\.story\.(js|jsx|ts|tsx|mdx)$/), module);

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

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = [
+  {
+    name: '@storybook/addon-docs/react/preset',
+    options: { configureJSX: true, babelOptions: {}, sourceLoaderOptions: null },
+  },
+];

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

@@ -1,15 +1,35 @@
 const path = require('path');
+module.exports = ({ config, mode }) => {
+  config.module.rules = [
+    ...(config.module.rules || []),
+    {
+      test: /\.tsx?$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            // transpileOnly: true,
+            configFile: path.resolve(__dirname, '../tsconfig.json'),
+          },
+        },
+        {
+          loader: require.resolve('react-docgen-typescript-loader'),
+          options: {
+            tsconfigPath: path.resolve(__dirname, '../tsconfig.json'),
+            // https://github.com/styleguidist/react-docgen-typescript#parseroptions
+            // @ts-ignore
+            propFilter: prop => {
+              if (prop.parent) {
+                return !prop.parent.fileName.includes('node_modules/@types/react/');
+              }
 
-module.exports = ({config, mode}) => {
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    use: [
-      {
-        loader: require.resolve('ts-loader'),
-        options: {}
-      },
-    ],
-  });
+              return true;
+            },
+          },
+        },
+      ],
+    },
+  ];
 
   config.module.rules.push({
     test: /\.scss$/,
@@ -54,6 +74,8 @@ module.exports = ({config, mode}) => {
   });
 
   config.resolve.extensions.push('.ts', '.tsx');
-
+  config.stats = {
+    warningsFilter: /export .* was not found in/,
+  };
   return config;
 };