Chore: Added controls to DatePickerWithInput story (#54360)

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

@@ -1,11 +1,20 @@
-import { ComponentMeta } from '@storybook/react';
-import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
 
 import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
 
 import { DatePickerWithInput } from './DatePickerWithInput';
 import mdx from './DatePickerWithInput.mdx';
 
+const today = new Date();
+
+// minimum date is initially set to 1 month before to allow the user
+// to quickly see its effects
+const minimumDate = new Date();
+minimumDate.setMonth(minimumDate.getMonth() - 1);
+
 const meta: ComponentMeta<typeof DatePickerWithInput> = {
   title: 'Pickers and Editors/TimePickers/DatePickerWithInput',
   component: DatePickerWithInput,
@@ -14,13 +23,39 @@ const meta: ComponentMeta<typeof DatePickerWithInput> = {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['value', 'onChange', 'prefix', 'suffix', 'width', 'invalid', 'loading', 'addonBefore', 'addonAfter'],
+    },
+  },
+  args: {
+    value: today,
+    minDate: minimumDate,
+    closeOnSelect: true,
+    placeholder: 'Date',
+  },
+  argTypes: {
+    minDate: { control: 'date' },
   },
 };
 
-export const Basic = () => {
-  const [date, setDate] = useState<Date | string>(new Date());
+export const Basic: ComponentStory<typeof DatePickerWithInput> = (args) => {
+  const [, updateArgs] = useArgs();
 
-  return <DatePickerWithInput width={40} value={date} onChange={(newDate) => setDate(newDate)} />;
+  // the minDate arg can change from Date object to number, we need to handle this
+  // scenario to avoid a crash in the component's story.
+  const minDateVal = typeof args.minDate === 'number' ? new Date(args.minDate) : args.minDate;
+
+  return (
+    <DatePickerWithInput
+      {...args}
+      width={40}
+      minDate={minDateVal}
+      onChange={(newValue) => {
+        action('on selected')(newValue);
+        updateArgs({ value: newValue });
+      }}
+    />
+  );
 };
 
 export default meta;

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

@@ -11,11 +11,15 @@ export const formatDate = (date: Date | string) => dateTime(date).format('L');
 
 /** @public */
 export interface DatePickerWithInputProps extends Omit<InputProps, 'ref' | 'value' | 'onChange'> {
+  /** Value selected by the DatePicker */
   value?: Date | string;
+  /** The minimum date the value can be set to */
   minDate?: Date;
+  /** Handles changes when a new date is selected */
   onChange: (value: Date | string) => void;
   /** Hide the calendar when date is selected */
   closeOnSelect?: boolean;
+  /** Text that appears when the input has no text */
   placeholder?: string;
 }