Add controls support + remove UseState from TimeRangePicker.story.tsx (#53376)

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx

@@ -1,96 +1,21 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { dateTime, TimeRange, DefaultTimeZone, TimeZone, isDateTime } from '@grafana/data';
+import { dateTime, DefaultTimeZone } from '@grafana/data';
-import { Button, TimeRangePicker } from '@grafana/ui';
+import { TimeRangePicker } from '@grafana/ui';
 
-import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas';
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
 
-import { TimeRangePickerProps } from './TimeRangePicker';
+const to = dateTime();
+const from = to.subtract(6, 'h');
 
-const meta: Meta = {
+const meta: ComponentMeta<typeof TimeRangePicker> = {
   title: 'Pickers and Editors/TimePickers/TimeRangePicker',
   component: TimeRangePicker,
   decorators: [withCenteredStory],
-};
+  args: {
-
-interface State {
-  value: TimeRange;
-  timeZone: TimeZone;
-  history: TimeRange[];
-}
-
-const getComponentWithState = (initialState: State, props: TimeRangePickerProps) => (
-  <UseState initialState={initialState}>
-    {(state, updateValue) => {
-      return (
-        <DashboardStoryCanvas>
-          <VerticalGroup>
-            <HorizontalGroup justify="flex-end">
-              <TimeRangePicker
-                {...props}
-                timeZone={state.timeZone}
-                value={state.value}
-                history={state.history}
-                onChange={(value) => {
-                  action('onChange fired')(value);
-                  updateValue({
-                    ...state,
-                    value,
-                    history:
-                      isDateTime(value.raw.from) && isDateTime(value.raw.to)
-                        ? [...state.history, value]
-                        : state.history,
-                  });
-                }}
-                onChangeTimeZone={(timeZone) => {
-                  action('onChangeTimeZone fired')(timeZone);
-                  updateValue({
-                    ...state,
-                    timeZone,
-                  });
-                }}
-                onMoveBackward={() => {
-                  action('onMoveBackward fired')();
-                }}
-                onMoveForward={() => {
-                  action('onMoveForward fired')();
-                }}
-                onZoom={() => {
-                  action('onZoom fired')();
-                }}
-              />
-            </HorizontalGroup>
-            <br />
-            <br />
-            <br />
-            <Button
-              onClick={() => {
-                updateValue({
-                  ...state,
-                  history: [],
-                });
-              }}
-            >
-              Clear history
-            </Button>
-          </VerticalGroup>
-        </DashboardStoryCanvas>
-      );
-    }}
-  </UseState>
-);
-
-export const Relative: Story<TimeRangePickerProps> = (props) => {
-  const to = dateTime();
-  const from = to.subtract(6, 'h');
-
-  return getComponentWithState(
-    {
     value: {
       from,
       to,
@@ -102,28 +27,43 @@ export const Relative: Story<TimeRangePickerProps> = (props) => {
     timeZone: DefaultTimeZone,
     history: [],
   },
-    props
+  parameters: {
-  );
+    controls: {
+      exclude: [
+        'onChange',
+        'onChangeTimeZone',
+        'onChangeFiscalYearStartMonth',
+        'onMoveBackward',
+        'onMoveForward',
+        'onZoom',
+        'timeSyncButton',
+      ],
+    },
+  },
 };
 
-export const Absolute: Story<TimeRangePickerProps> = (props) => {
+export const Basic: ComponentStory<typeof TimeRangePicker> = (args) => {
-  const to = dateTime();
+  const [, updateArgs] = useArgs();
-  const from = to.subtract(6, 'h');
+  return (
-
+    <TimeRangePicker
-  return getComponentWithState(
+      {...args}
-    {
+      onChange={(value) => {
-      value: {
+        action('onChange')(value);
-        from,
+        updateArgs({
-        to,
+          value,
-        raw: {
+          history: args.history ? [...args.history, value] : [value],
-          from,
+        });
-          to,
+      }}
-        },
+      onChangeTimeZone={(timeZone) => {
-      },
+        action('onChangeTimeZone')(timeZone);
-      timeZone: DefaultTimeZone,
+        updateArgs({
-      history: [],
+          timeZone,
-    },
+        });
-    props
+      }}
+      onMoveBackward={action('onMoveBackward')}
+      onMoveForward={action('onMoveForward')}
+      onZoom={action('onZoom')}
+    />
   );
 };
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import { useDialog } from '@react-aria/dialog';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay } from '@react-aria/overlays';
-import React, { memo, FormEvent, createRef, useState, ReactElement } from 'react';
+import React, { memo, FormEvent, createRef, useState } from 'react';
 
 import {
   isDateTime,
@@ -47,7 +47,7 @@ export interface State {
   isOpen: boolean;
 }
 
-export function TimeRangePicker(props: TimeRangePickerProps): ReactElement {
+export function TimeRangePicker(props: TimeRangePickerProps) {
   const [isOpen, setOpen] = useState(false);
 
   const {
@@ -153,6 +153,8 @@ export function TimeRangePicker(props: TimeRangePickerProps): ReactElement {
   );
 }
 
+TimeRangePicker.displayName = 'TimeRangePicker';
+
 const ZoomOutTooltip = () => (
   <>
     Time range zoom out <br /> CTRL+Z