@soul-refiner/design-system 2.0.0-alpha.26 → 2.0.0-alpha.28

package/dist/components/input/calendar/calendar.js

@@ -0,0 +1,267 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var date$1 = require('../../../common/date.js');
+var button = require('../../actions/button/button.js');
+var paragraph = require('../../atoms/typography/paragraph.js');
+var chevron_left = require('../../../icons/arrow/chevron_left.js');
+var chevron_right = require('../../../icons/arrow/chevron_right.js');
+var calendar = require('../../../icons/time/calendar.js');
+var date = require('../../../utils/date.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDates, }) => {
+    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 pickerRef = React__default.default.useRef(null);
+    const [show, setShow] = React__default.default.useState(false);
+    const [displayDate, setDisplayDate] = React__default.default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    const [componentSelectedDate, setComponentSelectedDate] = React__default.default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
+    React__default.default.useEffect(() => {
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
+    }, [selectedDate]);
+    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 onSelect = (newDate) => {
+        setComponentSelectedDate(newDate.toDateString());
+    };
+    const handleApply = () => {
+        parentOnSelect(new Date(componentSelectedDate));
+        setShow(false);
+    };
+    const handleClick = (event) => {
+        const target = event.target;
+        const day = target.getAttribute('data-day');
+        const month = target.getAttribute('data-month');
+        const year = target.getAttribute('data-year');
+        onSelect(new Date(`${month}-${day}-${year}`));
+    };
+    const handleCancel = () => {
+        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
+        setShow(false);
+    };
+    const calendar$1 = date.buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
+    const [month, day, year] = (selectedDate || new Date())
+        .toLocaleString('default', {
+        year: '2-digit',
+        month: '2-digit',
+        day: '2-digit',
+    })
+        .split('/');
+    return (React__default.default.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React__default.default.createElement(InputWrapper, null,
+            React__default.default.createElement(Input, { value: selectedDate ? `${month} / ${day} / ${year}` : '', onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
+            React__default.default.createElement(calendar.Calendar, null)),
+        show && (React__default.default.createElement(DateSelector, null,
+            React__default.default.createElement(InnerWrapper, null,
+                React__default.default.createElement("div", null,
+                    React__default.default.createElement(MonthBar, null,
+                        React__default.default.createElement(Arrow, { onClick: handlePreviousMonth },
+                            React__default.default.createElement(chevron_left.ChevronLeft, { size: 24 })),
+                        React__default.default.createElement(paragraph.P, null, `${Object.values(date$1.MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
+                        React__default.default.createElement(Arrow, { onClick: handleNextMonth },
+                            React__default.default.createElement(chevron_right.ChevronRight, { size: 24 }))),
+                    React__default.default.createElement(WeekdayWrapper, null, Object.values(date$1.WEEKDAYS).map((day) => (React__default.default.createElement(paragraph.P, { key: day }, day)))),
+                    React__default.default.createElement(Calendar, null, calendar$1.map((week, index) => {
+                        return (React__default.default.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
+                            const isPastDate = today.getTime() - dateObj.getTime() > 0;
+                            const isCurrMonth = day[1] !==
+                                date.zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                            const isNotCurrent = disablePastDates
+                                ? isPastDate
+                                : isCurrMonth;
+                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                            const isSelected = new Date(componentSelectedDate).getTime() ===
+                                dateObj.getTime();
+                            return (React__default.default.createElement(Day, { className: `${isToday ? 'today' : ''}${isNotCurrent ? ' not-current' : ''}${isSelected ? ' selected' : ''}`.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__default.default.createElement(BottomWrapper, null,
+                        React__default.default.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
+                        React__default.default.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+};
+const Wrapper = styled.styled.div `
+  position: relative;
+  width: fit-content;
+  font-family: var(--font-inter);
+`;
+const DateSelector = styled.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.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 MonthBar = styled.styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`;
+const Arrow = styled.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.styled.div `
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`;
+const Calendar = styled.styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`;
+const Week = styled.styled.div `
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`;
+const Day = styled.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;
+  }
+
+  &.not-current {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.selected {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &.not-current {
+      background-color: var(--color-blue-9);
+    }
+  }
+`;
+const BottomWrapper = styled.styled.div `
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;
+const Input = styled.styled.input `
+  max-width: 140px;
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`;
+const InputWrapper = styled.styled.div `
+  width: fit-content;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;
+
+exports.CalendarInput = CalendarInput;

package/dist/components/input/checkbox/checkbox.js

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var styled = require('styled-components');
+var styles = require('../../../common/styles.js');
+var checkmark = require('../../../icons/basic/checkmark.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Checkbox = ({ disabled, selected, sx, ...rest }) => {
+    return (React__default.default.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React__default.default.createElement(checkmark.Checkmark, { color: "white" })));
+};
+const Box = styled.styled.div `
+  display: flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({ $selected }) => $selected
+    ? `background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`
+    : 'border: 1px solid var(--color-grey-8);'}
+  ${styles.Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+
+exports.Checkbox = Checkbox;