@monolith-forensics/monolith-ui 1.0.0

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@monolith-forensics/monolith-ui",
+  "version": "1.0.0",
+  "description": "UI used for Monolith Apps",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Monolith-Forensics/monolith-ui.git"
+  },
+  "author": "Matt Danner",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Monolith-Forensics/monolith-ui/issues"
+  },
+  "homepage": "https://github.com/Monolith-Forensics/monolith-ui#readme"
+}

package/src/Calendar/Calendar.js

@@ -0,0 +1,329 @@
+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,
+} 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",
+}) {
+  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;
+
+  useEffect(() => {
+    addDateToState(date);
+  }, []);
+
+  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);
+  };
+
+  //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 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(dateState.hours)
+      .minutes(dateState.minutes)
+      .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);
+  };
+
+  // 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>
+      </CalendarContainer>
+      <TimeContainer>
+        <TimeHeader>Select Time</TimeHeader>
+        <TimePickerContainer>
+          <TimeHourSelect>{renderHours()}</TimeHourSelect>
+          <TimeMinuteSelect>{renderMinutes()}</TimeMinuteSelect>
+        </TimePickerContainer>
+      </TimeContainer>
+    </MainContainer>
+  );
+}
+
+Calendar.propTypes = {
+  date: PropTypes.instanceOf(Date),
+  onDateChanged: PropTypes.func,
+};

package/src/Calendar/CalendarStyles.js

@@ -0,0 +1,168 @@
+import styled from "@emotion/styled";
+
+export const MainContainer = styled.div`
+  display: flex;
+`;
+export const CalendarContainer = styled.div`
+  font-size: 5px;
+  width: 275px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  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;
+`;
+export const CalendarCell = styled.div`
+  text-align: center;
+  align-self: center;
+  letter-spacing: 0.1rem;
+  padding: 10px;
+  user-select: none;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  grid-column: ${(props) => (props.index % 7) + 1} / span 1;
+`;
+export const CalendarDay = styled(CalendarCell)`
+  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)`
+  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;
+  transition: all 0.2s ease-out;
+  border-radius: 5px;
+  :hover {
+    // color: ${(props) => props.theme.palette.primary.main};
+    background: ${(props) => props.theme.palette.action.hover};
+  }
+`;
+export const HighlightedCalendarDate = styled(CalendarDate)`
+  //   color: ${(props) => props.theme.palette.primary.main} !important;
+  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);
+    // border: 2px solid #06c;
+  }
+`;
+export const TodayCalendarDate = styled(HighlightedCalendarDate)`
+  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;
+  //   word-spacing: 5px;
+  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;
+  //   word-spacing: 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};
+  }
+`;

package/src/Calendar/calendarHelpers.js

@@ -0,0 +1,194 @@
+// (int) The current year
+export const THIS_YEAR = +new Date().getFullYear();
+
+// (int) The current month starting from 1 - 12
+// 1 => January, 12 => December
+export const THIS_MONTH = +new Date().getMonth() + 1;
+// Week days names and shortnames
+
+export const HOURS24 = [...new Array(24)].map((n, index) => {
+  return {
+    value: index,
+    label: index < 10 ? `0${index}` : `${index}`,
+  };
+  // return index < 10 ? `0${index}` : `${index}`;
+});
+
+export const HOURS12 = [
+  ...[...new Array(12)].map((n, index) => {
+    return {
+      value: index,
+      label: index < 10 ? `0${index} AM` : `${index} AM`,
+    };
+  }),
+  ...[...new Array(12)].map((n, index) => {
+    return {
+      value: index + 12,
+      label: index < 10 ? `0${index} PM` : `${index} PM`,
+    };
+  }),
+];
+
+export const MINUTES = new Array(60).fill(0).map((n, index) => {
+  return index < 10 ? `0${index}` : index;
+});
+
+export const WEEK_DAYS = {
+  Sunday: "Su",
+  Monday: "Mo",
+  Tuesday: "Tu",
+  Wednesday: "We",
+  Thursday: "Th",
+  Friday: "Fr",
+  Saturday: "Sa",
+};
+
+// Calendar months names and short names
+export const CALENDAR_MONTHS = {
+  January: "Jan",
+  February: "Feb",
+  March: "Mar",
+  April: "Apr",
+  May: "May",
+  June: "Jun",
+  July: "Jul",
+  August: "Aug",
+  September: "Sep",
+  October: "Oct",
+  November: "Nov",
+  December: "Dec",
+};
+
+// Weeks displayed on calendar
+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) => {
+  return `${value}`.padStart(length, "0");
+};
+
+// (int) Number days in a month for a given year from 28 - 31
+export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
+  const months30 = [4, 6, 9, 11];
+  const leapYear = year % 4 === 0;
+  return month === 2
+    ? leapYear
+      ? 29
+      : 28
+    : months30.includes(month)
+    ? 30
+    : 31;
+};
+
+// (int) First day of the month for a given year from 1 - 7
+// 1 => Sunday, 7 => Saturday
+export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
+  return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
+};
+
+// (bool) Checks if a value is a date - this is just a simple check
+export const isDate = (date) => {
+  const isDate = Object.prototype.toString.call(date) === "[object Date]";
+  const isValidDate = date && !Number.isNaN(date.valueOf());
+
+  return isDate && isValidDate;
+};
+
+// (bool) Checks if two date values are of the same month and year
+export const isSameMonth = (date, basedate = new Date()) => {
+  if (!(isDate(date) && isDate(basedate))) return false;
+  const basedateMonth = +basedate.getMonth() + 1;
+  const basedateYear = basedate.getFullYear();
+  const dateMonth = +date.getMonth() + 1;
+  const dateYear = date.getFullYear();
+  return +basedateMonth === +dateMonth && +basedateYear === +dateYear;
+};
+// (bool) Checks if two date values are the same day
+export const isSameDay = (date, basedate = new Date()) => {
+  if (!(isDate(date) && isDate(basedate))) return false;
+  const basedateDate = basedate.getDate();
+  const basedateMonth = +basedate.getMonth() + 1;
+  const basedateYear = basedate.getFullYear();
+  const dateDate = date.getDate();
+  const dateMonth = +date.getMonth() + 1;
+  const dateYear = date.getFullYear();
+  return (
+    +basedateDate === +dateDate &&
+    +basedateMonth === +dateMonth &&
+    +basedateYear === +dateYear
+  );
+};
+// (string) Formats the given date as YYYY-MM-DD
+// Months and Days are zero padded
+export const getDateISO = (date = new Date()) => {
+  if (!isDate(date)) return null;
+  return [
+    date.getFullYear(),
+    zeroPad(+date.getMonth() + 1, 2),
+    zeroPad(+date.getDate(), 2),
+  ].join("-");
+};
+// ({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) => {
+  const prevMonth = month > 1 ? month - 1 : 12;
+  const prevMonthYear = month > 1 ? year : year - 1;
+  return { month: prevMonth, year: prevMonthYear };
+};
+// ({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) => {
+  const nextMonth = month < 12 ? month + 1 : 1;
+  const nextMonthYear = month < 12 ? year : year + 1;
+  return { month: nextMonth, year: nextMonthYear };
+};
+
+// Calendar builder for a month in the specified year
+// Returns an array of the calendar dates.
+// Each calendar date is represented as an array => [YYYY, MM, DD]
+const calendarBuilder = (month = THIS_MONTH, year = THIS_YEAR) => {
+  // Get number of days in the month and the month's first day
+
+  const monthDays = getMonthDays(month, year);
+  const monthFirstDay = getMonthFirstDay(month, year);
+  // Get number of days to be displayed from previous and next months
+  // These ensure a total of 42 days (6 weeks) displayed on the calendar
+
+  const daysFromPrevMonth = monthFirstDay - 1;
+  const daysFromNextMonth =
+    CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
+  // Get the previous and next months and years
+
+  const { month: prevMonth, year: prevMonthYear } = getPreviousMonth(
+    month,
+    year
+  );
+  const { month: nextMonth, year: nextMonthYear } = getNextMonth(month, year);
+  // Get number of days in previous month
+  const prevMonthDays = getMonthDays(prevMonth, prevMonthYear);
+  // Builds dates to be displayed from previous month
+
+  const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
+    const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
+    return [prevMonthYear, zeroPad(prevMonth, 2), zeroPad(day, 2)];
+  });
+  // Builds dates to be displayed from current month
+
+  const thisMonthDates = [...new Array(monthDays)].map((n, index) => {
+    const day = index + 1;
+    return [year, zeroPad(month, 2), zeroPad(day, 2)];
+  });
+  // Builds dates to be displayed from next month
+
+  const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
+    const day = index + 1;
+    return [nextMonthYear, zeroPad(nextMonth, 2), zeroPad(day, 2)];
+  });
+  // Combines all dates from previous, current and next months
+  return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];
+};
+
+export default calendarBuilder;