@monolith-forensics/monolith-ui 1.0.12 → 1.1.1

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

@@ -1,25 +1,29 @@
-import styled from "styled-components";
-
-export const MainContainer = styled.div`
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoValueButton = exports.TimeItemActive = exports.TimeItem = exports.TimeMinuteSelect = exports.TimeHourSelect = exports.TimeHeader = exports.TimePickerContainer = exports.TimeContainer = exports.TodayCalendarDate = exports.HighlightedCalendarDate = exports.CalendarDate = exports.CalendarDay = exports.CalendarCell = exports.CalendarMonth = exports.CalendarGrid = exports.CalendarHeader = exports.CalendarContainer = exports.MainContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.MainContainer = styled_components_1.default.div `
   display: flex;
 `;
-export const CalendarContainer = styled.div`
+exports.CalendarContainer = styled_components_1.default.div `
   font-size: 5px;
   width: 250px;
-  // border: 1px solid ${(props) => props.theme.palette.divider};
   border-radius: 4px;
   overflow: hidden;
 `;
-export const CalendarHeader = styled.div`
+exports.CalendarHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-export const CalendarGrid = styled.div`
+exports.CalendarGrid = styled_components_1.default.div `
   display: grid;
   grid-template: repeat(7, auto) / repeat(7, auto);
 `;
-export const CalendarMonth = styled.div`
+exports.CalendarMonth = styled_components_1.default.div `
   font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
@@ -28,7 +32,7 @@ export const CalendarMonth = styled.div`
   word-spacing: 5px;
   user-select: none;
 `;
-export const CalendarCell = styled.div`
+exports.CalendarCell = styled_components_1.default.div `
   text-align: center;
   align-self: center;
   letter-spacing: 0.1rem;
@@ -36,53 +40,33 @@ 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)`
+exports.CalendarDay = (0, styled_components_1.default)(exports.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)`
+`;
+exports.CalendarDate = (0, styled_components_1.default)(exports.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;
+
+  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;
+exports.HighlightedCalendarDate = (0, styled_components_1.default)(exports.CalendarDate) `
   color: white !important;
   background: ${(props) => props.theme.palette.primary.main} !important;
   border: 1px solid ${(props) => props.theme.palette.primary.main} !important;
@@ -94,10 +78,9 @@ export const HighlightedCalendarDate = styled(CalendarDate)`
     left: -1px;
     width: calc(100% + 2px);
     height: calc(100% + 2px);
-    // border: 2px solid #06c;
   }
 `;
-export const TodayCalendarDate = styled(HighlightedCalendarDate)`
+exports.TodayCalendarDate = (0, styled_components_1.default)(exports.HighlightedCalendarDate) `
   color: ${(props) => props.theme.palette.text.primary} !important;
   background: transparent !important;
   ::after {
@@ -114,7 +97,7 @@ export const TodayCalendarDate = styled(HighlightedCalendarDate)`
     background: ${(props) => props.theme.palette.action.hover} !important;
   }
 `;
-export const TimeContainer = styled.div`
+exports.TimeContainer = styled_components_1.default.div `
   font-size: 12px;
   width: 150px;
   height: 100%;
@@ -123,11 +106,11 @@ export const TimeContainer = styled.div`
   border-radius: 4px;
   overflow: hidden;
 `;
-export const TimePickerContainer = styled.div`
+exports.TimePickerContainer = styled_components_1.default.div `
   display: flex;
   height: 100%;
 `;
-export const TimeHeader = styled.div`
+exports.TimeHeader = styled_components_1.default.div `
   font-weight: 500;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.primary};
@@ -136,27 +119,25 @@ export const TimeHeader = styled.div`
   padding: 5px;
   line-height: 2.3;
   height: 40px;
-  //   word-spacing: 5px;
   user-select: none;
 `;
-export const TimeHourSelect = styled.div`
+exports.TimeHourSelect = styled_components_1.default.div `
   border-right: 1px solid ${(props) => props.theme.palette.divider};
   width: 50%;
   height: 250px;
   overflow-y: auto;
 `;
-export const TimeMinuteSelect = styled.div`
+exports.TimeMinuteSelect = styled_components_1.default.div `
   width: 50%;
   height: 250px;
   overflow-y: auto;
 `;
-export const TimeItem = styled.div`
+exports.TimeItem = styled_components_1.default.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;
@@ -164,15 +145,14 @@ export const TimeItem = styled.div`
     background: ${(props) => props.theme.palette.action.hover};
   }
 `;
-export const TimeItemActive = styled(TimeItem)`
+exports.TimeItemActive = (0, styled_components_1.default)(exports.TimeItem) `
   background: ${(props) => props.theme.palette.primary.main};
   color: white;
   &:hover {
     background: ${(props) => props.theme.palette.primary.main};
   }
 `;
-
-export const NoValueButton = styled.button`
+exports.NoValueButton = styled_components_1.default.button `
   font-weight: normal;
   font-size: 12px;
   color: ${(props) => props.theme.palette.text.secondary};

package/dist/Calendar/calendarHelpers.d.ts

@@ -0,0 +1,53 @@
+export declare const THIS_YEAR: number;
+export declare const THIS_MONTH: number;
+export declare const HOURS24: {
+    value: number;
+    label: string;
+}[];
+export declare const HOURS12: {
+    value: number;
+    label: string;
+}[];
+export declare const MINUTES: (string | number)[];
+export declare const WEEK_DAYS: {
+    Sunday: string;
+    Monday: string;
+    Tuesday: string;
+    Wednesday: string;
+    Thursday: string;
+    Friday: string;
+    Saturday: string;
+};
+export type WeekDay = keyof typeof WEEK_DAYS;
+export declare const CALENDAR_MONTHS: {
+    January: string;
+    February: string;
+    March: string;
+    April: string;
+    May: string;
+    June: string;
+    July: string;
+    August: string;
+    September: string;
+    October: string;
+    November: string;
+    December: string;
+};
+export declare const CALENDAR_WEEKS = 6;
+export declare const zeroPad: (value: number, length: number) => string;
+export declare const getMonthDays: (month?: number, year?: number) => 29 | 28 | 30 | 31;
+export declare const getMonthFirstDay: (month?: number, year?: number) => number;
+export declare const isDate: (date: Date) => boolean;
+export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;
+export declare const isSameDay: (date: Date, basedate?: Date) => boolean;
+export declare const getDateISO: (date: Date) => string | null;
+export declare const getPreviousMonth: (month: number, year: number) => {
+    month: number;
+    year: number;
+};
+export declare const getNextMonth: (month: number, year: number) => {
+    month: number;
+    year: number;
+};
+declare const calendarBuilder: (month?: number, year?: number) => (string | number)[][];
+export default calendarBuilder;

package/dist/Calendar/calendarHelpers.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextMonth = exports.getPreviousMonth = exports.getDateISO = exports.isSameDay = exports.isSameMonth = exports.isDate = exports.getMonthFirstDay = exports.getMonthDays = exports.zeroPad = exports.CALENDAR_WEEKS = exports.CALENDAR_MONTHS = exports.WEEK_DAYS = exports.MINUTES = exports.HOURS12 = exports.HOURS24 = exports.THIS_MONTH = exports.THIS_YEAR = void 0;
+// (int) The current year
+exports.THIS_YEAR = +new Date().getFullYear();
+// (int) The current month starting from 1 - 12
+// 1 => January, 12 => December
+exports.THIS_MONTH = +new Date().getMonth() + 1;
+// Week days names and shortnames
+exports.HOURS24 = [...new Array(24)].map((n, index) => {
+    return {
+        value: index,
+        label: index < 10 ? `0${index}` : `${index}`,
+    };
+});
+exports.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`,
+        };
+    }),
+];
+exports.MINUTES = new Array(60).fill(0).map((n, index) => {
+    return index < 10 ? `0${index}` : index;
+});
+exports.WEEK_DAYS = {
+    Sunday: "Su",
+    Monday: "Mo",
+    Tuesday: "Tu",
+    Wednesday: "We",
+    Thursday: "Th",
+    Friday: "Fr",
+    Saturday: "Sa",
+};
+// Calendar months names and short names
+exports.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
+exports.CALENDAR_WEEKS = 6;
+// Pads a string value with leading zeroes(0) until length is reached
+// For example: zeroPad(5, 2) => "05"
+const zeroPad = (value, length) => {
+    return `${value}`.padStart(length, "0");
+};
+exports.zeroPad = zeroPad;
+// (int) Number days in a month for a given year from 28 - 31
+const getMonthDays = (month = exports.THIS_MONTH, year = exports.THIS_YEAR) => {
+    const months30 = [4, 6, 9, 11];
+    const leapYear = year % 4 === 0;
+    return month === 2
+        ? leapYear
+            ? 29
+            : 28
+        : months30.includes(month)
+            ? 30
+            : 31;
+};
+exports.getMonthDays = getMonthDays;
+// (int) First day of the month for a given year from 1 - 7
+// 1 => Sunday, 7 => Saturday
+const getMonthFirstDay = (month = exports.THIS_MONTH, year = exports.THIS_YEAR) => {
+    return +new Date(`${year}-${(0, exports.zeroPad)(month, 2)}-01`).getDay() + 1;
+};
+exports.getMonthFirstDay = getMonthFirstDay;
+// (bool) Checks if a value is a date - this is just a simple check
+const isDate = (date) => {
+    const isDate = Object.prototype.toString.call(date) === "[object Date]";
+    const isValidDate = date && !Number.isNaN(date.valueOf());
+    return isDate && isValidDate;
+};
+exports.isDate = isDate;
+// (bool) Checks if two date values are of the same month and year
+const isSameMonth = (date, basedate = new Date()) => {
+    if (!((0, exports.isDate)(date) && (0, exports.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;
+};
+exports.isSameMonth = isSameMonth;
+// (bool) Checks if two date values are the same day
+const isSameDay = (date, basedate = new Date()) => {
+    if (!((0, exports.isDate)(date) && (0, exports.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);
+};
+exports.isSameDay = isSameDay;
+// (string) Formats the given date as YYYY-MM-DD
+// Months and Days are zero padded
+const getDateISO = (date) => {
+    if (!(0, exports.isDate)(date))
+        return null;
+    return [
+        date.getFullYear(),
+        (0, exports.zeroPad)(+date.getMonth() + 1, 2),
+        (0, exports.zeroPad)(+date.getDate(), 2),
+    ].join("-");
+};
+exports.getDateISO = getDateISO;
+// ({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}
+const getPreviousMonth = (month, year) => {
+    const prevMonth = month > 1 ? month - 1 : 12;
+    const prevMonthYear = month > 1 ? year : year - 1;
+    return { month: prevMonth, year: prevMonthYear };
+};
+exports.getPreviousMonth = getPreviousMonth;
+// ({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}
+const getNextMonth = (month, year) => {
+    const nextMonth = month < 12 ? month + 1 : 1;
+    const nextMonthYear = month < 12 ? year : year + 1;
+    return { month: nextMonth, year: nextMonthYear };
+};
+exports.getNextMonth = getNextMonth;
+// 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 = exports.THIS_MONTH, year = exports.THIS_YEAR) => {
+    // Get number of days in the month and the month's first day
+    const monthDays = (0, exports.getMonthDays)(month, year);
+    const monthFirstDay = (0, exports.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 = exports.CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
+    // Get the previous and next months and years
+    const { month: prevMonth, year: prevMonthYear } = (0, exports.getPreviousMonth)(month, year);
+    const { month: nextMonth, year: nextMonthYear } = (0, exports.getNextMonth)(month, year);
+    // Get number of days in previous month
+    const prevMonthDays = (0, exports.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, (0, exports.zeroPad)(prevMonth, 2), (0, exports.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, (0, exports.zeroPad)(month, 2), (0, exports.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, (0, exports.zeroPad)(nextMonth, 2), (0, exports.zeroPad)(day, 2)];
+    });
+    // Combines all dates from previous, current and next months
+    return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];
+};
+exports.default = calendarBuilder;

package/dist/Calendar/index.d.ts

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

package/dist/Calendar/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Calendar_1 = require("./Calendar");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });

package/dist/CheckBox/CheckBox.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from "react";
+interface CheckBoxProps {
+    className?: string;
+    defaultValue?: boolean;
+    value?: boolean;
+    partialCheck?: boolean;
+    onChange?: (value: boolean) => void;
+    style?: CSSProperties;
+}
+declare const CheckBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<CheckBoxProps, never>> & string & Omit<({ className, defaultValue, value, partialCheck, onChange, }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default CheckBox;

package/dist/CheckBox/CheckBox.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("react");
+const CheckBoxOutlineBlankOutlined_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlankOutlined"));
+const IndeterminateCheckBox_1 = __importDefault(require("@mui/icons-material/IndeterminateCheckBox"));
+const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
+const CheckBox = (0, styled_components_1.default)(({ className, defaultValue = false, value = false, partialCheck = false, onChange = () => { }, }) => {
+    const [checkedState, setCheckedState] = (0, react_1.useState)(defaultValue);
+    const handleChange = (e) => {
+        e.stopPropagation();
+        setCheckedState(!checkedState);
+        onChange(!checkedState);
+    };
+    (0, react_1.useEffect)(() => {
+        setCheckedState(value);
+    }, [value]);
+    const _checked = value === undefined ? checkedState : value;
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, onClick: handleChange, children: partialCheck === true ? ((0, jsx_runtime_1.jsx)(IndeterminateCheckBox_1.default, { className: "checkbox partial" })) : _checked === true ? ((0, jsx_runtime_1.jsx)(CheckBox_1.default, { className: "checkbox checked" })) : ((0, jsx_runtime_1.jsx)(CheckBoxOutlineBlankOutlined_1.default, { className: "checkbox unchecked" })) }));
+}) `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .checkbox {
+    color: ${(props) => props.theme.palette.primary.main};
+    font-size: 16px;
+  }
+`;
+exports.default = CheckBox;

package/dist/CheckBox/index.d.ts

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

package/dist/CheckBox/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var CheckBox_1 = require("./CheckBox");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(CheckBox_1).default; } });

package/dist/DateInput/DateInput.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { Size, Variant } from "../core";
+interface DateInputProps {
+    className?: string;
+    defaultValue?: string | null;
+    format?: string;
+    label?: string;
+    description?: string;
+    arrow?: boolean;
+    size?: Size;
+    variant?: Variant;
+    clearable?: boolean;
+    required?: boolean;
+    onChange?: (value: string | null) => void;
+    min?: Date;
+    max?: Date;
+    error?: string;
+    width?: string;
+    enableCalendar?: boolean;
+    utc?: boolean;
+    closeOnSelect?: boolean;
+}
+declare const DateInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DateInputProps, never>> & string & Omit<({ className, defaultValue, format, label, description, arrow, size, variant, clearable, required, onChange, min, max, error, enableCalendar, utc, closeOnSelect, }: DateInputProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
+export default DateInput;