Merge pull request #1 from viniarruda/fix/month-class

fix: add variants to month classname and adjust initial year

Author: viniarruda

README.md

@@ -48,6 +48,7 @@ Visit http://localhost:6006/
 
 ```typescript
 
+
 onRangeSelect: (params: RangeParams) => void
 
 type RangeParams = {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viniarruda/react-month-range-picker",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": "Vinicius Arruda",
   "description": "React Month Range Picker",
   "types": "types/index.d.ts",

src/MonthRangePicker/MonthRangePicker.stories.tsx

@@ -76,8 +76,9 @@ const TemplateTwoColumns: StoryFn<MonthRangePickerProps> = () => {
       <MonthRangePicker
         onRangeSelect={onRangeSelect}
         columns={2}
-        initialYear={2020}
+        initialYear={2023}
         locale="en-US"
+        monthClassName="month"
       />
       <h1>Initial: {initialDate}</h1>
       <h1>Final: {finalDate}</h1>

src/MonthRangePicker/index.tsx

@@ -80,7 +80,7 @@ export const MonthRangePicker: React.FC<MonthRangePickerProps> = ({
     return (
       <Month
         key={month}
-        className={monthClassName}
+        className={`${monthClassName}_${getVariants()}`}
         justify="center"
         disabled={isDisabled}
         variant={getVariants()}
@@ -92,7 +92,7 @@ export const MonthRangePicker: React.FC<MonthRangePickerProps> = ({
   }
 
   const renderYear = (year: number) => (
-    <Row wrap="wrap" justify="center" p="4" css={{ gap: '4px 0' }}>
+    <Row wrap="wrap" justify="center" p="4" rowGap="4">
       {monthsNumber.map(month => renderMonth(year, month))}
     </Row>
   )
@@ -165,20 +165,20 @@ export const MonthRangePicker: React.FC<MonthRangePickerProps> = ({
             </Arrow>
             <Flex mx="4">
               <Typography color="secondary" size="14" weight="regular">
-                {today.getFullYear() + yearOffset}
+                {initialYear + yearOffset}
               </Typography>
             </Flex>
             <Flex mx="4">
               <Typography color="secondary" size="14" weight="regular">
-                {today.getFullYear() + yearOffset + 1}
+                {initialYear + yearOffset + 1}
               </Typography>
             </Flex>
             <Arrow onClick={handleNextYear}>
               <ChevronRight fill="$textSecondary" fontSize="$20" />
             </Arrow>
           </Row>
           <Flex gap="4">
-            {renderYear(today.getFullYear() + yearOffset)}
+            {renderYear(initialYear + yearOffset)}
             {renderYear(today.getFullYear() + yearOffset + 1)}
           </Flex>
         </Calender>