From 134d43978d4423f698cf1118b5a226a44906cdbe Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 28 Apr 2020 18:09:32 +0300
Subject: [PATCH] Search: Convert time pickers to CSF (#24002)

(cherry picked from commit 4c823d92216bb980b863eaf38cf8d718ffe6bf1c)
---
 .../TimePicker/TimeOfDayPicker.story.tsx        | 17 +++++++++--------
 .../components/TimePicker/TimeOfDayPicker.tsx   |  2 +-
 .../TimePicker/TimeRangePicker.story.tsx        | 13 +++++++------
 .../TimePicker/TimeZonePicker.story.tsx         | 13 +++++++------
 .../components/TimePicker/TimeZonePicker.tsx    |  2 +-
 5 files changed, 25 insertions(+), 22 deletions(-)

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;