improve meta and story typings (#52659)

2022-07-22 17:19:16 +01:00
parent 0c89743759
commit 2b46138202
100 changed files with 579 additions and 563 deletions
@@ -1326,31 +1326,13 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/Alert/Alert.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/BigValue/BigValue.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/Button/Button.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
-    "packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Card/Card.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
-    "packages/grafana-ui/src/components/Cascader/Cascader.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Cascader/Cascader.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -1361,31 +1343,15 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
-    "packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
      [0, 0, 0, "Do not use any type assertions.", "3"]
    ],
-    "packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
    "packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
-    "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1428,9 +1394,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
    ],
-    "packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -1447,8 +1410,7 @@ exports[`better eslint`] = {
    ],
    "packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
    "packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -1458,26 +1420,12 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
-    "packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
-    "packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
-    ],
-    "packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/FilterInput/FilterInput.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -1485,18 +1433,12 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
-    "packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Forms/Form.story.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
      [0, 0, 0, "Do not use any type assertions.", "2"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
    ],
-    "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -1505,10 +1447,6 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
-    "packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-    ],
    "packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1525,18 +1463,9 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
-    "packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/Forms/Legend.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Gauge/Gauge.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -1595,18 +1524,16 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "3"]
    ],
    "packages/grafana-ui/src/components/Input/Input.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "3"]
    ],
    "packages/grafana-ui/src/components/JSONFormatter/JSONFormatter.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1673,9 +1600,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "2"],
      [0, 0, 0, "Do not use any type assertions.", "3"]
    ],
-    "packages/grafana-ui/src/components/Modal/Modal.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1684,9 +1608,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
    ],
-    "packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -1694,9 +1615,6 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/PanelChrome/index.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "packages/grafana-ui/src/components/PanelContainer/PanelContainer.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -1720,12 +1638,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "1"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
    ],
-    "packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Segment/Segment.story.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1773,9 +1685,8 @@ exports[`better eslint`] = {
    ],
    "packages/grafana-ui/src/components/Select/Select.story.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
    ],
    "packages/grafana-ui/src/components/Select/SelectBase.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -1869,34 +1780,14 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "19"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "20"]
    ],
-    "packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
-    ],
-    "packages/grafana-ui/src/components/Slider/Slider.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"]
-    ],
    "packages/grafana-ui/src/components/Sparkline/Sparkline.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"]
    ],
-    "packages/grafana-ui/src/components/Spinner/Spinner.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Do not use any type assertions.", "3"]
-    ],
-    "packages/grafana-ui/src/components/Switch/Switch.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
    ],
    "packages/grafana-ui/src/components/Table/BarGaugeCell.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -1930,9 +1821,6 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/Table/JSONViewCell.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "packages/grafana-ui/src/components/Table/Table.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/Table/Table.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -1994,9 +1882,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "11"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "12"]
    ],
-    "packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -2005,12 +1890,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"]
    ],
-    "packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
-    "packages/grafana-ui/src/components/TextArea/TextArea.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -2031,9 +1910,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "2"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
    ],
-    "packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -2055,9 +1931,6 @@ exports[`better eslint`] = {
    "packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -2072,9 +1945,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "3"],
      [0, 0, 0, "Do not use any type assertions.", "4"]
    ],
-    "packages/grafana-ui/src/components/VizTooltip/SeriesTable.story.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"]
-    ],
    "packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
@@ -8,11 +8,9 @@ import { StoryExample } from '../../utils/storybook/StoryExample';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from '../Alert/Alert.mdx';

-import { Props } from './Alert';
-
 const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];

-export default {
+const meta: ComponentMeta<typeof Alert> = {
  title: 'Overlays/Alert',
  component: Alert,
  decorators: [withCenteredStory, withHorizontallyCenteredStory],
@@ -32,7 +30,7 @@ export default {
  },
 };

-export const Examples: Story<Props> = ({ severity, title, buttonContent }) => {
+export const Examples: ComponentStory<typeof Alert> = ({ severity, title, buttonContent }) => {
  return (
    <VerticalGroup>
      <StoryExample name="With buttonContent and children">
@@ -190,3 +188,5 @@ Examples.args = {
  title: 'Some very important message',
  buttonContent: 'Close',
 };
+
+export default meta;
@@ -1,14 +1,14 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

-import { Badge, BadgeProps } from '@grafana/ui';
+import { Badge } from '@grafana/ui';

 import { iconOptions } from '../../utils/storybook/knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './Badge.mdx';

-export default {
+const meta: ComponentMeta<typeof Badge> = {
  title: 'Data Display/Badge',
  component: Badge,
  decorators: [withCenteredStory],
@@ -22,7 +22,7 @@ export default {
  },
 };

-const Template: Story<BadgeProps> = (args) => <Badge {...args} />;
+const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;

 export const Basic = Template.bind({});

@@ -31,3 +31,5 @@ Basic.args = {
  color: 'blue',
  icon: 'rocket',
 };
+
+export default meta;
@@ -10,7 +10,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Props } from './BarGauge';
 import mdx from './BarGauge.mdx';

-export default {
+const meta: Meta = {
  title: 'Visualizations/BarGauge',
  component: BarGauge,
  decorators: [withCenteredStory],
@@ -58,7 +58,7 @@ export default {
    threshold1Color: { control: 'color' },
    threshold2Color: { control: 'color' },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<Props> {
  numeric: number;
@@ -125,3 +125,5 @@ barGaugeHorizontal.args = {
  width: 500,
  orientation: VizOrientation.Horizontal,
 };
+
+export default meta;
@@ -16,7 +16,7 @@ import {
 } from './BigValue';
 import mdx from './BigValue.mdx';

-export default {
+const meta: Meta = {
  title: 'Visualizations/BigValue',
  component: BigValue,
  decorators: [withCenteredStory],
@@ -48,7 +48,7 @@ export default {
    },
    color: { control: 'color' },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<Props> {
  numeric: number;
@@ -110,3 +110,5 @@ Basic.args = {
  color: 'red',
  textMode: BigValueTextMode.Auto,
 };
+
+export default meta;
@@ -1,15 +1,15 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { ComponentSize } from '../../types/size';
 import { Card } from '../Card/Card';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';

-import { allButtonVariants, allButtonFills, Button, ButtonProps } from './Button';
+import { allButtonVariants, allButtonFills, Button } from './Button';
 import mdx from './Button.mdx';
 import { ButtonGroup } from './ButtonGroup';

-export default {
+const meta: ComponentMeta<typeof Button> = {
  title: 'Buttons/Button',
  component: Button,
  parameters: {
@@ -17,9 +17,9 @@ export default {
      page: mdx,
    },
  },
-} as Meta;
+};

-export const Variants: Story<ButtonProps> = () => {
+export const Variants: ComponentStory<typeof Button> = () => {
  const sizes: ComponentSize[] = ['lg', 'md', 'sm'];
  return (
    <VerticalGroup>
@@ -87,3 +87,5 @@ export const Variants: Story<ButtonProps> = () => {
    </VerticalGroup>
  );
 };
+
+export default meta;
@@ -1,13 +1,11 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { ButtonCascader } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { ButtonCascaderProps } from './ButtonCascader';
-
-export default {
+const meta: ComponentMeta<typeof ButtonCascader> = {
  title: 'Forms/Cascader/ButtonCascader',
  component: ButtonCascader,
  decorators: [withCenteredStory],
@@ -35,9 +33,9 @@ export default {
    icon: { control: { type: 'select', options: ['plus', 'minus', 'table'] } },
    options: { control: 'object' },
  },
-} as Meta;
+};

-const Template: Story<ButtonCascaderProps> = ({ children, ...args }) => {
+const Template: ComponentStory<typeof ButtonCascader> = ({ children, ...args }) => {
  return <ButtonCascader {...args}>{children}</ButtonCascader>;
 };

@@ -47,3 +45,5 @@ export const withIcon = Template.bind({});
 withIcon.args = {
  icon: 'plus',
 };
+
+export default meta;
@@ -6,7 +6,7 @@ import { Button } from '../Button/Button';

 import { CallToActionCard, CallToActionCardProps } from './CallToActionCard';

-export default {
+const meta: Meta = {
  title: 'Layout/CallToActionCard',
  component: CallToActionCard,
  parameters: {
@@ -17,7 +17,7 @@ export default {
  argTypes: {
    Element: { control: { type: 'select', options: ['button', 'custom'] } },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<CallToActionCardProps> {
  Element: string;
@@ -47,3 +47,5 @@ Basic.args = {
  H1Text: 'This is just H1 tag, you can any component as CTA element',
  buttonText: 'Add datasource',
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -7,12 +7,12 @@ import { IconButton } from '../IconButton/IconButton';
 import { VerticalGroup } from '../Layout/Layout';
 import { TagList } from '../Tags/TagList';

-import { Card, Props } from './Card';
+import { Card } from './Card';
 import mdx from './Card.mdx';

 const logo = 'https://grafana.com/static/assets/img/apple-touch-icon.png';

-export default {
+const meta: ComponentMeta<typeof Card> = {
  title: 'General/Card',
  component: Card,
  decorators: [withCenteredStory],
@@ -26,7 +26,7 @@ export default {
  },
 };

-export const Basic: Story<Props> = ({ disabled }) => {
+export const Basic: ComponentStory<typeof Card> = ({ disabled }) => {
  return (
    <Card disabled={disabled}>
      <Card.Heading>Filter by name</Card.Heading>
@@ -38,7 +38,7 @@ export const Basic: Story<Props> = ({ disabled }) => {
  );
 };

-export const AsLink: Story<Props> = ({ disabled }) => {
+export const AsLink: ComponentStory<typeof Card> = ({ disabled }) => {
  return (
    <VerticalGroup>
      <Card href="https://grafana.com" disabled={disabled}>
@@ -63,7 +63,7 @@ export const AsLink: Story<Props> = ({ disabled }) => {
  );
 };

-export const WithTags: Story<Props> = ({ disabled }) => {
+export const WithTags: ComponentStory<typeof Card> = ({ disabled }) => {
  return (
    <Card disabled={disabled}>
      <Card.Heading>Elasticsearch – Custom Templated Query</Card.Heading>
@@ -75,7 +75,7 @@ export const WithTags: Story<Props> = ({ disabled }) => {
  );
 };

-export const WithMedia: Story<Props> = ({ disabled }) => {
+export const WithMedia: ComponentStory<typeof Card> = ({ disabled }) => {
  return (
    <Card disabled={disabled}>
      <Card.Heading>1-ops-tools1-fallback</Card.Heading>
@@ -91,7 +91,7 @@ export const WithMedia: Story<Props> = ({ disabled }) => {
    </Card>
  );
 };
-export const WithActions: Story<Props> = ({ disabled }) => {
+export const WithActions: ComponentStory<typeof Card> = ({ disabled }) => {
  return (
    <Card disabled={disabled}>
      <Card.Heading>1-ops-tools1-fallback</Card.Heading>
@@ -120,7 +120,7 @@ export const WithActions: Story<Props> = ({ disabled }) => {
  );
 };

-export const Full: Story<Props> = ({ disabled }) => {
+export const Full: ComponentStory<typeof Card> = ({ disabled }) => {
  return (
    <Card disabled={disabled}>
      <Card.Heading>Card title</Card.Heading>
@@ -157,7 +157,7 @@ export const Full: Story<Props> = ({ disabled }) => {
  );
 };

-export const Selected: Story<Props> = () => {
+export const Selected: ComponentStory<typeof Card> = () => {
  return (
    <Card isSelected>
      <Card.Heading>Spaces</Card.Heading>
@@ -169,7 +169,7 @@ export const Selected: Story<Props> = () => {
  );
 };

-export const NotSelected: Story<Props> = () => {
+export const NotSelected: ComponentStory<typeof Card> = () => {
  return (
    <Card isSelected={false}>
      <Card.Heading>Tabs</Card.Heading>
@@ -180,3 +180,5 @@ export const NotSelected: Story<Props> = () => {
    </Card>
  );
 };
+
+export default meta;
@@ -1,11 +1,11 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { Cascader } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { CascaderOption, CascaderProps } from './Cascader';
+import { CascaderOption } from './Cascader';
 import mdx from './Cascader.mdx';

 const onSelect = (val: string) => console.log(val);
@@ -34,7 +34,7 @@ const options = [
  },
 ];

-export default {
+const meta: ComponentMeta<typeof Cascader> = {
  title: 'Forms/Cascader',
  component: Cascader,
  decorators: [withCenteredStory],
@@ -62,9 +62,9 @@ export default {
  argTypes: {
    width: { control: { type: 'range', min: 0, max: 70 } },
  },
-} as Meta;
+};

-const Template: Story<CascaderProps> = (args) => <Cascader {...args} />;
+const Template: ComponentStory<typeof Cascader> = (args) => <Cascader {...args} />;

 export const Simple = Template.bind({});
 Simple.args = {
@@ -101,3 +101,5 @@ export const WithOptionsStateUpdate = () => {

  return <Cascader options={updatedOptions} onSelect={onSelect} />;
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -6,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ClickOutsideWrapper } from './ClickOutsideWrapper';
 import mdx from './ClickOutsideWrapper.mdx';

-export default {
+const meta: ComponentMeta<typeof ClickOutsideWrapper> = {
  title: 'Layout/ClickOutsideWrapper',
  component: ClickOutsideWrapper,
  decorators: [withCenteredStory],
@@ -24,3 +25,5 @@ export const basic = () => {
    </ClickOutsideWrapper>
  );
 };
+
+export default meta;
@@ -8,7 +8,7 @@ import { Input } from '../Input/Input';
 import { ClipboardButton as ClipboardButtonImpl, Props } from './ClipboardButton';
 import mdx from './ClipboardButton.mdx';

-export default {
+const meta: Meta = {
  title: 'Buttons/ClipboardButton',
  component: ClipboardButtonImpl,
  decorators: [withCenteredStory],
@@ -20,7 +20,7 @@ export default {
      exclude: ['variant', 'icon', 'className', 'fullWidth', 'getText', 'onClipboardCopy', 'onClipboardError'],
    },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<Props> {
  inputText: string;
@@ -57,3 +57,5 @@ export const AsInputFieldAddon: Story<StoryProps> = (args) => {
    </div>
  );
 };
+
+export default meta;
@@ -1,9 +1,10 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { CollapsableSection } from './CollapsableSection';
 import mdx from './CollapsableSection.mdx';

-export default {
+const meta: ComponentMeta<typeof CollapsableSection> = {
  title: 'Layout/CollapsableSection',
  component: CollapsableSection,
  parameters: {
@@ -20,3 +21,5 @@ export const simple = () => {
    </CollapsableSection>
  );
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { UseState } from '../../utils/storybook/UseState';
@@ -6,7 +7,7 @@ import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/st
 import { Collapse, ControlledCollapse } from './Collapse';
 import mdx from './Collapse.mdx';

-export default {
+const meta: ComponentMeta<typeof Collapse> = {
  title: 'Layout/Collapse',
  component: Collapse,
  decorators: [withCenteredStory, withHorizontallyCenteredStory],
@@ -43,3 +44,5 @@ export const controlled = () => {
    </ControlledCollapse>
  );
 };
+
+export default meta;
@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/client-api';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { SeriesColorPicker, ColorPicker } from '@grafana/ui';
@@ -9,10 +9,9 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';

 import mdx from './ColorPicker.mdx';
-import { ColorPickerInput, ColorPickerInputProps } from './ColorPickerInput';
-import { ColorPickerProps } from './ColorPickerPopover';
+import { ColorPickerInput } from './ColorPickerInput';

-const meta: Meta = {
+const meta: ComponentMeta<typeof ColorPicker> = {
  title: 'Pickers and Editors/ColorPicker',
  component: ColorPicker,
  subcomponents: { SeriesColorPicker, ColorPickerInput },
@@ -31,7 +30,7 @@ const meta: Meta = {
  },
 };

-export const Basic: Story<ColorPickerProps> = ({ color, enableNamedColors }) => {
+export const Basic: ComponentStory<typeof ColorPicker> = ({ color, enableNamedColors }) => {
  const [, updateArgs] = useArgs();
  return renderComponentWithTheme(ColorPicker, {
    enableNamedColors,
@@ -43,7 +42,7 @@ export const Basic: Story<ColorPickerProps> = ({ color, enableNamedColors }) =>
  });
 };

-export const SeriesPicker: Story<ColorPickerProps> = ({ color, enableNamedColors }) => {
+export const SeriesPicker: ComponentStory<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => {
  const [, updateArgs] = useArgs();
  return (
    <SeriesColorPicker
@@ -65,7 +64,7 @@ export const SeriesPicker: Story<ColorPickerProps> = ({ color, enableNamedColors
  );
 };

-export const Input: Story<ColorPickerInputProps> = ({ color }) => {
+export const Input: ComponentStory<typeof ColorPickerInput> = ({ color }) => {
  const [, updateArgs] = useArgs();
  return (
    <ColorPickerInput
@@ -1,10 +1,12 @@
+import { ComponentMeta } from '@storybook/react';
+
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';

 import { ColorPickerPopover } from './ColorPickerPopover';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';

-export default {
+const meta: ComponentMeta<typeof ColorPickerPopover> = {
  title: 'Pickers and Editors/ColorPicker/Popovers',
  component: ColorPickerPopover,
  subcomponents: { SeriesColorPickerPopover },
@@ -14,7 +16,7 @@ export default {
 export const basic = () => {
  return renderComponentWithTheme(ColorPickerPopover, {
    color: '#BC67E6',
-    onChange: (color: any) => {
+    onChange: (color: string) => {
      console.log(color);
    },
  });
@@ -23,8 +25,10 @@ export const basic = () => {
 export const seriesColorPickerPopover = () => {
  return renderComponentWithTheme(SeriesColorPickerPopover, {
    color: '#BC67E6',
-    onChange: (color: any) => {
+    onChange: (color: string) => {
      console.log(color);
    },
  });
 };
+
+export default meta;
@@ -6,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './ColorPicker.mdx';
 import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';

-export default {
+const meta: Meta = {
  title: 'Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette',
  component: NamedColorsPalette,
  decorators: [withCenteredStory],
@@ -21,7 +21,7 @@ export default {
  argTypes: {
    selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<NamedColorsPaletteProps> {
  selectedColor: string;
@@ -35,3 +35,5 @@ export const NamedColors: Story<StoryProps> = ({ selectedColor }) => {
 NamedColors.args = {
  color: 'green',
 };
+
+export default meta;
@@ -1,14 +1,14 @@
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/client-api';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';

 import mdx from './ColorPicker.mdx';
-import SpectrumPalette, { SpectrumPaletteProps } from './SpectrumPalette';
+import SpectrumPalette from './SpectrumPalette';

-const meta: Meta = {
+const meta: ComponentMeta<typeof SpectrumPalette> = {
  title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette',
  component: SpectrumPalette,
  decorators: [withCenteredStory],
@@ -25,7 +25,7 @@ const meta: Meta = {
  },
 };

-export const Simple: Story<SpectrumPaletteProps> = ({ color }) => {
+export const Simple: ComponentStory<typeof SpectrumPalette> = ({ color }) => {
  const [, updateArgs] = useArgs();
  return renderComponentWithTheme(SpectrumPalette, {
    color,
@@ -11,7 +11,7 @@ import { Props } from './ConfirmButton';
 import mdx from './ConfirmButton.mdx';
 import { DeleteButton } from './DeleteButton';

-export default {
+const meta: Meta = {
  title: 'Buttons/ConfirmButton',
  component: ConfirmButton,
  decorators: [withCenteredStory],
@@ -41,7 +41,7 @@ export default {
    },
    size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg'] },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<Props> {
  buttonText: string;
@@ -94,3 +94,5 @@ export const Delete: Story<StoryProps> = (args) => {
    />
  );
 };
+
+export default meta;
@@ -1,17 +1,16 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { ConfirmModal } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { ConfirmModalProps } from './ConfirmModal';
 import mdx from './ConfirmModal.mdx';

 const defaultExcludes = ['onConfirm', 'onDismiss', 'onAlternative'];

-export default {
+const meta: ComponentMeta<typeof ConfirmModal> = {
  title: 'Overlays/ConfirmModal',
  component: ConfirmModal,
  decorators: [withCenteredStory],
@@ -28,7 +27,7 @@ export default {
    body: { control: { type: 'text' } },
    description: { control: { type: 'text' } },
  },
-} as Meta;
+};

 const defaultActions = {
  onConfirm: () => {
@@ -42,7 +41,7 @@ const defaultActions = {
  },
 };

-export const Basic: Story<ConfirmModalProps> = ({
+export const Basic: ComponentStory<typeof ConfirmModal> = ({
  title,
  body,
  description,
@@ -83,7 +82,7 @@ Basic.args = {
  isOpen: true,
 };

-export const AlternativeAction: Story<ConfirmModalProps> = ({
+export const AlternativeAction: ComponentStory<typeof ConfirmModal> = ({
  title,
  body,
  description,
@@ -127,7 +126,7 @@ AlternativeAction.args = {
  isOpen: true,
 };

-export const WithConfirmation: Story<ConfirmModalProps> = ({
+export const WithConfirmation: ComponentStory<typeof ConfirmModal> = ({
  title,
  body,
  description,
@@ -170,3 +169,5 @@ WithConfirmation.args = {
  icon: 'trash-alt',
  isOpen: true,
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -9,7 +10,7 @@ import { ContextMenu } from './ContextMenu';
 import mdx from './ContextMenu.mdx';
 import { WithContextMenu } from './WithContextMenu';

-export default {
+const meta: ComponentMeta<typeof ContextMenu> = {
  title: 'General/ContextMenu',
  component: ContextMenu,
  decorators: [withCenteredStory],
@@ -54,3 +55,5 @@ export const WithState = () => {
    </WithContextMenu>
  );
 };
+
+export default meta;
@@ -1,13 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/client-api';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { DataSourceSettings } from '@grafana/data';

 import { DataSourceHttpSettings } from './DataSourceHttpSettings';
 import mdx from './DataSourceHttpSettings.mdx';
-import { HttpSettingsProps } from './types';

 const settingsMock: DataSourceSettings<any, any> = {
  id: 4,
@@ -38,7 +37,7 @@ const settingsMock: DataSourceSettings<any, any> = {
  readOnly: true,
 };

-const meta: Meta = {
+const meta: ComponentMeta<typeof DataSourceHttpSettings> = {
  title: 'Data Source/DataSourceHttpSettings',
  component: DataSourceHttpSettings,
  parameters: {
@@ -55,7 +54,7 @@ const meta: Meta = {
  },
 };

-export const Basic: Story<HttpSettingsProps> = (args) => {
+export const Basic: ComponentStory<typeof DataSourceHttpSettings> = (args) => {
  const [, updateArgs] = useArgs();
  return (
    <DataSourceHttpSettings
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';

 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
@@ -6,7 +7,7 @@ import { Button } from '../../Button/Button';
 import { DatePicker } from './DatePicker';
 import mdx from './DatePicker.mdx';

-export default {
+const meta: ComponentMeta<typeof DatePicker> = {
  title: 'Pickers and Editors/TimePickers/Pickers And Editors/DatePicker',
  component: DatePicker,
  decorators: [withCenteredStory],
@@ -28,3 +29,5 @@ export const Basic = () => {
    </>
  );
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';

 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
@@ -5,7 +6,7 @@ import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 import { DatePickerWithInput } from './DatePickerWithInput';
 import mdx from './DatePickerWithInput.mdx';

-export default {
+const meta: ComponentMeta<typeof DatePickerWithInput> = {
  title: 'Pickers and Editors/TimePickers/DatePickerWithInput',
  component: DatePickerWithInput,
  decorators: [withCenteredStory],
@@ -21,3 +22,5 @@ export const Basic = () => {

  return <DatePickerWithInput width={40} value={date} onChange={(newDate) => setDate(newDate)} />;
 };
+
+export default meta;
@@ -1,14 +1,14 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';

 import { dateTime, DateTime } from '@grafana/data';

 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';

-import { DateTimePicker, Props } from './DateTimePicker';
+import { DateTimePicker } from './DateTimePicker';
 import mdx from './DateTimePicker.mdx';

-export default {
+const meta: ComponentMeta<typeof DateTimePicker> = {
  title: 'Pickers and Editors/TimePickers/DateTimePicker',
  decorators: [withCenteredStory],
  component: DateTimePicker,
@@ -25,9 +25,9 @@ export default {
      page: mdx,
    },
  },
-} as Meta;
+};

-export const Basic: Story<Props> = ({ label }) => {
+export const Basic: ComponentStory<typeof DateTimePicker> = ({ label }) => {
  const [date, setDate] = useState<DateTime>(dateTime('2021-05-05 12:00:00'));
  return <DateTimePicker label={label} date={date} onChange={setDate} />;
 };
@@ -35,3 +35,5 @@ export const Basic: Story<Props> = ({ label }) => {
 Basic.args = {
  label: 'Date',
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { UseState } from '../../../utils/storybook/UseState';
@@ -6,7 +7,7 @@ import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';

 import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';

-export default {
+const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
  title: 'Pickers and Editors/TimePickers/RelativeTimeRangePicker',
  component: RelativeTimeRangePicker,
  decorators: [withCenteredStory],
@@ -37,3 +38,5 @@ export const basic = () => {
    </UseState>
  );
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { dateTime } from '@grafana/data';
@@ -7,7 +8,7 @@ import { TimeOfDayPicker } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-export default {
+const meta: ComponentMeta<typeof TimeOfDayPicker> = {
  title: 'Pickers and Editors/TimePickers/TimeOfDayPicker',
  component: TimeOfDayPicker,
  decorators: [withCenteredStory],
@@ -53,3 +54,5 @@ export const onlyMinutes = () => {
    </UseState>
  );
 };
+
+export default meta;
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { dateTime, DefaultTimeZone, TimeRange, TimeZone } from '@grafana/data';
@@ -11,7 +11,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TimeRangeInputProps } from './TimeRangeInput';
 import mdx from './TimeRangeInput.mdx';

-export default {
+const meta: ComponentMeta<typeof TimeRangeInput> = {
  title: 'Pickers and Editors/TimePickers/TimeRangeInput',
  component: TimeRangeInput,
  decorators: [withCenteredStory],
@@ -55,7 +55,7 @@ const getComponentWithState = (initialState: State, props: TimeRangeInputProps)
  </UseState>
 );

-export const Relative: Story<TimeRangeInputProps> = (props) => {
+export const Relative: ComponentStory<typeof TimeRangeInput> = (props) => {
  const to = dateTime();
  const from = to.subtract(6, 'h');

@@ -75,7 +75,7 @@ export const Relative: Story<TimeRangeInputProps> = (props) => {
  );
 };

-export const Absolute: Story<TimeRangeInputProps> = (props) => {
+export const Absolute: ComponentStory<typeof TimeRangeInput> = (props) => {
  const to = dateTime();
  const from = to.subtract(6, 'h');

@@ -94,3 +94,5 @@ export const Absolute: Story<TimeRangeInputProps> = (props) => {
    props
  );
 };
+
+export default meta;
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import React from 'react';

 import { dateTime, TimeRange, DefaultTimeZone, TimeZone, isDateTime } from '@grafana/data';
@@ -12,7 +12,7 @@ import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';

 import { TimeRangePickerProps } from './TimeRangePicker';

-export default {
+const meta: Meta = {
  title: 'Pickers and Editors/TimePickers/TimeRangePicker',
  component: TimeRangePicker,
  decorators: [withCenteredStory],
@@ -126,3 +126,5 @@ export const Absolute: Story<TimeRangePickerProps> = (props) => {
    props
  );
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { TimeZonePicker } from '@grafana/ui';
@@ -6,7 +7,7 @@ import { TimeZonePicker } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-export default {
+const meta: ComponentMeta<typeof TimeZonePicker> = {
  title: 'Pickers and Editors/TimePickers/TimeZonePicker',
  component: TimeZonePicker,
  decorators: [withCenteredStory],
@@ -37,3 +38,5 @@ export const basic = () => {
    </UseState>
  );
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { WeekStartPicker } from '@grafana/ui';
@@ -6,7 +7,7 @@ import { WeekStartPicker } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-export default {
+const meta: ComponentMeta<typeof WeekStartPicker> = {
  title: 'Pickers and Editors/TimePickers/WeekStartPicker',
  component: WeekStartPicker,
  decorators: [withCenteredStory],
@@ -36,3 +37,5 @@ export const basic = () => {
    </UseState>
  );
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';

 import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
@@ -6,10 +6,9 @@ import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { Props } from './Drawer';
 import mdx from './Drawer.mdx';

-export default {
+const meta: ComponentMeta<typeof Drawer> = {
  title: 'Overlays/Drawer',
  component: Drawer,
  decorators: [withCenteredStory],
@@ -38,7 +37,7 @@ export default {
  },
 };

-export const Global: Story<Props> = (args) => {
+export const Global: ComponentStory<typeof Drawer> = (args) => {
  return (
    <UseState initialState={{ isOpen: false }}>
      {(state, updateValue) => {
@@ -80,7 +79,7 @@ Global.args = {
  title: 'Drawer title',
 };

-export const LongContent: Story<Props> = (args) => {
+export const LongContent: ComponentStory<typeof Drawer> = (args) => {
  return (
    <UseState initialState={{ isOpen: true }}>
      {(state, updateValue) => {
@@ -181,7 +180,7 @@ LongContent.args = {
  title: 'Drawer title with long content',
 };

-export const InLine: Story<Props> = (args) => {
+export const InLine: ComponentStory<typeof Drawer> = (args) => {
  return (
    <UseState initialState={{ isOpen: false }}>
      {(state, updateValue) => {
@@ -255,3 +254,5 @@ export function WithTabs() {
    </Drawer>
  );
 }
+
+export default meta;
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { SelectableValue } from '@grafana/data';
@@ -10,7 +10,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import { ButtonSelect } from './ButtonSelect';

-export default {
+const meta: ComponentMeta<typeof ButtonSelect> = {
  title: 'Forms/Select/ButtonSelect',
  component: ButtonSelect,
  decorators: [withCenteredStory],
@@ -19,9 +19,9 @@ export default {
      exclude: ['className', 'options', 'value', 'tooltipContent'],
    },
  },
-} as Meta;
+};

-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof ButtonSelect> = (args) => {
  const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };
  const options: Array<SelectableValue<string>> = [initialValue, { label: 'Another label', value: 'Another value' }];
  return (
@@ -51,3 +51,5 @@ Basic.args = {
  narrow: true,
  variant: 'default',
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -5,7 +6,7 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS
 import { EmptySearchResult } from './EmptySearchResult';
 import mdx from './EmptySearchResult.mdx';

-export default {
+const meta: ComponentMeta<typeof EmptySearchResult> = {
  title: 'Visualizations/EmptySearchResult',
  component: EmptySearchResult,
  decorators: [withCenteredStory],
@@ -19,3 +20,5 @@ export default {
 export const Basic = () => {
  return <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>;
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';

 import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -9,7 +10,7 @@ import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary';
 import mdx from './ErrorBoundary.mdx';
 import { ErrorWithStack } from './ErrorWithStack';

-export default {
+const meta: ComponentMeta<typeof ErrorBoundary> = {
  title: 'General/ErrorBoundary',
  component: ErrorBoundary,
  decorators: [withCenteredStory],
@@ -59,3 +60,5 @@ export const BoundaryAlert = () => {
    </ErrorBoundaryAlert>
  );
 };
+
+export default meta;
@@ -1,13 +1,13 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

-import { FileDropzone, FileDropzoneProps } from '@grafana/ui';
+import { FileDropzone } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './FileDropzone.mdx';

-export default {
+const meta: ComponentMeta<typeof FileDropzone> = {
  title: 'Forms/FileDropzone',
  component: FileDropzone,
  decorators: [withCenteredStory],
@@ -16,9 +16,9 @@ export default {
      page: mdx,
    },
  },
-} as Meta;
+};

-const Template: Story<FileDropzoneProps> = (args) => <FileDropzone {...args} />;
+const Template: ComponentStory<typeof FileDropzone> = (args) => <FileDropzone {...args} />;

 export const Basic = Template.bind({});

@@ -31,3 +31,5 @@ export const OnlyAcceptingCertainFiles = Template.bind({});
 OnlyAcceptingCertainFiles.args = {
  options: { accept: { 'application/json': ['.json'] } },
 };
+
+export default meta;
@@ -6,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem';
 import mdx from './FileListItem.mdx';

-export default {
+const meta: Meta = {
  title: 'Forms/FileListItem',
  component: FileListItemComponent,
  decorators: [withCenteredStory],
@@ -21,10 +21,12 @@ export default {
    removeFile: { action: 'removeFile' },
  },
  args: {
-    file: { file: { name: 'some-file.jpg', size: 123456 } as any, id: '1', error: new DOMException('error') },
+    file: { file: { name: 'some-file.jpg', size: 123456 }, id: '1', error: new DOMException('error') },
  },
-} as Meta;
+};

 export const FileListItem: Story<FileListItemProps> = (args) => {
  return <FileListItemComponent {...args} />;
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { FileUpload } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './FileUpload.mdx';

-export default {
+const meta: ComponentMeta<typeof FileUpload> = {
  title: 'Forms/FileUpload',
  component: FileUpload,
  decorators: [withCenteredStory],
@@ -27,9 +27,9 @@ export default {
      options: ['xs', 'sm', 'md', 'lg'],
    },
  },
-} as Meta;
+};

-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof FileUpload> = (args) => {
  return (
    <FileUpload
      size={args.size}
@@ -40,3 +40,5 @@ export const Basic: Story = (args) => {
 Basic.args = {
  size: 'md',
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';

 import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -6,10 +6,10 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS
 import { getAvailableIcons } from '../../types';
 import { HorizontalGroup } from '../Layout/Layout';

-import { FilterPill, FilterPillProps } from './FilterPill';
+import { FilterPill } from './FilterPill';
 import mdx from './FilterPill.mdx';

-export default {
+const meta: ComponentMeta<typeof FilterPill> = {
  title: 'General/FilterPill',
  component: FilterPill,
  decorators: [withCenteredStory],
@@ -24,7 +24,7 @@ export default {
  },
 };

-export const Basic: Story<FilterPillProps> = (args) => {
+export const Basic: ComponentStory<typeof FilterPill> = (args) => {
  return <FilterPill {...args} />;
 };

@@ -46,3 +46,5 @@ Basic.args = {
  label: 'Test',
  icon: undefined,
 };
+
+export default meta;
@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { FormField, Props } from './FormField';
+import { FormField } from './FormField';

-export default {
+const meta: ComponentMeta<typeof FormField> = {
  title: 'Forms/Legacy/FormField',
  component: FormField,
  decorators: [withCenteredStory],
@@ -24,16 +24,18 @@ export default {
    labelWidth: { control: { type: 'range', min: 5, max: 30 } },
    tooltip: { control: { type: 'text' } },
  },
-} as Meta;
+};

-export const Basic: Story<Props> = (args) => {
+export const Basic: ComponentStory<typeof FormField> = (args) => {
  return <FormField {...args} />;
 };

-export const WithTooltip: Story<Props> = ({ tooltip, ...args }) => {
+export const WithTooltip: ComponentStory<typeof FormField> = ({ tooltip, ...args }) => {
  return <FormField {...args} tooltip={tooltip} />;
 };

 WithTooltip.args = {
  tooltip: 'This is a tooltip with information about this FormField',
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -5,7 +6,7 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS
 import { FormattedValueDisplay } from './FormattedValueDisplay';
 import mdx from './FormattedValueDisplay.mdx';

-export default {
+const meta: ComponentMeta<typeof FormattedValueDisplay> = {
  title: 'Visualizations/FormattedValueDisplay',
  component: FormattedValueDisplay,
  decorators: [withCenteredStory],
@@ -19,3 +20,5 @@ export default {
 export const basic = () => {
  return <FormattedValueDisplay value={{ text: 'Test value' }} style={{ fontSize: 12 }} />;
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React, { useState, useCallback } from 'react';

 import { VerticalGroup } from '../Layout/Layout';
@@ -6,7 +7,7 @@ import { Checkbox } from './Checkbox';
 import mdx from './Checkbox.mdx';
 import { Field } from './Field';

-export default {
+const meta: ComponentMeta<typeof Checkbox> = {
  title: 'Forms/Checkbox',
  component: Checkbox,
  parameters: {
@@ -79,3 +80,5 @@ export const InAField = () => {
    </div>
  );
 };
+
+export default meta;
@@ -1,12 +1,12 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState, useCallback } from 'react';

 import { Input, Switch } from '..';

-import { Field, FieldProps } from './Field';
+import { Field } from './Field';
 import mdx from './Field.mdx';

-export default {
+const meta: ComponentMeta<typeof Field> = {
  title: 'Forms/Field',
  component: Field,
  argTypes: {
@@ -27,7 +27,7 @@ export default {
  },
 };

-export const Simple: Story<FieldProps> = (args) => (
+export const Simple: ComponentStory<typeof Field> = (args) => (
  <div>
    <Field {...args}>
      <Input id="thisField" />
@@ -45,7 +45,7 @@ Simple.args = {
  horizontal: false,
 };

-export const HorizontalLayout: Story<FieldProps> = (args) => {
+export const HorizontalLayout: ComponentStory<typeof Field> = (args) => {
  const [checked, setChecked] = useState(false);
  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
  return (
@@ -66,3 +66,5 @@ HorizontalLayout.args = {
  error: 'Not valid input',
  horizontal: true,
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { Input, Form, FieldSet, Field } from '@grafana/ui';
@@ -7,7 +8,7 @@ import { Button } from '../Button';

 import mdx from './FieldSet.mdx';

-export default {
+const meta: ComponentMeta<typeof FieldSet> = {
  title: 'Forms/FieldSet',
  component: FieldSet,
  decorators: [withCenteredStory],
@@ -46,3 +47,5 @@ export const basic = () => {
    </Form>
  );
 };
+
+export default meta;
@@ -1,10 +1,10 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { FieldValidationMessage } from './FieldValidationMessage';
 import mdx from './FieldValidationMessage.mdx';

-const story = {
+const meta: ComponentMeta<typeof FieldValidationMessage> = {
  title: 'Forms/FieldValidationMessage',
  component: FieldValidationMessage,
  parameters: {
@@ -24,10 +24,8 @@ const story = {
  },
 };

-export default story as Meta;
-
-type Args = typeof story['args'];
-
-export const Basic: Story<Args> = (args) => {
+export const Basic: ComponentStory<typeof FieldValidationMessage> = (args) => {
  return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { Input } from '../Input/Input';
@@ -7,7 +8,7 @@ import { Select } from '../Select/Select';
 import { InlineField } from './InlineField';
 import mdx from './InlineField.mdx';

-export default {
+const meta: ComponentMeta<typeof InlineField> = {
  title: 'Forms/InlineField',
  component: InlineField,
  parameters: {
@@ -17,7 +18,7 @@ export default {
  },
 };

-export const basic = () => {
+export const basic: ComponentStory<typeof InlineField> = () => {
  return (
    <InlineField label="Inline field">
      <Input placeholder="Inline input" />
@@ -25,7 +26,7 @@ export const basic = () => {
  );
 };

-export const withTooltip = () => {
+export const withTooltip: ComponentStory<typeof InlineField> = () => {
  return (
    <InlineField label="Label" tooltip="Tooltip">
      <Input placeholder="Inline input" />
@@ -33,7 +34,7 @@ export const withTooltip = () => {
  );
 };

-export const grow = () => {
+export const grow: ComponentStory<typeof InlineField> = () => {
  return (
    <InlineField label="Label" grow>
      <Input placeholder="Inline input" />
@@ -41,7 +42,7 @@ export const grow = () => {
  );
 };

-export const withSelect = () => {
+export const withSelect: ComponentStory<typeof InlineField> = () => {
  return (
    <InlineField label="Select option">
      <Select
@@ -56,7 +57,7 @@ export const withSelect = () => {
  );
 };

-export const multiple = () => {
+export const multiple: ComponentStory<typeof InlineField> = () => {
  return (
    <>
      <InlineField label="Field 1">
@@ -71,3 +72,5 @@ export const multiple = () => {
    </>
  );
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { Input } from '../Input/Input';
@@ -6,7 +7,7 @@ import { InlineField } from './InlineField';
 import { InlineFieldRow } from './InlineFieldRow';
 import mdx from './InlineFieldRow.mdx';

-export default {
+const meta: ComponentMeta<typeof InlineFieldRow> = {
  title: 'Forms/InlineFieldRow',
  component: InlineFieldRow,
  parameters: {
@@ -41,3 +42,5 @@ export const single = () => {
    </div>
  );
 };
+
+export default meta;
@@ -1,9 +1,10 @@
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { InlineLabel } from './InlineLabel';
 import mdx from './InlineLabel.mdx';

-export default {
+const meta: ComponentMeta<typeof InlineLabel> = {
  title: 'Forms/InlineLabel',
  component: InlineLabel,
  parameters: {
@@ -24,3 +25,5 @@ export const withTooltip = () => {
    </InlineLabel>
  );
 };
+
+export default meta;
@@ -1,9 +1,10 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { Label } from './Label';
 import mdx from './Label.mdx';

-export default {
+const meta: ComponentMeta<typeof Label> = {
  title: 'Forms/Label',
  component: Label,
  parameters: {
@@ -13,14 +14,16 @@ export default {
  },
 };

-export const simple = () => {
+export const simple: ComponentStory<typeof Label> = () => {
  return <Label description="Option description">Option name</Label>;
 };

-export const categorised = () => {
+export const categorised: ComponentStory<typeof Label> = () => {
  return (
    <Label category={['Category', 'Nested category']} description="Option description">
      Option name
    </Label>
  );
 };
+
+export default meta;
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory

 import { Input } from './Input';

-export default {
+const meta: Meta = {
  title: 'Forms/Legacy/Input',
  component: Input,
  decorators: [withCenteredStory],
@@ -25,7 +25,7 @@ export default {
    },
    validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
  },
-} as Meta;
+};

 const Wrapper: Story = (args) => {
  const [value, setValue] = useState('');
@@ -56,3 +56,5 @@ Basic.args = {
  validationEvents: EventsWithValidation.onBlur,
  hideErrorMessage: false,
 };
+
+export default meta;
@@ -9,7 +9,7 @@ import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory

 import { Select, AsyncSelect as AsyncSelectComponent } from './Select';

-export default {
+const meta: Meta = {
  title: 'Forms/Legacy/Select',
  component: Select,
  decorators: [withCenteredStory],
@@ -52,7 +52,7 @@ export default {
  argTypes: {
    width: { control: { type: 'range', min: 5, max: 30 } },
  },
-} as Meta;
+};

 const initialValue: SelectableValue<string> = { label: 'A label', value: 'A value' };

@@ -91,7 +91,7 @@ Basic.args = {

 export const AsyncSelect: Story = (args) => {
  const [isLoading, setIsLoading] = useState<boolean>(args.loading);
-  const [asyncValue, setAsyncValue] = useState<SelectableValue<any>>();
+  const [asyncValue, setAsyncValue] = useState<SelectableValue<string>>();
  const loadAsyncOptions = useCallback((inputValue) => {
    return new Promise<Array<SelectableValue<string>>>((resolve) => {
      setTimeout(() => {
@@ -118,3 +118,5 @@ AsyncSelect.args = {
  defaultOptions: true,
  width: 20,
 };
+
+export default meta;
@@ -1,9 +1,9 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';

-import { Props, Switch } from './Switch';
+import { Switch } from './Switch';

-export default {
+const meta: ComponentMeta<typeof Switch> = {
  title: 'Forms/Legacy/Switch',
  component: Switch,
  parameters: {
@@ -11,9 +11,9 @@ export default {
      exclude: ['className', 'labelClass', 'switchClass', 'onChange'],
    },
  },
-} as Meta;
+};

-const SwitchWrapper: Story<Props> = ({ label, ...args }) => {
+const SwitchWrapper: ComponentStory<typeof Switch> = ({ label, ...args }) => {
  const [checked, setChecked] = useState(false);
  return <Switch {...args} label={label} checked={checked} onChange={() => setChecked(!checked)} />;
 };
@@ -23,3 +23,5 @@ Basic.args = {
  label: 'Label',
  tooltip: '',
 };
+
+export default meta;
@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { Legend } from '@grafana/ui';

 import mdx from './Legend.mdx';

-export default {
+const meta: ComponentMeta<typeof Legend> = {
  title: 'Forms/Legend',
  component: Legend,
  parameters: {
@@ -19,11 +19,13 @@ export default {
  argTypes: {
    children: { name: 'Label' },
  },
-} as Meta;
+};

-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof Legend> = (args) => {
  return <Legend>{args.children}</Legend>;
 };
 Basic.args = {
  children: 'Form section',
 };
+
+export default meta;
@@ -1,10 +1,10 @@
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';

 import { RadioButtonGroup } from './RadioButtonGroup';
 import mdx from './RadioButtonGroup.mdx';

-export default {
+const meta: Meta = {
  title: 'Forms/RadioButtonGroup',
  component: RadioButtonGroup,
  parameters: {
@@ -83,3 +83,5 @@ RadioButtons.args = {
  size: 'md',
  fullWidth: true,
 };
+
+export default meta;
@@ -15,7 +15,7 @@ const defaultOptions: Array<SelectableValue<string>> = [
  { label: 'Option 5', value: 'opt-5', description: 'A description of Option 5' },
 ];

-export default {
+const meta: ComponentMeta<typeof RadioButtonList> = {
  title: 'Forms/RadioButtonList',
  component: RadioButtonList,
  parameters: {
@@ -39,7 +39,7 @@ export default {
    options: defaultOptions,
    disabled: false,
  },
-} as ComponentMeta<typeof RadioButtonList>;
+};

 const longTextOptions: Array<SelectableValue<string>> = [
  {
@@ -147,3 +147,5 @@ Dots.parameters = {
    hideNoControlsWarning: true,
  },
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { ComponentMeta } from '@storybook/react';
 import React, { ChangeEvent, useState } from 'react';

 import { Input, Field, Icon } from '@grafana/ui';
@@ -9,7 +10,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './Icon.mdx';

-export default {
+const meta: ComponentMeta<typeof Icon> = {
  title: 'Docs overview/Icon',
  component: Icon,
  decorators: [withCenteredStory],
@@ -95,3 +96,5 @@ export const IconsOverview = () => {
    </div>
  );
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { css } from '@emotion/css';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { useTheme2 } from '../../themes';
@@ -9,7 +10,7 @@ import { VerticalGroup } from '../Layout/Layout';
 import { IconButton, IconButtonVariant } from './IconButton';
 import mdx from './IconButton.mdx';

-export default {
+const meta: ComponentMeta<typeof IconButton> = {
  title: 'Buttons/IconButton',
  component: IconButton,
  decorators: [withCenteredStory],
@@ -71,3 +72,5 @@ const RenderScenario = ({ background }: ScenarioProps) => {
    </div>
  );
 };
+
+export default meta;
@@ -1,14 +1,13 @@
-import { Story } from '@storybook/react';
+import { Meta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { FeatureState } from '@grafana/data';
 import { InfoBox, FeatureInfoBox, VerticalGroup } from '@grafana/ui';

 import { FeatureInfoBoxProps } from './FeatureInfoBox';
-import { InfoBoxProps } from './InfoBox';
 import mdx from './InfoBox.mdx';

-export default {
+const meta: Meta = {
  title: 'Layout/InfoBox',
  component: InfoBox,
  decorators: [],
@@ -46,7 +45,7 @@ const defaultProps: FeatureInfoBoxProps = {
  ),
 };

-const InfoBoxTemplate: Story<InfoBoxProps> = (args) => {
+const InfoBoxTemplate: ComponentStory<typeof InfoBox> = (args) => {
  return (
    <VerticalGroup>
      <div>Deprecrated component, use Alert with info severity</div>
@@ -57,7 +56,7 @@ const InfoBoxTemplate: Story<InfoBoxProps> = (args) => {
 export const infoBox = InfoBoxTemplate.bind({});
 infoBox.args = defaultProps;

-const FeatureInfoBoxTemplate: Story<FeatureInfoBoxProps> = (args) => {
+const FeatureInfoBoxTemplate: ComponentStory<typeof FeatureInfoBox> = (args) => {
  return (
    <VerticalGroup>
      <div>Deprecrated component, use Alert with info severity</div>
@@ -68,3 +67,5 @@ const FeatureInfoBoxTemplate: Story<FeatureInfoBoxProps> = (args) => {

 export const featureInfoBox = FeatureInfoBoxTemplate.bind({});
 featureInfoBox.args = defaultProps;
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -5,10 +6,14 @@ import { VizTooltip } from '../VizTooltip';

 import { InfoTooltip } from './InfoTooltip';

-export default {
+const meta: ComponentMeta<typeof InfoTooltip> = {
  title: 'Overlays/TooltipInternal',
  component: VizTooltip,
  decorators: [withCenteredStory],
 };

-export const basic = () => <InfoTooltip>This is the content of the tooltip</InfoTooltip>;
+export const basic: ComponentStory<typeof InfoTooltip> = () => (
+  <InfoTooltip>This is the content of the tooltip</InfoTooltip>
+);
+
+export default meta;
@@ -19,7 +19,7 @@ const prefixSuffixOpts = {
  ...icons,
 };

-export default {
+const meta: Meta = {
  title: 'Forms/Input/AutoSizeInput',
  component: AutoSizeInput,
  decorators: [withCenteredStory],
@@ -60,7 +60,7 @@ export default {
    },
    minWidth: { control: { type: 'range', min: 10, max: 200, step: 10 } },
  },
-} as Meta;
+};

 export const Simple: Story = (args) => {
  const addonAfter = <Button variant="secondary">Load</Button>;
@@ -98,3 +98,5 @@ Simple.args = {
  after: false,
  placeholder: 'Enter your name here...',
 };
+
+export default meta;
@@ -20,7 +20,7 @@ const prefixSuffixOpts = {
  }, {}),
 };

-export default {
+const meta: Meta = {
  title: 'Forms/Input',
  component: Input,
  decorators: [withCenteredStory],
@@ -62,7 +62,7 @@ export default {
    // validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
    width: { control: { type: 'range', min: 10, max: 200, step: 10 } },
  },
-} as Meta;
+};

 export const Simple: Story = (args) => {
  const addonAfter = <Button variant="secondary">Load</Button>;
@@ -111,3 +111,5 @@ export const WithFieldValidation: Story = (args) => {
    </div>
  );
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -5,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { LoadingPlaceholder } from './LoadingPlaceholder';
 import mdx from './LoadingPlaceholder.mdx';

-export default {
+const meta: ComponentMeta<typeof LoadingPlaceholder> = {
  title: 'General/LoadingPlaceholder',
  component: LoadingPlaceholder,
  decorators: [withCenteredStory],
@@ -16,6 +17,8 @@ export default {
  },
 };

-export const basic = () => {
+export const basic: ComponentStory<typeof LoadingPlaceholder> = () => {
  return <LoadingPlaceholder text="Loading..." />;
 };
+
+export default meta;
@@ -1,21 +1,18 @@
-import { Story } from '@storybook/react';
+import { Story, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { GraphContextMenuHeader } from '..';
 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { VerticalGroup } from '../Layout/Layout';

-import { Menu, MenuProps } from './Menu';
+import { Menu } from './Menu';
 import { MenuGroup } from './MenuGroup';
 import { MenuItem } from './MenuItem';

-export default {
+const meta: ComponentMeta<typeof Menu> = {
  title: 'General/Menu',
  component: Menu,
-  argTypes: {
-    items: { control: { disable: true } },
-    icon: { control: { type: 'select' } },
-  },
+  argTypes: {},
  parameters: {
    knobs: {
      disabled: true,
@@ -29,7 +26,7 @@ export default {
  },
 };

-export const Simple: Story<MenuProps> = (args) => {
+export const Simple: Story = (args) => {
  return (
    <VerticalGroup>
      <StoryExample name="Simple">
@@ -93,3 +90,5 @@ Simple.args = {
    />
  ),
 };
+
+export default meta;
@@ -11,7 +11,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './Modal.mdx';

-export default {
+const meta: Meta = {
  title: 'Overlays/Modal',
  component: Modal,
  decorators: [withCenteredStory],
@@ -47,7 +47,7 @@ export default {
      },
    },
  },
-} as Meta;
+};

 export const Basic: Story = ({ body, title, ...args }) => {
  return (
@@ -129,3 +129,5 @@ UsingContentClassName.args = {
  closeOnEscape: false,
  iconTooltip: 'icon tooltip',
 };
+
+export default meta;
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { CodeEditor } from './CodeEditor';
 import mdx from './CodeEditor.mdx';

-export default {
+const meta: ComponentMeta<typeof CodeEditor> = {
  title: 'CodeEditor',
  component: CodeEditor,
  decorators: [withCenteredStory],
@@ -24,9 +24,9 @@ export default {
    height: { control: { type: 'range', min: 100, max: 800, step: 10 } },
    language: { control: { type: 'select' }, options: ['sql', 'json'] },
  },
-} as Meta;
+};

-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof CodeEditor> = (args) => {
  return (
    <CodeEditor
      width={args.width}
@@ -62,3 +62,5 @@ SELECT * FROM Persons LIMIT 10 '
  showMiniMap: false,
  readOnly: false,
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { ToolbarButton, VerticalGroup } from '@grafana/ui';
@@ -9,7 +10,7 @@ import { IconButton } from '../IconButton/IconButton';

 import { PageToolbar } from './PageToolbar';

-export default {
+const meta: ComponentMeta<typeof PageToolbar> = {
  title: 'Layout/PageToolbar',
  component: PageToolbar,
  decorators: [withCenteredStory],
@@ -54,3 +55,5 @@ export const Examples = () => {
    </VerticalGroup>
  );
 };
+
+export default meta;
@@ -1,14 +1,13 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';

 import { Pagination } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { Props } from './Pagination';
 import mdx from './Pagination.mdx';

-export default {
+const meta: ComponentMeta<typeof Pagination> = {
  title: 'Buttons/Pagination',
  component: Pagination,
  decorators: [withCenteredStory],
@@ -30,7 +29,7 @@ export default {
  },
 };

-export const WithPages: Story<Props> = ({ numberOfPages, hideWhenSinglePage }) => {
+export const WithPages: ComponentStory<typeof Pagination> = ({ numberOfPages, hideWhenSinglePage }) => {
  const [page, setPage] = useState(1);
  return (
    <Pagination
@@ -45,3 +44,5 @@ WithPages.args = {
  numberOfPages: 5,
  hideWhenSinglePage: false,
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta } from '@storybook/react';
 import { merge } from 'lodash';
 import React, { CSSProperties, useState } from 'react';
 import { useInterval } from 'react-use';
@@ -8,7 +9,7 @@ import { PanelChrome, useTheme, PanelChromeProps } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';

-export default {
+const meta: ComponentMeta<typeof PanelChrome> = {
  title: 'Visualizations/PanelChrome',
  component: PanelChrome,
  decorators: [withCenteredStory],
@@ -103,3 +104,5 @@ export const Examples = () => {
    </div>
  );
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -6,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { PanelContainer } from './PanelContainer';
 import mdx from './PanelContainer.mdx';

-export default {
+const meta: ComponentMeta<typeof PanelContainer> = {
  title: 'General/PanelContainer',
  component: PanelContainer,
  decorators: [withCenteredStory],
@@ -15,12 +15,14 @@ export default {
      page: mdx,
    },
  },
-} as Meta;
+};

-export const Basic: Story = () => {
+export const Basic: ComponentStory<typeof PanelContainer> = () => {
  return (
    <PanelContainer>
      <h1>Here could be your component</h1>
    </PanelContainer>
  );
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { PluginSignatureStatus } from '@grafana/data';
@@ -8,7 +8,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './PluginSignatureBadge.mdx';

-export default {
+const meta: ComponentMeta<typeof PluginSignatureBadge> = {
  title: 'Data Display/PluginSignatureBadge',
  decorators: [withCenteredStory],
  component: PluginSignatureBadge,
@@ -33,9 +33,11 @@ export default {
  },
 };

-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof PluginSignatureBadge> = (args) => {
  return <PluginSignatureBadge status={args.status} />;
 };
 Basic.args = {
  status: PluginSignatureStatus.valid,
 };
+
+export default meta;
@@ -1,15 +1,18 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { QueryField } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-export default {
+const meta: ComponentMeta<typeof QueryField> = {
  title: 'Data Source/QueryField',
  component: QueryField,
  decorators: [withCenteredStory],
 };

-export const basic = () => {
+export const basic: ComponentStory<typeof QueryField> = () => {
  return <QueryField portalOrigin="mock-origin" query="" />;
 };
+
+export default meta;
@@ -1,16 +1,15 @@
 import { action } from '@storybook/addon-actions';
 import { useArgs } from '@storybook/client-api';
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { RefreshPicker } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { Props } from './RefreshPicker';
 import mdx from './RefreshPicker.mdx';

-export default {
+const meta: ComponentMeta<typeof RefreshPicker> = {
  title: 'Pickers and Editors/RefreshPicker',
  component: RefreshPicker,
  decorators: [withCenteredStory],
@@ -35,7 +34,7 @@ export default {
  },
 };

-export const Examples: Story<Props> = (args) => {
+export const Examples: ComponentStory<typeof RefreshPicker> = (args) => {
  const [, updateArgs] = useArgs();
  const onIntervalChanged = (interval: string) => {
    action('onIntervalChanged fired')(interval);
@@ -61,3 +60,5 @@ export const Examples: Story<Props> = (args) => {
    />
  );
 };
+
+export default meta;
@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { SecretFormField, Props } from './SecretFormField';
+import { SecretFormField } from './SecretFormField';

-export default {
+const meta: ComponentMeta<typeof SecretFormField> = {
  title: 'Forms/SecretFormField',
  component: SecretFormField,
  decorators: [withCenteredStory],
@@ -21,9 +21,9 @@ export default {
    inputWidth: { control: { type: 'range', min: 0, max: 30 } },
    tooltip: { control: { type: 'text' } },
  },
-} as Meta;
+};

-export const Basic: Story<Props> = (args) => {
+export const Basic: ComponentStory<typeof SecretFormField> = (args) => {
  return (
    <UseState initialState="Input value">
      {(value, setValue) => (
@@ -53,3 +53,5 @@ Basic.args = {
  tooltip: 'this is a tooltip',
  placeholder: 'Password',
 };
+
+export default meta;
@@ -1,12 +1,12 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React, { useState, ChangeEvent } from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { SecretInput, Props } from './SecretInput';
+import { SecretInput } from './SecretInput';
 import mdx from './SecretInput.mdx';

-const meta: Meta = {
+const meta: ComponentMeta<typeof SecretInput> = {
  title: 'Forms/SecretInput',
  component: SecretInput,
  decorators: [withCenteredStory],
@@ -40,7 +40,7 @@ const meta: Meta = {

 export default meta;

-const Template: Story<Props> = (args) => {
+const Template: ComponentStory<typeof SecretInput> = (args) => {
  const [secret, setSecret] = useState('');

  return (
@@ -1,11 +1,11 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React, { useState, ChangeEvent } from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { SecretTextArea, Props } from './SecretTextArea';
+import { SecretTextArea } from './SecretTextArea';

-export default {
+const meta: ComponentMeta<typeof SecretTextArea> = {
  title: 'Forms/SecretTextArea',
  component: SecretTextArea,
  decorators: [withCenteredStory],
@@ -34,9 +34,9 @@ export default {
    rows: { control: { type: 'range', min: 1, max: 50, step: 1 } },
    cols: { control: { type: 'range', min: 1, max: 200, step: 10 } },
  },
-} as Meta;
+};

-const Template: Story<Props> = (args) => {
+const Template: ComponentStory<typeof SecretTextArea> = (args) => {
  const [secret, setSecret] = useState('');

  return (
@@ -63,3 +63,5 @@ export const secretIsConfigured = Template.bind({});
 secretIsConfigured.args = {
  isConfigured: true,
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';

 import { Segment, Icon, SegmentSection } from '@grafana/ui';
@@ -41,7 +42,7 @@ export const ArrayOptions = () => {
  );
 };

-export default {
+const meta: ComponentMeta<typeof Segment> = {
  title: 'Data Source/Segment/SegmentSync',
  component: Segment,
 };
@@ -147,3 +148,5 @@ export const HtmlAttributes = () => {
    </SegmentFrame>
  );
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';
 import { AsyncState } from 'react-use/lib/useAsync';

@@ -49,7 +50,7 @@ export const ArrayOptions = () => {
  );
 };

-export default {
+const meta: ComponentMeta<typeof SegmentAsync> = {
  title: 'Data Source/Segment/SegmentAsync',
  component: SegmentAsync,
 };
@@ -200,3 +201,5 @@ export const HtmlAttributes = () => {
    </SegmentFrame>
  );
 };
+
+export default meta;
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';

 import { SegmentInput, Icon, SegmentSection } from '@grafana/ui';
@@ -24,7 +25,7 @@ export const BasicInput = () => {
  );
 };

-export default {
+const meta: ComponentMeta<typeof SegmentInput> = {
  title: 'Data Source/Segment/SegmentInput',
  component: SegmentInput,
 };
@@ -95,3 +96,5 @@ export const InputWithAutoFocus = () => {
    </SegmentFrame>
  );
 };
+
+export default meta;
@@ -13,7 +13,7 @@ import mdx from './Select.mdx';
 import { generateOptions } from './mockOptions';
 import { SelectCommonProps } from './types';

-export default {
+const meta: Meta = {
  title: 'Forms/Select',
  component: Select,
  decorators: [withCenteredStory, withHorizontallyCenteredStory],
@@ -69,7 +69,7 @@ export default {
      },
    },
  },
-} as Meta;
+};

 const loadAsyncOptions = () => {
  return new Promise<Array<SelectableValue<string>>>((resolve) => {
@@ -340,3 +340,5 @@ export const CustomValueCreation: Story = (args) => {
 CustomValueCreation.args = {
  allowCustomValue: true,
 };
+
+export default meta;
@@ -1,11 +1,9 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { RangeSlider } from '@grafana/ui';

-import { RangeSliderProps } from './types';
-
-export default {
+const meta: ComponentMeta<typeof RangeSlider> = {
  title: 'Forms/Slider/Range',
  component: RangeSlider,
  parameters: {
@@ -14,32 +12,24 @@ export default {
    },
  },
  argTypes: {
-    isStep: { name: 'step' },
    orientation: { control: { type: 'select', options: ['horizontal', 'vertical'] } },
+    step: { control: { type: 'number', min: 1 } },
  },
-} as Meta;
+  args: {
+    min: 0,
+    max: 100,
+    orientation: 'horizontal',
+    reverse: false,
+    step: undefined,
+  },
+};

-interface StoryProps extends Partial<RangeSliderProps> {
-  isStep: boolean;
-}
-
-export const Basic: Story<StoryProps> = (args) => {
+export const Basic: ComponentStory<typeof RangeSlider> = (args) => {
  return (
    <div style={{ width: '200px', height: '200px' }}>
-      <RangeSlider
-        step={args.isStep ? 10 : undefined}
-        value={[10, 20]}
-        min={args.min as number}
-        max={args.max as number}
-        {...args}
-      />
+      <RangeSlider value={[10, 20]} {...args} />
    </div>
  );
 };
-Basic.args = {
-  min: 0,
-  max: 100,
-  isStep: false,
-  orientation: 'horizontal',
-  reverse: false,
-};
+
+export default meta;
@@ -1,74 +1,51 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

 import { Slider } from '@grafana/ui';

-import { Orientation } from '../../types/orientation';
-
-import { SliderProps } from './types';
-
-export default {
+const meta: ComponentMeta<typeof Slider> = {
  title: 'Forms/Slider',
  component: Slider,
  parameters: {
    controls: {
-      exclude: ['step', 'formatTooltipResult', 'onChange', 'onAfterChange', 'value', 'tooltipAlwaysVisible'],
+      exclude: ['formatTooltipResult', 'onChange', 'onAfterChange', 'value', 'tooltipAlwaysVisible'],
    },
    knobs: {
      disabled: true,
    },
  },
  argTypes: {
-    isStep: { name: 'Step' },
    orientation: { control: { type: 'select', options: ['horizontal', 'vertical'] } },
+    step: { control: { type: 'number', min: 1 } },
+  },
+  args: {
+    min: 0,
+    max: 100,
+    value: 10,
+    orientation: 'horizontal',
+    reverse: false,
+    included: true,
+    step: undefined,
  },
-} as Meta;
-
-const commonArgs = {
-  min: 0,
-  max: 100,
-  value: 10,
-  isStep: false,
-  orientation: 'horizontal' as Orientation,
-  reverse: false,
-  included: true,
 };

-interface StoryProps extends Partial<SliderProps> {
-  isStep: boolean;
-}
-
-export const Basic: Story<StoryProps> = (args) => {
+export const Basic: ComponentStory<typeof Slider> = (args) => {
  return (
    <div style={{ width: '300px', height: '300px' }}>
-      <Slider
-        step={args.isStep ? 10 : undefined}
-        value={args.value}
-        min={args.min as number}
-        max={args.max as number}
-        {...args}
-      />
+      <Slider {...args} />
    </div>
  );
 };
-Basic.args = {
-  ...commonArgs,
-};

-export const WithMarks: Story<StoryProps> = (args) => {
+export const WithMarks: ComponentStory<typeof Slider> = (args) => {
  return (
    <div style={{ width: '300px', height: '300px' }}>
-      <Slider
-        step={args.isStep ? 10 : undefined}
-        value={args.value}
-        min={args.min as number}
-        max={args.max as number}
-        {...args}
-      />
+      <Slider {...args} />
    </div>
  );
 };
 WithMarks.args = {
-  ...commonArgs,
  marks: { 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' },
 };
+
+export default meta;
@@ -8,7 +8,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Props } from './Spinner';
 import mdx from './Spinner.mdx';

-export default {
+const meta: Meta = {
  title: 'Visualizations/Spinner',
  component: Spinner,
  decorators: [withCenteredStory],
@@ -24,7 +24,7 @@ export default {
    backgroundColor: { control: { type: 'color' } },
    color: { control: { type: 'color' } },
  },
-} as Meta;
+};

 interface StoryProps extends Partial<Props> {
  backgroundColor: string;
@@ -55,3 +55,5 @@ Basic.args = {
  size: 34,
  withStyle: false,
 };
+
+export default meta;
@@ -1,13 +1,11 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { PureComponent } from 'react';

 import { StatsPicker } from '@grafana/ui';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { Props } from './StatsPicker';
-
 interface State {
  stats: string[];
 }
@@ -55,7 +53,7 @@ class WrapperWithState extends PureComponent<any, State> {
  }
 }

-export default {
+const meta: ComponentMeta<typeof StatsPicker> = {
  title: 'Pickers and Editors/StatsPicker',
  component: StatsPicker,
  decorators: [withCenteredStory],
@@ -64,9 +62,9 @@ export default {
      exclude: ['onChange', 'stats', 'defaultStat', 'className'],
    },
  },
-} as Meta;
+};

-export const Picker: Story<Props> = (args) => {
+export const Picker: ComponentStory<typeof StatsPicker> = (args) => {
  return (
    <div>
      <WrapperWithState {...args} />
@@ -79,3 +77,5 @@ Picker.args = {
  menuPlacement: 'auto',
  width: 10,
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState, useCallback } from 'react';

 import { InlineField, Switch, InlineSwitch } from '@grafana/ui';
@@ -9,7 +9,7 @@ import { InlineFieldRow } from '../Forms/InlineFieldRow';

 import mdx from './Switch.mdx';

-export default {
+const meta: ComponentMeta<typeof Switch> = {
  title: 'Forms/Switch',
  component: Switch,
  decorators: [withCenteredStory, withHorizontallyCenteredStory],
@@ -23,9 +23,9 @@ export default {
    value: false,
    transparent: false,
  },
-} as Meta;
+};

-export const Controlled: Story = (args) => {
+export const Controlled: ComponentStory<typeof Switch> = (args) => {
  return (
    <div>
      <div style={{ marginBottom: '32px' }}>
@@ -56,8 +56,10 @@ export const Controlled: Story = (args) => {
  );
 };

-export const Uncontrolled: Story = (args) => {
+export const Uncontrolled: ComponentStory<typeof Switch> = (args) => {
  const [checked, setChecked] = useState(args.value);
  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
  return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} />;
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { merge } from 'lodash';
 import React from 'react';

@@ -21,7 +21,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './Table.mdx';
 import { FooterItem } from './types';

-export default {
+const meta: ComponentMeta<typeof Table> = {
  title: 'Visualizations/Table',
  component: Table,
  decorators: [withCenteredStory],
@@ -38,7 +38,7 @@ export default {
    height: 500,
    columnMinWidth: 150,
  },
-} as Meta;
+};

 function buildData(theme: GrafanaTheme2, config: Record<string, FieldConfig>): DataFrame {
  const data = new MutableDataFrame({
@@ -129,18 +129,18 @@ const defaultThresholds: ThresholdsConfig = {
  mode: ThresholdsMode.Absolute,
 };

-export const Basic: Story = (args) => {
+export const Basic: ComponentStory<typeof Table> = (args) => {
  const theme = useTheme2();
  const data = buildData(theme, {});

  return (
    <div className="panel-container" style={{ width: 'auto' }}>
-      <Table data={data} height={args.height} width={args.width} {...args} />
+      <Table {...args} data={data} />
    </div>
  );
 };

-export const BarGaugeCell: Story = (args) => {
+export const BarGaugeCell: ComponentStory<typeof Table> = (args) => {
  const theme = useTheme2();
  const data = buildData(theme, {
    Progress: {
@@ -154,12 +154,12 @@ export const BarGaugeCell: Story = (args) => {

  return (
    <div className="panel-container" style={{ width: 'auto' }}>
-      <Table data={data} height={args.height} width={args.width} {...args} />
+      <Table {...args} data={data} />
    </div>
  );
 };

-export const ColoredCells: Story = (args) => {
+export const ColoredCells: ComponentStory<typeof Table> = (args) => {
  const theme = useTheme2();
  const data = buildData(theme, {
    Progress: {
@@ -173,24 +173,26 @@ export const ColoredCells: Story = (args) => {

  return (
    <div className="panel-container" style={{ width: 'auto' }}>
-      <Table data={data} height={args.height} width={args.width} {...args} />
+      <Table {...args} data={data} />
    </div>
  );
 };

-export const Footer: Story = (args) => {
+export const Footer: ComponentStory<typeof Table> = (args) => {
  const theme = useTheme2();
  const data = buildData(theme, {});
  const footer = buildFooterData(data);

  return (
    <div className="panel-container" style={{ width: 'auto', height: 'unset' }}>
-      <Table data={data} height={args.height} width={args.width} footerValues={footer} {...args} />
+      <Table {...args} data={data} footerValues={footer} />
    </div>
  );
 };

-export const Pagination: Story = (args) => <Basic {...args} />;
+export const Pagination: ComponentStory<typeof Table> = (args) => <Basic {...args} />;
 Pagination.args = {
-  pageSize: 10,
+  enablePagination: true,
 };
+
+export default meta;
@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { DataFrame } from '@grafana/data';
@@ -8,13 +8,13 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import { TableInputCSV } from './TableInputCSV';

-export default {
+const meta: ComponentMeta<typeof TableInputCSV> = {
  title: 'Forms/TableInputCSV',
  component: TableInputCSV,
  decorators: [withCenteredStory],
-} as Meta;
+};

-export const basic = () => {
+export const basic: ComponentStory<typeof TableInputCSV> = () => {
  return (
    <TableInputCSV
      width={400}
@@ -26,3 +26,5 @@ export const basic = () => {
    />
  );
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import React, { useState } from 'react';

 import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
@@ -9,7 +9,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { CounterProps } from './Counter';
 import mdx from './TabsBar.mdx';

-export default {
+const meta: Meta = {
  title: 'Layout/Tabs',
  decorators: [withCenteredStory],
  parameters: {
@@ -25,7 +25,7 @@ const tabs = [
  { label: '3rd child', key: 'third', active: false },
 ];

-export const Simple = () => {
+export const Simple: Story = () => {
  const [state, updateState] = useState(tabs);
  return (
    <DashboardStoryCanvas>
@@ -58,3 +58,5 @@ export const Counter: Story<CounterProps> = (args) => {
 Counter.args = {
  value: 10,
 };
+
+export default meta;
@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { Props as TagProps, Tag } from './Tag';
+import { Tag } from './Tag';
 import mdx from './Tag.mdx';

-export default {
+const meta: ComponentMeta<typeof Tag> = {
  title: 'Forms/Tags/Tag',
  component: Tag,
  decorators: [withCenteredStory],
@@ -22,21 +22,11 @@ export default {
  args: {
    name: 'Tag',
    colorIndex: 0,
-    showIcon: false,
  },
 };

-interface StoryProps extends TagProps {
-  showIcon?: boolean;
-}
-
-export const Single: Story<StoryProps> = (args) => {
-  return (
-    <Tag
-      name={args.name}
-      colorIndex={args.colorIndex}
-      onClick={action('Tag clicked')}
-      icon={args.showIcon ? args.icon : undefined}
-    />
-  );
+export const Single: ComponentStory<typeof Tag> = (args) => {
+  return <Tag name={args.name} colorIndex={args.colorIndex} onClick={action('Tag clicked')} icon={args.icon} />;
 };
+
+export default meta;
@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions';
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

-import { TagList, Props as TagListProps } from './TagList';
+import { TagList } from './TagList';
 import mdx from './TagList.mdx';

-export default {
+const meta: ComponentMeta<typeof TagList> = {
  title: 'Forms/Tags/TagList',
  component: TagList,
  decorators: [withCenteredStory],
@@ -23,23 +23,15 @@ export default {
    displayMax: 3,
    tags: ['datasource-test', 'gdev', 'mysql', 'mssql'],
    onClick: action('Tag clicked'),
-    showIcon: false,
  },
 };

-interface StoryProps extends TagListProps {
-  showIcon?: boolean;
-}
-
-export const List: Story<StoryProps> = (args) => {
+export const List: ComponentStory<typeof TagList> = (args) => {
  return (
    <div style={{ width: 300 }}>
-      <TagList
-        tags={args.tags}
-        onClick={args.onClick}
-        displayMax={args.displayMax}
-        icon={args.showIcon ? args.icon : undefined}
-      />
+      <TagList tags={args.tags} onClick={args.onClick} displayMax={args.displayMax} icon={args.icon} />
    </div>
  );
 };
+
+export default meta;
@@ -1,14 +1,14 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';

 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { VerticalGroup } from '../Layout/Layout';

-import { TagsInput, Props } from './TagsInput';
+import { TagsInput } from './TagsInput';
 import mdx from './TagsInput.mdx';

-export default {
+const meta: ComponentMeta<typeof TagsInput> = {
  title: 'Forms/TagsInput',
  component: TagsInput,
  decorators: [withCenteredStory],
@@ -20,11 +20,9 @@ export default {
      exclude: ['onChange', 'className', 'tags'],
    },
  },
-} as Meta;
+};

-type StoryProps = Omit<Props, 'onChange' | 'className' | 'tags'>;
-
-export const Basic: Story<StoryProps> = (props) => {
+export const Basic: ComponentStory<typeof TagsInput> = (props) => {
  const [tags, setTags] = useState<string[]>([]);
  return <TagsInput {...props} tags={tags} onChange={setTags} />;
 };
@@ -39,3 +37,5 @@ export const WithManyTags = () => {
    </VerticalGroup>
  );
 };
+
+export default meta;
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './TextArea.mdx';

-export default {
+const meta: Meta = {
  title: 'Forms/TextArea',
  component: TextArea,
  decorators: [withCenteredStory],
@@ -22,7 +22,7 @@ export default {
  argTypes: {
    containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
  },
-} as Meta;
+};

 export const Basic: Story = (args) => {
  return (
@@ -38,3 +38,5 @@ Basic.args = {
  cols: 30,
  containerWidth: 300,
 };
+
+export default meta;
@@ -1,9 +1,10 @@
+import { Meta, Story } from '@storybook/react';
 import React from 'react';

 import { EmotionPerfTest } from './EmotionPerfTest';
 import { ThemeDemo as NewThemeDemoComponent } from './ThemeDemo';

-export default {
+const meta: Meta = {
  title: 'Docs Overview/Theme',
  component: NewThemeDemoComponent,
  decorators: [],
@@ -15,10 +16,12 @@ export default {
  },
 };

-export const ThemeDemo = () => {
+export const ThemeDemo: Story = () => {
  return <NewThemeDemoComponent />;
 };

-export const PerfTest = () => {
+export const PerfTest: Story = () => {
  return <EmotionPerfTest />;
 };
+
+export default meta;
@@ -1,14 +1,14 @@
-import { Meta, Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { ButtonGroup } from '../Button';

-import { ToolbarButton, ToolbarButtonProps } from './ToolbarButton';
+import { ToolbarButton } from './ToolbarButton';
 import mdx from './ToolbarButton.mdx';
 import { ToolbarButtonRow } from './ToolbarButtonRow';

-export default {
+const meta: ComponentMeta<typeof ToolbarButton> = {
  title: 'Buttons/ToolbarButton',
  component: ToolbarButton,
  decorators: [withCenteredStory],
@@ -17,16 +17,15 @@ export default {
      page: mdx,
    },
    controls: {
-      exclude: ['imgSrc', 'imgAlt', 'iconOnly', 'narrow'],
+      exclude: ['imgSrc', 'imgAlt', 'narrow'],
    },
  },
  args: {
    variant: 'default',
    fullWidth: false,
    disabled: false,
-    toolbarButtonText: 'Just text',
+    children: 'Just text',
    icon: 'cloud',
-    showDropdown: false,
    isOpen: false,
    tooltip: 'This is a tooltip',
    isHighlighted: false,
@@ -47,36 +46,36 @@ export default {
      },
    },
  },
-} as Meta;
+};

-interface StoryProps extends Partial<ToolbarButtonProps> {
-  toolbarButtonText: string;
-  showDropdown: boolean;
-}
-
-export const BasicWithText: Story<StoryProps> = (args) => {
+export const BasicWithText: ComponentStory<typeof ToolbarButton> = (args) => {
  return (
    <ToolbarButton
      variant={args.variant}
      disabled={args.disabled}
      fullWidth={args.fullWidth}
+      icon={args.icon}
      tooltip={args.tooltip}
-      isOpen={args.showDropdown ? args.isOpen : undefined}
+      isOpen={args.isOpen}
      isHighlighted={args.isHighlighted}
      imgSrc={args.imgSrc}
      imgAlt={args.imgAlt}
    >
-      {args.toolbarButtonText}
+      {args.children}
    </ToolbarButton>
  );
 };
+BasicWithText.args = {
+  icon: undefined,
+  iconOnly: false,
+};

-export const BasicWithIcon: Story<StoryProps> = (args) => {
+export const BasicWithIcon: ComponentStory<typeof ToolbarButton> = (args) => {
  return (
    <ToolbarButton
      variant={args.variant}
      icon={args.icon}
-      isOpen={args.showDropdown ? args.isOpen : undefined}
+      isOpen={args.isOpen}
      tooltip={args.tooltip}
      disabled={args.disabled}
      fullWidth={args.fullWidth}
@@ -86,8 +85,11 @@ export const BasicWithIcon: Story<StoryProps> = (args) => {
    />
  );
 };
+BasicWithIcon.args = {
+  iconOnly: true,
+};

-export const List: Story<ToolbarButtonProps> = (args) => {
+export const List: ComponentStory<typeof ToolbarButton> = (args) => {
  return (
    <ToolbarButtonRow>
      <ToolbarButton variant={args.variant} iconOnly={false} isOpen={false}>
@@ -101,3 +103,5 @@ export const List: Story<ToolbarButtonProps> = (args) => {
    </ToolbarButtonRow>
  );
 };
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -7,7 +7,7 @@ import mdx from '../Tooltip/Tooltip.mdx';

 import { Tooltip } from './Tooltip';

-export default {
+const meta: ComponentMeta<typeof Tooltip> = {
  title: 'Overlays/Tooltip',
  component: Tooltip,
  decorators: [withCenteredStory],
@@ -56,7 +56,7 @@ export default {
  },
 };

-export const Basic: Story = ({ content, ...args }) => {
+export const Basic: ComponentStory<typeof Tooltip> = ({ content, ...args }) => {
  return (
    <Tooltip content={content} {...args}>
      <Button>Hover me for Tooltip </Button>
@@ -70,3 +70,5 @@ Basic.args = {
  show: undefined,
  placement: 'auto',
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { Meta, Story } from '@storybook/react';
 import React from 'react';

 import { StoryExample } from '../../utils/storybook/StoryExample';
@@ -5,7 +6,7 @@ import { VerticalGroup } from '../Layout/Layout';

 import { Typography } from './Typography';

-export default {
+const meta: Meta = {
  title: 'General/Typography',
  component: Typography,
  parameters: {
@@ -13,7 +14,7 @@ export default {
  },
 };

-export const Typopgraphy = () => {
+export const Typopgraphy: Story = () => {
  return (
    <VerticalGroup>
      <StoryExample name="Native header elements (global styles)">
@@ -27,3 +28,5 @@ export const Typopgraphy = () => {
    </VerticalGroup>
  );
 };
+
+export default meta;
@@ -1,3 +1,4 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { UnitPicker } from '@grafana/ui';
@@ -6,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import mdx from './UnitPicker.mdx';

-export default {
+const meta: ComponentMeta<typeof UnitPicker> = {
  title: 'Pickers and Editors/UnitPicker',
  component: UnitPicker,
  decorators: [withCenteredStory],
@@ -15,4 +16,6 @@ export default {
  },
 };

-export const simple = () => <UnitPicker onChange={(val) => console.log(val)} />;
+export const simple: ComponentStory<typeof UnitPicker> = () => <UnitPicker onChange={(val) => console.log(val)} />;
+
+export default meta;
@@ -1,4 +1,4 @@
-import { Story } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';

 import { ValuePicker } from '@grafana/ui';
@@ -7,10 +7,9 @@ import { getAvailableIcons } from '../../types';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { generateOptions } from '../Select/mockOptions';

-import { ValuePickerProps } from './ValuePicker';
 import mdx from './ValuePicker.mdx';

-export default {
+const meta: ComponentMeta<typeof ValuePicker> = {
  title: 'Pickers and Editors/ValuePicker',
  component: ValuePicker,
  decorators: [withCenteredStory],
@@ -45,7 +44,7 @@ export default {
 };
 const options = generateOptions();

-export const Simple: Story<ValuePickerProps<string>> = (args) => {
+export const Simple: ComponentStory<typeof ValuePicker> = (args) => {
  return (
    <div style={{ width: '200px' }}>
      <ValuePicker {...args} options={options} onChange={(v) => console.log(v)} />
@@ -60,3 +59,5 @@ Simple.args = {
  icon: 'plus',
  menuPlacement: 'auto',
 };
+
+export default meta;
@@ -1,11 +1,11 @@
-import { Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import React, { useEffect, useState } from 'react';

 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import { VizLayout } from './VizLayout';

-export default {
+const meta: Meta = {
  title: 'Visualizations/VizLayout',
  component: VizLayout,
  decorators: [withCenteredStory],
@@ -88,3 +88,5 @@ RightLegend.args = {
  legendWidth: 100,
  legendItems: 2,
 };
+
+export default meta;
@@ -9,7 +9,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';

 import { VizLegendItem } from './types';

-export default {
+const meta: Meta = {
  title: 'Visualizations/VizLegend',
  component: VizLegend,
  decorators: [withCenteredStory],
@@ -32,7 +32,7 @@ export default {
      },
    },
  },
-} as Meta;
+};

 interface LegendStoryDemoProps {
  name: string;
@@ -166,3 +166,5 @@ function generateLegendItems(
    };
  });
 }
+
+export default meta;
@@ -1,9 +1,9 @@
-import { Story, Meta } from '@storybook/react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';

-import { SeriesTable, SeriesTableProps } from './SeriesTable';
+import { SeriesTable } from './SeriesTable';

-export default {
+const meta: ComponentMeta<typeof SeriesTable> = {
  title: 'VizTooltip/SeriesTable',
  component: SeriesTable,
  argTypes: {
@@ -11,9 +11,9 @@ export default {
      control: 'date',
    },
  },
-} as Meta;
+};

-const Template: Story<SeriesTableProps> = (args) => {
+const Template: ComponentStory<typeof SeriesTable> = (args) => {
  const date = new Date(args.timestamp!).toLocaleString();
  return (
    <div>
@@ -60,3 +60,5 @@ multi.args = {
    },
  ],
 };
+
+export default meta;