@cleartrip/ct-design-calendar 4.0.0 → 5.0.0

package/src/style.ts

@@ -0,0 +1,333 @@
+import { css } from '@emotion/react';
+
+export const rdpStyles = css`
+  .rdp {
+    --rdp-cell-height: 30px;
+    --rdp-cell-width: 54px;
+    --rdp-day-size: 30px;
+    --rdp-day-height-custom: 30px;
+    --rdp-day-width-custom: 30px;
+    --rdp-caption-font-size: 16px;
+    --rdp-accent-color: #1a1a1a;
+    --rdp-selected-range-color: #d7d7d7;
+    --rdp-background-color: #e7edff;
+    --rdp-outline: 1.5px solid var(--rdp-accent-color);
+    --rdp-outline-selected: 3px solid var(--rdp-accent-color);
+  }
+
+  /* Hide elements for devices that are not screen readers */
+  .rdp-vhidden {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: 0;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    position: absolute !important;
+    top: 0;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    border: 0 !important;
+  }
+
+  /* Buttons */
+  .rdp-button_reset {
+    appearance: none;
+    position: relative;
+    margin: 0;
+    padding: 0;
+    cursor: default;
+    color: inherit;
+    background: none;
+    font: inherit;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .rdp-button_reset:focus-visible {
+    outline: none;
+  }
+
+  .rdp-button {
+    border: 1.5px solid transparent;
+  }
+
+  .rdp-button[disabled]:not(.rdp-day_selected) {
+    opacity: 0.25;
+  }
+
+  .rdp-button:not([disabled]) {
+    cursor: pointer;
+  }
+
+  .rdp-button:focus-visible:not([disabled]) {
+    color: inherit;
+    background-color: var(--rdp-background-color);
+  }
+
+  .rdp-months {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .rdp-month {
+    margin: unset !important;
+  }
+
+  .rdp-month:first-child {
+    margin-left: 12px;
+  }
+
+  .rdp-month:last-child {
+    margin-right: 12px;
+  }
+
+  .rdp-table {
+    margin: 0;
+    max-width: calc(var(--rdp-cell-width) * 7);
+    border-spacing: 0 10px;
+  }
+
+  .rdp-with_weeknumber .rdp-table {
+    max-width: calc(var(--rdp-cell-width) * 8);
+    border-collapse: collapse;
+  }
+
+  .rdp-caption {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0;
+    text-align: left;
+  }
+
+  .rdp-multiple_months .rdp-caption {
+    position: relative;
+    display: block;
+    text-align: center;
+  }
+
+  .rdp-caption_dropdowns {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .rdp-caption_label {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0 0.25em;
+    white-space: nowrap;
+    color: currentColor;
+    border: 0;
+    border: 1.5px solid transparent;
+    font-family: inherit;
+    font-size: var(--rdp-caption-font-size);
+    font-weight: bold;
+  }
+
+  .rdp-nav {
+    white-space: nowrap;
+  }
+
+  .rdp-multiple_months .rdp-caption_start .rdp-nav {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+  }
+
+  .rdp-multiple_months .rdp-caption_end .rdp-nav {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  .rdp-nav_button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--rdp-cell-width);
+    height: var(--rdp-cell-height);
+    padding: 0.25em;
+    border-radius: 100%;
+  }
+
+  /* Dropdowns */
+  .rdp-dropdown_year,
+  .rdp-dropdown_month {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .rdp-dropdown {
+    appearance: none;
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    cursor: inherit;
+    opacity: 0;
+    border: none;
+    background-color: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .rdp-dropdown[disabled] {
+    opacity: unset;
+    color: unset;
+  }
+
+  .rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+    background-color: var(--rdp-background-color);
+    border-radius: 6px;
+  }
+
+  .rdp-dropdown_icon {
+    margin: 0 0 0 5px;
+  }
+
+  .rdp-head {
+    border: 0;
+  }
+
+  .rdp-head_row,
+  .rdp-row {
+    height: 100%;
+  }
+
+  .rdp-head_cell {
+    vertical-align: middle;
+    font-size: 0.75em;
+    font-weight: 700;
+    text-align: center;
+    height: 100%;
+    height: var(--rdp-cell-height);
+    padding: 0;
+    text-transform: uppercase;
+  }
+
+  .rdp-tbody {
+    border: 0;
+  }
+
+  .rdp-tfoot {
+    margin: 0.5em;
+  }
+
+  .rdp-cell {
+    width: var(--rdp-cell-width);
+    height: var(--rdp-day-height-custom);
+    padding: 10;
+    text-align: center;
+  }
+
+  .rdp-weeknumber {
+    font-size: 0.75em;
+  }
+
+  .rdp-weeknumber,
+  .rdp-day {
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: var(--rdp-day-width-custom);
+    height: var(--rdp-day-height-custom);
+    max-width: var(--rdp-day-size);
+    line-height: 20px;
+    color: #212121;
+    margin: auto;
+    border: 1.5px solid transparent;
+    border-radius: var(--rdp-day-borderRadius-custom);
+    font-size: 16px;
+    z-index: 100;
+  }
+
+  .rdp-day_selected,
+  .rdp-day_selected:focus-visible {
+    color: white;
+    opacity: 1;
+    background-color: var(--rdp-accent-color);
+  }
+
+  .rdp-day_outside {
+    opacity: 0.5;
+  }
+
+  .rdp-day_selected:focus-visible {
+    outline-offset: 1.5px;
+    z-index: 1;
+  }
+
+  .rdp-cell:has(.rdp-day_range_start) {
+    background-color: var(--rdp-selected-range-color);
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+    position: relative;
+  }
+
+  .rdp-cell:has(.rdp-day_range_end)::after {
+    background-color: white;
+    content: '';
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transform: translate(100%, 0px);
+  }
+
+  .rdp-cell:has(.rdp-day_range_start)::before {
+    background-color: white;
+    content: '';
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+
+  .rdp-cell:has(.rdp-day_range_end) {
+    background-color: var(--rdp-selected-range-color);
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    position: relative;
+  }
+
+  .rdp-day_range_end.rdp-day_range_start {
+    border-radius: var(--rdp-day-borderRadius-custom);
+    padding: 4px;
+  }
+
+  .rdp-cell:has(.rdp-day_range_middle) {
+    background-color: var(--rdp-selected-range-color);
+  }
+
+  .rdp-day_range_middle {
+    border-radius: 0;
+    color: var(--rdp-accent-color);
+    background-color: var(--rdp-selected-range-color);
+    padding: 4px;
+  }
+
+  .weekendColor {
+    color: #ff0000;
+  }
+`;

package/src/styles.ts

@@ -0,0 +1,167 @@
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { Theme } from '@cleartrip/ct-design-theme';
+import { getTypographyVariant, TypographyVariant } from '@cleartrip/ct-design-typography';
+
+export const staticDayNameStyles = makeStyles((theme) => {
+  return {
+    root: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingVertical: theme.spacing[3],
+      paddingHorizontal: theme.spacing[4],
+      borderBottomWidth: theme.border.width.sm,
+      borderBottomColor: theme.color.border.disabledDark,
+    },
+    weekDay: {
+      color: theme?.color?.text?.subHeading,
+      ...getTypographyVariant(theme, TypographyVariant.P3),
+    },
+    weekEnd: {
+      color: theme?.color?.text?.warning,
+      ...getTypographyVariant(theme, TypographyVariant.P3),
+    },
+  };
+});
+
+export const staticCalendarMonthHeaderStyles = makeStyles((theme) => {
+  return {
+    root: {
+      textAlign: 'center',
+      paddingTop: theme.spacing[6],
+      paddingBottom: theme.spacing[4],
+      color: theme?.color?.text?.heading,
+      ...getTypographyVariant(theme, TypographyVariant.B1),
+    },
+  };
+});
+
+export const staticCalendarMonthFooterStyles = makeStyles((theme) => {
+  return {
+    root: {
+      paddingHorizontal: theme.spacing[5],
+      paddingVertical: theme.spacing[2],
+    },
+    headingContainer: {
+      flexDirection: 'row',
+      gap: theme.spacing[2],
+      alignItems: 'center',
+    },
+    heading: {
+      color: theme?.color?.text?.heading,
+      // ...getTypographyVariant(theme, TypographyVariant.B3),
+    },
+    listContainer: {
+      marginTop: theme.spacing[2],
+    },
+    listItem: {
+      color: theme?.color?.text?.heading,
+      //...getTypographyVariant(theme, TypographyVariant.P3),
+    },
+  };
+});
+
+export const staticCalendarDotStyle = makeStyles((theme) => {
+  return {
+    root: {
+      width: theme.spacing[1.5],
+      height: theme.spacing[1.5],
+      borderRadius: theme.border.radius['50P'],
+      backgroundColor: theme.color.background.warning,
+    },
+    wrapper: {
+      position: 'absolute',
+      right: theme.spacing[1],
+      top: theme.spacing[1],
+    },
+  };
+});
+
+export const staticCalendarDateStyle = makeStyles((theme) => {
+  return {
+    root: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: theme.spacing[10],
+      height: theme.spacing[10],
+      borderRadius: 50,
+    },
+  };
+});
+
+export const getSelectedDateRootStyles = (theme: Theme, isSelected: boolean) => {
+  if (isSelected)
+    return {
+      backgroundColor: theme.color.background.defaultDarkest,
+    };
+  return {
+    backgroundColor: theme.color.background.transparent,
+  };
+};
+
+export const staticCalendarRangeStyles = makeStyles((theme) => {
+  return {
+    root: {
+      flexDirection: 'row',
+      position: 'absolute',
+      height: theme?.size['100P'],
+    },
+    fullGrayed: {
+      backgroundColor: theme.color.background.disabled,
+      width: theme?.size['100P'],
+      height: theme?.size['100P'],
+    },
+    halfNeutral: {
+      backgroundColor: theme.color.background.neutral,
+      width: theme?.size['50P'],
+      height: theme?.size['100P'],
+    },
+    halfGrayed: {
+      backgroundColor: theme.color.background.disabled,
+      width: theme?.size['50P'],
+      height: theme?.size['100P'],
+    },
+  };
+});
+
+export const staticCalendarDateWrapperStyles = makeStyles((theme) => {
+  return {
+    root: {
+      width: `${100 / 7}%`,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: theme.spacing['1.5'],
+    },
+  };
+});
+
+export const getSelectedDateStyles = (theme: Theme, isSelected: boolean) => {
+  if (isSelected)
+    return {
+      opacity: 0.2,
+      pointerEvents: 'none',
+    };
+  return {
+    opacity: 1,
+  };
+};
+
+export const staticCalendarMonthBodyStyles = makeStyles(() => {
+  return {
+    root: {
+      flexDirection: 'row',
+    },
+  };
+});
+
+export const staticCalendarBodyStyle = makeStyles((theme) => {
+  return {
+    placeholderMonthContainer: {
+      width: theme?.size['100P'],
+      backgroundColor: theme.color.background.neutral,
+    },
+    spacer: {
+      height: 100,
+    },
+  };
+});

package/src/type.ts

@@ -0,0 +1,66 @@
+import { MutableRefObject } from 'react';
+
+export interface IMonthListObj {
+  month: string;
+  year: string;
+}
+
+export interface HandleCalendarDateClickedParams {
+  checkInDate?: Date;
+  checkOutDate?: Date;
+  stateDateType?: 'checkIn' | 'checkOut';
+}
+
+export interface ICalendarProps {
+  selectedDates: string[];
+  handleCalendarDateClicked: (params: HandleCalendarDateClickedParams) => void;
+  calendarDotsList: string[];
+  holidayList: Record<string, Record<string, string[]>>;
+}
+
+export interface ICalendarMonthBodyProps {
+  month: string;
+  year: string;
+  calendarDotsList: string[];
+  getSelectedDates: () => string[];
+  handleDateClicked: (date: string) => void;
+}
+
+export interface ICalendarDateProp {
+  day: string;
+  date: string;
+  isSelected: boolean;
+  calendarDotsList: string[];
+}
+
+export interface ICalendarRangeProps {
+  getSelectedDates: () => string[];
+  date: string;
+}
+
+export interface ICalendarDateWrapperProps {
+  year: string;
+  month: string;
+  day: string;
+  idxx: number;
+  getSelectedDates: () => string[];
+  handleDateClicked: (date: string) => void;
+  calendarDotsList: string[];
+}
+
+export interface ILazyMonthListProps {
+  show: boolean;
+  monthList: IMonthListObj[];
+  getSelectedDates: () => string[];
+  handleDateClicked: (date: string) => void;
+  calendarDotsList: string[];
+  holidayList: Record<string, Record<string, string[]>>;
+  monthHeightRef: MutableRefObject<Record<string, number>>;
+}
+
+export interface ICalendarBodyProps {
+  getSelectedDates: () => string[];
+  handleDateClicked: (date: string) => void;
+  calendarDotsList: string[];
+  holidayList: Record<string, Record<string, string[]>>;
+}

package/src/util.ts

@@ -0,0 +1,114 @@
+export const PAST_DATE = '2000-01-01';
+
+export const DAY_MILLISECONDS = 1000 * 60 * 60 * 24;
+
+export const TODAY_DATE = new Date().toLocaleDateString('en-CA').replace(/-/g, '/');
+
+export const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const ELEMENTS_HEIGHT = {
+  HEADING: 64,
+  DATE: 52,
+  FOOTER: 40,
+  HOLIDAY: 20,
+};
+
+export const DAY_LIST = [
+  {
+    day: 'Mon',
+    isWeekend: false,
+  },
+  {
+    day: 'Tue',
+    isWeekend: false,
+  },
+  {
+    day: 'Wed',
+    isWeekend: false,
+  },
+  {
+    day: 'Thu',
+    isWeekend: false,
+  },
+  {
+    day: 'Fri',
+    isWeekend: false,
+  },
+  {
+    day: 'Sat',
+    isWeekend: true,
+  },
+  {
+    day: 'Sun',
+    isWeekend: true,
+  },
+];
+
+export const formattedDate = (year: string, month: string, day: string) => {
+  if (!day) return '';
+  const formattedMonth = month.toString().padStart(2, '0');
+  const formattedDay = day.toString().padStart(2, '0');
+  return `${year}/${formattedMonth}/${formattedDay}`;
+};
+
+export const getWeekRow = (year: number, month: number) => {
+  let startDayOfWeek = (new Date(year + '-' + month + '-01').getDay() - 1 + 7) % 7;
+  const daysInMonth = new Date(year, month, 0).getDate();
+
+  if (startDayOfWeek === -1) startDayOfWeek = 6;
+
+  const rows: number[][] = [];
+  let currentDay = 1;
+  let currRow: number[] = [];
+
+  currRow = [...(Array(startDayOfWeek).fill(null) as number[])];
+
+  while (currentDay <= daysInMonth) {
+    while (currentDay <= daysInMonth && currRow.length < 7) {
+      currRow.push(currentDay);
+      currentDay++;
+    }
+    if (currRow.length !== 7) {
+      currRow = [...currRow, ...(Array(7 - currRow.length).fill(null) as number[])];
+    }
+    rows.push(currRow);
+    currRow = [];
+  }
+  return rows;
+};
+
+export const getMonthArray = (startMonth: number, startYear: number) => {
+  const months: { month: string; year: string }[] = [];
+  let month = startMonth;
+  let year = startYear;
+
+  for (let i = 0; i < 12; i++) {
+    months.push({ month: month.toString().padStart(2, '0'), year: year.toString() });
+    month += 1;
+    if (month > 12) {
+      month = 1;
+      year += 1;
+    }
+  }
+
+  return months;
+};
+export const getDateDifference = (date1: string, date2: string) => {
+  const diffInMillis: number =
+    new Date(date1.replace(/\//g, '-')).getTime() - new Date(date2.replace(/\//g, '-')).getTime();
+  const diffInDays = diffInMillis / DAY_MILLISECONDS;
+  return diffInDays;
+};