@monolith-forensics/monolith-ui 1.0.0

package/src/OptionButton.js

@@ -0,0 +1,89 @@
+import { useTheme } from "@mui/material";
+import { useState } from "react";
+import TaskButton from "../../../Cases/CaseTasks/components/TaskButton";
+import Menu, { MenuItem } from "./Menu";
+
+const OptionButton = ({ value, type, data = [], dataField, displayField }) => {
+  const theme = useTheme();
+  const [currentValue, setCurrentValue] = useState(value);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+    // onClick();
+  };
+
+  const handleSelect = (event) => {
+    console.log(data);
+    console.log(event);
+    setAnchorEl(null);
+    setCurrentValue(displayField ? event[displayField] : event);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    // onClose();
+  };
+  return (
+    <div>
+      <TaskButton
+        onClick={handleClick}
+        style={{
+          fontSize: 12,
+          color: theme.palette.text.primary,
+          padding: 5,
+        }}
+      >
+        {type === "textBox" ? (
+          <input
+            type="text"
+            value={currentValue}
+            onChange={(e) => setCurrentValue(e.target.value)}
+            style={{
+              fontSize: 12,
+              color: theme.palette.text.primary,
+              padding: 0,
+              border: "none",
+              outline: "none",
+              backgroundColor: "transparent",
+            }}
+          />
+        ) : (
+          <>{currentValue}</>
+        )}
+      </TaskButton>
+      {type === "dropDown" && (
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+          onItemSelect={handleSelect}
+          // anchorOrigin={{
+          //   vertical: "top",
+          //   horizontal: "left",
+          // }}
+          // transformOrigin={{
+          //   vertical: "top",
+          //   horizontal: "right",
+          // }}
+          // MenuListProps={{
+          //   style: {
+          //     maxHeight: "250px",
+          //   },
+          // }}
+        >
+          {data.map((item) => (
+            <MenuItem key={item.id} onClick={handleClose} data={item}>
+              {displayField ? item[displayField] : item}
+            </MenuItem>
+          ))}
+        </Menu>
+      )}
+    </div>
+  );
+};
+
+export default OptionButton;

package/src/SelectBox.js

@@ -0,0 +1,252 @@
+import { useState } from "react";
+import { useEffect } from "react";
+import { useRef } from "react";
+import styled from "@emotion/styled";
+import Input, { InputLabel } from "./Input";
+import { CSSTransition } from "react-transition-group";
+import ArrowDropDownOutlinedIcon from "@mui/icons-material/ArrowDropDownOutlined";
+import { cloneElement } from "react";
+import { useMemo } from "react";
+
+export const SelectBox = styled(
+  ({
+    className,
+    children,
+    style = {},
+    dropDownStyle = {},
+    fieldName = Date.now(),
+    displayField = null,
+    valueField = null,
+    defaultValue = null,
+    inputStyle = {},
+    labelStyle = {},
+    placeholder = "",
+    allowTextInput = false,
+    labelName = "",
+    closeOnSelect = true,
+    selectBoxRef = useRef({}),
+    onChange = () => {},
+  }) => {
+    const mainRef = useRef(null);
+    const listBoxRef = useRef(null);
+    const inputRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [currentItem, setCurrentItem] = useState(defaultValue);
+
+    const handleOpen = () => {
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    const handleArrowClick = () => {
+      open ? handleClose() : handleOpen();
+    };
+
+    const onItemSelect = (itemData) => {
+      setCurrentItem(displayField ? itemData[displayField] : itemData);
+      onChange({
+        fieldName: fieldName,
+        newValue: !!itemData
+          ? !!valueField
+            ? itemData[valueField]
+            : itemData
+          : null,
+        previousValue: currentItem,
+      });
+      handleClose();
+    };
+
+    const handleInputChange = ({ fieldName, newValue, previousValue }) => {
+      onChange({
+        fieldName: fieldName,
+        newValue: newValue,
+        previousValue: currentItem,
+      });
+      setCurrentItem(newValue);
+    };
+
+    // Close dropdown when tab is pressed
+    // used instead of onBlur, because oBlur function caused race condition with the onClick event of the dropdown items
+    const handleTabPress = (e) => {
+      if (e.key === "Tab") {
+        setOpen(false);
+      }
+    };
+
+    // Close dropdown when clicked outside of the dropdown
+    useEffect(() => {
+      function handleClickOutside(event) {
+        if (mainRef.current && !mainRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      }
+      // Bind the event listener
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        // Unbind the event listener on clean up
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+
+    // Set internal functions to be used by the parent component
+    useEffect(() => {
+      selectBoxRef.current = {};
+      selectBoxRef.current.close = handleClose;
+      selectBoxRef.current.open = handleOpen;
+      selectBoxRef.current.setValue = setCurrentItem;
+    }, []);
+
+    return (
+      <div
+        ref={mainRef}
+        className={`${className} ${open ? "opened" : ""}`}
+        style={{ ...style }}
+      >
+        {labelName && (
+          <InputLabel
+            labelName={labelName}
+            style={{ ...labelStyle }}
+          ></InputLabel>
+        )}
+        <div className="select-box">
+          <Input
+            className="select-box-input"
+            inputRef={inputRef}
+            defaultValue={currentItem}
+            readOnly={!allowTextInput}
+            placeholder={placeholder}
+            inputStyle={{ cursor: "pointer" }}
+            labelStyle={{ ...labelStyle }}
+            fieldName={fieldName}
+            onFocus={handleOpen}
+            onChange={handleInputChange}
+            onKeyDown={handleTabPress}
+          ></Input>
+          <div className="select-box-arrow" onClick={handleArrowClick}>
+            <ArrowDropDownOutlinedIcon />
+          </div>
+          <CSSTransition
+            in={open}
+            nodeRef={listBoxRef}
+            timeout={300}
+            classNames="select-box-options"
+            unmountOnExit
+            // onEnter={() => setShowButton(false)}
+            // onExited={() => setShowButton(true)}
+          >
+            {useMemo(() => {
+              return (
+                <div
+                  ref={listBoxRef}
+                  className="select-box-options"
+                  style={{ ...dropDownStyle }}
+                >
+                  {children.length
+                    ? children.map((child) =>
+                        cloneElement(child, {
+                          key: child.props.key,
+                          onItemSelect: onItemSelect,
+                        })
+                      )
+                    : cloneElement(children, {
+                        // key: children.props.key,
+                        onItemSelect: onItemSelect,
+                      })}
+                </div>
+              );
+            }, [children, onItemSelect, open])}
+          </CSSTransition>
+        </div>
+      </div>
+    );
+  }
+)`
+  &.opened input {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+  .select-box {
+    position: relative;
+  }
+  .select-box-input {
+    width: 100%;
+  }
+  .select-box-arrow {
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    color: ${(props) => props.theme.palette.text.secondary};
+    cursor: pointer;
+  }
+  .select-box-options {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    min-height: 100px;
+    max-height: 300px;
+    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: 1;
+    margin-top: 6px;
+    padding: 8px;
+    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;
+  }
+`;
+
+SelectBox.displayName = "SelectBox";
+
+export const SelectBoxItem = styled(
+  ({ className, children, data = null, onItemSelect = () => {} }) => {
+    return (
+      <div
+        className={`${className} select-box-item`}
+        onClick={() => {
+          console.log("SelectBoxItem Clicked");
+          onItemSelect(data);
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+)`
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  padding: 7px;
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
+`;
+
+SelectBoxItem.displayName = "SelectBoxItem";
+
+export default SelectBox;

package/src/TagBox/TagBox.js

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import { useRef } from "react";
+import styled from "@emotion/styled";
+import { InputLabel } from "../Input";
+import {
+  Tag,
+  TagBoxContainer,
+  TagBoxInner,
+  TagBoxInput,
+  TagKillButton,
+  TagsContainer,
+  TagText,
+} from "./TagBoxStyles";
+
+const TestTags = [
+  "STG-1200",
+  "Archive Drive 1",
+  "NAS 1",
+  "Riker",
+  "Azure",
+  "Tag 6",
+];
+
+const TagBox = styled(({ labelName, labelStyle = {}, data = [] }) => {
+  const [tags, setTags] = useState(TestTags);
+  const tagBoxContainerRef = useRef(null);
+  const tagBoxInputRef = useRef(null);
+  const tagBoxInnerRef = useRef(null);
+
+  const onClick = (e) => {
+    tagBoxInputRef.current.focus();
+  };
+
+  const onBlur = (e) => {
+    tagBoxInnerRef.current.scrollLeft = -99999;
+  };
+
+  const removeTag = ({ event, clickedTag }) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setTags(tags.filter((tag) => tag !== clickedTag));
+  };
+
+  return (
+    <TagBoxContainer ref={tagBoxContainerRef} onClick={onClick} onBlur={onBlur}>
+      {labelName && (
+        <InputLabel
+          labelName={labelName}
+          style={{ ...labelStyle }}
+        ></InputLabel>
+      )}
+      <TagBoxInner ref={tagBoxInnerRef}>
+        <TagsContainer>
+          {tags.map((tag, index) => {
+            return (
+              <Tag key={index} value={tag}>
+                <TagText>{tag}</TagText>
+                <TagKillButton
+                  onClick={(e) => {
+                    removeTag({ event: e, clickedTag: tag });
+                  }}
+                ></TagKillButton>
+              </Tag>
+            );
+          })}
+        </TagsContainer>
+        <TagBoxInput ref={tagBoxInputRef}></TagBoxInput>
+      </TagBoxInner>
+    </TagBoxContainer>
+  );
+})``;
+
+TagBox.displayName = "TagBox";
+
+export default TagBox;

package/src/TagBox/TagBoxStyles.js

@@ -0,0 +1,122 @@
+import styled from "@emotion/styled";
+import CloseIcon from "@mui/icons-material/Close";
+
+export const TagBoxContainer = styled.div`
+  width: 100%;
+`;
+
+export const TagBoxInner = styled.div`
+  height: 33px;
+  display: flex;
+  border: 1px solid ${(props) => props.theme.palette.input.border};
+  color: ${(props) => props.theme.palette.text.primary};
+  outline: none;
+  padding: 8px 8px;
+  width: 100%;
+  background-color: ${(props) => props.theme.palette.input.background};
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  overflow-x: hidden;
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+export const TagsContainer = styled.div`
+  //   min-height: 34px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-wrap: nowrap;
+  margin-left: calc(-5px);
+  box-sizing: border-box;
+`;
+
+export const TagBoxInput = styled.input`
+  border: none;
+  outline: none;
+  width: 100%;
+  min-width: 50px;
+  background-color: transparent;
+  color: ${(props) => props.theme.palette.text.primary};
+  &:focus {
+    border: none;
+    outline: none;
+  }
+`;
+
+export const Tag = styled.div`
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgb(26, 27, 30);
+  color: rgb(193, 194, 197);
+  height: 22px;
+  padding-left: 10px;
+  padding-right: 0px;
+  font-weight: 500;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: default;
+  user-select: none;
+  max-width: 120px;
+  margin: calc(3px) calc(5px);
+`;
+
+export const TagText = styled.div`
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  background-color: rgb(26, 27, 30);
+  color: rgb(193, 194, 197);
+  height: 22px;
+  //   padding-left: 12px;
+  padding-right: 0px;
+  font-weight: 500;
+  font-size: 12px;
+  border-radius: 4px;
+  cursor: default;
+  user-select: none;
+  max-width: 75px;
+  //   margin: calc(3px) calc(5px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const TagKillButton = styled(CloseIcon)`
+  -webkit-tap-highlight-color: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  cursor: pointer;
+  appearance: none;
+  //   font-size: 18px;
+  text-align: left;
+  text-decoration: none;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  background-color: transparent;
+  position: relative;
+  height: 19px;
+  min-height: 19px;
+  width: 22px;
+  min-width: 19px;
+  border-radius: 2px;
+  line-height: 1;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  color: rgb(193, 194, 197);
+  // margin-left: 4px;
+  // margin-right: 4px;
+  padding: 0px 3px;
+  &:hover {
+    color: rgb(255, 255, 255);
+  }
+`;
+
+export const TagBoxOptions = styled.div``;
+
+export const TagBoxOption = styled.div``;

package/src/TextArea.js

@@ -0,0 +1,85 @@
+import { useRef } from "react";
+import { useEffect, useState } from "react";
+import styled from "@emotion/styled";
+import { InputLabel } from "./Input";
+
+const TextArea = styled(
+  ({
+    className,
+    style = {},
+    inputStyle = {},
+    labelStyle = {},
+    placeholder = "",
+    labelName = null,
+    readOnly = false,
+    value = "",
+    inputRef = useRef(null),
+    rows = 1,
+    onChange = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+  }) => {
+    const [inputValue, setInputValue] = useState(value || "");
+
+    const handleChange = (e) => {
+      onChange({
+        event: e,
+        newValue: e.target.value,
+        previousValue: inputValue,
+      });
+      setInputValue(e.target.value);
+    };
+
+    useEffect(() => {
+      setInputValue(value);
+    }, [value]);
+
+    return (
+      <div className={className} style={{ ...style }}>
+        {labelName && (
+          <InputLabel
+            labelName={labelName}
+            style={{ ...labelStyle }}
+          ></InputLabel>
+        )}
+        <textarea
+          ref={inputRef}
+          onChange={handleChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          readOnly={readOnly}
+          placeholder={placeholder}
+          rows={rows}
+          value={inputValue}
+          style={{ ...inputStyle }}
+        />
+      </div>
+    );
+  }
+)`
+  //   width: fit-content;
+  width: 100%;
+  textarea {
+    // border-top: none;
+    // border-left: none;
+    // border-right: none;
+    border: 1px solid ${(props) => props.theme.palette.textArea.border};
+    color: ${(props) => props.theme.palette.text.primary};
+    outline: none;
+    padding: 8px 8px;
+    // width: 150px;
+    width: 100%;
+    height: 100%;
+    // background-color: transparent;
+    background-color: ${(props) => props.theme.palette.input.background};
+    border-radius: 5px;
+    transition: border 0.1s ease-in-out;
+    resize: none;
+    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+    &:focus {
+      border: 1px solid ${(props) => props.theme.palette.primary.main};
+    }
+  }
+`;
+
+export default TextArea;

package/src/TextAreaBox.js

@@ -0,0 +1,43 @@
+import styled from "@emotion/styled";
+import TextArea from "./TextArea";
+
+const TextAreaBox = styled(
+  ({
+    className,
+    style = {},
+    textAreaStyle = {},
+    colSpan = 1,
+    height = null,
+    labelName = null,
+    fieldName = null,
+    onChange = () => {},
+  }) => {
+    const handleChange = ({ newValue, previousValue }) => {
+      onChange({
+        fieldName: fieldName,
+        newValue: newValue,
+        previousValue: previousValue,
+      });
+    };
+
+    return (
+      <div
+        className={className}
+        style={{
+          gridColumn: `span ${colSpan}`,
+          ...style,
+        }}
+      >
+        <TextArea
+          labelName={labelName}
+          onChange={handleChange}
+          style={{ height: height, ...textAreaStyle }}
+        ></TextArea>
+      </div>
+    );
+  }
+)``;
+
+TextAreaBox.displayName = "TextAreaBox";
+
+export default TextAreaBox;

package/src/TextBox.js

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+import Input from "./Input";
+
+const TextBox = styled(() => {
+  return (
+    <div>
+      <Input></Input>
+    </div>
+  );
+})``;