@soul-refiner/design-system 0.1.19 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {
@@ -54,6 +54,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "react-tooltip": "^5.18.0",
     "scheduler": "^0.23.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",

package/src/common/date.ts

@@ -0,0 +1,30 @@
+export const THIS_YEAR = +new Date().getFullYear();
+
+export const THIS_MONTH = +new Date().getMonth() + 1;
+
+export enum WEEKDAYS {
+  MON = 'Mon',
+  TUE = 'Tue',
+  WED = 'Wed',
+  THU = 'Thu',
+  FRI = 'Fri',
+  SAT = 'Sat',
+  SUN = 'Sun',
+}
+
+export enum MONTHS {
+  JAN = 'Jan',
+  FEB = 'Feb',
+  MAR = 'Mar',
+  APR = 'Apr',
+  MAY = 'May',
+  JUN = 'Jun',
+  JUL = 'Jul',
+  AUG = 'Aug',
+  SEP = 'Sep',
+  OCT = 'Oct',
+  NOV = 'Nov',
+  DEC = 'Dec',
+}
+
+export const CALENDAR_WEEKS = 6;

package/src/common/index.ts

@@ -1,2 +1,9 @@
 export { colorReference, COLORS } from './colors';
+export {
+  CALENDAR_WEEKS,
+  MONTHS,
+  THIS_MONTH,
+  THIS_YEAR,
+  WEEKDAYS,
+} from './date';
 export { Styles } from './styles';

package/src/components/feedback/index.ts

@@ -10,3 +10,5 @@ export { Progress } from './progress';
 export type { ProgressProps } from './progress';
 export { Toast } from './toast';
 export type { ToastProps } from './toast';
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';

package/src/components/feedback/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';

package/src/components/feedback/tooltip/tooltip.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Tooltip as ReactTooltip, PlacesType } from 'react-tooltip';
+
+export interface TooltipProps extends React.PropsWithChildren {
+  content: string;
+  place: PlacesType;
+}
+
+export const Tooltip = ({ children, content, place = 'top' }: TooltipProps) => {
+  const id = React.useId();
+  return (
+    <>
+      <ReactTooltip
+        id={id}
+        place={place}
+        style={{
+          fontFamily: 'Inter',
+          fontSize: '12px',
+          fontWeight: 400,
+          lineHeight: '150%',
+          textAlign: 'center',
+          padding: '8px',
+          maxWidth: '280px',
+          backgroundColor: 'var(--color-grey-3)',
+          boxShadow: 'var(--elevation-2)',
+          borderRadius: '4px',
+        }}
+      />
+      {React.Children.map(children, (child) => {
+        return (
+          React.isValidElement(child) &&
+          React.cloneElement(child, {
+            'data-tooltip-id': id,
+            'data-tooltip-content': content,
+          } as any)
+        );
+      })}
+    </>
+  );
+};

package/src/components/input/date/date.tsx

@@ -0,0 +1,697 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MONTHS, WEEKDAYS } from 'common';
+import { Button, P } from 'components';
+import { ChevronLeft, ChevronRight, ArrowRight } from 'icons';
+import { buildCalendar, getMonthDays, zeroPad } from 'utils';
+
+export interface DatePickerProps {
+  endDate?: Date;
+  label?: React.ReactNode;
+  onSelect: ({ type, value }: { type: 'end' | 'start'; value: Date }) => void;
+  startDate: Date;
+}
+
+export const DatePicker = ({
+  endDate,
+  label,
+  onSelect: parentOnSelect,
+  startDate,
+}: DatePickerProps) => {
+  const today = new Date();
+  today.setHours(0);
+  today.setMinutes(0);
+  today.setSeconds(0);
+  today.setMilliseconds(0);
+  const firstOfMonth = new Date(today);
+  firstOfMonth.setDate(1);
+  const thisMonth = firstOfMonth.getMonth() + 1;
+  const thisYear = firstOfMonth.getFullYear();
+
+  const isSingleDate = !endDate;
+
+  const pickerRef = React.useRef<HTMLDivElement>(null);
+
+  const [show, setShow] = React.useState(false);
+  const [displayDate, setDisplayDate] = React.useState(
+    () => endDate?.toDateString() ?? startDate.toDateString()
+  );
+  const [componentStartDate, setComponentStartDate] = React.useState(() =>
+    startDate.toDateString()
+  );
+  const [componentEndDate, setComponentEndDate] = React.useState(
+    () => endDate?.toDateString() ?? startDate.toDateString()
+  );
+  const [firstClick, setFirstClick] = React.useState(true);
+
+  React.useEffect(() => {
+    setComponentStartDate(startDate.toDateString());
+  }, [startDate]);
+
+  React.useEffect(() => {
+    setComponentEndDate((endDate ?? new Date())?.toDateString());
+  }, [endDate]);
+
+  React.useEffect(() => {
+    if (
+      !isSingleDate &&
+      new Date(componentStartDate).getTime() >
+        new Date(componentEndDate).getTime()
+    ) {
+      const tempStart = componentStartDate;
+      setComponentStartDate(componentEndDate);
+      setComponentEndDate(tempStart);
+    }
+  }, [componentEndDate, componentStartDate]);
+
+  const handleShow = () => setShow((prev) => !prev);
+
+  const handleBlur = (event: React.FocusEvent) => {
+    if (
+      pickerRef?.current &&
+      !pickerRef?.current?.contains(event.relatedTarget)
+    ) {
+      setShow(false);
+    }
+  };
+
+  const handlePreviousMonth = () => {
+    setDisplayDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() - 1);
+      return newDate.toDateString();
+    });
+  };
+
+  const handleNextMonth = () => {
+    setDisplayDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() + 1);
+      return newDate.toDateString();
+    });
+  };
+
+  const handleFirstClick = () =>
+    !isSingleDate && setFirstClick((prev) => !prev);
+
+  const onSelect = ({
+    type,
+    value,
+  }: {
+    type: 'start' | 'end';
+    value: Date;
+  }) => {
+    if (type === 'start') {
+      setComponentStartDate(value.toDateString());
+    } else {
+      setComponentEndDate(value.toDateString());
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent) => {
+    handleFirstClick();
+    const target = event.target as HTMLElement;
+    const type = firstClick ? 'start' : 'end';
+    const day = target.getAttribute('data-day');
+    const month = target.getAttribute('data-month');
+    const year = target.getAttribute('data-year');
+    onSelect({ type, value: new Date(`${month}-${day}-${year}`) });
+  };
+
+  const handleApply = () => {
+    parentOnSelect({ type: 'start', value: new Date(componentStartDate) });
+    !isSingleDate &&
+      parentOnSelect({ type: 'end', value: new Date(componentEndDate) });
+    !isSingleDate && setFirstClick(true);
+    setShow(false);
+  };
+
+  const handleCancel = () => {
+    setComponentStartDate(startDate.toDateString());
+    setComponentEndDate((endDate ?? new Date())?.toDateString());
+    setFirstClick(true);
+    setShow(false);
+  };
+
+  const handleSetToday = () => {
+    onSelect({ type: 'start', value: today });
+    onSelect({ type: 'end', value: today });
+    setDisplayDate(today.toDateString());
+    setFirstClick(true);
+  };
+
+  const handleSetYesterday = () => {
+    const yesterday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 1
+    );
+    onSelect({ type: 'start', value: yesterday });
+    onSelect({ type: 'end', value: yesterday });
+    setDisplayDate(today.toDateString());
+    setFirstClick(true);
+  };
+
+  const handleLastSevenDays = () => {
+    const lastWeekDate = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 7
+    );
+    onSelect({ type: 'start', value: lastWeekDate });
+    onSelect({ type: 'end', value: today });
+    setDisplayDate(today.toDateString());
+    setFirstClick(true);
+  };
+
+  const handleLastThirtyDays = () => {
+    const lastMonthDate = new Date(today);
+    lastMonthDate.setMonth(thisMonth - 2);
+    onSelect({ type: 'start', value: lastMonthDate });
+    onSelect({ type: 'end', value: today });
+    setDisplayDate(today.toDateString());
+    setFirstClick(true);
+  };
+
+  const handleThisMonth = () => {
+    onSelect({ type: 'start', value: firstOfMonth });
+    onSelect({
+      type: 'end',
+      value: new Date(
+        firstOfMonth.getFullYear(),
+        firstOfMonth.getMonth(),
+        getMonthDays()
+      ),
+    });
+    setDisplayDate(today.toDateString());
+    setFirstClick(true);
+  };
+
+  const handleLastMonth = () => {
+    const lastMonthDate = new Date(firstOfMonth);
+    lastMonthDate.setMonth(thisMonth - 2);
+    onSelect({ type: 'start', value: lastMonthDate });
+    onSelect({
+      type: 'end',
+      value: new Date(
+        lastMonthDate.getFullYear(),
+        lastMonthDate.getMonth(),
+        getMonthDays(lastMonthDate.getMonth() + 1)
+      ),
+    });
+    setDisplayDate(lastMonthDate.toDateString());
+    setFirstClick(true);
+  };
+
+  const handleLastYear = () => {
+    const lastYearDate = new Date(today);
+    lastYearDate.setFullYear(thisYear - 1);
+    onSelect({ type: 'start', value: lastYearDate });
+    onSelect({ type: 'end', value: today });
+    setDisplayDate(today.toDateString());
+    setFirstClick(true);
+  };
+
+  const calendar = buildCalendar(
+    new Date(displayDate).getMonth() + 1,
+    new Date(displayDate).getFullYear()
+  );
+
+  const minRange = new Date(componentStartDate).getTime();
+  const maxRange = new Date(componentEndDate).getTime();
+
+  const displayDateObj = new Date(displayDate);
+  const displayFirstOfMonth = new Date(displayDateObj);
+  displayFirstOfMonth.setDate(1);
+  const displayLastOfMonth = new Date(displayDateObj);
+  displayLastOfMonth.setDate(getMonthDays(displayDateObj.getMonth() + 1));
+
+  return (
+    <Wrapper onBlurCapture={handleBlur} ref={pickerRef} tabIndex={0}>
+      <Trigger onClick={handleShow}>
+        {label && (
+          <>
+            {label}
+            {' | '}
+          </>
+        )}
+        <span>
+          {startDate.toLocaleDateString('en-US').replaceAll('/', '-')}
+        </span>
+        {!!endDate && startDate.toDateString() !== endDate?.toDateString() && (
+          <ArrowRight sx="padding: 0px 8px; margin-bottom: -2px;" />
+        )}
+        {startDate.toDateString() !== endDate?.toDateString() && (
+          <span>
+            {endDate?.toLocaleDateString('en-US').replaceAll('/', '-')}
+          </span>
+        )}
+      </Trigger>
+      {show && (
+        <DateSelector>
+          <InnerWrapper>
+            {!!endDate && (
+              <Left>
+                <Button size="small" type="text" onClick={handleSetToday}>
+                  Today
+                </Button>
+                <Button size="small" type="text" onClick={handleSetYesterday}>
+                  Yesterday
+                </Button>
+                <Button size="small" type="text" onClick={handleLastSevenDays}>
+                  Last 7 days
+                </Button>
+                <Button size="small" type="text" onClick={handleLastThirtyDays}>
+                  Last 30 days
+                </Button>
+                <Button size="small" type="text" onClick={handleThisMonth}>
+                  This month
+                </Button>
+                <Button size="small" type="text" onClick={handleLastMonth}>
+                  Last month
+                </Button>
+                <Button size="small" type="text" onClick={handleLastYear}>
+                  Last Year
+                </Button>
+              </Left>
+            )}
+            <div>
+              <MonthBar>
+                <Arrow onClick={handlePreviousMonth}>
+                  <ChevronLeft size={24} />
+                </Arrow>
+                <P>
+                  {`${
+                    Object.values(MONTHS)[
+                      Math.max(
+                        0,
+                        Math.min(new Date(displayDate).getMonth(), 11)
+                      )
+                    ]
+                  } ${new Date(displayDate).getFullYear()}`}
+                </P>
+                <Arrow onClick={handleNextMonth}>
+                  <ChevronRight size={24} />
+                </Arrow>
+              </MonthBar>
+              <WeekdayWrapper>
+                {Object.values(WEEKDAYS).map((day) => (
+                  <P key={day}>{day}</P>
+                ))}
+              </WeekdayWrapper>
+              <Calendar>
+                {calendar.map((week, index) => {
+                  return (
+                    <Week key={'week-' + index.toString(36)}>
+                      {week.map((day, dayIndex) => {
+                        const isCurrMonth =
+                          day[1] !==
+                          zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                        const dateObj = new Date(
+                          `${day[1]}-${day[2]}-${day[0]}`
+                        );
+                        const isToday =
+                          Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                        const time = dateObj.toDateString();
+                        const isStartDate = time === componentStartDate;
+                        const isEndDate =
+                          !isSingleDate && time === componentEndDate;
+                        const between =
+                          !isSingleDate &&
+                          minRange <= dateObj.getTime() &&
+                          dateObj.getTime() <= maxRange &&
+                          !isStartDate &&
+                          !isEndDate;
+                        const isFirstOfMonth =
+                          displayFirstOfMonth.toDateString() === time;
+                        const isLastOfMonth =
+                          displayLastOfMonth.toDateString() === time;
+
+                        return (
+                          <Day
+                            className={`${isToday ? 'today' : ''}${
+                              isCurrMonth ? ' not-current' : ''
+                            }${isStartDate ? ' start-date' : ''}${
+                              isEndDate ? ' end-date' : ''
+                            }${between ? ' between' : ''}${
+                              isFirstOfMonth ? ' first-of-month' : ''
+                            }${isLastOfMonth ? ' last-of-month' : ''}`.trim()}
+                            data-day={day[2]}
+                            data-month={day[1]}
+                            data-year={day[0]}
+                            key={'day-' + dayIndex.toString(36)}
+                            onClick={handleClick}
+                          >
+                            {`${day[2]}`.startsWith('0')
+                              ? `${day[2]}`[1]
+                              : day[2]}
+                          </Day>
+                        );
+                      })}
+                    </Week>
+                  );
+                })}
+              </Calendar>
+              <BottomWrapper>
+                <Button
+                  onClick={handleCancel}
+                  size="small"
+                  sx="width: 80px;"
+                  type="outlined"
+                >
+                  Cancel
+                </Button>
+                <Button onClick={handleApply} size="small" sx="width: 80px;">
+                  Apply
+                </Button>
+              </BottomWrapper>
+            </div>
+          </InnerWrapper>
+        </DateSelector>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  position: relative;
+  width: fit-content;
+  font-family: Inter;
+`;
+
+const Trigger = styled.button`
+  padding: 12px 24px;
+  background-color: #ffffff;
+  border: 1px solid var(--color-grey-6);
+  border-radius: 24px;
+  color: var(--color-grey-3);
+  outline: none;
+  line-height: 100%;
+  font-family: Inter;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+
+  span {
+    line-height: 20px;
+    color: var(--color-blue-5);
+  }
+
+  &:hover {
+    background-color: var(--color-blue-5);
+    border-color: var(--color-blue-5);
+    color: #ffffff;
+    span {
+      color: #ffffff;
+    }
+  }
+
+  &:active {
+    background-color: var(--color-blue-3);
+    border-color: var(--color-blue-3);
+  }
+`;
+
+const DateSelector = styled.div`
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`;
+
+const InnerWrapper = styled.div`
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const Left = styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+  align-items: flex-start;
+  width: max-content;
+  margin-bottom: 96px;
+  padding-right: 48px;
+  border-right: 1px solid var(--color-grey-8);
+  user-select: none;
+
+  button {
+    padding: 0px;
+
+    span {
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--color-grey-5);
+      font-weight: 400;
+    }
+
+    &:hover {
+      span {
+        color: var(--color-primary-blue-2);
+      }
+    }
+  }
+`;
+
+const MonthBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`;
+
+const Arrow = styled.button`
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`;
+
+const WeekdayWrapper = styled.div`
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`;
+
+const Calendar = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`;
+
+const Week = styled.div`
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`;
+
+const Day = styled.button`
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: Inter;
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &:hover:not(&[class~='start-date']):not(&[class~='end-date']) {
+    background-color: var(--color-primary-blue-4);
+    color: var(--color-primary-blue-1);
+  }
+
+  &[class~='not-current'] {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &[class~='start-date'],
+  &[class~='end-date'] {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &[class~='not-current'] {
+      background-color: var(--color-blue-9);
+    }
+  }
+
+  &[class~='start-date'] + [class~='end-date'] {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -2;
+      height: 32px;
+      width: 64px;
+      background-color: var(--color-primary-blue-3);
+      right: 16px;
+      top: 0;
+    }
+
+    &[class~='not-current'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+  }
+
+  &[class~='not-current'] {
+    position: relative;
+    &[class~='end-date']:not(:first-of-type):not(.start-date) {
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        height: 32px;
+        width: 62px;
+        background-color: var(--color-blue-10);
+        right: 16px;
+        top: 0;
+      }
+    }
+  }
+
+  &[class~='first-of-month'] {
+    &[class~='end-date'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+  }
+
+  &[class~='between'] {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -2;
+      height: 32px;
+      width: 132px;
+      background-color: var(--color-primary-blue-3);
+      right: -48px;
+      top: 0;
+    }
+
+    &:first-of-type::before {
+      width: 80px;
+      border-radius: 24px 0px 0px 24px;
+    }
+
+    &:last-of-type::before {
+      width: 80px;
+      right: 0px;
+      border-radius: 0px 24px 24px 0px;
+    }
+
+    &[class~='not-current'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+
+    &[class~='first-of-month']:not(:first-of-type) {
+      &::before {
+        width: 32px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+    }
+
+    &[class~='first-of-month']:not([class~='not-current']):not(
+        :first-of-type
+      ):not(:last-of-type) {
+      &::before {
+        width: 64px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+        background-color: var(--color-blue-10);
+        right: 16px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        height: 32px;
+        width: 70px;
+        background-color: var(--color-primary-blue-3);
+        right: -32px;
+        top: 0;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+      &:last-of-type {
+        &::before {
+          width: 32px;
+        }
+      }
+    }
+
+    &[class~='last-of-month']:not(&[class~='not-current']) {
+      &::before {
+        z-index: -1;
+        border-radius: 0px 24px 24px 0px;
+        width: 80px;
+        right: 0px;
+      }
+      &:first-of-type {
+        &::before {
+          border-top-left-radius: 24px;
+          border-bottom-left-radius: 24px;
+          width: 32px;
+        }
+      }
+    }
+  }
+`;
+
+const BottomWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;

package/src/components/input/date/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './date';
+export type { DatePickerProps } from './date';

package/src/components/input/index.ts

@@ -1,5 +1,7 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
+export { DatePicker } from './date';
+export type { DatePickerProps } from './date';
 export { Filter } from './filter';
 export type { FilterProps, FilterTriggerProps } from './filter';
 export { Radio } from './radio';

package/src/utils/date.ts

@@ -0,0 +1,118 @@
+import { THIS_MONTH, THIS_YEAR, CALENDAR_WEEKS } from 'common';
+
+export const zeroPad = (value: number, length: number) => {
+  return `${value}`.padStart(length, '0');
+};
+
+export const getMonthDays = (
+  month: number = THIS_MONTH,
+  year: number = THIS_YEAR
+) => {
+  const MONTHS_WITH_30 = [4, 6, 9, 11];
+  const leapYear = year % 4 === 0;
+  return month === 2
+    ? leapYear
+      ? 29
+      : 28
+    : MONTHS_WITH_30.includes(month)
+    ? 30
+    : 31;
+};
+
+export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
+  return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
+};
+
+export const isDate = (date: Date) => {
+  const isDate = Object.prototype.toString.call(date) === '[object Date]';
+  const isValidDate = date && !Number.isNaN(date.valueOf());
+
+  return isDate && isValidDate;
+};
+
+export const isSameMonth = (date: Date, basedate = new Date()) => {
+  if (!(isDate(date) && isDate(basedate))) return false;
+  const basedateMonth = +basedate.getMonth() + 1;
+  const basedateYear = basedate.getFullYear();
+  const dateMonth = +date.getMonth() + 1;
+  const dateYear = date.getFullYear();
+  return +basedateMonth === +dateMonth && +basedateYear === +dateYear;
+};
+
+export const isSameDay = (date: Date, basedate = new Date()) => {
+  if (!(isDate(date) && isDate(basedate))) return false;
+  const basedateDate = basedate.getDate();
+  const basedateMonth = +basedate.getMonth() + 1;
+  const basedateYear = basedate.getFullYear();
+  const dateDate = date.getDate();
+  const dateMonth = +date.getMonth() + 1;
+  const dateYear = date.getFullYear();
+  return (
+    +basedateDate === +dateDate &&
+    +basedateMonth === +dateMonth &&
+    +basedateYear === +dateYear
+  );
+};
+
+export const getDateISO = (date = new Date()) => {
+  if (!isDate(date)) return null;
+  return [
+    date.getFullYear(),
+    zeroPad(+date.getMonth() + 1, 2),
+    zeroPad(+date.getDate(), 2),
+  ].join('-');
+};
+
+export const getPreviousMonth = (month: number, year: number) => {
+  const prevMonth = month > 1 ? month - 1 : 12;
+  const prevMonthYear = month > 1 ? year : year - 1;
+  return { month: prevMonth, year: prevMonthYear };
+};
+
+export const getNextMonth = (month: number, year: number) => {
+  const nextMonth = month < 12 ? month + 1 : 1;
+  const nextMonthYear = month < 12 ? year : year + 1;
+  return { month: nextMonth, year: nextMonthYear };
+};
+
+export const buildCalendar = (month = THIS_MONTH, year = THIS_YEAR) => {
+  const monthDays = getMonthDays(month, year);
+  const monthFirstDay = getMonthFirstDay(month, year);
+  const daysFromPrevMonth = monthFirstDay - 1;
+  const daysFromNextMonth =
+    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
+  const { month: prevMonth, year: prevMonthYear } = getPreviousMonth(
+    month,
+    year
+  );
+  const { month: nextMonth, year: nextMonthYear } = getNextMonth(month, year);
+  const prevMonthDays = getMonthDays(prevMonth, prevMonthYear);
+  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
+    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
+    return [prevMonthYear, zeroPad(prevMonth, 2), zeroPad(day, 2)];
+  });
+  const thisMonthDates = [...new Array(monthDays)].map((n, index) => {
+    const day = index + 1;
+    return [year, zeroPad(month, 2), zeroPad(day, 2)];
+  });
+  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
+    const day = index + 1;
+    return [nextMonthYear, zeroPad(nextMonth, 2), zeroPad(day, 2)];
+  });
+  return calendarIntoWeeks([
+    ...prevMonthDates,
+    ...thisMonthDates,
+    ...nextMonthDates,
+  ]);
+};
+
+export const calendarIntoWeeks = (
+  calendar: (string | number)[][]
+): (string | number)[][][] => {
+  const res = [];
+  while (calendar.length > 0) {
+    const chunk = calendar.splice(0, 7);
+    res.push(chunk);
+  }
+  return res;
+};

package/src/utils/index.ts

@@ -0,0 +1,13 @@
+export {
+  buildCalendar,
+  calendarIntoWeeks,
+  getDateISO,
+  getMonthDays,
+  getMonthFirstDay,
+  getNextMonth,
+  getPreviousMonth,
+  isDate,
+  isSameDay,
+  isSameMonth,
+  zeroPad,
+} from './date';