@monolith-forensics/monolith-ui 1.0.12 → 1.1.0

package/src/components/TagBox/TagBox.js

@@ -1,563 +0,0 @@
-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/index.ts

@@ -1,7 +0,0 @@
-export { default as Button } from "./Button";
-export { default as Input } from "./Input";
-export { default as TextArea } from "./TextArea";
-export { default as FieldLabel } from "./FieldLabel";
-export { default as TextInput } from "./TextInput";
-export { default as TextAreaInput } from "./TextAreaInput";
-export { default as Pill } from "./Pill";

package/src/index.ts

@@ -1 +0,0 @@
-export * from "./components";