@monolith-forensics/monolith-ui 1.0.7 → 1.0.9

package/src/components/TagBox/TagBox.js

@@ -0,0 +1,563 @@
+import styled from "styled-components";
+import { useFloating, flip, offset } from "@floating-ui/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import FieldLabel from "../FieldLabel/FieldLabel.js";
+import Pill from "../Pill/Pill.js";
+import { ArrowButton, ClearButton } from "../SelectBox/SelectBox.js";
+
+const StyledInputContainer = styled.div`
+  position: relative;
+  cursor: pointer;
+
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+
+  pointer-events: all;
+  outline: none;
+
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case "filled":
+          return "transparent";
+        case "outlined":
+          return theme.palette.input.border;
+        case "text":
+          return "transparent";
+        default:
+          return theme.palette.input.border;
+      }
+    }};
+  font-weight: 500;
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "12px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "16px"
+      : size === "lg"
+      ? "18px"
+      : size === "xl"
+      ? "20px"
+      : "12px"};
+
+  width: 100%;
+  min-height: ${({ size }) =>
+    size === "xs"
+      ? "26px"
+      : size === "sm"
+      ? "30px"
+      : size === "md"
+      ? "36px"
+      : size === "lg"
+      ? "42px"
+      : size === "xl"
+      ? "50px"
+      : "26px"};
+
+  padding: ${({ size }) =>
+    size === "xs"
+      ? "3px 8px"
+      : size === "sm"
+      ? "3px 10px"
+      : size === "md"
+      ? "5px 12px"
+      : size === "lg"
+      ? "5px 14px"
+      : size === "xl"
+      ? "5px 16px"
+      : "5px 8px"};
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case "filled":
+        return theme.palette.input.background;
+      case "outlined":
+        return theme.palette.input.background;
+      case "text":
+        return "transparent";
+      default:
+        return theme.palette.input.background;
+    }
+  }};
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+
+  & [data-has-space="true"] {
+    padding-left: 4px;
+  }
+
+  & [data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.primary.main}50;
+  }
+
+  &[data-empty="true"] {
+    color: ${(props) => props.theme.palette.input.placeholder};
+    div {
+      color: ${(props) => props.theme.palette.input.placeholder};
+    }
+  }
+
+  & [data-default-btn="true"] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    div {
+      color: ${(props) => props.theme.palette.text.secondary};
+    }
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+const StyledInput = styled.input`
+  pointer-events: all;
+  outline: none;
+  background: transparent;
+  height: 100%;
+  flex: 1;
+  appearance: none;
+  border: 0;
+  color: inherit;
+
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "12px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "16px"
+      : size === "lg"
+      ? "18px"
+      : size === "xl"
+      ? "20px"
+      : "12px"};
+
+  ::placeholder {
+    font-size: ${({ size }) =>
+      size === "xs"
+        ? "10px"
+        : size === "sm"
+        ? "12px"
+        : size === "md"
+        ? "14px"
+        : size === "lg"
+        ? "16px"
+        : size === "xl"
+        ? "18px"
+        : "10px"};
+  }
+
+  &[data-button-right="true"] {
+    padding-right: 30px;
+  }
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+`;
+
+const StyledInnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+
+  &[data-button-right="true"] {
+    padding-right: 30px;
+  }
+`;
+
+const StyledFloatContainer = styled.div`
+  z-index: 100000;
+`;
+
+const StyledContent = styled.div`
+  position: relative;
+
+  max-height: ${({ maxDropdownHeight }) =>
+    Number.isInteger(maxDropdownHeight)
+      ? `${maxDropdownHeight}px`
+      : maxDropdownHeight || "250px"};
+
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  background-color: ${(props) => props.theme.palette.background.default};
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case "filled":
+        return theme.palette.input.background;
+      case "outlined":
+        return theme.palette.input.background;
+      case "text":
+        return "transparent";
+      default:
+        return theme.palette.input.background;
+    }
+  }};
+
+  border-radius: 5px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  padding: 5px;
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.85),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.65);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+
+const StyledItem = styled.div`
+  line-height: 1;
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  cursor: pointer;
+
+  font-family: "Arial", sans-serif;
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "12px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "16px"
+      : size === "lg"
+      ? "18px"
+      : size === "xl"
+      ? "20px"
+      : "12px"};
+
+  &[data-disabled] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    pointer-events: "none";
+  }
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+    color: ${(props) => props.theme.palette.text.primary};
+  }
+
+  &[data-selected="true"] {
+    display: none;
+    // background-color: ${(props) => props.theme.palette.divider};
+    color: ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+const TagBox = styled(
+  ({
+    className,
+    data = [],
+    placeholder = "Select or enter tags",
+    arrow = true,
+    onChange,
+    onItemAdded,
+    size = "sm",
+    variant = "filled",
+    width = "100%",
+    allowCustomValue = true,
+    searchable = false,
+    clearable = false,
+    label = null,
+    description = null,
+    required = false,
+    error = false,
+    renderOption,
+  }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedItems, setSelectedItems] = useState([]);
+    const [searchValue, setSearchValue] = useState("");
+    const inputRef = useRef(null);
+
+    const isObjectArray = data.length > 0 && data[0]?.label !== undefined;
+
+    const filteredItems = data.filter((item) =>
+      isObjectArray
+        ? item.label.toLowerCase().includes(searchValue.toLowerCase())
+        : item.toLowerCase().includes(searchValue.toLowerCase())
+    );
+
+    const { refs, floatingStyles } = useFloating({
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: "bottom-start",
+      strategy: "absolute",
+      // Handle collisions with the viewport
+      middleware: [flip(), offset(5)],
+    });
+
+    const toggleOpen = () => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          inputRef?.current?.focus?.();
+        }
+        return !prev;
+      });
+    };
+
+    const handleClear = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (inputRef?.current?.value) inputRef.current.value = "";
+      onChange?.([]);
+      setSelectedItems([]);
+      setIsOpen(false);
+    };
+
+    const handleItemClick = (event, item) => {
+      if (inputRef?.current?.value) inputRef.current.value = "";
+      setSearchValue("");
+      handleChangeSelection(item);
+      //   setIsOpen(false);
+    };
+
+    const handleRemoveItem = (item) => {
+      setSelectedItems((prev) => {
+        const newItems = prev.filter((prevItem) =>
+          isObjectArray ? prevItem.value !== item.value : prevItem !== item
+        );
+        onChange?.(newItems.map((item) => item?.value || item));
+        return newItems;
+      });
+    };
+
+    const handleChangeSelection = useCallback(
+      (option) => {
+        setSelectedItems((prev) => {
+          onChange?.([
+            ...prev.map((item) => item?.value || item),
+            option?.value || option,
+          ]);
+          return [...prev, option];
+        });
+      },
+      [onChange]
+    );
+
+    const handleAddItem = useCallback(
+      (newItem) => {
+        const isNewItem = data.every((item) =>
+          isObjectArray
+            ? item.label.toLowerCase() !== newItem.toLowerCase()
+            : item.toLowerCase() !== newItem.toLowerCase()
+        );
+        if (isNewItem) {
+          const newValue = isObjectArray
+            ? { label: newItem, value: newItem }
+            : newItem;
+          data.push(newValue);
+          handleChangeSelection(newValue);
+          onItemAdded?.(newValue);
+        }
+      },
+      [onItemAdded]
+    );
+
+    const handleKeyDown = (e) => {
+      // // Escape key
+      // if (e.key === "Escape") {
+      //   refs?.reference?.current?.blur();
+      //   setIsOpen(false);
+      // }
+
+      // // Enter key
+      // if (e.key === "Enter") {
+      //   const currentInputValue = inputRef?.current?.value;
+      //   if (currentInputValue === "") {
+      //     return;
+      //   }
+      //   if (allowCustomValue) {
+      //     handleAddItem(currentInputValue);
+      //     setSearchValue("");
+      //     if (inputRef?.current?.value) inputRef.current.value = "";
+      //   } else {
+      //     const item = data.find((item) =>
+      //       isObjectArray
+      //         ? item.label.toLowerCase() === currentInputValue.toLowerCase()
+      //         : item.toLowerCase() === currentInputValue.toLowerCase()
+      //     );
+      //     if (!item) {
+      //       if (inputRef?.current?.value) inputRef.current.value = "";
+      //       setSearchValue("");
+      //       // handleChangeSelection(null);
+      //     }
+      //   }
+
+      //   setIsOpen(false);
+      // }
+
+      // // Arrow down
+      // if (e.key === "ArrowDown") {
+      //   e.preventDefault();
+      //   setSelected((prev) => {
+      //     let newItem = filteredItems[0]; // Loop back to the first item
+      //     const index = filteredItems.findIndex((item) =>
+      //       isObjectArray ? item.value === prev?.value : item === prev
+      //     );
+      //     if (index < filteredItems.length - 1) {
+      //       newItem = filteredItems[index + 1];
+      //     }
+      //     if (inputRef?.current?.value) inputRef.current.value = newItem.label;
+      //     onChange?.(newItem?.value || newItem, newItem);
+      //     return newItem;
+      //   });
+      // }
+
+      // // Arrow up
+      // if (e.key === "ArrowUp") {
+      //   e.preventDefault();
+      //   setSelected((prev) => {
+      //     let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+      //     const index = filteredItems.findIndex((item) =>
+      //       isObjectArray ? item.value === prev?.value : item === prev
+      //     );
+      //     if (index > 0) {
+      //       newItem = filteredItems[index - 1];
+      //     }
+      //     if (inputRef?.current?.value) inputRef.current.value = newItem.label;
+      //     onChange?.(newItem?.value || newItem, newItem);
+      //     return newItem;
+      //   });
+      // }
+
+      // Tab key
+      if (e.key === "Tab") {
+        setIsOpen(false);
+      }
+    };
+
+    // Close on outside click
+    useEffect(() => {
+      const close = (e) => {
+        if (
+          refs.floating.current && // Check if the floating element exists
+          e.target !== refs.reference.current && // Check if the target is not the reference (input)
+          !refs.reference.current.contains(e.target) && // Check if the target is not inside the reference (input)
+          !refs.floating.current.contains(e.target) // Check if the target is not inside the floating element (content)
+        ) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("click", close);
+      return () => document.removeEventListener("click", close);
+    }, [refs.floating]);
+
+    const contentWidth =
+      refs?.reference?.current?.getClientRects?.()?.[0]?.width || "100%";
+
+    return (
+      <div>
+        {label && (
+          <FieldLabel
+            error={error}
+            asterisk={required}
+            size={size}
+            description={description}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <StyledInputContainer
+          ref={refs.setReference}
+          onClick={toggleOpen}
+          size={size}
+          variant={variant}
+          width={width}
+          onKeyDown={handleKeyDown}
+        >
+          <StyledInnerContainer data-button-right={arrow || clearable}>
+            {selectedItems.map((item, index) => (
+              <Pill
+                key={index}
+                size="xs"
+                onRemove={() => handleRemoveItem(item)}
+              >
+                {item.label}
+              </Pill>
+            ))}
+            {(searchable || allowCustomValue || selectedItems.length === 0) && (
+              <StyledInput
+                ref={inputRef}
+                onChange={(e) => setSearchValue(e.target.value)}
+                placeholder={placeholder}
+                size={size}
+                readOnly={!(searchable || allowCustomValue)}
+                data-button-right={arrow || clearable}
+              />
+            )}
+          </StyledInnerContainer>
+          {clearable && selectedItems.length > 0 ? (
+            <ClearButton onClick={handleClear} />
+          ) : arrow ? (
+            <ArrowButton />
+          ) : null}
+        </StyledInputContainer>
+        {isOpen && (
+          <StyledFloatContainer
+            ref={refs.setFloating}
+            style={floatingStyles}
+            className="mfFloating"
+          >
+            <StyledContent
+              className="mfFloatingContent"
+              style={{ width: contentWidth, maxWidth: contentWidth }}
+              variant={variant}
+              data-empty={
+                filteredItems.length === 0 ||
+                selectedItems.length === filteredItems.length
+              }
+            >
+              {filteredItems.map((item, index) => (
+                <StyledItem
+                  key={item?.value || index}
+                  className="mfFloatingItem"
+                  onClick={(e) => handleItemClick(e, item)}
+                  data-selected={selectedItems.some(
+                    (selectedItem) =>
+                      selectedItem.value === item?.value ||
+                      selectedItem === item
+                  )}
+                  size={size}
+                >
+                  {renderOption ? renderOption(item) : item?.label || item}
+                </StyledItem>
+              ))}
+            </StyledContent>
+          </StyledFloatContainer>
+        )}
+      </div>
+    );
+  }
+)`
+  position: relative;
+  cursor: pointer;
+`;
+
+export default TagBox;

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "styled-components";
+import TextareaAutosize from "react-textarea-autosize";
+
+interface StyledTextAreaProps {
+  variant?: "contained" | "filled" | "outlined" | "text";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
+const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
+  outline: none;
+  resize: none;
+  padding: 8px 8px;
+  width: 100%;
+  height: 100%;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "12px"
+      : size === "sm"
+      ? "14px"
+      : size === "md"
+      ? "16px"
+      : size === "lg"
+      ? "18px"
+      : size === "xl"
+      ? "20px"
+      : "12px"};
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+      case "contained":
+        return theme.palette.input.background;
+      case "filled":
+        return theme.palette.input.background;
+      case "outlined":
+        return theme.palette.input.background;
+      case "text":
+        return "transparent";
+      default:
+        return theme.palette.input.background;
+    }
+  }};
+
+  border-radius: 4px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+      switch (variant) {
+        case "contained":
+          return "transparent";
+        case "filled":
+          return "transparent";
+        case "outlined":
+          return theme.palette.input.border;
+        case "text":
+          return "transparent";
+        default:
+          return theme.palette.input.border;
+      }
+    }};
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+
+export default StyledTextArea;

package/src/components/TextArea/index.ts

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

package/src/components/TextAreaInput/TextAreaInput.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import FieldLabel from "../FieldLabel";
+import StyledTextArea from "../TextArea";
+
+interface TextAreaInputProps {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  required?: boolean;
+  colSpan?: number;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  description?: string | null;
+}
+
+const TextAreaInput: React.FC<TextAreaInputProps> = ({
+  label,
+  error,
+  errorMessage,
+  required,
+  colSpan = 1,
+  size,
+  description,
+  ...other
+}) => {
+  return (
+    <div
+      style={{
+        gridColumn: `span ${colSpan}`,
+        height: "fit-content",
+      }}
+    >
+      {label && (
+        <FieldLabel
+          error={error}
+          errorMessage={errorMessage}
+          asterisk={required}
+          size={size}
+          description={description}
+        >
+          {label}
+        </FieldLabel>
+      )}
+      <StyledTextArea {...other} />
+    </div>
+  );
+};
+
+export default TextAreaInput;

package/src/components/TextAreaInput/index.ts

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