@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/{src/components/Calendar/Calendar.js → Calendar/Calendar.tsx}

@@ -1,7 +1,5 @@
-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 { Fragment, useEffect, useState } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import {
   CalendarContainer,
   CalendarHeader,
@@ -33,29 +31,62 @@ import calendar, {
   HOURS24,
   HOURS12,
   MINUTES,
+  WeekDay,
 } from "./calendarHelpers";
 import moment from "moment";
 
-export default function Calendar({
-  date = new Date(),
-  onDateChanged = () => {},
+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,
-}) {
-  const [dateState, setDateState] = useState({
-    current: new Date(),
-    month: 0,
-    year: 0,
+}: 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, pressureTimeout, dayTimeout;
+  let pressureTimer: ReturnType<typeof setInterval>;
+  let pressureTimeout: ReturnType<typeof setTimeout>;
+  let dayTimeout: ReturnType<typeof setTimeout>;
 
-  const addDateToState = (date) => {
+  const addDateToState = (date: Date) => {
     const isDateObject = isDate(date);
     const _date = isDateObject ? date : new Date();
     setDateState({
@@ -69,22 +100,11 @@ export default function Calendar({
 
   const getCalendarDates = () => {
     const { current, month, year } = dateState;
-    const calendarMonth = month || +current?.getMonth() + 1;
+    const calendarMonth = month || +(current?.getMonth() || 0) + 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 = () => {
@@ -95,30 +115,27 @@ export default function Calendar({
       Object.keys(CALENDAR_MONTHS)[Math.max(0, Math.min(month - 1, 11))];
     return (
       <CalendarHeader>
-        <ArrowLeftIcon
+        <ChevronLeftIcon
           onMouseDown={handlePrevious}
           onMouseUp={clearPressureTimer}
-          title="Previous Month"
+          // title="Previous Month"
         />
-
         <CalendarMonth>
           {monthname} {year}
         </CalendarMonth>
-
-        <ArrowRightIcon
+        <ChevronRightIcon
           onMouseDown={handleNext}
           onMouseUp={clearPressureTimer}
-          title="Next Month"
+          // 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) => {
+  const renderDayLabel = (day: string, index?: number) => {
     // Resolve the day of the week label from the WEEK_DAYS object map
-    const daylabel = WEEK_DAYS[day];
-
+    const daylabel = WEEK_DAYS[day as WeekDay];
     return (
       <CalendarDay key={daylabel} index={index}>
         {daylabel}
@@ -127,7 +144,7 @@ export default function Calendar({
   };
   // 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 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
@@ -140,22 +157,28 @@ export default function Calendar({
     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() };
+    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
-    const DateComponent = isCurrent
-      ? HighlightedCalendarDate
-      : isToday
-      ? TodayCalendarDate
-      : CalendarDate;
-    return (
-      <DateComponent
-        data-disabled={!checkValidRange(getDateISO(_date))}
-        key={getDateISO(_date)}
-        {...props}
-      >
+
+    return isCurrent ? (
+      <HighlightedCalendarDate {...props}>
         {_date.getDate()}
-      </DateComponent>
+      </HighlightedCalendarDate>
+    ) : isToday ? (
+      <TodayCalendarDate {...props}>{_date.getDate()}</TodayCalendarDate>
+    ) : (
+      <CalendarDate {...props}>{_date.getDate()}</CalendarDate>
     );
   };
 
@@ -163,27 +186,23 @@ export default function Calendar({
     const { hours } = dateState;
     const hoursArray = hourFormat === "24" ? HOURS24 : HOURS12;
     return hoursArray.map((hour, index) => {
-      const HourComponent =
-        parseInt(hour.value) === hours ? TimeItemActive : TimeItem;
+      const HourComponent = hour.value === hours ? TimeItemActive : TimeItem;
       return (
         <HourComponent
           key={hour.value}
-          value={hour.value}
+          // value={hour.value}
           onClick={(e) => {
             const newTime = moment(dateState.current)
               .hours(hour.value)
               .toDate();
             setDateState({
               ...dateState,
-              hours: parseInt(hour.value),
+              hours: hour.value,
               current: newTime,
             });
-            onDateChanged(newTime);
+            onChange(newTime);
           }}
         >
-          {/* {`${hour.label}${
-            hourFormat === "24" ? "" : index < 11 ? " AM" : " PM"
-          }`} */}
           {hour.label}
         </HourComponent>
       );
@@ -193,20 +212,21 @@ export default function Calendar({
   const renderMinutes = () => {
     const { minutes } = dateState;
     return MINUTES.map((minute) => {
-      const MinuteComponent =
-        parseInt(minute) === minutes ? TimeItemActive : TimeItem;
+      const MinuteComponent = minute === minutes ? TimeItemActive : TimeItem;
       return (
         <MinuteComponent
           key={minute}
-          value={minute}
+          // value={minute}
           onClick={(e) => {
-            const newTime = moment(dateState.current).minutes(minute).toDate();
+            const newTime = moment(dateState.current)
+              .minutes(Number(minute))
+              .toDate();
             setDateState({
               ...dateState,
-              minutes: parseInt(minute),
+              minutes: Number(minute),
               current: newTime,
             });
-            onDateChanged(newTime);
+            onChange(newTime);
           }}
         >
           {minute}
@@ -215,8 +235,17 @@ export default function Calendar({
     });
   };
 
+  type GotoDate = (
+    date: Date
+  ) => (
+    evt:
+      | React.MouseEvent<HTMLElement, MouseEvent>
+      | React.FormEvent<HTMLFormElement>
+      | undefined
+  ) => void;
+
   // new 2
-  const gotoDate = (date) => (evt) => {
+  const gotoDate: GotoDate = (date) => (evt) => {
     evt && evt.preventDefault();
     const { current } = dateState;
 
@@ -227,12 +256,11 @@ export default function Calendar({
       .toDate();
 
     !(current && isSameDay(newTime, current)) && addDateToState(newTime);
-    onDateChanged(newTime);
+    onChange(newTime);
   };
 
   const gotoPreviousMonth = () => {
     const { month, year } = dateState;
-    // this.setState(getPreviousMonth(month, year));
     const previousMonth = getPreviousMonth(month, year);
     setDateState({
       month: previousMonth.month,
@@ -245,7 +273,6 @@ export default function Calendar({
 
   const gotoNextMonth = () => {
     const { month, year } = dateState;
-    //this.setState(getNextMonth(month, year));
     const nextMonth = getNextMonth(month, year);
     setDateState({
       month: nextMonth.month,
@@ -275,43 +302,30 @@ export default function Calendar({
       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) => {
+  const handlePrevious = (evt: React.MouseEvent) => {
     evt && evt.preventDefault();
     const fn = evt.shiftKey ? gotoPreviousYear : gotoPreviousMonth;
     fn();
-    // handlePressure(fn);
   };
-  const handleNext = (evt) => {
+  const handleNext = (evt: React.MouseEvent) => {
     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;
+    if (value) {
+      addDateToState(value);
     }
-    addDateToState(date);
-  }, [date]);
+  }, [value]);
 
   // lifecycle methods
   useEffect(() => {
-    const now = new Date();
+    const now = new Date().valueOf();
     const tomorrow = new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000;
     const ms = tomorrow - now;
     dayTimeout = setTimeout(() => {
@@ -338,7 +352,7 @@ export default function Calendar({
         </CalendarGrid>
         {clearable && (
           <div style={{ textAlign: "center", marginTop: 3 }}>
-            <NoValueButton onClick={() => onDateChanged(null)}>
+            <NoValueButton onClick={() => onChange(null)}>
               Clear Date
             </NoValueButton>
           </div>
@@ -355,11 +369,8 @@ export default function Calendar({
       )}
     </MainContainer>
   );
-}
+};
 
 Calendar.displayName = "Calendar";
 
-Calendar.propTypes = {
-  date: PropTypes.instanceOf(Date),
-  onDateChanged: PropTypes.func,
-};
+export default Calendar;

package/{src/components/Calendar/CalendarStyles.js → Calendar/CalendarStyles.tsx}

@@ -6,7 +6,6 @@ export const MainContainer = styled.div`
 export const CalendarContainer = styled.div`
   font-size: 5px;
   width: 250px;
-  // border: 1px solid ${(props) => props.theme.palette.divider};
   border-radius: 4px;
   overflow: hidden;
 `;
@@ -28,7 +27,16 @@ export const CalendarMonth = styled.div`
   word-spacing: 5px;
   user-select: none;
 `;
-export const CalendarCell = styled.div`
+
+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;
@@ -36,53 +44,36 @@ export const CalendarCell = styled.div`
   user-select: none;
   border-radius: 5px;
   border: 1px solid transparent;
-  grid-column: ${(props) => (props.index % 7) + 1} / span 1;
+  grid-column: ${({ index = 0 }) => (index % 7) + 1} / span 1;
 `;
-export const CalendarDay = styled(CalendarCell)`
+
+export const CalendarDay = styled(CalendarCell)<CalendarCellProps>`
   font-weight: bold;
   font-size: 10px;
   border-radius: 0px;
   color: ${(props) => props.theme.palette.text.secondary};
-  //   border-top: 1px solid ${(props) => props.theme.palette.divider};
-  //   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
-  border-right: ${(props) =>
-    (props.index % 7) + 1 === 7
-      ? `none`
-      : `2px solid ${(props) => props.theme.palette.divider}`};
-`;
-export const CalendarDate = styled(CalendarCell)`
+`;
+
+export const CalendarDate = styled(CalendarCell)<CalendarCellProps>`
   font-weight: ${(props) => (props.inMonth ? 500 : 300)};
   font-size: 10px;
   cursor: pointer;
-  border-bottom: ${(props) =>
-    (props.index + 1) / 7 <= 5
-      ? `1px solid ${(props) => props.theme.palette.divider}`
-      : `1px solid transparent`};
-  border-right: ${(props) =>
-    (props.index % 7) + 1 === 7
-      ? `1px solid transparent`
-      : `1px solid ${(props) => props.theme.palette.divider}`};
-  border-left: 1px solid transparent;
-  border-top: 1px solid transparent;
-  color: ${(props) =>
-    props.inMonth
-      ? props.theme.palette.text.primary
-      : props.theme.palette.text.secondary};
-  grid-row: ${(props) => Math.floor(props.index / 7) + 2} / span 1;
+
+  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 {
-    // color: ${(props) => props.theme.palette.primary.main};
-    background: ${(props) => props.theme.palette.action.hover};
+    background: ${({ theme }) => theme.palette.action.hover};
   }
 
   &[data-disabled="true"] {
     pointer-events: none;
-    color: ${(props) => props.theme.palette.text.disabled};
+    color: ${({ theme }) => theme.palette.text.disabled};
   }
 `;
-export const HighlightedCalendarDate = styled(CalendarDate)`
-  //   color: ${(props) => props.theme.palette.primary.main} !important;
+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;
@@ -94,10 +85,11 @@ export const HighlightedCalendarDate = styled(CalendarDate)`
     left: -1px;
     width: calc(100% + 2px);
     height: calc(100% + 2px);
-    // border: 2px solid #06c;
   }
 `;
-export const TodayCalendarDate = styled(HighlightedCalendarDate)`
+export const TodayCalendarDate = styled(
+  HighlightedCalendarDate
+)<CalendarCellProps>`
   color: ${(props) => props.theme.palette.text.primary} !important;
   background: transparent !important;
   ::after {
@@ -136,7 +128,6 @@ export const TimeHeader = styled.div`
   padding: 5px;
   line-height: 2.3;
   height: 40px;
-  //   word-spacing: 5px;
   user-select: none;
 `;
 export const TimeHourSelect = styled.div`
@@ -156,7 +147,6 @@ export const TimeItem = styled.div`
   color: ${(props) => props.theme.palette.text.primary};
   text-align: center;
   padding: 5px;
-  //   word-spacing: 5px;
   user-select: none;
   cursor: pointer;
   transition: all 0.2s ease-out;

package/{src/components/Calendar/calendarHelpers.js → Calendar/calendarHelpers.ts}

@@ -11,7 +11,6 @@ export const HOURS24 = [...new Array(24)].map((n, index) => {
     value: index,
     label: index < 10 ? `0${index}` : `${index}`,
   };
-  // return index < 10 ? `0${index}` : `${index}`;
 });
 
 export const HOURS12 = [
@@ -43,6 +42,8 @@ export const WEEK_DAYS = {
   Saturday: "Sa",
 };
 
+export type WeekDay = keyof typeof WEEK_DAYS;
+
 // Calendar months names and short names
 export const CALENDAR_MONTHS = {
   January: "Jan",
@@ -64,7 +65,7 @@ export const CALENDAR_WEEKS = 6;
 
 // Pads a string value with leading zeroes(0) until length is reached
 // For example: zeroPad(5, 2) => "05"
-export const zeroPad = (value, length) => {
+export const zeroPad = (value: number, length: number) => {
   return `${value}`.padStart(length, "0");
 };
 
@@ -88,7 +89,7 @@ export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
 };
 
 // (bool) Checks if a value is a date - this is just a simple check
-export const isDate = (date) => {
+export const isDate = (date: Date) => {
   const isDate = Object.prototype.toString.call(date) === "[object Date]";
   const isValidDate = date && !Number.isNaN(date.valueOf());
 
@@ -96,7 +97,7 @@ export const isDate = (date) => {
 };
 
 // (bool) Checks if two date values are of the same month and year
-export const isSameMonth = (date, basedate = new Date()) => {
+export const isSameMonth = (date: Date, basedate = new Date()) => {
   if (!(isDate(date) && isDate(basedate))) return false;
   const basedateMonth = +basedate.getMonth() + 1;
   const basedateYear = basedate.getFullYear();
@@ -105,7 +106,7 @@ export const isSameMonth = (date, basedate = new Date()) => {
   return +basedateMonth === +dateMonth && +basedateYear === +dateYear;
 };
 // (bool) Checks if two date values are the same day
-export const isSameDay = (date, basedate = new Date()) => {
+export const isSameDay = (date: Date, basedate = new Date()) => {
   if (!(isDate(date) && isDate(basedate))) return false;
   const basedateDate = basedate.getDate();
   const basedateMonth = +basedate.getMonth() + 1;
@@ -121,7 +122,7 @@ export const isSameDay = (date, basedate = new Date()) => {
 };
 // (string) Formats the given date as YYYY-MM-DD
 // Months and Days are zero padded
-export const getDateISO = (date = new Date()) => {
+export const getDateISO = (date: Date) => {
   if (!isDate(date)) return null;
   return [
     date.getFullYear(),
@@ -132,7 +133,8 @@ export const getDateISO = (date = new Date()) => {
 // ({month, year}) Gets the month and year before the given month and year
 // For example: getPreviousMonth(1, 2000) => {month: 12, year: 1999}
 // while: getPreviousMonth(12, 2000) => {month: 11, year: 2000}
-export const getPreviousMonth = (month, year) => {
+
+export const getPreviousMonth = (month: number, year: number) => {
   const prevMonth = month > 1 ? month - 1 : 12;
   const prevMonthYear = month > 1 ? year : year - 1;
   return { month: prevMonth, year: prevMonthYear };
@@ -140,7 +142,7 @@ export const getPreviousMonth = (month, year) => {
 // ({month, year}) Gets the month and year after the given month and year
 // For example: getNextMonth(1, 2000) => {month: 2, year: 2000}
 // while: getNextMonth(12, 2000) => {month: 1, year: 2001}
-export const getNextMonth = (month, year) => {
+export const getNextMonth = (month: number, year: number) => {
   const nextMonth = month < 12 ? month + 1 : 1;
   const nextMonthYear = month < 12 ? year : year + 1;
   return { month: nextMonth, year: nextMonthYear };

package/Calendar/index.ts

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

package/CheckBox/CheckBox.tsx

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import { useState, useEffect, CSSProperties, MouseEvent } from "react";
+import CheckBoxOutlineBlankOutlinedIcon from "@mui/icons-material/CheckBoxOutlineBlankOutlined";
+import IndeterminateCheckBoxIcon from "@mui/icons-material/IndeterminateCheckBox";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+
+interface CheckBoxProps {
+  className?: string;
+  defaultValue?: boolean;
+  value?: boolean;
+  partialCheck?: boolean;
+  onChange?: (value: boolean) => void;
+  style?: CSSProperties;
+}
+
+const CheckBox = styled(
+  ({
+    className,
+    defaultValue = false,
+    value = false,
+    partialCheck = false,
+    onChange = () => {},
+  }: CheckBoxProps) => {
+    const [checkedState, setCheckedState] = useState(defaultValue);
+
+    const handleChange = (e: MouseEvent) => {
+      e.stopPropagation();
+      setCheckedState(!checkedState);
+      onChange(!checkedState);
+    };
+
+    useEffect(() => {
+      setCheckedState(value);
+    }, [value]);
+
+    const _checked = value === undefined ? checkedState : value;
+
+    return (
+      <div className={className} onClick={handleChange}>
+        {partialCheck === true ? (
+          <IndeterminateCheckBoxIcon className="checkbox partial" />
+        ) : _checked === true ? (
+          <CheckBoxIcon className="checkbox checked" />
+        ) : (
+          <CheckBoxOutlineBlankOutlinedIcon className="checkbox unchecked" />
+        )}
+      </div>
+    );
+  }
+)`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .checkbox {
+    color: ${(props) => props.theme.palette.primary.main};
+    font-size: 16px;
+  }
+`;
+
+export default CheckBox;

package/CheckBox/index.ts

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