From 0ca3346926f5da12347f196442e907fecc649467 Mon Sep 17 00:00:00 2001
From: zDudaHang <maria.eduarda.melo.hang@gmail.com>
Date: Fri, 11 Oct 2024 14:06:41 -0300
Subject: [PATCH 1/3] fixing bug

---
 src/components/MonthRangePicker/MonthRangePickerInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MonthRangePicker/MonthRangePickerInput.tsx b/src/components/MonthRangePicker/MonthRangePickerInput.tsx
index 239ae435f..ebea7855f 100644
--- a/src/components/MonthRangePicker/MonthRangePickerInput.tsx
+++ b/src/components/MonthRangePicker/MonthRangePickerInput.tsx
@@ -13,7 +13,7 @@ export function MonthRangePickerInput(props: MonthRangePickerInputProps) {
 
   return (
     <FormControl {...getFormControlProps()}>
-      <BaseMonthRangeInput {...inputProps} {...rest} />
+      <BaseMonthRangeInput invalid={inputProps['aria-invalid']} {...inputProps} {...rest} />
     </FormControl>
   )
 }

From af332c8cb6fdbbf1ffa597107faf3a8bcf1710c3 Mon Sep 17 00:00:00 2001
From: zDudaHang <maria.eduarda.melo.hang@gmail.com>
Date: Fri, 11 Oct 2024 14:06:56 -0300
Subject: [PATCH 2/3] Improving component's stories

---
 .../MonthRangePicker.stories.tsx              | 116 ++++++++++++++----
 1 file changed, 89 insertions(+), 27 deletions(-)

diff --git a/src/components/MonthRangePicker/MonthRangePicker.stories.tsx b/src/components/MonthRangePicker/MonthRangePicker.stories.tsx
index bc0ae4f63..345941158 100644
--- a/src/components/MonthRangePicker/MonthRangePicker.stories.tsx
+++ b/src/components/MonthRangePicker/MonthRangePicker.stories.tsx
@@ -1,37 +1,99 @@
 import { action } from '@storybook/addon-actions'
-import { boolean, text } from '@storybook/addon-knobs'
-import React from 'react'
+import { boolean, object, text } from '@storybook/addon-knobs'
+import React, { useState } from 'react'
 import { ReferenceMonth } from '../MonthPicker'
-import { MonthRangePicker } from './MonthRangePicker'
+import { DateRange } from '../DateRangePicker'
+import { MonthRangePicker, ReferenceMonthRange } from './MonthRangePicker'
 
 const start: ReferenceMonth = { month: 5, year: 2020 }
 const end: ReferenceMonth = { month: 1, year: 2021 }
-const range = { start: start, end: end }
+const initialValue: ReferenceMonthRange = { start: start, end: end }
+
+const minMonth: ReferenceMonth = { month: 0, year: 2020 }
+const maxMonth: ReferenceMonth = { month: 3, year: 2021 }
 
 export default {
   title: 'Components/MonthRangePicker',
 }
 
-export const Default = () => (
-  <MonthRangePicker
-    label={text('label', 'Month Field')}
-    error={text('error', '')}
-    onChange={action('changed')}
-    inline={boolean('inline', false)}
-    required={boolean('required', false)}
-    disabled={boolean('disabled', false)}
-    value={range}
-  />
-)
-
-export const MinMax = () => (
-  <MonthRangePicker
-    label={text('label', 'Month Field')}
-    error={text('error', '')}
-    onChange={action('changed')}
-    disabled={boolean('disabled', false)}
-    value={range}
-    minMonth={{ month: 0, year: 2020 }}
-    maxMonth={{ month: 3, year: 2021 }}
-  />
-)
+export const Default = () => {
+  const [range, setRange] = useState<ReferenceMonthRange>(initialValue)
+
+  const handleChange = (dateRange: DateRange) => {
+    const { startDate, endDate } = dateRange
+
+    if (startDate && endDate) {
+      setRange({
+        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
+        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
+      })
+    } else if (startDate) {
+      setRange({
+        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
+        end: undefined,
+      })
+    } else if (endDate) {
+      setRange({
+        start: undefined,
+        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
+      })
+    } else {
+      setRange({ start: undefined, end: undefined })
+    }
+
+    action('changed')(dateRange)
+  }
+
+  return (
+    <MonthRangePicker
+      label={text('label', 'Month Field')}
+      error={text('error', '')}
+      onChange={handleChange}
+      inline={boolean('inline', false)}
+      required={boolean('required', false)}
+      disabled={boolean('disabled', false)}
+      value={range}
+    />
+  )
+}
+
+export const MinMax = () => {
+  const [range, setRange] = useState<ReferenceMonthRange>(initialValue)
+
+  const handleChange = (dateRange: DateRange) => {
+    const { startDate, endDate } = dateRange
+
+    if (startDate && endDate) {
+      setRange({
+        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
+        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
+      })
+    } else if (startDate) {
+      setRange({
+        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
+        end: undefined,
+      })
+    } else if (endDate) {
+      setRange({
+        start: undefined,
+        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
+      })
+    } else {
+      setRange({ start: undefined, end: undefined })
+    }
+
+    action('changed')(dateRange)
+  }
+
+  return (
+    <MonthRangePicker
+      label={text('label', 'Month Field')}
+      error={text('error', '')}
+      onChange={handleChange}
+      disabled={boolean('disabled', false)}
+      value={range}
+      minMonth={object('minMonth', minMonth)}
+      maxMonth={object('maxMonth', maxMonth)}
+    />
+  )
+}

From f9e12b1e31886796f4bd1071e856bada64d46b76 Mon Sep 17 00:00:00 2001
From: zDudaHang <maria.eduarda.melo.hang@gmail.com>
Date: Tue, 15 Oct 2024 09:29:49 -0300
Subject: [PATCH 3/3] Fixes after internal review

---
 .../MonthRangePicker.stories.tsx              | 77 +++++++------------
 1 file changed, 26 insertions(+), 51 deletions(-)

diff --git a/src/components/MonthRangePicker/MonthRangePicker.stories.tsx b/src/components/MonthRangePicker/MonthRangePicker.stories.tsx
index 345941158..f41a8a436 100644
--- a/src/components/MonthRangePicker/MonthRangePicker.stories.tsx
+++ b/src/components/MonthRangePicker/MonthRangePicker.stories.tsx
@@ -16,39 +16,39 @@ export default {
   title: 'Components/MonthRangePicker',
 }
 
-export const Default = () => {
-  const [range, setRange] = useState<ReferenceMonthRange>(initialValue)
+const handleChange = (setRange: (referenceMonthRange: ReferenceMonthRange) => void) => (dateRange: DateRange) => {
+  const { startDate, endDate } = dateRange
 
-  const handleChange = (dateRange: DateRange) => {
-    const { startDate, endDate } = dateRange
+  if (startDate && endDate) {
+    setRange({
+      start: { month: startDate.getMonth(), year: startDate.getFullYear() },
+      end: { month: endDate.getMonth(), year: endDate.getFullYear() },
+    })
+  } else if (startDate) {
+    setRange({
+      start: { month: startDate.getMonth(), year: startDate.getFullYear() },
+      end: undefined,
+    })
+  } else if (endDate) {
+    setRange({
+      start: undefined,
+      end: { month: endDate.getMonth(), year: endDate.getFullYear() },
+    })
+  } else {
+    setRange({ start: undefined, end: undefined })
+  }
 
-    if (startDate && endDate) {
-      setRange({
-        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
-        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
-      })
-    } else if (startDate) {
-      setRange({
-        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
-        end: undefined,
-      })
-    } else if (endDate) {
-      setRange({
-        start: undefined,
-        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
-      })
-    } else {
-      setRange({ start: undefined, end: undefined })
-    }
+  action('changed')(dateRange)
+}
 
-    action('changed')(dateRange)
-  }
+export const Default = () => {
+  const [range, setRange] = useState<ReferenceMonthRange>(initialValue)
 
   return (
     <MonthRangePicker
       label={text('label', 'Month Field')}
       error={text('error', '')}
-      onChange={handleChange}
+      onChange={(dateRange) => handleChange(setRange)(dateRange)}
       inline={boolean('inline', false)}
       required={boolean('required', false)}
       disabled={boolean('disabled', false)}
@@ -60,36 +60,11 @@ export const Default = () => {
 export const MinMax = () => {
   const [range, setRange] = useState<ReferenceMonthRange>(initialValue)
 
-  const handleChange = (dateRange: DateRange) => {
-    const { startDate, endDate } = dateRange
-
-    if (startDate && endDate) {
-      setRange({
-        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
-        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
-      })
-    } else if (startDate) {
-      setRange({
-        start: { month: startDate.getMonth(), year: startDate.getFullYear() },
-        end: undefined,
-      })
-    } else if (endDate) {
-      setRange({
-        start: undefined,
-        end: { month: endDate.getMonth(), year: endDate.getFullYear() },
-      })
-    } else {
-      setRange({ start: undefined, end: undefined })
-    }
-
-    action('changed')(dateRange)
-  }
-
   return (
     <MonthRangePicker
       label={text('label', 'Month Field')}
       error={text('error', '')}
-      onChange={handleChange}
+      onChange={(dateRange) => handleChange(setRange)(dateRange)}
       disabled={boolean('disabled', false)}
       value={range}
       minMonth={object('minMonth', minMonth)}