add controls support + remove UseState from WeekStartPicker.story.tsx (#53455)

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

@@ -1,40 +1,34 @@
 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 { WeekStartPicker } from '@grafana/ui';
 
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 const meta: ComponentMeta<typeof WeekStartPicker> = {
   title: 'Pickers and Editors/TimePickers/WeekStartPicker',
   component: WeekStartPicker,
   decorators: [withCenteredStory],
+  parameters: {
+    controls: {
+      exclude: ['onBlur', 'onChange', 'inputId'],
+    },
+  },
 };
 
-export const basic = () => {
+export const Basic: ComponentStory<typeof WeekStartPicker> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState
-      initialState={{
-        value: '',
+    <WeekStartPicker
+      {...args}
+      onChange={(newValue) => {
+        action('onChange')(newValue);
+        updateArgs({ value: newValue });
       }}
-    >
-      {(value, updateValue) => {
-        return (
-          <WeekStartPicker
-            value={value.value}
-            onChange={(newValue: string) => {
-              if (!newValue) {
-                return;
-              }
-              action('on selected')(newValue);
-              updateValue({ value: newValue });
-            }}
-          />
-        );
-      }}
-    </UseState>
+      onBlur={action('onBlur')}
+    />
   );
 };
 

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

@@ -11,7 +11,6 @@ export interface Props {
   width?: number;
   autoFocus?: boolean;
   onBlur?: () => void;
-  includeInternal?: boolean;
   disabled?: boolean;
   inputId?: string;
 }