Storybook: add controls support + remove UseState from RelativeTimeRangePicker story (#53459)

* add controls support + remove UseState from RelativeTimeRangePicker story

* don't need this displayName

* exclude onChange

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

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { ComponentMeta } from '@storybook/react';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { UseState } from '../../../utils/storybook/UseState';
 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 
 import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
@@ -12,30 +12,28 @@ const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
   component: RelativeTimeRangePicker,
   decorators: [withCenteredStory],
   parameters: {
-    docs: {},
+    controls: {
+      exclude: ['onChange'],
+    },
+  },
+  args: {
+    timeRange: {
+      from: 900,
+      to: 0,
+    },
   },
 };
 
-export const basic = () => {
+export const Basic: ComponentStory<typeof RelativeTimeRangePicker> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState
+    <RelativeTimeRangePicker
-      initialState={{
+      {...args}
-        from: 900,
+      onChange={(value) => {
-        to: 0,
+        action('onChange')(value);
+        updateArgs({ timeRange: value });
       }}
-    >
+    />
-      {(value, updateValue) => {
-        return (
-          <RelativeTimeRangePicker
-            onChange={(newValue) => {
-              action('on selected')(newValue);
-              updateValue(newValue);
-            }}
-            timeRange={value}
-          />
-        );
-      }}
-    </UseState>
   );
 };
 

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

@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FormEvent, ReactElement, useCallback, useState } from 'react';
+import React, { FormEvent, useCallback, useState } from 'react';
 
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
 
@@ -41,7 +41,7 @@ const validOptions = quickOptions.filter((o) => isRelativeFormat(o.from));
 /**
  * @internal
  */
-export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps): ReactElement | null {
+export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
   const { timeRange, onChange } = props;
   const [isOpen, setIsOpen] = useState(false);
   const onClose = useCallback(() => setIsOpen(false), []);