From 07d1c452220f883686c039adb995d0ff2ab4fe5e Mon Sep 17 00:00:00 2001
From: David Avsajanishvili <david@davidavs.com>
Date: Tue, 21 Mar 2023 19:57:34 +0000
Subject: [PATCH 1/2] Make it work with Semantic-UI-React v3.

See the roadmap: https://github.com/Semantic-Org/Semantic-UI-React/issues/4409
See the breaking change: https://github.com/Semantic-Org/Semantic-UI-React/pull/4286
---
 src/components/calendar/calendar.tsx | 272 ++++++++++++++-------------
 1 file changed, 137 insertions(+), 135 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 65aa6587..a7262d05 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import React, { Fragment, SyntheticEvent, useEffect, useRef } from 'react';
-import { Ref, Segment } from 'semantic-ui-react';
+import * as SemanticUiReact from 'semantic-ui-react';
 import { Locale, RenderProps, SemanticDatepickerProps } from 'types';
 import { getShortDate, getToday } from '../../utils';
 import Button from '../button';
@@ -78,148 +78,150 @@ const Calendar: React.FC<CalendarProps> = ({
     }
   });
 
-  return (
-    <Ref innerRef={rootRef}>
-      <Segment
-        {...rootProps}
-        inverted={inverted}
-        className={cn('clndr-calendars-segment', {
-          'clndr-floating': !inline,
-          [pointings[pointing]]: !inline,
-        })}
-      >
-        <div
-          className="clndr-calendars-wrapper"
-          style={{ '--n': calendars.length } as React.CSSProperties}
-        >
-          {calendars.map((calendar, calendarIdx) => (
-            <div key={`${calendar.year}-${calendar.month}`}>
-              <div className="clndr-control">
-                <div style={styles.leftBtn}>
-                  {calendarIdx === 0 && (
-                    <Fragment>
-                      <Button
-                        icon="angle double left"
-                        inverted={inverted}
-                        title={previousYear}
-                        type="button"
-                        {...getBackProps({
-                          calendars,
-                          'aria-label': previousYear,
-                          offset: 12,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                      <Button
-                        icon="angle left"
-                        inverted={inverted}
-                        style={{ marginRight: 0 }}
-                        title={previousMonth}
-                        type="button"
-                        {...getBackProps({
-                          calendars,
-                          'aria-label': previousMonth,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                    </Fragment>
-                  )}
-                </div>
+  const calendarInstance = (
+  <SemanticUiReact.Segment
+    {...rootProps}
+    {...(SemanticUiReact.Ref ? {} : { ref: rootRef })}
+    inverted={inverted}
+    className={cn('clndr-calendars-segment', {
+      'clndr-floating': !inline,
+      [pointings[pointing]]: !inline,
+    })}
+  >
+    <div
+      className="clndr-calendars-wrapper"
+      style={{ '--n': calendars.length } as React.CSSProperties}
+    >
+      {calendars.map((calendar, calendarIdx) => (
+        <div key={`${calendar.year}-${calendar.month}`}>
+          <div className="clndr-control">
+            <div style={styles.leftBtn}>
+              {calendarIdx === 0 && (
+                <Fragment>
+                  <Button
+                    icon="angle double left"
+                    inverted={inverted}
+                    title={previousYear}
+                    type="button"
+                    {...getBackProps({
+                      calendars,
+                      'aria-label': previousYear,
+                      offset: 12,
+                      onClick: onPressBtn,
+                    })}
+                  />
+                  <Button
+                    icon="angle left"
+                    inverted={inverted}
+                    style={{ marginRight: 0 }}
+                    title={previousMonth}
+                    type="button"
+                    {...getBackProps({
+                      calendars,
+                      'aria-label': previousMonth,
+                      onClick: onPressBtn,
+                    })}
+                  />
+                </Fragment>
+              )}
+            </div>
 
-                <span title={`${months[calendar.month]} ${calendar.year}`}>
-                  {months[calendar.month].slice(0, 3)} {calendar.year}
-                </span>
+            <span title={`${months[calendar.month]} ${calendar.year}`}>
+              {months[calendar.month].slice(0, 3)} {calendar.year}
+            </span>
 
-                <div style={styles.rightBtn}>
-                  {calendarIdx === calendars.length - 1 && (
-                    <Fragment>
-                      <Button
-                        icon="angle right"
-                        inverted={inverted}
-                        title={nextMonth}
-                        type="button"
-                        {...getForwardProps({
-                          calendars,
-                          'aria-label': nextMonth,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                      <Button
-                        icon="angle double right"
-                        inverted={inverted}
-                        style={{ marginRight: 0 }}
-                        title={nextYear}
-                        type="button"
-                        {...getForwardProps({
-                          calendars,
-                          'aria-label': nextYear,
-                          offset: 12,
-                          onClick: onPressBtn,
-                        })}
-                      />
-                    </Fragment>
-                  )}
-                </div>
-              </div>
-              <div className="clndr-days">
-                {weekdays.map((weekday) => (
-                  <CalendarCell
-                    key={`${calendar.year}-${calendar.month}-${weekday}`}
+            <div style={styles.rightBtn}>
+              {calendarIdx === calendars.length - 1 && (
+                <Fragment>
+                  <Button
+                    icon="angle right"
                     inverted={inverted}
-                    aria-label={weekday}
-                    title={weekday}
-                  >
-                    {weekday.slice(0, 2)}
-                  </CalendarCell>
-                ))}
-                {calendar.weeks.map((week) =>
-                  week.map((dateObj, weekIdx) => {
-                    const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
+                    title={nextMonth}
+                    type="button"
+                    {...getForwardProps({
+                      calendars,
+                      'aria-label': nextMonth,
+                      onClick: onPressBtn,
+                    })}
+                  />
+                  <Button
+                    icon="angle double right"
+                    inverted={inverted}
+                    style={{ marginRight: 0 }}
+                    title={nextYear}
+                    type="button"
+                    {...getForwardProps({
+                      calendars,
+                      'aria-label': nextYear,
+                      offset: 12,
+                      onClick: onPressBtn,
+                    })}
+                  />
+                </Fragment>
+              )}
+            </div>
+          </div>
+          <div className="clndr-days">
+            {weekdays.map((weekday) => (
+              <CalendarCell
+                key={`${calendar.year}-${calendar.month}-${weekday}`}
+                inverted={inverted}
+                aria-label={weekday}
+                title={weekday}
+              >
+                {weekday.slice(0, 2)}
+              </CalendarCell>
+            ))}
+            {calendar.weeks.map((week) =>
+              week.map((dateObj, weekIdx) => {
+                const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
 
-                    if (!dateObj) {
-                      return <CalendarCell key={key} inverted={inverted} />;
-                    }
+                if (!dateObj) {
+                  return <CalendarCell key={key} inverted={inverted} />;
+                }
 
-                    const selectable =
-                      dateObj.selectable && filterDate(dateObj.date);
-                    const shortDate = getShortDate(dateObj.date);
+                const selectable =
+                  dateObj.selectable && filterDate(dateObj.date);
+                const shortDate = getShortDate(dateObj.date);
 
-                    return (
-                      <CalendarCell
-                        key={key}
-                        {...dateObj}
-                        {...getDateProps({
-                          dateObj: { ...dateObj, selectable },
-                          onClick: onPressBtn,
-                        })}
-                        data-testid={`datepicker-cell-${shortDate}`}
-                        inverted={inverted}
-                        selectable={selectable}
-                      >
-                        {dateObj.date.getDate()}
-                      </CalendarCell>
-                    );
-                  })
-                )}
-              </div>
-            </div>
-          ))}
+                return (
+                  <CalendarCell
+                    key={key}
+                    {...dateObj}
+                    {...getDateProps({
+                      dateObj: { ...dateObj, selectable },
+                      onClick: onPressBtn,
+                    })}
+                    data-testid={`datepicker-cell-${shortDate}`}
+                    inverted={inverted}
+                    selectable={selectable}
+                  >
+                    {dateObj.date.getDate()}
+                  </CalendarCell>
+                );
+              })
+            )}
+          </div>
         </div>
-        {showToday ? (
-          <TodayButton
-            inverted={inverted}
-            {...getToday(minDate, maxDate)}
-            {...getDateProps({
-              dateObj: getToday(minDate, maxDate),
-              onClick: onPressBtn,
-            })}
-          >
-            {todayButton}
-          </TodayButton>
-        ) : null}
-      </Segment>
-    </Ref>
+      ))}
+    </div>
+    {showToday ? (
+      <TodayButton
+        inverted={inverted}
+        {...getToday(minDate, maxDate)}
+        {...getDateProps({
+          dateObj: getToday(minDate, maxDate),
+          onClick: onPressBtn,
+        })}
+      >
+        {todayButton}
+      </TodayButton>
+    ) : null}
+  </SemanticUiReact.Segment>
   );
+  return SemanticUiReact.Ref ? (
+    <Ref innerRef={rootRef}>{calendarInstance}</Ref>
+  ) : calendarInstance;
 };
 
 export default Calendar;

From 3171461863f3b9a7a7c4259c68f0c521a6278a7b Mon Sep 17 00:00:00 2001
From: David Avsajanishvili <david@davidavs.com>
Date: Tue, 21 Mar 2023 20:04:25 +0000
Subject: [PATCH 2/2] Linting fixes

---
 src/components/calendar/calendar.tsx | 270 ++++++++++++++-------------
 stories/data.ts                      |   2 +-
 2 files changed, 138 insertions(+), 134 deletions(-)

diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index a7262d05..ba2e89f6 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -79,149 +79,153 @@ const Calendar: React.FC<CalendarProps> = ({
   });
 
   const calendarInstance = (
-  <SemanticUiReact.Segment
-    {...rootProps}
-    {...(SemanticUiReact.Ref ? {} : { ref: rootRef })}
-    inverted={inverted}
-    className={cn('clndr-calendars-segment', {
-      'clndr-floating': !inline,
-      [pointings[pointing]]: !inline,
-    })}
-  >
-    <div
-      className="clndr-calendars-wrapper"
-      style={{ '--n': calendars.length } as React.CSSProperties}
+    <SemanticUiReact.Segment
+      {...rootProps}
+      {...(SemanticUiReact.Ref ? {} : { ref: rootRef })}
+      inverted={inverted}
+      className={cn('clndr-calendars-segment', {
+        'clndr-floating': !inline,
+        [pointings[pointing]]: !inline,
+      })}
     >
-      {calendars.map((calendar, calendarIdx) => (
-        <div key={`${calendar.year}-${calendar.month}`}>
-          <div className="clndr-control">
-            <div style={styles.leftBtn}>
-              {calendarIdx === 0 && (
-                <Fragment>
-                  <Button
-                    icon="angle double left"
-                    inverted={inverted}
-                    title={previousYear}
-                    type="button"
-                    {...getBackProps({
-                      calendars,
-                      'aria-label': previousYear,
-                      offset: 12,
-                      onClick: onPressBtn,
-                    })}
-                  />
-                  <Button
-                    icon="angle left"
-                    inverted={inverted}
-                    style={{ marginRight: 0 }}
-                    title={previousMonth}
-                    type="button"
-                    {...getBackProps({
-                      calendars,
-                      'aria-label': previousMonth,
-                      onClick: onPressBtn,
-                    })}
-                  />
-                </Fragment>
-              )}
-            </div>
+      <div
+        className="clndr-calendars-wrapper"
+        style={{ '--n': calendars.length } as React.CSSProperties}
+      >
+        {calendars.map((calendar, calendarIdx) => (
+          <div key={`${calendar.year}-${calendar.month}`}>
+            <div className="clndr-control">
+              <div style={styles.leftBtn}>
+                {calendarIdx === 0 && (
+                  <Fragment>
+                    <Button
+                      icon="angle double left"
+                      inverted={inverted}
+                      title={previousYear}
+                      type="button"
+                      {...getBackProps({
+                        calendars,
+                        'aria-label': previousYear,
+                        offset: 12,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                    <Button
+                      icon="angle left"
+                      inverted={inverted}
+                      style={{ marginRight: 0 }}
+                      title={previousMonth}
+                      type="button"
+                      {...getBackProps({
+                        calendars,
+                        'aria-label': previousMonth,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                  </Fragment>
+                )}
+              </div>
 
-            <span title={`${months[calendar.month]} ${calendar.year}`}>
-              {months[calendar.month].slice(0, 3)} {calendar.year}
-            </span>
+              <span title={`${months[calendar.month]} ${calendar.year}`}>
+                {months[calendar.month].slice(0, 3)} {calendar.year}
+              </span>
 
-            <div style={styles.rightBtn}>
-              {calendarIdx === calendars.length - 1 && (
-                <Fragment>
-                  <Button
-                    icon="angle right"
-                    inverted={inverted}
-                    title={nextMonth}
-                    type="button"
-                    {...getForwardProps({
-                      calendars,
-                      'aria-label': nextMonth,
-                      onClick: onPressBtn,
-                    })}
-                  />
-                  <Button
-                    icon="angle double right"
-                    inverted={inverted}
-                    style={{ marginRight: 0 }}
-                    title={nextYear}
-                    type="button"
-                    {...getForwardProps({
-                      calendars,
-                      'aria-label': nextYear,
-                      offset: 12,
-                      onClick: onPressBtn,
-                    })}
-                  />
-                </Fragment>
-              )}
+              <div style={styles.rightBtn}>
+                {calendarIdx === calendars.length - 1 && (
+                  <Fragment>
+                    <Button
+                      icon="angle right"
+                      inverted={inverted}
+                      title={nextMonth}
+                      type="button"
+                      {...getForwardProps({
+                        calendars,
+                        'aria-label': nextMonth,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                    <Button
+                      icon="angle double right"
+                      inverted={inverted}
+                      style={{ marginRight: 0 }}
+                      title={nextYear}
+                      type="button"
+                      {...getForwardProps({
+                        calendars,
+                        'aria-label': nextYear,
+                        offset: 12,
+                        onClick: onPressBtn,
+                      })}
+                    />
+                  </Fragment>
+                )}
+              </div>
             </div>
-          </div>
-          <div className="clndr-days">
-            {weekdays.map((weekday) => (
-              <CalendarCell
-                key={`${calendar.year}-${calendar.month}-${weekday}`}
-                inverted={inverted}
-                aria-label={weekday}
-                title={weekday}
-              >
-                {weekday.slice(0, 2)}
-              </CalendarCell>
-            ))}
-            {calendar.weeks.map((week) =>
-              week.map((dateObj, weekIdx) => {
-                const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
+            <div className="clndr-days">
+              {weekdays.map((weekday) => (
+                <CalendarCell
+                  key={`${calendar.year}-${calendar.month}-${weekday}`}
+                  inverted={inverted}
+                  aria-label={weekday}
+                  title={weekday}
+                >
+                  {weekday.slice(0, 2)}
+                </CalendarCell>
+              ))}
+              {calendar.weeks.map((week) =>
+                week.map((dateObj, weekIdx) => {
+                  const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
 
-                if (!dateObj) {
-                  return <CalendarCell key={key} inverted={inverted} />;
-                }
+                  if (!dateObj) {
+                    return <CalendarCell key={key} inverted={inverted} />;
+                  }
 
-                const selectable =
-                  dateObj.selectable && filterDate(dateObj.date);
-                const shortDate = getShortDate(dateObj.date);
+                  const selectable =
+                    dateObj.selectable && filterDate(dateObj.date);
+                  const shortDate = getShortDate(dateObj.date);
 
-                return (
-                  <CalendarCell
-                    key={key}
-                    {...dateObj}
-                    {...getDateProps({
-                      dateObj: { ...dateObj, selectable },
-                      onClick: onPressBtn,
-                    })}
-                    data-testid={`datepicker-cell-${shortDate}`}
-                    inverted={inverted}
-                    selectable={selectable}
-                  >
-                    {dateObj.date.getDate()}
-                  </CalendarCell>
-                );
-              })
-            )}
+                  return (
+                    <CalendarCell
+                      key={key}
+                      {...dateObj}
+                      {...getDateProps({
+                        dateObj: { ...dateObj, selectable },
+                        onClick: onPressBtn,
+                      })}
+                      data-testid={`datepicker-cell-${shortDate}`}
+                      inverted={inverted}
+                      selectable={selectable}
+                    >
+                      {dateObj.date.getDate()}
+                    </CalendarCell>
+                  );
+                })
+              )}
+            </div>
           </div>
-        </div>
-      ))}
-    </div>
-    {showToday ? (
-      <TodayButton
-        inverted={inverted}
-        {...getToday(minDate, maxDate)}
-        {...getDateProps({
-          dateObj: getToday(minDate, maxDate),
-          onClick: onPressBtn,
-        })}
-      >
-        {todayButton}
-      </TodayButton>
-    ) : null}
-  </SemanticUiReact.Segment>
+        ))}
+      </div>
+      {showToday ? (
+        <TodayButton
+          inverted={inverted}
+          {...getToday(minDate, maxDate)}
+          {...getDateProps({
+            dateObj: getToday(minDate, maxDate),
+            onClick: onPressBtn,
+          })}
+        >
+          {todayButton}
+        </TodayButton>
+      ) : null}
+    </SemanticUiReact.Segment>
   );
   return SemanticUiReact.Ref ? (
-    <Ref innerRef={rootRef}>{calendarInstance}</Ref>
-  ) : calendarInstance;
+    <SemanticUiReact.Ref innerRef={rootRef}>
+      {calendarInstance}
+    </SemanticUiReact.Ref>
+  ) : (
+    calendarInstance
+  );
 };
 
 export default Calendar;
diff --git a/stories/data.ts b/stories/data.ts
index 889835bc..bc9f2e7d 100644
--- a/stories/data.ts
+++ b/stories/data.ts
@@ -33,7 +33,7 @@ const locale = <const>[
 
 function arrayToMap<T extends string>(
   arr: readonly T[]
-): { [key in typeof arr[number]]: typeof arr[number] } {
+): { [key in (typeof arr)[number]]: (typeof arr)[number] } {
   return arr.reduce(
     (acc, cur) => ({ ...acc, [cur]: cur }),
     {} as { [key in T]: T }