@monolith-forensics/monolith-ui 1.1.0 → 1.1.2

package/Calendar/Calendar.tsx

@@ -1,376 +0,0 @@
-import { Fragment, useEffect, useState } from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import {
-  CalendarContainer,
-  CalendarHeader,
-  CalendarGrid,
-  CalendarMonth,
-  CalendarDay,
-  CalendarDate,
-  HighlightedCalendarDate,
-  TodayCalendarDate,
-  TimeContainer,
-  MainContainer,
-  TimePickerContainer,
-  TimeHourSelect,
-  TimeHeader,
-  TimeMinuteSelect,
-  TimeItem,
-  TimeItemActive,
-  NoValueButton,
-} from "./CalendarStyles";
-import calendar, {
-  isDate,
-  isSameDay,
-  isSameMonth,
-  getDateISO,
-  getNextMonth,
-  getPreviousMonth,
-  WEEK_DAYS,
-  CALENDAR_MONTHS,
-  HOURS24,
-  HOURS12,
-  MINUTES,
-  WeekDay,
-} from "./calendarHelpers";
-import moment from "moment";
-
-const checkValidRange = (
-  value: string | null,
-  min: Date | null,
-  max: Date | null
-) => {
-  if (min && moment(value).startOf("day").isBefore(moment(min).startOf("day")))
-    return false;
-  if (max && moment(value).startOf("day").isAfter(moment(max).startOf("day")))
-    return false;
-  return true;
-};
-
-interface CalendarProps {
-  defaultValue?: Date;
-  value?: Date | null;
-  onChange?: (date: Date | null) => void;
-  hourFormat?: "12" | "24";
-  includeTime?: boolean;
-  clearable?: boolean;
-  min?: Date;
-  max?: Date;
-}
-
-const Calendar = ({
-  defaultValue = new Date(),
-  value,
-  onChange = () => {},
-  hourFormat = "24",
-  includeTime = true,
-  clearable = true,
-  min,
-  max,
-}: CalendarProps) => {
-  const [dateState, setDateState] = useState<{
-    current: Date | null;
-    month: number;
-    year: number;
-    hours: number;
-    minutes: number;
-  }>({
-    current: defaultValue,
-    month: defaultValue.getMonth() + 1,
-    year: defaultValue.getFullYear(),
-    hours: 0,
-    minutes: 0,
-  });
-  const [today, setToday] = useState(new Date());
-  let pressureTimer: ReturnType<typeof setInterval>;
-  let pressureTimeout: ReturnType<typeof setTimeout>;
-  let dayTimeout: ReturnType<typeof setTimeout>;
-
-  const addDateToState = (date: Date) => {
-    const isDateObject = isDate(date);
-    const _date = isDateObject ? date : new Date();
-    setDateState({
-      current: isDateObject ? date : null,
-      month: +_date.getMonth() + 1,
-      year: _date.getFullYear(),
-      hours: _date.getHours(),
-      minutes: _date.getMinutes(),
-    });
-  };
-
-  const getCalendarDates = () => {
-    const { current, month, year } = dateState;
-    const calendarMonth = month || +(current?.getMonth() || 0) + 1;
-    const calendarYear = year || current?.getFullYear();
-    return calendar(calendarMonth, calendarYear);
-  };
-
-  //new start
-
-  const renderMonthAndYear = () => {
-    const { month, year } = dateState;
-
-    // Resolve the month name from the CALENDAR_MONTHS object map
-    const monthname =
-      Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
-    return (
-      <CalendarHeader>
-        <ChevronLeftIcon
-          onMouseDown={handlePrevious}
-          onMouseUp={clearPressureTimer}
-          // title="Previous Month"
-        />
-        <CalendarMonth>
-          {monthname} {year}
-        </CalendarMonth>
-        <ChevronRightIcon
-          onMouseDown={handleNext}
-          onMouseUp={clearPressureTimer}
-          // title="Next Month"
-        />
-      </CalendarHeader>
-    );
-  };
-  // Render the label for day of the week
-  // This method is used as a map callback as seen in render()
-  const renderDayLabel = (day: string, index?: number) => {
-    // Resolve the day of the week label from the WEEK_DAYS object map
-    const daylabel = WEEK_DAYS[day as WeekDay];
-    return (
-      <CalendarDay key={daylabel} index={index}>
-        {daylabel}
-      </CalendarDay>
-    );
-  };
-  // Render a calendar date as returned from the calendar builder function
-  // This method is used as a map callback as seen in render()
-  const renderCalendarDate = (date: (string | number)[], index: number) => {
-    const { current, month, year } = dateState;
-    const _date = new Date(date.join("-"));
-    // Check if calendar date is same day as today
-    const isToday = isSameDay(_date, today);
-
-    // Check if calendar date is same day as currently selected date
-    const isCurrent = current && isSameDay(_date, current);
-
-    // Check if calendar date is in the same month as the state month and year
-    const inMonth =
-      month && year && isSameMonth(_date, new Date([year, month, 1].join("-")));
-    // The click handler
-    const props = {
-      "data-disabled": !checkValidRange(
-        getDateISO(_date),
-        min || null,
-        max || null
-      ),
-      index,
-      key: getDateISO(_date),
-      onClick: gotoDate(_date),
-      title: _date.toDateString(),
-      inMonth,
-    };
-    // Conditionally render a styled date component
-
-    return isCurrent ? (
-      <HighlightedCalendarDate {...props}>
-        {_date.getDate()}
-      </HighlightedCalendarDate>
-    ) : isToday ? (
-      <TodayCalendarDate {...props}>{_date.getDate()}</TodayCalendarDate>
-    ) : (
-      <CalendarDate {...props}>{_date.getDate()}</CalendarDate>
-    );
-  };
-
-  const renderHours = () => {
-    const { hours } = dateState;
-    const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
-    return hoursArray.map((hour, index) => {
-      const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
-      return (
-        <HourComponent
-          key={hour.value}
-          // value={hour.value}
-          onClick={(e) => {
-            const newTime = moment(dateState.current)
-              .hours(hour.value)
-              .toDate();
-            setDateState({
-              ...dateState,
-              hours: hour.value,
-              current: newTime,
-            });
-            onChange(newTime);
-          }}
-        >
-          {hour.label}
-        </HourComponent>
-      );
-    });
-  };
-
-  const renderMinutes = () => {
-    const { minutes } = dateState;
-    return MINUTES.map((minute) => {
-      const MinuteComponent = minute === minutes ? TimeItemActive : TimeItem;
-      return (
-        <MinuteComponent
-          key={minute}
-          // value={minute}
-          onClick={(e) => {
-            const newTime = moment(dateState.current)
-              .minutes(Number(minute))
-              .toDate();
-            setDateState({
-              ...dateState,
-              minutes: Number(minute),
-              current: newTime,
-            });
-            onChange(newTime);
-          }}
-        >
-          {minute}
-        </MinuteComponent>
-      );
-    });
-  };
-
-  type GotoDate = (
-    date: Date
-  ) => (
-    evt:
-      | React.MouseEvent<HTMLElement, MouseEvent>
-      | React.FormEvent<HTMLFormElement>
-      | undefined
-  ) => void;
-
-  // new 2
-  const gotoDate: GotoDate = (date) => (evt) => {
-    evt && evt.preventDefault();
-    const { current } = dateState;
-
-    // Set Hours and Minutes
-    const newTime = moment(date)
-      .hours(includeTime ? dateState.hours : 0)
-      .minutes(includeTime ? dateState.minutes : 0)
-      .toDate();
-
-    !(current && isSameDay(newTime, current)) && addDateToState(newTime);
-    onChange(newTime);
-  };
-
-  const gotoPreviousMonth = () => {
-    const { month, year } = dateState;
-    const previousMonth = getPreviousMonth(month, year);
-    setDateState({
-      month: previousMonth.month,
-      year: previousMonth.year,
-      current: dateState.current,
-      hours: dateState.hours,
-      minutes: dateState.minutes,
-    });
-  };
-
-  const gotoNextMonth = () => {
-    const { month, year } = dateState;
-    const nextMonth = getNextMonth(month, year);
-    setDateState({
-      month: nextMonth.month,
-      year: nextMonth.year,
-      current: dateState.current,
-      hours: dateState.hours,
-      minutes: dateState.minutes,
-    });
-  };
-  const gotoPreviousYear = () => {
-    const { year } = dateState;
-    setDateState({
-      month: dateState.month,
-      year: year - 1,
-      current: dateState.current,
-      hours: dateState.hours,
-      minutes: dateState.minutes,
-    });
-  };
-  const gotoNextYear = () => {
-    const { year } = dateState;
-    setDateState({
-      month: dateState.month,
-      year: year + 1,
-      current: dateState.current,
-      hours: dateState.hours,
-      minutes: dateState.minutes,
-    });
-  };
-  const clearPressureTimer = () => {
-    pressureTimer && clearInterval(pressureTimer);
-    pressureTimeout && clearTimeout(pressureTimeout);
-  };
-  const handlePrevious = (evt: React.MouseEvent) => {
-    evt && evt.preventDefault();
-    const fn = evt.shiftKey ? gotoPreviousYear : gotoPreviousMonth;
-    fn();
-  };
-  const handleNext = (evt: React.MouseEvent) => {
-    evt && evt.preventDefault();
-    const fn = evt.shiftKey ? gotoNextYear : gotoNextMonth;
-    fn();
-  };
-
-  useEffect(() => {
-    if (value) {
-      addDateToState(value);
-    }
-  }, [value]);
-
-  // lifecycle methods
-  useEffect(() => {
-    const now = new Date().valueOf();
-    const tomorrow = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000;
-    const ms = tomorrow - now;
-    dayTimeout = setTimeout(() => {
-      setToday(new Date());
-      clearDayTimeout();
-    }, ms);
-    return () => {
-      clearPressureTimer();
-      clearDayTimeout();
-    };
-  }, []);
-
-  const clearDayTimeout = () => {
-    dayTimeout && clearTimeout(dayTimeout);
-  };
-
-  return (
-    <MainContainer>
-      <CalendarContainer>
-        {renderMonthAndYear()}
-        <CalendarGrid>
-          <Fragment>{Object.keys(WEEK_DAYS).map(renderDayLabel)}</Fragment>
-          <Fragment>{getCalendarDates().map(renderCalendarDate)}</Fragment>
-        </CalendarGrid>
-        {clearable && (
-          <div style={{ textAlign: "center", marginTop: 3 }}>
-            <NoValueButton onClick={() => onChange(null)}>
-              Clear Date
-            </NoValueButton>
-          </div>
-        )}
-      </CalendarContainer>
-      {includeTime && (
-        <TimeContainer>
-          <TimeHeader>Select Time</TimeHeader>
-          <TimePickerContainer>
-            <TimeHourSelect>{renderHours()}</TimeHourSelect>
-            <TimeMinuteSelect>{renderMinutes()}</TimeMinuteSelect>
-          </TimePickerContainer>
-        </TimeContainer>
-      )}
-    </MainContainer>
-  );
-};
-
-Calendar.displayName = "Calendar";
-
-export default Calendar;

package/Calendar/CalendarStyles.tsx

@@ -1,180 +0,0 @@
-import styled from "styled-components";
-
-export const MainContainer = styled.div`
-  display: flex;
-`;
-export const CalendarContainer = styled.div`
-  font-size: 5px;
-  width: 250px;
-  border-radius: 4px;
-  overflow: hidden;
-`;
-export const CalendarHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-export const CalendarGrid = styled.div`
-  display: grid;
-  grid-template: repeat(7, auto) / repeat(7, auto);
-`;
-export const CalendarMonth = styled.div`
-  font-weight: 500;
-  font-size: 12px;
-  color: ${(props) => props.theme.palette.text.primary};
-  text-align: center;
-  padding: 0.5em 0.25em;
-  word-spacing: 5px;
-  user-select: none;
-`;
-
-interface CalendarCellProps {
-  index?: number;
-  inMonth?: boolean | 0;
-  "data-disabled"?: boolean | 0;
-  key: string | null;
-  title?: string;
-}
-
-export const CalendarCell = styled.div<CalendarCellProps>`
-  text-align: center;
-  align-self: center;
-  letter-spacing: 0.1rem;
-  padding: 7px;
-  user-select: none;
-  border-radius: 5px;
-  border: 1px solid transparent;
-  grid-column: ${({ index = 0 }) => (index % 7) + 1} / span 1;
-`;
-
-export const CalendarDay = styled(CalendarCell)<CalendarCellProps>`
-  font-weight: bold;
-  font-size: 10px;
-  border-radius: 0px;
-  color: ${(props) => props.theme.palette.text.secondary};
-`;
-
-export const CalendarDate = styled(CalendarCell)<CalendarCellProps>`
-  font-weight: ${(props) => (props.inMonth ? 500 : 300)};
-  font-size: 10px;
-  cursor: pointer;
-
-  color: ${({ inMonth, theme }) =>
-    inMonth ? theme.palette.text.primary : theme.palette.text.secondary};
-  grid-row: ${({ index }) => Math.floor((index || 0) / 7) + 2} / span 1;
-  transition: all 0.2s ease-out;
-  border-radius: 5px;
-  :hover {
-    background: ${({ theme }) => theme.palette.action.hover};
-  }
-
-  &[data-disabled="true"] {
-    pointer-events: none;
-    color: ${({ theme }) => theme.palette.text.disabled};
-  }
-`;
-export const HighlightedCalendarDate = styled(CalendarDate)<CalendarCellProps>`
-  color: white !important;
-  background: ${(props) => props.theme.palette.primary.main} !important;
-  border: 1px solid ${(props) => props.theme.palette.primary.main} !important;
-  position: relative;
-  ::before {
-    content: "";
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    width: calc(100% + 2px);
-    height: calc(100% + 2px);
-  }
-`;
-export const TodayCalendarDate = styled(
-  HighlightedCalendarDate
-)<CalendarCellProps>`
-  color: ${(props) => props.theme.palette.text.primary} !important;
-  background: transparent !important;
-  ::after {
-    content: "";
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border-bottom: 0.75em solid #06c;
-    border-left: 0.75em solid transparent;
-    border-top: 0.75em solid transparent;
-  }
-  :hover {
-    color: ${(props) => props.theme.palette.text.primary} !important;
-    background: ${(props) => props.theme.palette.action.hover} !important;
-  }
-`;
-export const TimeContainer = styled.div`
-  font-size: 12px;
-  width: 150px;
-  height: 100%;
-  border: 1px solid ${(props) => props.theme.palette.divider};
-  border-left: none;
-  border-radius: 4px;
-  overflow: hidden;
-`;
-export const TimePickerContainer = styled.div`
-  display: flex;
-  height: 100%;
-`;
-export const TimeHeader = styled.div`
-  font-weight: 500;
-  font-size: 12px;
-  color: ${(props) => props.theme.palette.text.primary};
-  border-bottom: 1px solid ${(props) => props.theme.palette.divider};
-  text-align: center;
-  padding: 5px;
-  line-height: 2.3;
-  height: 40px;
-  user-select: none;
-`;
-export const TimeHourSelect = styled.div`
-  border-right: 1px solid ${(props) => props.theme.palette.divider};
-  width: 50%;
-  height: 250px;
-  overflow-y: auto;
-`;
-export const TimeMinuteSelect = styled.div`
-  width: 50%;
-  height: 250px;
-  overflow-y: auto;
-`;
-export const TimeItem = styled.div`
-  font-weight: 500;
-  font-size: 10px;
-  color: ${(props) => props.theme.palette.text.primary};
-  text-align: center;
-  padding: 5px;
-  user-select: none;
-  cursor: pointer;
-  transition: all 0.2s ease-out;
-  :hover {
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-`;
-export const TimeItemActive = styled(TimeItem)`
-  background: ${(props) => props.theme.palette.primary.main};
-  color: white;
-  &:hover {
-    background: ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-export const NoValueButton = styled.button`
-  font-weight: normal;
-  font-size: 12px;
-  color: ${(props) => props.theme.palette.text.secondary};
-  text-align: center;
-  padding: 5px;
-  user-select: none;
-  cursor: pointer;
-  transition: all 0.2s ease-out;
-  border: none;
-  border-radius: 5px;
-  background: transparent;
-  :hover {
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-`;