use more common parts, clean up

Author: hoorayimhelping

src/components/DatePicker/Common.tsx

@@ -217,14 +217,14 @@ type Week = {
 
 export type WeekRenderer = (week: Week) => ReactNode;
 
-interface CalendarRendererProps extends ContainerProps {
-  calendarOptions: UseCalendarOptions;
-  renderWeek: WeekRenderer;
+interface CalendarRendererProps extends React.HTMLAttributes<typeof Container> {
+  calendarOptions?: UseCalendarOptions;
+  weekRenderer: WeekRenderer;
 }
 
 export const CalendarRenderer = ({
-  calendarOptions,
-  renderWeek,
+  calendarOptions = {},
+  weekRenderer,
   ...props
 }: CalendarRendererProps) => {
   const { body, headers, month, navigation, year } = useCalendar({
@@ -286,7 +286,7 @@ export const CalendarRenderer = ({
         </thead>
         <tbody>
           {body.value.map(({ key: weekKey, value: week }) => {
-            return <tr key={weekKey}>{week.map(renderWeek)}</tr>;
+            return <tr key={weekKey}>{week.map(weekRenderer)}</tr>;
           })}
         </tbody>
       </DateTable>

src/components/DatePicker/DatePicker.tsx

@@ -1,106 +1,7 @@
 import { useEffect, useState } from "react";
-import { isSameDate, useCalendar, UseCalendarOptions } from "@h6s/calendar";
-import { styled } from "styled-components";
+import { isSameDate, UseCalendarOptions } from "@h6s/calendar";
 import Dropdown from "../Dropdown/Dropdown";
-import { Container } from "../Container/Container";
-import { IconButton } from "../IconButton/IconButton";
-import { DatePickerInput } from "./Common";
-
-const locale = "en-US";
-const weekdayFormatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
-  month: "short",
-  year: "numeric",
-});
-
-const explicitWidth = "250px";
-
-const DatePickerContainer = styled(Container)`
-  background: ${({ theme }) =>
-    theme.click.datePicker.dateOption.color.background.default};
-`;
-
-const UnselectableTitle = styled.h2`
-  ${({ theme }) => `
-    color: ${theme.click.datePicker.color.title.default};
-    font: ${theme.click.datePicker.typography.title.default};
-  `}
-
-  user-select: none;
-`;
-
-const DateTable = styled.table`
-  border-collapse: separate;
-  border-spacing: 0;
-  font: ${({ theme }) => theme.typography.styles.product.text.normal.md}
-  table-layout: fixed;
-  user-select: none;
-  width: ${explicitWidth};
-
-  thead tr {
-    height: ${({ theme }) => theme.click.datePicker.dateOption.size.height};
-  }
-
-  tbody {
-    cursor: pointer;
-  }
-
-  td, th {
-    ${({ theme }) =>
-      `border: ${theme.click.datePicker.dateOption.stroke} solid ${theme.click.datePicker.dateOption.color.stroke.default}`};
-    padding: 4px;
-  }
-`;
-
-const DateTableHeader = styled.th`
-  ${({ theme }) => `
-    color: ${theme.click.datePicker.color.daytitle.default};
-    font: ${theme.click.datePicker.typography.daytitle.default};
-  `}
-
-  width: 14%;
-`;
-
-const DateTableCell = styled.td<{
-  $isCurrentMonth?: boolean;
-  $isDisabled?: boolean;
-  $isSelected?: boolean;
-  $isToday?: boolean;
-}>`
-  ${({ theme }) => `
-    border-radius: ${theme.click.datePicker.dateOption.radii.default};
-    font: ${theme.click.datePicker.dateOption.typography.label.default};
-  `}
-
-  ${({ $isCurrentMonth, $isDisabled, theme }) =>
-    (!$isCurrentMonth || $isDisabled) &&
-    `
-    color: ${theme.click.datePicker.dateOption.color.label.disabled};
-    font: ${theme.click.datePicker.dateOption.typography.label.disabled};
-  `}
-
-  ${({ $isSelected, theme }) =>
-    $isSelected &&
-    `
-      background: ${theme.click.datePicker.dateOption.color.background.active};
-      color: ${theme.click.datePicker.dateOption.color.label.active};
-    `}
-
-
-  text-align: center;
-
-  ${({ $isToday, theme }) =>
-    $isToday && `font: ${theme.click.datePicker.dateOption.typography.label.active};`}
-
-  &:hover {
-    ${({ $isDisabled, theme }) =>
-      `border: ${theme.click.datePicker.dateOption.stroke} solid ${
-        $isDisabled
-          ? theme.click.datePicker.dateOption.color.stroke.disabled
-          : theme.click.datePicker.dateOption.color.stroke.hover
-      }`};
-  }
-`;
+import { CalendarRenderer, DatePickerInput, DateTableCell, WeekRenderer } from "./Common";
 
 interface CalendarProps {
   closeDatepicker: () => void;
@@ -115,104 +16,44 @@ const Calendar = ({
   selectedDate,
   setSelectedDate,
 }: CalendarProps) => {
-  const calendarOptions: UseCalendarOptions = {
-    defaultWeekStart: 1,
-  };
+  const calendarOptions: UseCalendarOptions = {};
 
   if (selectedDate) {
     calendarOptions.defaultDate = selectedDate;
   }
-  const { body, headers, month, navigation, year } = useCalendar(calendarOptions);
-
-  const handleNextClick = (): void => {
-    navigation.toNext();
-  };
 
-  const handlePreviousClick = (): void => {
-    navigation.toPrev();
-  };
-
-  const headerDate = new Date();
-  headerDate.setMonth(month);
-  headerDate.setFullYear(year);
-
-  return (
-    <DatePickerContainer
-      data-testid="datepicker-calendar-container"
-      isResponsive={false}
-      fillWidth={false}
-      orientation="vertical"
-      padding="sm"
-    >
-      <Container
-        isResponsive={false}
-        justifyContent="space-between"
-        orientation="horizontal"
+  const weekRenderer: WeekRenderer = ({
+    date,
+    isCurrentMonth,
+    key: dayKey,
+    value: fullDate,
+  }) => {
+    const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+    const today = new Date();
+    const isCurrentDate = isSameDate(today, fullDate);
+    const isDisabled = futureDatesDisabled ? fullDate > today : false;
+
+    return (
+      <DateTableCell
+        $isCurrentMonth={isCurrentMonth}
+        $isDisabled={isDisabled}
+        $isSelected={isSelected}
+        $isToday={isCurrentDate}
+        key={dayKey}
+        onClick={() => {
+          if (isDisabled) {
+            return false;
+          }
+          setSelectedDate(fullDate);
+          closeDatepicker();
+        }}
       >
-        <IconButton
-          icon="chevron-left"
-          onClick={handlePreviousClick}
-          size="sm"
-          type="ghost"
-        />
-        <UnselectableTitle>{headerDateFormatter.format(headerDate)}</UnselectableTitle>
-        <IconButton
-          icon="chevron-right"
-          onClick={handleNextClick}
-          size="sm"
-          type="ghost"
-        />
-      </Container>
-      <DateTable>
-        <thead>
-          <tr>
-            {headers.weekDays.map(({ key, value: date }) => {
-              return (
-                <DateTableHeader key={key}>
-                  {weekdayFormatter.format(date)}
-                </DateTableHeader>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody>
-          {body.value.map(({ key: weekKey, value: week }) => {
-            return (
-              <tr key={weekKey}>
-                {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {
-                  const isSelected = selectedDate
-                    ? isSameDate(selectedDate, fullDate)
-                    : false;
-                  const today = new Date();
-                  const isCurrentDate = isSameDate(today, fullDate);
-                  const isDisabled = futureDatesDisabled ? fullDate > today : false;
+        {date}
+      </DateTableCell>
+    );
+  };
 
-                  return (
-                    <DateTableCell
-                      $isCurrentMonth={isCurrentMonth}
-                      $isDisabled={isDisabled}
-                      $isSelected={isSelected}
-                      $isToday={isCurrentDate}
-                      key={dayKey}
-                      onClick={() => {
-                        if (isDisabled) {
-                          return false;
-                        }
-                        setSelectedDate(fullDate);
-                        closeDatepicker();
-                      }}
-                    >
-                      {date}
-                    </DateTableCell>
-                  );
-                })}
-              </tr>
-            );
-          })}
-        </tbody>
-      </DateTable>
-    </DatePickerContainer>
-  );
+  return <CalendarRenderer weekRenderer={weekRenderer} />;
 };
 
 export interface DatePickerProps {

src/components/DatePicker/DateRangePicker.stories.tsx

@@ -3,8 +3,8 @@ import { DateRangePicker } from "./DateRangePicker";
 
 const defaultStory = {
   args: {
-    onSelectDate: (date: Date) => {
-      console.log("Date selected: ", date);
+    onSelectDateRange: (startDate: Date, endDate: Date) => {
+      console.log("Date range selected: ", startDate, endDate);
     },
   },
   argTypes: {
@@ -20,7 +20,7 @@ const defaultStory = {
     placeholder: {
       control: "text",
     },
-    onSelectDate: {
+    onSelectDateRange: {
       control: "object",
     },
   },
@@ -33,7 +33,7 @@ const defaultStory = {
         endDate={endDate}
         disabled={args.disabled}
         futureDatesDisabled={args.futureDatesDisabled}
-        onSelectDate={args.onSelectDate}
+        onSelectDateRange={args.onSelectDateRange}
         placeholder={args.placeholder}
         startDate={startDate}
       />