rbro-tat-uds 1.6.35 → 2.0.0

package/build/esm/components/Datepicker/Calendar.js

@@ -0,0 +1,449 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.js';
+import IconButton from '../IconButton/IconButton.js';
+import { colors } from '../../utils';
+import calendar, { CALENDAR_MONTHS, CALENDAR_YEARS, WEEK_DAYS, getPreviousMonth, getNextMonth, isSameDay, isSameMonth, getDateISO, isDate } from './helpers_calendar.js';
+
+const CalendarContainer = styled.div`
+  border-radius: 16px;
+  background-color: ${colors.white};
+  box-shadow: 0px 6px 20px 0px rgba(19, 20, 22, 0.2),
+    0px 2px 6px 0px rgba(19, 20, 22, 0.15);
+  overflow: hidden;
+`;
+const CalendarHeader = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 12px;
+
+  & > div {
+    & > button {
+      cursor: pointer;
+      background-color: transparent;
+      outline: none;
+      border: none;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 120%;
+      color: ${colors.info_800};
+    }
+  }
+
+  & > select {
+    outline: none;
+    height: 32px;
+    padding: 0px 12px;
+    background-color: transparent;
+    border-radius: 9999px;
+    border: 1px solid #8f919952;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 171%;
+  }
+`;
+const CalendarFooter = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  justify-content: space-between;
+`;
+const CalendarGrid = styled.div`
+  border-top: 1px solid ${colors.gray_150};
+  border-bottom: 1px solid ${colors.gray_150};
+  padding: 12px;
+  display: grid;
+  grid-template: ${({ $view }) => $view === "date" ? "repeat(7, auto) / repeat(7, auto)" : "repeat(6,auto) / repeat(4,auto)"};
+  row-gap: 6px;
+  column-gap: 6px;
+`;
+const CalendarCell = styled.div`
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  user-select: none;
+  grid-column: ${({ $index }) => $index % 7 + 1} / span 1;
+`;
+const CalendarDay = styled(CalendarCell)`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 171%;
+  color: ${colors.gray_200};
+`;
+const CalendarDate = styled(CalendarCell)`
+  font-weight: 400;
+  font-size: 14px;
+  cursor: pointer;
+  color: ${({ $inMonth, $isLimited }) => $isLimited ? colors.gray_200 : $inMonth ? colors.gray_950 : colors.gray_200};
+
+  grid-row: ${({ $index }) => Math.floor($index / 7) + 2} / span 1;
+  transition: all 0.4s ease-out;
+  :hover {
+    color: #06c;
+    background: rgba(0, 102, 204, 0.075);
+  }
+`;
+const HighlightedCalendarDate = styled(CalendarDate)`
+  color: #fff;
+  background: ${colors.info_600} !important;
+  border-radius: 9999px;
+  position: relative;
+`;
+const TodayCalendarDate = styled(HighlightedCalendarDate)`
+  background: transparent !important;
+  border-radius: 9999px;
+  border: 1px solid ${colors.gray_100};
+  color: ${({ $isLimited }) => $isLimited ? colors.gray_200 : colors.gray_950};
+`;
+const CalendarNonDateCell = styled.div`
+  width: 67.5px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  user-select: none;
+`;
+const CalendarNonDate = styled(CalendarNonDateCell)`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 120%;
+  color: ${colors.gray_950};
+  cursor: pointer;
+`;
+const HighlightedCalendarNonDate = styled(CalendarNonDate)`
+  color: #fff;
+  background: ${colors.info_600} !important;
+  border-radius: 9999px;
+  position: relative;
+`;
+const CurrentCalendarNonDate = styled(HighlightedCalendarNonDate)`
+  background: transparent !important;
+  border-radius: 9999px;
+  border: 1px solid ${colors.gray_100};
+  color: ${colors.gray_950};
+`;
+const Calendar = ({
+  date,
+  onDateChanged,
+  setCalendarOpen,
+  limitStart,
+  limitEnd
+}) => {
+  const [dateState, setDateState] = useState({
+    current: date,
+    month: +date.getMonth() + 1,
+    year: date.getFullYear()
+  });
+  const [view, setView] = useState("date");
+  const addDateToState = (date2) => {
+    const isDateObject = isDate(date2);
+    const _date = isDateObject ? date2 : /* @__PURE__ */ new Date();
+    setDateState({
+      current: date2,
+      month: +_date.getMonth() + 1,
+      year: _date.getFullYear()
+    });
+  };
+  const renderMonthAndYear = useMemo(() => {
+    const { month, year } = dateState;
+    const monthname = Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
+    return {
+      monthname: CALENDAR_MONTHS[monthname],
+      year
+    };
+  }, [dateState]);
+  const gotoDate = (date2, event) => {
+    event && event.preventDefault();
+    const { current } = dateState;
+    if (!(current && isSameDay(date2, current))) {
+      addDateToState(date2);
+      onDateChanged && onDateChanged(date2);
+    }
+  };
+  const gotoYear = (year, event) => {
+    event && event.preventDefault();
+    setDateState({
+      current: dateState.current,
+      month: dateState.month,
+      year: +year
+    });
+    setView("month");
+  };
+  const gotoMonth = (month, event) => {
+    event && event.preventDefault();
+    setDateState({
+      current: dateState.current,
+      month: +month,
+      year: dateState.year
+    });
+    setView("date");
+  };
+  const renderDayLabel = (day, index) => {
+    const daylabel = WEEK_DAYS[day].toUpperCase();
+    return /* @__PURE__ */ jsx(CalendarDay, { $index: index, children: daylabel }, daylabel + index);
+  };
+  const getCalendarDates = () => {
+    const { current, month, year } = dateState;
+    const calendarMonth = month || +current?.getMonth() + 1;
+    const calendarYear = year || current?.getFullYear();
+    return calendar(calendarMonth, calendarYear);
+  };
+  const isValidDateFormatLimit = (dateString) => {
+    const regex = /^\d{4}-\d{2}-\d{2}$/;
+    if (!regex.test(dateString)) return false;
+    const date2 = new Date(dateString);
+    const getTimestamp = date2.getTime();
+    if (isNaN(getTimestamp)) return false;
+    const [year, month, day] = dateString.split("-");
+    const check_year = date2.getUTCFullYear() !== parseInt(year, 10);
+    if (check_year) return false;
+    const check_month = date2.getUTCMonth() + 1 !== parseInt(month, 10);
+    if (check_month) return false;
+    const check_day = date2.getUTCDate() !== parseInt(day, 10);
+    if (check_day) return false;
+    return true;
+  };
+  const checkLimitsValid = () => {
+    if (!limitStart || !limitEnd) return false;
+    if (!isValidDateFormatLimit(limitStart) || !isValidDateFormatLimit(limitEnd))
+      return false;
+    return true;
+  };
+  const limitedDates = useMemo(() => {
+    if (!checkLimitsValid()) return [];
+    const startDate = new Date(limitStart);
+    const endDate = new Date(limitEnd);
+    const datesArray = [];
+    for (let d = new Date(startDate); d <= endDate; d.setUTCDate(d.getUTCDate() + 1)) {
+      datesArray.push(new Date(d));
+    }
+    return datesArray;
+  }, [limitStart, limitEnd]);
+  const isLimitedDate = useCallback(
+    (date2) => {
+      if (limitedDates && !!limitedDates.length) {
+        return !limitedDates.some((limit) => limit.getTime() === date2.getTime());
+      }
+      return false;
+    },
+    [limitedDates]
+  );
+  const renderCalendarDate = (date2, index) => {
+    const { current, month, year } = dateState;
+    const _date = new Date(date2.join("-"));
+    const isLimited = isLimitedDate(_date);
+    const isToday = isSameDay(_date, /* @__PURE__ */ new Date());
+    const isCurrent = current && isSameDay(_date, current);
+    const inMonth = month && year && isSameMonth(
+      _date,
+      new Date(
+        [
+          year.toString().padStart(2, "0"),
+          month.toString().padStart(2, "0"),
+          "01"
+        ].join("-")
+      )
+    );
+    const DateComponent = isCurrent ? HighlightedCalendarDate : isToday ? TodayCalendarDate : CalendarDate;
+    return /* @__PURE__ */ jsx(
+      DateComponent,
+      {
+        $index: index,
+        $inMonth: inMonth,
+        $isLimited: isLimited,
+        onClick: (e) => {
+          if (isLimited) return;
+          gotoDate(_date, e);
+        },
+        children: _date.getDate()
+      },
+      getDateISO(_date)
+    );
+  };
+  const getCalendarYears = () => {
+    const years_render = CALENDAR_YEARS * 4;
+    const { year } = dateState;
+    const _years = [...new Array(years_render)].map((_, index) => {
+      return +year + index;
+    });
+    return _years;
+  };
+  const renderCalendarYears = (_year) => {
+    const { current, year } = dateState;
+    const isActive = _year === year;
+    const isCurrent = current && current.getFullYear() === _year;
+    const Component = isActive ? HighlightedCalendarNonDate : isCurrent ? CurrentCalendarNonDate : CalendarNonDate;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        onClick: (e) => gotoYear(_year, e),
+        children: _year
+      },
+      _year
+    );
+  };
+  const renderCalendarMonths = (_month, index) => {
+    const { current, year, month } = dateState;
+    const isActive = index + 1 === month;
+    const isSameYear = current && current.getFullYear() === year;
+    const isSameMonth2 = current && current.getMonth() + 1 === index + 1;
+    const isCurrent = isSameYear && isSameMonth2;
+    const Component = isActive ? HighlightedCalendarNonDate : isCurrent ? CurrentCalendarNonDate : CalendarNonDate;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        onClick: (e) => gotoMonth(index + 1, e),
+        children: _month.slice(0, 3)
+      },
+      _month
+    );
+  };
+  const handleHeaderEvent = (e) => {
+    e && e.preventDefault();
+    if (view === "date") {
+      return setView("year");
+    }
+    return;
+  };
+  const handlePrevious = () => {
+    const { month, year } = dateState;
+    if (view === "date") {
+      const previousMonth = getPreviousMonth(month, year);
+      setDateState({
+        month: previousMonth.month,
+        year: previousMonth.year,
+        current: dateState.current
+      });
+      return;
+    }
+    if (view === "year") {
+      const nextYears = year - CALENDAR_YEARS * 4;
+      setDateState({
+        month: dateState.month,
+        year: nextYears,
+        current: dateState.current
+      });
+      return;
+    }
+    if (view === "month") {
+      setDateState({
+        month: dateState.month,
+        current: dateState.current,
+        year: dateState.year - 1
+      });
+      return;
+    }
+  };
+  const handleNext = () => {
+    const { month, year } = dateState;
+    if (view === "date") {
+      const nextMonth = getNextMonth(month, year);
+      setDateState({
+        month: nextMonth.month,
+        year: nextMonth.year,
+        current: dateState.current
+      });
+      return;
+    }
+    if (view === "year") {
+      const nextYears = year + CALENDAR_YEARS * 4;
+      setDateState({
+        month: dateState.month,
+        year: nextYears,
+        current: dateState.current
+      });
+      return;
+    }
+    if (view === "month") {
+      setDateState({
+        month: dateState.month,
+        current: dateState.current,
+        year: dateState.year + 1
+      });
+      return;
+    }
+  };
+  return /* @__PURE__ */ jsxs(CalendarContainer, { children: [
+    /* @__PURE__ */ jsxs(CalendarHeader, { children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: handlePrevious,
+          title: "Previous Month",
+          icon: "go-left",
+          intent: "info",
+          variant: "secondaryOutlined",
+          shape: "rounded",
+          size: "small"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("button", { onClick: handleHeaderEvent, children: [
+        view === "date" && renderMonthAndYear.monthname + " " + renderMonthAndYear.year,
+        view === "year" && renderMonthAndYear.year + "-" + (renderMonthAndYear.year + CALENDAR_YEARS * 4 - 1),
+        view === "month" && renderMonthAndYear.year
+      ] }) }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          onClick: handleNext,
+          title: "Next Month",
+          icon: "go-right",
+          intent: "info",
+          variant: "secondaryOutlined",
+          shape: "rounded",
+          size: "small"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(CalendarGrid, { $view: view, children: [
+      view === "date" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Fragment, { children: Object.keys(WEEK_DAYS).map(renderDayLabel) }),
+        /* @__PURE__ */ jsx(Fragment, { children: getCalendarDates().map(renderCalendarDate) })
+      ] }),
+      view === "year" && /* @__PURE__ */ jsx(Fragment, { children: getCalendarYears().map(renderCalendarYears) }),
+      view === "month" && /* @__PURE__ */ jsx(Fragment, { children: Object.values(CALENDAR_MONTHS).map(renderCalendarMonths) })
+    ] }),
+    /* @__PURE__ */ jsxs(CalendarFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            checkLimitsValid() ? addDateToState(new Date(limitStart)) : addDateToState(/* @__PURE__ */ new Date());
+            onDateChanged && (checkLimitsValid() ? onDateChanged(new Date(limitStart)) : onDateChanged(/* @__PURE__ */ new Date()));
+            setCalendarOpen && setCalendarOpen(false);
+          },
+          width: "auto",
+          intent: "accent",
+          variant: "secondaryOutlined",
+          label: "Reseteaza"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => {
+            setCalendarOpen && setCalendarOpen(false);
+          },
+          width: "auto",
+          intent: "accent",
+          variant: "primary",
+          label: "Salveaza"
+        }
+      )
+    ] })
+  ] });
+};
+
+export { Calendar as default };

package/build/esm/components/Datepicker/Datepicker.js

@@ -0,0 +1,202 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import Icon from '../Icon/Icon.js';
+import { colors } from '../../utils';
+import Calendar from './Calendar.js';
+import { isDate } from './helpers_calendar.js';
+
+const sizesDatePickerVariants = {
+  medium: css`
+    height: 40px;
+    padding: 0px 38px 0px 12px;
+  `,
+  large: css`
+    height: 48px;
+    padding: 0px 42px 0px 16px;
+  `
+};
+const CalendarWrapperStyled = styled.div`
+  position: absolute;
+  left: 0;
+  z-index: 300;
+
+  ${({ $position }) => $position === "top" ? css`
+          bottom: 100%;
+          margin-bottom: 10px;
+        ` : css`
+          top: 100%;
+          margin-top: 10px;
+        `}
+`;
+const DatePickerStyled = styled.div`
+  position: relative;
+  width: 100%;
+
+  & > div:first-of-type {
+    position: absolute;
+    top: 0;
+    right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  & > input {
+    outline: none;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 8px;
+    background-color: ${(props) => props.$disabled ? colors.gray_30 : colors.gray_100};
+    color: ${(props) => props.$disabled ? colors.gray_500 : colors.gray_950};
+    font-weight: 400;
+    font-family: Amalia, sans-serif;
+    font-size: ${(props) => props.$size && typeof props.$size === "string" && (props.$size === "large" ? "16px" : "14px")};
+
+    ${({ $intent }) => $intent === "danger" && css`
+        outline: 2px solid ${colors.danger_500};
+      `}
+
+    ${({ $calendarOpen }) => $calendarOpen && css`
+        outline: 2px solid ${colors.accent_600};
+      `}
+
+    ${(props) => props.$size && typeof props.$size === "string" && sizesDatePickerVariants[props.$size]};
+
+    &::placeholder {
+      color: ${(props) => props.$disabled ? colors.gray_500 : colors.gray_600};
+    }
+
+    ${({ $disabled }) => $disabled && css`
+        background-color: ${colors.gray_30};
+      `}
+  }
+`;
+const Datepicker = ({
+  id,
+  name,
+  placeholder,
+  type = "date",
+  value,
+  setValue,
+  size = "medium",
+  intent = "default",
+  disabled,
+  limitStart = "",
+  limitEnd = "",
+  defaultOpen = false,
+  ...rest
+}) => {
+  const [calendarOpen, setCalendarOpen] = useState(defaultOpen);
+  const [position, setPosition] = useState("bottom");
+  const wrapper_reference = useRef(null);
+  const handleDateChange = (date) => {
+    setValue(date);
+  };
+  useEffect(() => {
+    console.log({ defaultOpen });
+    setCalendarOpen(defaultOpen);
+  }, [defaultOpen]);
+  useEffect(() => {
+    const handleOutside = (e) => {
+      if (wrapper_reference.current && !wrapper_reference.current.contains(e.target)) {
+        setCalendarOpen(false);
+      }
+    };
+    if (calendarOpen) {
+      document.addEventListener("mousedown", handleOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleOutside);
+      };
+    }
+  }, [calendarOpen, wrapper_reference]);
+  const formatted = useMemo(() => {
+    if (!value) return "";
+    if (type === "date") return value?.toString();
+    if (type === "type1") {
+      return new Intl.DateTimeFormat("ro-RO", {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }).format(value);
+    }
+    if (type === "type2") {
+      return new Intl.DateTimeFormat("ro-RO", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      }).format(value).replace(/\./g, "/");
+    }
+  }, [value, type]);
+  useEffect(() => {
+    const handleDynamicPosition = () => {
+      if (wrapper_reference.current) {
+        const { y } = wrapper_reference.current.getBoundingClientRect();
+        if (y < 465) {
+          setPosition("bottom");
+        } else {
+          setPosition("top");
+        }
+      }
+    };
+    window.addEventListener("scroll", handleDynamicPosition);
+    return () => {
+      window.removeEventListener("scroll", handleDynamicPosition);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    DatePickerStyled,
+    {
+      ref: wrapper_reference,
+      $size: size,
+      $intent: intent,
+      $disabled: disabled,
+      $calendarOpen: calendarOpen,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            name,
+            type: "text",
+            readOnly: true,
+            onChange: (e) => e.preventDefault(),
+            onClick: () => !disabled && setCalendarOpen(true),
+            value: formatted,
+            disabled,
+            placeholder
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: "calendar",
+            size: 20,
+            color: disabled ? colors.info_500_40 : colors.info_700
+          }
+        ) }),
+        calendarOpen && /* @__PURE__ */ jsx(CalendarWrapperStyled, { $position: position, children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            limitStart,
+            limitEnd,
+            date: isDate(value) ? value : /* @__PURE__ */ new Date(),
+            onDateChanged: handleDateChange,
+            setCalendarOpen
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { Datepicker as default };