Chore: Upgrade Storybook to 5.3.9 (#21550)

* Upgraded to latest stroybook.

* Upgraded to version 5.3.9

* updated yarn.lock file.

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

@@ -1,2 +0,0 @@
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-actions/register';

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

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.story.{js,jsx,ts,tsx,mdx}'],
+  addons: ['@storybook/addon-knobs', '@storybook/addon-actions', '@storybook/addon-docs'],
+};

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

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

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

@@ -32,6 +32,7 @@ addDecorator(withKnobs);
 addDecorator(withPaddedStory);
 
 addParameters({
+  info: {},
   options: {
     showPanel: true,
     panelPosition: 'bottom',

packages/grafana-ui/package.json

@@ -60,12 +60,12 @@
     "tinycolor2": "1.4.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.4",
-    "@storybook/addon-docs": "^5.2.4",
-    "@storybook/addon-info": "5.2.4",
-    "@storybook/addon-knobs": "5.2.4",
-    "@storybook/react": "5.2.4",
-    "@storybook/theming": "5.2.4",
+    "@storybook/addon-actions": "5.3.9",
+    "@storybook/addon-docs": "5.3.9",
+    "@storybook/addon-info": "5.3.9",
+    "@storybook/addon-knobs": "5.3.9",
+    "@storybook/react": "5.3.9",
+    "@storybook/theming": "5.3.9",
     "@types/classnames": "2.2.7",
     "@types/common-tags": "^1.8.0",
     "@types/d3": "5.7.2",
@@ -79,8 +79,6 @@
     "@types/react-custom-scrollbars": "4.0.5",
     "@types/react-test-renderer": "16.9.0",
     "@types/react-transition-group": "2.0.16",
-    "@types/storybook__addon-info": "4.1.2",
-    "@types/storybook__react": "4.0.2",
     "@types/tinycolor2": "1.4.1",
     "common-tags": "^1.8.0",
     "pretty-format": "24.9.0",

packages/grafana-ui/src/components/Tabs/TabsBar.mdx

@@ -6,4 +6,4 @@ import { TabsBar } from './TabsBar'
 A composition component for rendering a TabBar with Tabs for navigation
 
 
-<Props of={TabBar} />
+<Props of={TabsBar} />

packages/grafana-ui/src/types/index.ts

@@ -1,3 +1,4 @@
 export * from './theme';
 export * from './input';
 export * from './completion';
+export * from './storybook';

packages/grafana-ui/src/types/storybook.ts

@@ -0,0 +1,2 @@
+export type Renderable = React.ComponentType | JSX.Element;
+export type RenderFunction = () => Renderable | Renderable[];

packages/grafana-ui/src/utils/dom.ts

@@ -28,8 +28,8 @@ export function getPreviousCousin(node: any, selector: string) {
   return undefined;
 }
 
-export function getNextCharacter(global = window) {
-  const selection = global.getSelection();
+export function getNextCharacter(global?: any) {
+  const selection = (global || window).getSelection();
   if (!selection || !selection.anchorNode) {
     return null;
   }

packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RenderFunction } from '@storybook/react';
+import { RenderFunction } from '../../types';
 
 interface CenteredStoryProps {
   children: React.ReactNode;

packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RenderFunction } from '@storybook/react';
+import { RenderFunction } from '../../types';
 
 const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
   return (

packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RenderFunction } from '@storybook/react';
+import { RenderFunction } from '../../types';
 
 const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
   return (

packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { RenderFunction } from '@storybook/react';
 import { boolean, number } from '@storybook/addon-knobs';
 import { css, cx } from 'emotion';
+import { RenderFunction } from '../../types';
 
 const StoryContainer: React.FC<{ width?: number; showBoundaries: boolean }> = ({ children, width, showBoundaries }) => {
   const checkColor = '#f0f0f0';

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { RenderFunction } from '@storybook/react';
 import { ThemeContext } from '../../themes/ThemeContext';
 import { select } from '@storybook/addon-knobs';
 import { getTheme } from '../../themes/index';
 import { GrafanaThemeType } from '@grafana/data';
+import { RenderFunction } from '../../types';
 
 type SassThemeChangeHandler = (theme: GrafanaThemeType) => void;
 const ThemableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({