@soul-refiner/design-system 0.1.38 → 0.1.39

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

@@ -1,699 +0,0 @@
-'use client';
-
-import React from 'react';
-import styled from 'styled-components';
-import { MONTHS, WEEKDAYS } from '../../../common';
-import { Button, P } from '../../';
-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

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