@monolith-forensics/monolith-ui 1.0.0

package/src/DateBox.js

@@ -0,0 +1,77 @@
+import { useEffect } from "react";
+import { useState, useRef } from "react";
+import styled from "@emotion/styled";
+import moment from "moment";
+import SelectBox from "./SelectBox";
+import Calendar from "./Calendar/Calendar";
+
+const DateBox = styled(
+  ({
+    className,
+    labelName,
+    fieldName = Date.now(),
+    defaultValue = moment(),
+    onChange = () => {},
+    min,
+    max,
+    placeholder,
+    mask = "YYYY-MM-DD HH:mm:ss",
+    ...props
+  }) => {
+    const [stateValue, setStateValue] = useState(
+      defaultValue ? defaultValue : null
+    );
+    const selectBoxRef = useRef(null);
+
+    const hourFormat = mask.includes("HH") ? "24" : "12";
+
+    const handleChange = (data) => {
+      console.log(data);
+      //   selectBoxRef.current.close();
+      selectBoxRef.current.setValue(moment(data).format(mask));
+
+      // Apply Date mask
+      const date = moment(data).format(mask);
+      setStateValue(date);
+      onChange({
+        fieldName: fieldName,
+        newValue: moment(data).toISOString(),
+        previousValue: moment(data).toISOString(),
+      });
+    };
+
+    useEffect(() => {
+      console.log("Acquire Date", stateValue);
+    }, [stateValue]);
+
+    return (
+      <SelectBox
+        selectBoxRef={selectBoxRef}
+        fieldName={fieldName}
+        labelName={labelName}
+        placeholder="Select Date"
+        // allowTextInput={true}
+        defaultValue={moment(stateValue).format(mask)}
+        style={{ marginBottom: 10 }}
+        dropDownStyle={{
+          maxHeight: 350,
+          display: "flex",
+          justifyContent: "center",
+          padding: 0,
+          width: "fit-content",
+        }}
+      >
+        <Calendar
+          key={1}
+          date={stateValue && moment(stateValue).toDate()}
+          hourFormat={hourFormat}
+          onDateChanged={handleChange}
+        />
+      </SelectBox>
+    );
+  }
+)``;
+
+DateBox.displayName = "DateBox";
+
+export default DateBox;

package/src/Form.js

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useEffect } from "react";
+import { cloneElement } from "react";
+import styled from "@emotion/styled";
+
+const EditorTypes = [
+  "Input",
+  "TextArea",
+  "TextBox",
+  "TextAreaBox",
+  "NumberBox",
+  "SelectBox",
+  "DateBox",
+  "FormGroup",
+  "TagBox",
+];
+
+const Form = styled(
+  ({
+    className,
+    children,
+    defaultFormData,
+    onChange = () => {},
+    style = {},
+  }) => {
+    const [stateFormData, setStateFormData] = useState(defaultFormData || {});
+
+    const handleUpdate = (data) => {
+      const { fieldName, newValue } = data;
+      onChange({
+        ...stateFormData,
+        [fieldName]: newValue,
+      });
+      setStateFormData({
+        ...stateFormData,
+        [fieldName]: newValue,
+      });
+    };
+
+    useEffect(() => {
+      console.log(stateFormData);
+    }, [stateFormData]);
+
+    return (
+      <div className={className + " form-container"} style={{ ...style }}>
+        {children.map((child) => {
+          if (EditorTypes.includes(child.type.displayName)) {
+            return cloneElement(child, {
+              onChange: handleUpdate,
+              className: "grid-item",
+              defaultValue: stateFormData[child.props.fieldName],
+              stateFormData: stateFormData,
+            });
+          }
+          return cloneElement(child, { className: "grid-item" });
+        })}
+      </div>
+    );
+  }
+)`
+  display: grid;
+  grid-template-columns: repeat(2, calc(50% - 25px));
+  grid-gap: 10px;
+  grid-column-gap: 50px;
+  // grid-column-max-width: 300px;
+  margin: 10px 0;
+  .grid-item {
+    width: 100%;
+  }
+`;
+
+Form.displayName = "Form";
+
+export const FormGroup = styled(
+  ({
+    className,
+    children,
+    colSpan = 1,
+    colCount = 2,
+    columnGap = 20,
+    onChange = () => {},
+    stateFormData,
+    style = {},
+  }) => {
+    return (
+      <div
+        className={className}
+        style={{
+          gridTemplateColumns: `repeat(${colCount}, 1fr)`,
+          gridColumn: `span ${colSpan}`,
+          columnGap: `${columnGap}px`,
+          ...style,
+        }}
+      >
+        {children.map((child) => {
+          if (EditorTypes.includes(child.type.displayName)) {
+            return cloneElement(child, {
+              onChange: onChange,
+              className: "grid-item",
+              defaultValue: stateFormData[child.props.fieldName],
+            });
+          }
+          return cloneElement(child, { className: "grid-item" });
+        })}
+      </div>
+    );
+  }
+)`
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 20px;
+`;
+
+FormGroup.displayName = "FormGroup";
+
+export default Form;

package/src/Input.js

@@ -0,0 +1,160 @@
+import { useRef } from "react";
+import { useEffect, forwardRef, useState } from "react";
+import styled from "@emotion/styled";
+
+const Input = styled(
+  ({
+    className,
+    fieldName = Date.now(),
+    style = {},
+    inputStyle = {},
+    labelStyle = {},
+    placeholder = "",
+    labelName = null,
+    readOnly = false,
+    value = "",
+    defaultValue = "",
+    type = "text",
+    inputRef = useRef(null),
+    min = null,
+    max = null,
+    disabled = false,
+    autoFocus = false,
+    onChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    onKeyPress = () => {},
+    onKeyDown = () => {},
+  }) => {
+    const [inputValue, setInputValue] = useState(
+      !!defaultValue ? defaultValue : ""
+    );
+
+    const handleChange = (e) => {
+      onChange({
+        event: e,
+        fieldName: fieldName,
+        newValue: !!e.target.value ? e.target.value : null,
+        previousValue: inputValue,
+      });
+
+      setInputValue(e.target.value);
+    };
+
+    const handleBlur = (e) => {
+      onBlur({
+        event: e,
+        fieldName: fieldName,
+        newValue: !!e.target.value ? e.target.value : null,
+        previousValue: inputValue,
+      });
+    };
+
+    useEffect(() => {
+      setInputValue(defaultValue);
+    }, [defaultValue]);
+
+    return (
+      <div className={className} style={{ ...style }}>
+        {labelName && (
+          <InputLabel
+            labelName={labelName}
+            style={{ ...labelStyle }}
+          ></InputLabel>
+        )}
+        <input
+          ref={inputRef}
+          onChange={handleChange}
+          onFocus={onFocus}
+          onBlur={handleBlur}
+          onKeyPress={onKeyPress}
+          onKeyDown={onKeyDown}
+          type={type}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          value={inputValue}
+          autoFocus={autoFocus}
+          min={min}
+          max={999}
+          // style={{ ...inputStyle }}
+        ></input>
+      </div>
+    );
+  }
+)((props) => ({
+  "& input": {
+    fontSize: props?.inputStyle?.fontSize || 13,
+    border:
+      props?.inputStyle?.border ||
+      `1px solid ${props.theme.palette.input.border}`,
+    color: props.theme.palette.text.primary,
+    outline: "none",
+    padding: props?.inputStyle?.padding || "8px 8px",
+    width: props?.inputStyle?.width || "100%",
+    backgroundColor:
+      props?.inputStyle?.backgroundColor ||
+      props.theme.palette.input.background,
+    borderRadius: props?.inputStyle?.borderRadius || 5,
+    transition: "border 0.1s ease-in-out",
+    "::placeholder": {
+      color: props.theme.palette.input.placeholder,
+    },
+    "&:hover": {
+      border:
+        props?.inputStyle?.hover?.border ||
+        "1px solid " + props.theme.palette.input.border,
+    },
+    "&:focus": {
+      border: `1px solid ${props.theme.palette.primary.main}`,
+    },
+  },
+}));
+
+const test = `
+  // width: 100%;
+  input {
+    font-size: ${(props) => props?.inputStyle?.fontSize || "13px"};
+    border: ${(props) =>
+      props?.inputStyle?.border ||
+      "1px solid " + props.theme.palette.input.border};
+    color: ${(props) => props.theme.palette.text.primary};
+    outline: none;
+    padding: ${(props) => props?.inputStyle?.padding || "8px 8px"};
+    width: ${(props) => props?.inputStyle?.width || "100%"};
+    background-color: ${(props) =>
+      props?.inputStyle?.backgroundColor ||
+      props.theme.palette.input.background};
+    border-radius: 5px;
+    transition: border 0.1s ease-in-out;
+    ::placeholder {
+      color: ${(props) => props.theme.palette.input.placeholder};
+    }
+    &:hover {
+      border: ${(props) =>
+        props?.inputStyle?.hover?.border ||
+        "1px solid " + props.theme.palette.input.border};
+    }
+    &:focus {
+      border: 1px solid ${(props) => props.theme.palette.primary.main};
+    }
+  }
+`;
+
+Input.displayName = "Input";
+
+export const InputLabel = styled(
+  ({ className, style = {}, labelName = "" }) => {
+    return (
+      <div className={className} style={{ ...style }}>
+        {labelName}
+      </div>
+    );
+  }
+)`
+  color: ${(props) => props.theme.palette.text.secondary};
+  margin-bottom: 5px;
+`;
+
+InputLabel.displayName = "InputLabel";
+
+export default Input;

package/src/Menu.js

@@ -0,0 +1,196 @@
+import styled from "@emotion/styled";
+import { CSSTransition } from "react-transition-group";
+import { useMemo } from "react";
+import { cloneElement } from "react";
+import { useRef } from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+
+const Menu = styled(
+  ({
+    className,
+    children,
+    anchorEl,
+    open = false,
+    onClose = () => {},
+    onItemSelect = () => {},
+    dropDownStyle = {},
+  }) => {
+    const listBoxRef = useRef(null);
+    const [show, setShow] = useState(open);
+
+    function alignMenu() {
+      const { left, right, top, width, height } =
+        anchorEl.getBoundingClientRect();
+      const { innerWidth, innerHeight, screenX, screenY } = window;
+      const { offsetWidth, offsetHeight } = listBoxRef.current;
+
+      const x = left + offsetWidth > innerWidth ? right - offsetWidth : left;
+      const y =
+        top + height + offsetHeight > innerHeight
+          ? top - offsetHeight
+          : top + height;
+
+      listBoxRef.current.style.left = `${x}px`;
+      listBoxRef.current.style.top = `${y}px`;
+    }
+
+    //disable scroll events when menu is open
+    useEffect(() => {
+      if (open) {
+        document.addEventListener("scroll", handleScroll, true);
+      } else {
+        document.removeEventListener("scroll", handleScroll, true);
+      }
+    }, [open]);
+
+    const handleScroll = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    // Close dropdown when clicked outside of the dropdown
+    useEffect(() => {
+      function handleClickOutside(event) {
+        if (listBoxRef.current && !listBoxRef.current.contains(event.target)) {
+          setShow(false);
+          onClose();
+        }
+      }
+      // Bind the event listener
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+
+    useEffect(() => {
+      setShow(open);
+    }, [open]);
+
+    if (!children || children.length === 0) return null;
+
+    return (
+      <>
+        <CSSTransition
+          in={show}
+          nodeRef={listBoxRef}
+          timeout={300}
+          classNames="select-box-options"
+          unmountOnExit
+          onEnter={() => alignMenu()}
+          // onExited={() => setShowButton(true)}
+        >
+          <div className={className}>
+            <div
+              ref={listBoxRef}
+              className={"select-box-options"}
+              style={{ ...dropDownStyle }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {children?.length
+                ? children.map((child) =>
+                    cloneElement(child, {
+                      key: child.props.key,
+                      onItemSelect: onItemSelect,
+                    })
+                  )
+                : cloneElement(children, {
+                    // key: children.props.key,
+                    onItemSelect: onItemSelect,
+                  })}
+            </div>
+            <div
+              className="select-box-backdrop"
+              onClick={(e) => e.stopPropagation()}
+            ></div>
+          </div>
+        </CSSTransition>
+      </>
+    );
+  }
+)`
+  .select-box-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 4000;
+    width: 100vw;
+    height: 100vh;
+    cursor: default;
+    // background-color: rgba(0, 0, 0, 0.5);
+  }
+  .select-box-options {
+    position: fixed;
+    min-width: 150px;
+    min-height: 100px;
+    max-height: 325px;
+    overflow-y: auto;
+    background-color: ${(props) => props.theme.palette.background.default};
+    // background-color: ${(props) => props.theme.palette.input.background};
+    border: 1px solid ${(props) => props.theme.palette.divider};
+    border-radius: 5px;
+    z-index: 4001;
+    padding: 5px;
+    box-shadow: 2px 3px 10px 0px rgba(0, 0, 0, 0.2);
+  }
+  .select-box-options-enter {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  .select-box-options-enter-active {
+    opacity: 1;
+    transform: translateY(0);
+    transition: opacity 100ms, transform 100ms;
+  }
+  .select-box-options-exit {
+    opacity: 1;
+  }
+  .select-box-options-exit-active {
+    opacity: 0;
+    transform: scale(0.9);
+    transition: opacity 100ms, transform 100ms;
+  }
+`;
+
+Menu.displayName = "Menu";
+
+export const MenuItem = styled(
+  ({
+    className,
+    children,
+    data = null,
+    onItemSelect = () => {},
+    style = {},
+  }) => {
+    return (
+      <div
+        className={`${className} select-box-item`}
+        style={{ ...style }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onItemSelect(data);
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+)`
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  padding: 5px;
+  font-weight: normal;
+  font-size: 12px;
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
+`;
+
+MenuItem.displayName = "MenuItem";
+
+export default Menu;

package/src/NumberBox.js

@@ -0,0 +1,121 @@
+import { useRef } from "react";
+import styled from "@emotion/styled";
+import Input from "./Input";
+import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined";
+import ArrowDropUpOutlinedIcon from "@mui/icons-material/ArrowDropUpOutlined";
+import { useState } from "react";
+import { useEffect } from "react";
+
+const NumberBox = styled(
+  ({
+    className,
+    fieldName = Date.now(),
+    defaultValue,
+    onChange = () => {},
+    min,
+    max,
+    placeholder,
+    inputStyle = {},
+    showArrows = true,
+    ...props
+  }) => {
+    const numberBoxRef = useRef(null);
+    const [stateValue, setStateValue] = useState(defaultValue || 0);
+
+    const handleIncrease = () => {
+      numberBoxRef.current.stepUp();
+      onChange({
+        fieldName: fieldName,
+        newValue: numberBoxRef.current.value,
+        previousValue: stateValue,
+      });
+      setStateValue(numberBoxRef.current.value);
+    };
+
+    const handleDecrease = () => {
+      numberBoxRef.current.stepDown();
+      onChange({
+        fieldName: fieldName,
+        newValue: numberBoxRef.current.value,
+        previousValue: stateValue,
+      });
+      setStateValue(numberBoxRef.current.value);
+    };
+
+    useEffect(() => {
+      const inputBox = numberBoxRef.current;
+
+      const validateNumber = (e) => {
+        e.preventDefault();
+        if (e.target.value < min) {
+          e.target.value = min;
+        } else if (e.target.value > max) {
+          e.target.value = max;
+        }
+      };
+
+      inputBox.addEventListener("keydown", validateNumber);
+      inputBox.addEventListener("change", validateNumber);
+
+      return () => {
+        inputBox.removeEventListener("keydown", validateNumber);
+        inputBox.removeEventListener("change", validateNumber);
+      };
+    }, []);
+
+    return (
+      <div className={className}>
+        <Input
+          inputRef={numberBoxRef}
+          labelName={props.labelName}
+          type={"number"}
+          placeholder={placeholder}
+          min={min}
+          max={max}
+          defaultValue={stateValue}
+          inputStyle={inputStyle}
+        ></Input>
+        {showArrows && (
+          <div className="select-box-arrow">
+            <div style={{ position: "absolute" }}>
+              <div style={{ height: 15 }} onClick={handleIncrease}>
+                <ArrowDropUpOutlinedIcon style={{ position: "relative" }} />
+              </div>
+              <div style={{ height: 15 }} onClick={handleDecrease}>
+                <ArrowDropDownOutlinedIcon style={{ position: "relative" }} />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+)`
+  position: relative;
+  // hide arrows
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input[type="number"] {
+    -moz-appearance: textfield;
+  }
+  .select-box-arrow {
+    position: absolute;
+    height: 30px;
+    right: 8px;
+    top: 23px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    color: ${(props) => props.theme.palette.text.secondary};
+    cursor: pointer;
+  }
+`;
+
+NumberBox.displayName = "NumberBox";
+
+export default NumberBox;