diff --git a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx
index 5a1c04902bd..e00f76de074 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.story.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { TimeOfDayPicker } from './TimeOfDayPicker';
@@ -7,11 +6,13 @@ import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { dateTime } from '@grafana/data';
 
-const TimeOfDayPickerStories = storiesOf('Pickers and Editors/TimeOfDayPicker', module);
+export default {
+  title: 'Pickers and Editors/TimePickers/TimeOfDayPicker',
+  component: TimeOfDayPicker,
+  decorators: [withCenteredStory],
+};
 
-TimeOfDayPickerStories.addDecorator(withCenteredStory);
-
-TimeOfDayPickerStories.add('default', () => {
+export const basic = () => {
   return (
     <UseState
       initialState={{
@@ -31,9 +32,9 @@ TimeOfDayPickerStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};
 
-TimeOfDayPickerStories.add('only minutes', () => {
+export const onlyMinutes = () => {
   return (
     <UseState initialState={{ value: dateTime(Date.now()) }}>
       {(value, updateValue) => {
@@ -50,4 +51,4 @@ TimeOfDayPickerStories.add('only minutes', () => {
       }}
     </UseState>
   );
-});
+};
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
index 6da6ed54224..6184be49039 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeOfDayPicker.tsx
@@ -8,7 +8,7 @@ import { inputSizes } from '../Forms/commonStyles';
 import { FormInputSize } from '../Forms/types';
 import { focusCss } from '../../themes/mixins';
 
-interface Props {
+export interface Props {
   onChange: (value: DateTime) => void;
   value: DateTime;
   showHour?: boolean;
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx
index 8057c6d3e2d..4fecc03c640 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker.story.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { TimeRangePicker } from './TimeRangePicker';
@@ -7,11 +6,13 @@ import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { TimeFragment, dateTime } from '@grafana/data';
 
-const TimeRangePickerStories = storiesOf('Pickers and Editors/TimeRangePicker', module);
+export default {
+  title: 'Pickers and Editors/TimePickers/TimeRangePicker',
+  component: TimeRangePicker,
+  decorators: [withCenteredStory],
+};
 
-TimeRangePickerStories.addDecorator(withCenteredStory);
-
-TimeRangePickerStories.add('default', () => {
+export const basic = () => {
   return (
     <UseState
       initialState={{
@@ -43,4 +44,4 @@ TimeRangePickerStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
index e8f53ccadb0..8f19391a9ce 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.story.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
 import { TimeZonePicker } from './TimeZonePicker';
 import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-const TimeZonePickerStories = storiesOf('Pickers and Editors/TimeZonePicker', module);
+export default {
+  title: 'Pickers and Editors/TimePickers/TimeZonePicker',
+  component: TimeZonePicker,
+  decorators: [withCenteredStory],
+};
 
-TimeZonePickerStories.addDecorator(withCenteredStory);
-
-TimeZonePickerStories.add('default', () => {
+export const basic = () => {
   return (
     <UseState
       initialState={{
@@ -30,4 +31,4 @@ TimeZonePickerStories.add('default', () => {
       }}
     </UseState>
   );
-});
+};
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
index 4d19715b48c..9b63d747669 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { getTimeZoneGroups } from '@grafana/data';
 import { Cascader } from '../index';
 
-interface Props {
+export interface Props {
   value: string;
   width?: number;