From 72a143aaffa60626c749dc8cc2094e6540861ddd Mon Sep 17 00:00:00 2001
From: Orlando Ortega Jr <38387174+orlandoortegajr@users.noreply.github.com>
Date: Sun, 28 Aug 2022 09:44:51 -0400
Subject: [PATCH] Chore: Added controls to DatePickerWithInput story (#54360)

---
 .../DatePickerWithInput.story.tsx             | 45 ++++++++++++++++---
 .../DatePickerWithInput.tsx                   |  4 ++
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx
index 9350812b641..99e6b166a5e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx
+++ b/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;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
index f1568140415..129c47a254e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx
+++ b/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;
 }