@cleartrip/ct-design-calendar 4.0.0 → 5.0.0

package/dist/util.d.ts

@@ -0,0 +1,22 @@
+export declare const PAST_DATE = "2000-01-01";
+export declare const DAY_MILLISECONDS: number;
+export declare const TODAY_DATE: string;
+export declare const MONTHS: string[];
+export declare const ELEMENTS_HEIGHT: {
+    HEADING: number;
+    DATE: number;
+    FOOTER: number;
+    HOLIDAY: number;
+};
+export declare const DAY_LIST: {
+    day: string;
+    isWeekend: boolean;
+}[];
+export declare const formattedDate: (year: string, month: string, day: string) => string;
+export declare const getWeekRow: (year: number, month: number) => number[][];
+export declare const getMonthArray: (startMonth: number, startYear: number) => {
+    month: string;
+    year: string;
+}[];
+export declare const getDateDifference: (date1: string, date2: string) => number;
+//# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../packages/components/Calendar/src/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,eAAe,CAAC;AAEtC,eAAO,MAAM,gBAAgB,QAAsB,CAAC;AAEpD,eAAO,MAAM,UAAU,QAA4D,CAAC;AAEpF,eAAO,MAAM,MAAM,UAalB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;CAK3B,CAAC;AAEF,eAAO,MAAM,QAAQ;;;GA6BpB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,EAAE,KAAK,MAAM,WAKrE,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,eAwBrD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,YAAY,MAAM,EAAE,WAAW,MAAM;WAC1C,MAAM;UAAQ,MAAM;GAc5C,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,OAAO,MAAM,EAAE,OAAO,MAAM,WAK7D,CAAC"}

package/package.json

@@ -1,21 +1,44 @@
 {
   "name": "@cleartrip/ct-design-calendar",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Calendar Component",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-calendar.cjs.js",
+  "main": "./dist/ct-design-calendar.cjs.js",
   "jsnext:main": "dist/ct-design-calendar.esm.js",
+  "react-native": "src/index.ts",
   "module": "dist/ct-design-calendar.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ct-design-calendar.esm.js",
+      "default": "./dist/ct-design-calendar.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-calendar.esm.js": "./dist/ct-design-calendar.browser.esm.js",
     "./dist/ct-design-calendar.cjs.js": "./dist/ct-design-calendar.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-container": "4.0.0"
+    "react-day-picker": "8.8.1",
+    "react-tiny-virtual-list": "2.2.0",
+    "@cleartrip/ct-design-container": "5.0.0",
+    "@cleartrip/ct-design-theme": "5.0.0",
+    "@cleartrip/ct-design-accordion": "5.0.0",
+    "@cleartrip/ct-design-button": "5.0.0",
+    "@cleartrip/ct-design-badge": "5.0.0",
+    "@cleartrip/ct-design-typography": "5.0.0",
+    "@cleartrip/ct-design-icons": "5.0.0",
+    "@cleartrip/ct-design-common-utils": "5.0.0",
+    "@cleartrip/ct-design-style-manager": "5.0.0",
+    "@cleartrip/ct-design-types": "5.0.0",
+    "@cleartrip/ct-design-use-isomorphic-effect": "5.0.0",
+    "@cleartrip/ct-design-common-constants": "5.0.0",
+    "@cleartrip/ct-design-spacer": "5.0.0"
   },
   "devDependencies": {},
   "peerDependencies": {
@@ -30,6 +53,10 @@
   "license": "ISC",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build-package-p": "echo \"TODO: Need to fix calendar\""
+    "watch-package": "rollup -c -w",
+    "build-package": "rollup -c",
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish --no-scripts",
+    "publish-package:local:registry": "pnpm publish --registry http://localhost:4873 --no-git-checks --access public"
   }
 }

package/src/Arrow/LeftArrow.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+export function LeftArrow(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 20 20' {...props}>
+      <path
+        d='M9.131 2L2.215 9.446a.821.821 0 00-.077 1.01l.077.098L9.131 18l1.106-1.108-5.67-6.106 13.43.02L18 9.21 4.586 9.19l5.65-6.082L9.132 2z'
+        fill='currentColor'
+        fillRule='nonzero'
+      />
+    </svg>
+  );
+}

package/src/Arrow/RightArrow.tsx

@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+export function RightArrow(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 20 20' {...props}>
+      <path
+        d='M10.869 2l6.916 7.446a.821.821 0 01.077 1.01l-.077.098L10.869 18l-1.106-1.108 5.67-6.106-13.43.02L2 9.21l13.414-.02-5.65-6.082L10.868 2z'
+        fill='currentColor'
+        fillRule='nonzero'
+      />
+    </svg>
+  );
+}

package/src/BaseCalendar.tsx

@@ -0,0 +1,189 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import { WEEK_DAY_LABEL } from '@cleartrip/ct-design-common-constants';
+import { Container } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+
+import MobileCalendar, { DateRangeProps } from './DayPicker';
+
+import useIsomorphicEffect from '@cleartrip/ct-design-use-isomorphic-effect';
+import { ViewStyle } from '@cleartrip/ct-design-types';
+
+const staticStyles = makeStyles((theme) => ({
+  outerWrapper: {
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+  weekDayHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: -1,
+    zIndex: 999,
+    paddingTop: theme.spacing[4],
+    paddingBottom: theme.spacing[4],
+    position: 'sticky' as ViewStyle['position'],
+    backgroundColor: theme.color.background.neutral,
+    height: 26,
+    borderBottom: `1px dotted ${theme.color.border.default}`,
+  },
+  weekDayItem: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  weekendColor: {
+    // Add weekend specific styling if needed
+    // This can be enhanced based on design requirements
+  },
+}));
+
+const Calendar = ({
+  onDateSelect,
+  noOfMonths,
+  mode,
+  customHeader,
+  onDayClick,
+  selectedDays,
+  disabledDays: disabledDaysProp,
+  defaultMonth,
+  modifiers,
+  modifierStyles,
+  footer,
+  customDay,
+  customSelectedDayProps,
+  asyncInitialScroll = false,
+}: DateRangeProps) => {
+  const today = new Date();
+
+  const disabledDays = disabledDaysProp ?? [{ before: today }];
+
+  const elementRef = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState(0);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const isInitialViewScrolled = useRef(false);
+
+  const getInitialDefaultDate = () => {
+    if (selectedDays && 'from' in selectedDays) {
+      const { from, to } = selectedDays;
+      if (from !== to) {
+        return from;
+      }
+      return undefined;
+    }
+    return selectedDays;
+  };
+
+  const initialDate = getInitialDefaultDate();
+
+  useIsomorphicEffect(() => {
+    let scrollTimeout: NodeJS.Timeout;
+    const scrollToSelectedRange = () => {
+      if (initialDate && containerRef.current) {
+        const targetMonthNode = containerRef.current.querySelector(`#Calendar${initialDate.getMonth()}`);
+        // Scroll the target month into view
+        if (targetMonthNode) {
+          targetMonthNode.scrollIntoView({
+            block: 'center',
+          });
+          isInitialViewScrolled.current = true;
+        }
+      }
+    };
+    // Scroll to view only once when component is loaded
+    if (!isInitialViewScrolled.current) {
+      if (asyncInitialScroll) {
+        scrollTimeout = setTimeout(scrollToSelectedRange);
+      } else {
+        scrollToSelectedRange();
+      }
+    }
+    return () => {
+      if (scrollTimeout) {
+        clearTimeout(scrollTimeout);
+      }
+    };
+  }, [selectedDays, containerRef.current]);
+
+  useLayoutEffect(() => {
+    if (elementRef?.current) {
+      setWidth(elementRef.current.clientWidth);
+    }
+  }, []);
+
+  const dayDimension = width / 7;
+
+  const dynamicStyles = useStyles(
+    () => ({
+      weekDayItem: {
+        maxWidth: dayDimension,
+        width: width / 7,
+      },
+      weekendItem: {
+        maxWidth: dayDimension,
+        width: width / 7,
+        // Add weekend specific styling here if needed
+        // color: theme.color.text.secondary, // example
+      },
+    }),
+    [dayDimension, width],
+  );
+
+  /**
+   * @todo Om To get the  MobileCalendar component render here itself
+   *
+   */
+
+  return (
+    <div ref={elementRef}>
+      {width > 0 && (
+        <Container styleConfig={{ root: [staticStyles.outerWrapper] }}>
+          <Container styleConfig={{ root: [staticStyles.weekDayHeader] }}>
+            {Object.keys(WEEK_DAY_LABEL).map((itm, key) => {
+              const isWeekend = key > 4;
+              return (
+                <Container
+                  key={key}
+                  styleConfig={{
+                    root: [
+                      staticStyles.weekDayItem,
+                      ...(isWeekend ? [staticStyles.weekendColor] : []),
+                      isWeekend ? dynamicStyles.weekendItem : dynamicStyles.weekDayItem,
+                    ],
+                  }}
+                >
+                  {WEEK_DAY_LABEL[(key + 1) % 7]}
+                </Container>
+              );
+            })}
+          </Container>
+          <div ref={containerRef}>
+            <MobileCalendar
+              mode={mode}
+              noOfMonths={noOfMonths}
+              onDateSelect={onDateSelect}
+              onDayClick={onDayClick}
+              selectedDays={selectedDays}
+              disabledDays={disabledDays}
+              cellWidth={dayDimension}
+              cellHeight={dayDimension}
+              daySize={dayDimension}
+              defaultMonth={dayjs(initialDate).toDate()}
+              fromMonth={defaultMonth}
+              customHeader={customHeader}
+              modifiers={modifiers}
+              modifierStyles={modifierStyles}
+              footer={footer}
+              customDay={customDay}
+              customSelectedDayProps={customSelectedDayProps}
+            />
+          </div>
+        </Container>
+      )}
+    </div>
+  );
+};
+
+export default Calendar;

package/src/Calendar.native.tsx

@@ -0,0 +1,99 @@
+import { memo, useCallback, useEffect, useRef } from 'react';
+
+import { usePubEvent } from './event';
+import { makeStyles } from '@cleartrip/ct-design-style-manager';
+import { View } from 'react-native';
+
+import { ICalendarProps } from './type';
+import CalendarBody from './CalendarBody';
+import WeekDays from './WeekDays';
+
+const staticCalendarStyles = makeStyles((theme) => {
+  return {
+    calendarContainer: {
+      backgroundColor: theme?.color.background.neutral,
+    },
+  };
+});
+
+const Calendar: React.FC<ICalendarProps> = ({
+  selectedDates: selectedDatesList,
+  handleCalendarDateClicked,
+  calendarDotsList,
+  holidayList,
+}) => {
+  const selectedDates = [selectedDatesList[0]?.toString() || '', selectedDatesList[1]?.toString() || ''];
+  const selectedDatesRef = useRef<string[]>(selectedDates);
+
+  const publishDatesSelection = usePubEvent('SELECTED_DATES');
+
+  const getSelectedDates = useCallback(() => {
+    return selectedDatesRef.current;
+  }, []);
+
+  const setSelectedDate = useCallback((dates: string[]) => {
+    publishDatesSelection({
+      oldDates: selectedDatesRef.current,
+      newDates: dates,
+    });
+    selectedDatesRef.current = dates ?? [];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleDateClicked = useCallback((date: string) => {
+    let response: string[] = [];
+    const reformattedDate = date.replace(/\//g, '-');
+    const prev = getSelectedDates();
+    switch (prev.filter((x) => x).length) {
+      case 0:
+        response = [date];
+        handleCalendarDateClicked({
+          checkInDate: new Date(reformattedDate),
+          stateDateType: 'checkOut',
+        });
+        break;
+      case 1:
+        if (date <= prev[0]) return;
+        response = [prev[0], date];
+        handleCalendarDateClicked({
+          checkInDate: new Date(prev[0].replace(/\//g, '-')),
+          checkOutDate: new Date(reformattedDate),
+          stateDateType: 'checkIn',
+        });
+        break;
+      case 2:
+        response = [date];
+        handleCalendarDateClicked({
+          checkInDate: new Date(reformattedDate),
+          stateDateType: 'checkOut',
+        });
+        break;
+    }
+    setSelectedDate(response);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const [startDate = '', endDate = ''] = selectedDatesList;
+    const [currStartDate = '', currEndDate = ''] = selectedDatesRef.current;
+    if (startDate === currStartDate && endDate === currEndDate) return;
+    if (!startDate) return setSelectedDate([]);
+    if (!endDate) return setSelectedDate([startDate]);
+    setSelectedDate([startDate, endDate]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDatesList]);
+
+  return (
+    <View style={staticCalendarStyles?.calendarContainer}>
+      <WeekDays />
+      <CalendarBody
+        calendarDotsList={calendarDotsList}
+        getSelectedDates={getSelectedDates}
+        handleDateClicked={handleDateClicked}
+        holidayList={holidayList}
+      />
+    </View>
+  );
+};
+
+export default memo(Calendar);

package/src/Calendar.tsx

@@ -0,0 +1,13 @@
+import { Container } from '@cleartrip/ct-design-container';
+import { ICalendarProps } from './type';
+
+const CalendarComponent: React.FC<ICalendarProps> = () => {
+  return (
+    <Container>
+      {/* Well what you need is to to migrate src/components/home/hotelCalendarContainer/calendar.tsx 
+      biggest challenge is mapping types from aldenui to ct-design-system*/}
+    </Container>
+  );
+};
+
+export default CalendarComponent;

package/src/CalendarBody/LazyMonthList.tsx

@@ -0,0 +1,45 @@
+import { memo, useState } from 'react';
+
+import { InteractionManager } from 'react-native';
+
+import PlaceholderMonth from './PlaceholderMonth';
+import CalendarMonth from '../CalendarMonth';
+import { ILazyMonthListProps } from '../type';
+
+const LazyMonthList: React.FC<ILazyMonthListProps> = ({
+  monthList,
+  handleDateClicked,
+  getSelectedDates,
+  calendarDotsList,
+  holidayList,
+  monthHeightRef,
+}) => {
+  const [rendered, setRendered] = useState(0);
+  return monthList.map((item, index) => {
+    if (index > rendered)
+      return (
+        <PlaceholderMonth
+          key={`lazyPlaceholderMonth-${index}`}
+          height={monthHeightRef.current[`${item.year}/${item.month}`]}
+        />
+      );
+    return (
+      <CalendarMonth
+        onLayout={() => {
+          InteractionManager.runAfterInteractions(() => {
+            if (rendered < monthList.length) setRendered((prev) => prev + 1);
+          });
+        }}
+        key={`preceedingMonths-${index}`}
+        handleDateClicked={handleDateClicked}
+        getSelectedDates={getSelectedDates}
+        month={item.month}
+        year={item.year}
+        calendarDotsList={calendarDotsList}
+        holidayList={holidayList}
+      />
+    );
+  });
+};
+
+export default memo(LazyMonthList);

package/src/CalendarBody/PlaceholderMonth.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+
+import { View } from 'react-native';
+
+import { staticCalendarBodyStyle } from '../styles';
+
+const PlaceholderMonth = ({ height }: { height: number }) => {
+  return (
+    <View
+      style={[
+        staticCalendarBodyStyle?.placeholderMonthContainer,
+        {
+          height: height,
+        },
+      ]}
+    />
+  );
+};
+
+export default memo(PlaceholderMonth);

package/src/CalendarBody/index.tsx

@@ -0,0 +1,159 @@
+import { memo, useEffect, useRef, useState } from 'react';
+
+import { InteractionManager, ScrollView, View } from 'react-native';
+import { useSubEvent } from '../event';
+
+import CalendarMonth from '../CalendarMonth';
+import { ELEMENTS_HEIGHT, formattedDate, getMonthArray, getWeekRow } from '../util';
+import { ICalendarBodyProps, IMonthListObj } from '../type';
+import { staticCalendarBodyStyle } from '../styles';
+import LazyMonthList from './LazyMonthList';
+import PlaceholderMonth from './PlaceholderMonth';
+
+const CalendarBody: React.FC<ICalendarBodyProps> = ({
+  getSelectedDates,
+  handleDateClicked,
+  calendarDotsList,
+  holidayList,
+}) => {
+  const [show, setShow] = useState(false);
+  const [isScrollAnimated, setIsScrollAnimated] = useState<boolean>(false);
+  const monthHeightRef = useRef<Record<string, number>>({});
+  const scrollViewRef = useRef<ScrollView>(null);
+  const currentDate = new Date();
+  const currentDay = currentDate.getDate();
+  const currentMonth = currentDate.getMonth() + 1;
+  const currentYear = currentDate.getFullYear();
+  const allMonths: IMonthListObj[] = getMonthArray(currentMonth, currentYear);
+
+  const getCalendarParts = () => {
+    const startDate =
+      getSelectedDates() && getSelectedDates().length > 0
+        ? getSelectedDates()[0]
+        : formattedDate(currentYear.toString(), currentMonth.toString(), currentDay.toString());
+    let preceedingMonths: IMonthListObj[] = [];
+    let activeMonths: IMonthListObj[] = [];
+    let followingMonths: IMonthListObj[] = [];
+
+    if (getSelectedDates() && getSelectedDates().length > 0) {
+      const startMonthIndex = (12 + parseInt(startDate.split('/')[1]) - currentMonth) % 12;
+      preceedingMonths = allMonths.slice(0, startMonthIndex);
+      activeMonths = allMonths.slice(startMonthIndex, startMonthIndex + 2);
+      followingMonths = allMonths.slice(startMonthIndex + 2);
+    } else {
+      activeMonths = allMonths.slice(0, 2);
+      followingMonths = allMonths.slice(2);
+    }
+    return { preceedingMonths, activeMonths, followingMonths };
+  };
+
+  const { preceedingMonths, activeMonths, followingMonths } = getCalendarParts();
+  const [renderedMonths, setRenderedMonths] = useState(0);
+
+  const storeMonthHeights = () => {
+    allMonths.forEach((item) => {
+      const rowCount = getWeekRow(parseInt(item.year), parseInt(item.month)).length;
+      monthHeightRef.current[`${item.year}/${item.month}`] =
+        rowCount * ELEMENTS_HEIGHT.DATE + ELEMENTS_HEIGHT.HEADING + ELEMENTS_HEIGHT.FOOTER;
+    });
+  };
+
+  function getWeekOfMonth(dateString: string) {
+    const [year, month, day] = dateString.split(/[-/]/).map(Number);
+    const date = new Date(year, month - 1, day);
+    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
+    const mondayBasedOffset = (firstDay + 6) % 7;
+    return Math.ceil((date.getDate() + mondayBasedOffset) / 7);
+  }
+
+  const getScrollDelta = (fullDate: string[]) => {
+    const startDate = fullDate[0];
+    const [startYear, startMonth, _] = startDate.split('/');
+    const refStartKey = `${startYear}/${startMonth}`;
+    const startDateWeek = getWeekOfMonth(startDate);
+    let startDelta = startDateWeek > 3 ? startDateWeek * ELEMENTS_HEIGHT.DATE : 0;
+    Object.entries(monthHeightRef.current).forEach(([key, value]) => {
+      if (refStartKey > key) {
+        startDelta += value;
+      }
+    });
+    return startDelta;
+  };
+
+  storeMonthHeights();
+
+  const scrollToSelectedDates = (newDates: string[]) => {
+    if (scrollViewRef.current && newDates.length > 0) {
+      const scrollOffset = getScrollDelta(newDates);
+      setTimeout(() => {
+        if (scrollViewRef.current) scrollViewRef.current.scrollTo({ y: scrollOffset, animated: isScrollAnimated });
+        setIsScrollAnimated(true);
+      }, 0);
+    }
+  };
+
+  useEffect(() => {
+    scrollToSelectedDates(getSelectedDates());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getSelectedDates]);
+
+  useSubEvent('SELECTED_DATES', ({ newDates }: { newDates: string[] }) => {
+    scrollToSelectedDates(newDates);
+  });
+
+  return (
+    <ScrollView showsVerticalScrollIndicator={false} ref={scrollViewRef} nestedScrollEnabled>
+      <LazyMonthList
+        show={show}
+        monthList={preceedingMonths}
+        handleDateClicked={handleDateClicked}
+        getSelectedDates={getSelectedDates}
+        calendarDotsList={calendarDotsList}
+        holidayList={holidayList}
+        monthHeightRef={monthHeightRef}
+      />
+      {activeMonths.map((item, index) => {
+        if (index > renderedMonths)
+          return (
+            <PlaceholderMonth
+              key={`placeholderMonth-${index}`}
+              height={monthHeightRef.current[`${item.year}/${item.month}`]}
+            />
+          );
+        return (
+          <CalendarMonth
+            onLayout={() => {
+              InteractionManager.runAfterInteractions(() => {
+                if (renderedMonths < activeMonths.length) setRenderedMonths((prev) => prev + 1);
+              });
+              if (index === activeMonths.length - 1) {
+                InteractionManager.runAfterInteractions(() => {
+                  setShow(true);
+                });
+              }
+            }}
+            key={`activeMonths-${index}`}
+            handleDateClicked={handleDateClicked}
+            getSelectedDates={getSelectedDates}
+            month={item.month}
+            year={item.year}
+            calendarDotsList={calendarDotsList}
+            holidayList={holidayList}
+          />
+        );
+      })}
+      <LazyMonthList
+        show={show}
+        monthList={followingMonths}
+        handleDateClicked={handleDateClicked}
+        getSelectedDates={getSelectedDates}
+        calendarDotsList={calendarDotsList}
+        holidayList={holidayList}
+        monthHeightRef={monthHeightRef}
+      />
+      <View style={staticCalendarBodyStyle?.spacer} />
+    </ScrollView>
+  );
+};
+
+export default memo(CalendarBody);

package/src/CalendarDayElements/CalendarDate.tsx

@@ -0,0 +1,34 @@
+import { memo } from 'react';
+
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { View } from 'react-native';
+
+import CalendarDotWrapper from './CalendarDotWrapper';
+import { getSelectedDateRootStyles, staticCalendarDateStyle } from '../styles';
+import { ICalendarDateProp } from '../type';
+import { Typography, TypographyColor, TypographyVariant } from '@cleartrip/ct-design-typography';
+
+const CalendarDate: React.FC<ICalendarDateProp> = ({ day, date, isSelected, calendarDotsList }) => {
+  const dynamicCalendarDateStyles = useStyles(
+    (theme) => {
+      return {
+        root: getSelectedDateRootStyles(theme, isSelected),
+      };
+    },
+    [isSelected],
+  );
+  if (!day) return null;
+
+  const showDot = calendarDotsList.includes(date);
+
+  return (
+    <View style={[staticCalendarDateStyle.root, dynamicCalendarDateStyles?.root]}>
+      <CalendarDotWrapper showDot={showDot} />
+      <Typography variant={TypographyVariant.P1} color={isSelected ? TypographyColor.NEUTRAL : TypographyColor.PRIMARY}>
+        {day}
+      </Typography>
+    </View>
+  );
+};
+
+export default memo(CalendarDate);