@soul-refiner/design-system 1.7.22 → 2.0.0-alpha.0

package/dist/components/input/date/date.js

@@ -1,517 +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 const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) => {
-    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(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) => {
-        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, }) => {
-        if (type === 'start') {
-            setComponentStartDate(value.toDateString());
-        }
-        else {
-            setComponentEndDate(value.toDateString());
-        }
-    };
-    const handleClick = (event) => {
-        handleFirstClick();
-        const target = event.target;
-        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 (React.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
-        React.createElement(Trigger, { onClick: handleShow },
-            label && (React.createElement(React.Fragment, null,
-                label,
-                ' | ')),
-            React.createElement("span", null, startDate.toLocaleDateString('en-US').replaceAll('/', '-')),
-            !!endDate && startDate.toDateString() !== endDate?.toDateString() && (React.createElement(ArrowRight, { sx: "padding: 0px 8px; margin-bottom: -2px;" })),
-            startDate.toDateString() !== endDate?.toDateString() && (React.createElement("span", null, endDate?.toLocaleDateString('en-US').replaceAll('/', '-')))),
-        show && (React.createElement(DateSelector, null,
-            React.createElement(InnerWrapper, null,
-                !!endDate && (React.createElement(Left, null,
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleSetToday }, "Today"),
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleSetYesterday }, "Yesterday"),
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastSevenDays }, "Last 7 days"),
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastThirtyDays }, "Last 30 days"),
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleThisMonth }, "This month"),
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastMonth }, "Last month"),
-                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastYear }, "Last Year"))),
-                React.createElement("div", null,
-                    React.createElement(MonthBar, null,
-                        React.createElement(Arrow, { onClick: handlePreviousMonth },
-                            React.createElement(ChevronLeft, { size: 24 })),
-                        React.createElement(P, null, `${Object.values(MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
-                        React.createElement(Arrow, { onClick: handleNextMonth },
-                            React.createElement(ChevronRight, { size: 24 }))),
-                    React.createElement(WeekdayWrapper, null, Object.values(WEEKDAYS).map((day) => (React.createElement(P, { key: day }, day)))),
-                    React.createElement(Calendar, null, calendar.map((week, index) => {
-                        return (React.createElement(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 (React.createElement(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]));
-                        })));
-                    })),
-                    React.createElement(BottomWrapper, null,
-                        React.createElement(Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
-                        React.createElement(Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
-};
-const Wrapper = styled.div `
-  position: relative;
-  width: fit-content;
-  font-family: var(--font-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: var(--font-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: var(--font-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/dist/components/input/date/index.js

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