@monolith-forensics/monolith-ui 1.0.12 → 1.1.1

package/src/components/ArrowButton/ArrowButton.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { ChevronDownIcon } from "lucide-react";
-import styled from "styled-components";
-
-interface ArrowIconProps {
-  className?: string;
-}
-
-const ArrowIcon: React.FC<ArrowIconProps> = styled(
-  ({ className, ...props }: ArrowIconProps) => (
-    <div className={className} {...props}>
-      <ChevronDownIcon size={16} />
-    </div>
-  )
-)`
-  color: ${(props) => props.theme.palette.text.secondary};
-  transition: transform 0.2s ease-in-out;
-  transform: rotate(0deg);
-  will-change: transform;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-`;
-
-interface ArrowButtonProps {
-  className?: string;
-}
-
-const ArrowButton: React.FC<ArrowButtonProps> = styled(
-  ({ className, ...props }: ArrowButtonProps) => (
-    <button
-      className={className}
-      {...props}
-      tabIndex={-1}
-      data-default-btn={true}
-    >
-      <ArrowIcon />
-    </button>
-  )
-)`
-  position: absolute;
-  right: 0;
-  height: 100%;
-  padding-inline: 10px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-`;
-
-export default ArrowButton;

package/src/components/ArrowButton/index.tsx

@@ -1 +0,0 @@
-export { default } from "./ArrowButton";

package/src/components/Button/Button.tsx

@@ -1,278 +0,0 @@
-import React from "react";
-import { forwardRef } from "react";
-import styled from "styled-components";
-
-const colors = {
-  gray: "#dee2e6",
-  red: "#e03131",
-  pink: "#c2255c",
-  grape: "#9c36b5",
-  violet: "#6741d9",
-  indigo: "#3b5bdb",
-  cyan: "#0c8599",
-  teal: "#099268",
-  green: "#2f9e44",
-  lime: "#66a80f",
-  yellow: "#f08c00",
-  orange: "#e8590c",
-};
-
-interface StyledButtonProps {
-  variant?:
-    | "default"
-    | "contained"
-    | "filled"
-    | "light"
-    | "outlined"
-    | "text"
-    | "subtle";
-  color?: string;
-  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
-  fullWidth?: boolean;
-}
-
-const StyledButton = styled.button<StyledButtonProps>`
-  width: ${({ fullWidth }) => (fullWidth ? "100%" : "auto")};
-  height: ${({ size }) => {
-    switch (size) {
-      case "xxs":
-        return `24px`;
-      case "xs":
-        return `28px`;
-      case "sm":
-        return `34px`;
-      case "md":
-        return `40px`;
-      case "lg":
-        return `48px`;
-      case "xl":
-        return `58px`;
-      default:
-        return `34px`;
-    }
-  }};
-
-  font-weight: 525;
-  letter-spacing: 0.75px;
-  font-size: ${({ size }) => {
-    switch (size) {
-      case "xxs":
-        return `11px`;
-      case "xs":
-        return `12px`;
-      case "sm":
-        return `14px`;
-      case "md":
-        return `16px`;
-      case "lg":
-        return `18px`;
-      case "xl":
-        return `20px`;
-      default:
-        return `14px`;
-    }
-  }};
-
-  padding: ${({ size }) => {
-    switch (size) {
-      case "xxs":
-        return `0px 8px`;
-      case "xs":
-        return `0px 12px`;
-      case "sm":
-        return `0px 16px`;
-      case "md":
-        return `0px 20px`;
-      case "lg":
-        return `0px 24px`;
-      case "xl":
-        return `0px 30px`;
-      default:
-        return `0px 16px`;
-    }
-  }};
-
-  color: ${({ theme, variant, color }) => {
-    if (variant === "default") return theme.palette.text.primary;
-    if (variant === "contained") return "white";
-    if (variant === "filled") return "white";
-
-    switch (color) {
-      case "primary":
-        return theme.palette.primary.main;
-      case undefined || null:
-        return theme.palette.text.primary;
-      default:
-        return (
-          theme?.palette?.[color!]?.main ||
-          colors?.[color!] ||
-          theme.palette.text.primary
-        );
-    }
-  }};
-
-  background-color: ${({ theme, variant, color }) => {
-    if (variant === "default") return "transparent";
-    switch (variant) {
-      case "contained":
-        if (!color) return theme.palette.background.secondary;
-        return (
-          theme?.palette?.[color]?.main ||
-          colors?.[color] ||
-          theme.palette.background.secondary
-        );
-      case "filled":
-        if (!color) return theme.palette.background.secondary;
-        return (
-          theme?.palette?.[color]?.main ||
-          colors?.[color] ||
-          theme.palette.background.secondary
-        );
-      case "light":
-        if (!color) return theme.palette.background.secondary + "30";
-        return (
-          (theme?.palette?.[color]?.main ||
-            colors?.[color] ||
-            theme.palette.background.secondary) + "30"
-        );
-      case "outlined":
-        return "transparent";
-      case "text":
-        return "transparent";
-      default:
-        return "transparent";
-    }
-  }};
-
-  border-radius: 4px;
-  border: 1px solid
-    ${({ theme, variant, color }) => {
-      switch (variant) {
-        case "contained":
-          return "transparent";
-        case "filled":
-          return "transparent";
-        case "light":
-          return "transparent";
-        case "outlined":
-          if (!color) return theme.palette.divider;
-          return (
-            theme?.palette?.[color]?.main ||
-            colors?.[color] ||
-            theme.palette.divider
-          );
-        case "text":
-          return "transparent";
-        case "subtle":
-          return "transparent";
-        default:
-          if (!color) return theme.palette.divider;
-          return (
-            theme?.palette?.[color]?.main ||
-            colors?.[color] ||
-            theme.palette.divider
-          );
-      }
-    }};
-
-  cursor: pointer;
-
-  transition: background-color 0.2s, border 0.2s;
-
-  &:hover {
-    background-color: ${({ theme, variant, color }) => {
-      if (variant === "default") return "transparent";
-      switch (variant) {
-        case "contained":
-          if (!color) return theme.palette.background.secondary + "90";
-          return (
-            (theme?.palette?.[color]?.main ||
-              colors?.[color] ||
-              theme.palette.background.secondary) + "90"
-          );
-        case "filled":
-          if (!color) return theme.palette.background.secondary + "90";
-          return (
-            (theme?.palette?.[color]?.main ||
-              colors?.[color] ||
-              theme.palette.background.secondary) + "90"
-          );
-        case "light":
-          if (!color) return theme.palette.background.secondary + "70";
-          return (
-            (theme?.palette?.[color]?.main ||
-              colors?.[color] ||
-              theme.palette.background.secondary) + "70"
-          );
-        case "outlined":
-          return theme.palette.action.hover;
-        case "text":
-          return "transparent";
-        case "subtle":
-          if (!color) return theme.palette.action.hover;
-          return theme?.palette?.[color]?.main || colors?.[color]
-            ? (theme?.palette?.[color]?.main || colors?.[color]) + "30"
-            : theme.palette.action.hover;
-        default:
-          return theme.palette.action.hover;
-      }
-    }};
-
-    border: 1px solid
-      ${({ theme, variant, color }) => {
-        switch (variant) {
-          case "contained":
-            return "transparent";
-          case "filled":
-            return "transparent";
-          case "light":
-            return "transparent";
-          case "outlined":
-            if (!color) return theme.palette.divider;
-            return colors?.[color] || theme.palette.divider;
-          case "text":
-            return "transparent";
-          case "subtle":
-            return "transparent";
-          default:
-            if (!color) return theme.palette.divider;
-            return (
-              theme?.palette?.[color]?.main ||
-              colors?.[color] ||
-              theme.palette.divider
-            );
-        }
-      }};
-  }
-`;
-
-export interface ButtonProps {
-  children: React.ReactNode;
-  variant?:
-    | "default"
-    | "contained"
-    | "filled"
-    | "light"
-    | "outlined"
-    | "text"
-    | "subtle";
-  color?: string;
-  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
-  fullWidth?: boolean;
-  onClick?: () => void;
-}
-
-const Button = forwardRef(
-  (props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
-    const { children, ...other } = props;
-    return (
-      <StyledButton ref={ref} {...other}>
-        <span style={{ height: "100%" }}>
-          <span style={{ height: "100%" }}>{children}</span>
-        </span>
-      </StyledButton>
-    );
-  }
-);
-
-export default Button;

package/src/components/Button/index.ts

@@ -1 +0,0 @@
-export { default } from "./Button";

package/src/components/Calendar/Calendar.js

@@ -1,365 +0,0 @@
-import React, { Fragment, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
-import ArrowRightIcon from "@mui/icons-material/ArrowRight";
-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,
-} from "./calendarHelpers";
-import moment from "moment";
-
-export default function Calendar({
-  date = new Date(),
-  onDateChanged = () => {},
-  hourFormat = "24",
-  includeTime = true,
-  clearable = true,
-  min,
-  max,
-}) {
-  const [dateState, setDateState] = useState({
-    current: new Date(),
-    month: 0,
-    year: 0,
-    hours: 0,
-    minutes: 0,
-  });
-  const [today, setToday] = useState(new Date());
-  let pressureTimer, pressureTimeout, dayTimeout;
-
-  const addDateToState = (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() + 1;
-    const calendarYear = year || current?.getFullYear();
-    return calendar(calendarMonth, calendarYear);
-  };
-
-  const checkValidRange = (value) => {
-    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;
-  };
-
-  //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>
-        <ArrowLeftIcon
-          onMouseDown={handlePrevious}
-          onMouseUp={clearPressureTimer}
-          title="Previous Month"
-        />
-
-        <CalendarMonth>
-          {monthname} {year}
-        </CalendarMonth>
-
-        <ArrowRightIcon
-          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, index) => {
-    // Resolve the day of the week label from the WEEK_DAYS object map
-    const daylabel = WEEK_DAYS[day];
-
-    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, index) => {
-    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 onClick = gotoDate(_date);
-    const props = { index, inMonth, onClick, title: _date.toDateString() };
-    // Conditionally render a styled date component
-    const DateComponent = isCurrent
-      ? HighlightedCalendarDate
-      : isToday
-      ? TodayCalendarDate
-      : CalendarDate;
-    return (
-      <DateComponent
-        data-disabled={!checkValidRange(getDateISO(_date))}
-        key={getDateISO(_date)}
-        {...props}
-      >
-        {_date.getDate()}
-      </DateComponent>
-    );
-  };
-
-  const renderHours = () => {
-    const { hours } = dateState;
-    const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
-    return hoursArray.map((hour, index) => {
-      const HourComponent =
-        parseInt(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: parseInt(hour.value),
-              current: newTime,
-            });
-            onDateChanged(newTime);
-          }}
-        >
-          {/* {`${hour.label}${
-            hourFormat === "24" ? "" : index < 11 ? " AM" : " PM"
-          }`} */}
-          {hour.label}
-        </HourComponent>
-      );
-    });
-  };
-
-  const renderMinutes = () => {
-    const { minutes } = dateState;
-    return MINUTES.map((minute) => {
-      const MinuteComponent =
-        parseInt(minute) === minutes ? TimeItemActive : TimeItem;
-      return (
-        <MinuteComponent
-          key={minute}
-          value={minute}
-          onClick={(e) => {
-            const newTime = moment(dateState.current).minutes(minute).toDate();
-            setDateState({
-              ...dateState,
-              minutes: parseInt(minute),
-              current: newTime,
-            });
-            onDateChanged(newTime);
-          }}
-        >
-          {minute}
-        </MinuteComponent>
-      );
-    });
-  };
-
-  // new 2
-  const 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);
-    onDateChanged(newTime);
-  };
-
-  const gotoPreviousMonth = () => {
-    const { month, year } = dateState;
-    // this.setState(getPreviousMonth(month, year));
-    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;
-    //this.setState(getNextMonth(month, year));
-    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 handlePressure = (fn) => {
-    if (typeof fn === "function") {
-      fn();
-      pressureTimeout = setTimeout(() => {
-        pressureTimer = setInterval(fn, 100);
-      }, 500);
-    }
-  };
-  const clearPressureTimer = () => {
-    pressureTimer && clearInterval(pressureTimer);
-    pressureTimeout && clearTimeout(pressureTimeout);
-  };
-  const handlePrevious = (evt) => {
-    evt && evt.preventDefault();
-    const fn = evt.shiftKey ? gotoPreviousYear : gotoPreviousMonth;
-    fn();
-    // handlePressure(fn);
-  };
-  const handleNext = (evt) => {
-    evt && evt.preventDefault();
-    const fn = evt.shiftKey ? gotoNextYear : gotoNextMonth;
-    fn();
-    // handlePressure(fn);
-  };
-
-  useEffect(() => {
-    // check that date is greater than the year 1900
-    // if not, set date to today
-    if (date?.getFullYear() < 1000) {
-      return;
-    }
-    addDateToState(date);
-  }, [date]);
-
-  // lifecycle methods
-  useEffect(() => {
-    const now = new Date();
-    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={() => onDateChanged(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";
-
-Calendar.propTypes = {
-  date: PropTypes.instanceOf(Date),
-  onDateChanged: PropTypes.func,
-};