@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/DropDownMenu/DropDownMenu.tsx

@@ -0,0 +1,402 @@
+import {
+  FloatingFocusManager,
+  FloatingPortal,
+  flip,
+  useFloating,
+} from "@floating-ui/react";
+import {
+  ComponentPropsWithoutRef,
+  ComponentType,
+  ReactNode,
+  UIEvent,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import styled from "styled-components";
+import { Button, Tooltip, CheckBox, Input } from "..";
+import { useDebouncedCallback } from "use-debounce";
+import { ButtonProps } from "../Button";
+import { Size, Variant } from "../core";
+
+const StyledFloatContainer = styled.div`
+  z-index: 1500;
+`;
+
+const StyledInnerItemContainer = styled.div`
+  overflow-y: auto;
+
+  &[data-scroll-active="true"] {
+    padding-right: 5px;
+  }
+`;
+
+type SearchInputProps = React.ComponentPropsWithoutRef<typeof Input>;
+
+const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, ref) => <Input ref={ref} style={{ marginBottom: 8 }} {...props} />
+);
+
+interface StyledItemProps {
+  className?: string;
+  children?: React.ReactNode | string;
+  size?: Size;
+  disabled?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  "data-selected"?: boolean;
+}
+
+const StyledItem = styled.div<StyledItemProps>`
+  color: ${(props) => props.theme.palette.text.primary};
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+  align-items: center;
+  min-height: 25px;
+  padding: 7px 10px;
+  position: relative;
+  user-select: none;
+  outline: none;
+
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  cursor: pointer;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "11px"
+      : size === "sm"
+      ? "13px"
+      : size === "md"
+      ? "15px"
+      : size === "lg"
+      ? "17px"
+      : size === "xl"
+      ? "19px"
+      : "11px"};
+
+  padding: ${({ size }) =>
+    size === "xs"
+      ? "2px 8px"
+      : size === "sm"
+      ? "4px 10px"
+      : size === "md"
+      ? "4px 12px"
+      : size === "lg"
+      ? "5px 14px"
+      : size === "xl"
+      ? "6px 16px"
+      : "2px 8px"};
+
+  &[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};
+  }
+`;
+
+interface StyledContentProps {
+  maxDropdownHeight?: number | string;
+  variant?: Variant;
+}
+
+const StyledContent = styled.div<StyledContentProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  max-height: ${({ maxDropdownHeight }) =>
+    Number.isInteger(maxDropdownHeight)
+      ? `${maxDropdownHeight}px`
+      : maxDropdownHeight || "250px"};
+
+  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;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+
+  &[data-empty="true"] {
+    display: none;
+  }
+`;
+
+interface DropDownItem {
+  toLowerCase?: () => string;
+  label: string;
+  value: string;
+  data?: any; // Additional data to be passed to the TooltipContent component, could be anything
+}
+
+interface DropDownMenuProps {
+  className?: string;
+  children?: ReactNode;
+  data?: DropDownItem[];
+  variant?: Variant;
+  defaultValue?: DropDownItem[];
+  multiselect?: boolean;
+  size?: Size;
+  title?: string;
+  TooltipContent?: ComponentType<any>;
+  renderOption?: (item: DropDownItem) => ReactNode;
+  onChange?: (selected: DropDownItem[], diff: DropDownItem[]) => void;
+  onItemSelect?: (item: DropDownItem) => void;
+  onScroll?: (e: UIEvent<HTMLDivElement>) => void;
+  loading?: boolean;
+  arrow?: boolean;
+  searchable?: boolean;
+  dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
+  buttonProps?: ButtonProps;
+}
+
+const DropDownMenu = styled(
+  ({
+    className,
+    children,
+    data = [],
+    variant = "outlined",
+    defaultValue,
+    multiselect = false,
+    size = "xs",
+    TooltipContent,
+    renderOption,
+    onChange,
+    onItemSelect,
+    onScroll,
+    loading,
+    arrow,
+    searchable,
+    dropDownProps,
+    buttonProps,
+  }: DropDownMenuProps) => {
+    const isObjectArray = Object.keys(data?.[0] || {})?.includes("label");
+
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [selected, setSelected] = useState<DropDownItem[]>(
+      defaultValue || []
+    );
+    const [searchValue, setSearchValue] = useState<string>("");
+
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+
+    const { refs, floatingStyles, context } = useFloating({
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: "bottom-start",
+      strategy: "absolute",
+      // Handle collisions with the viewport
+      middleware: [flip()],
+    });
+
+    const handleAddItem = (item: DropDownItem) => {
+      setSelected((prev: DropDownItem[]) => {
+        let newSelected = [...prev, item];
+
+        const diff = data.filter(
+          (i) =>
+            !newSelected.find((s) =>
+              isObjectArray ? s?.value === i?.value : s === i
+            )
+        );
+        onChange?.(newSelected, diff);
+        return newSelected;
+      });
+    };
+
+    const handleRemoveItem = (item: DropDownItem) => {
+      setSelected((prev) => {
+        let newSelected = prev.filter((i) =>
+          isObjectArray ? i?.value !== item?.value : i !== item
+        );
+
+        const diff = data.filter(
+          (i) =>
+            !newSelected.find((s) =>
+              isObjectArray ? s?.value === i?.value : s === i
+            )
+        );
+        onChange?.(newSelected, diff);
+        return newSelected;
+      });
+    };
+
+    const handleSearch = useDebouncedCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSearchValue(e.target.value);
+      },
+      150
+    );
+
+    // Close on outside click
+    useEffect(() => {
+      const close = (e: Event) => {
+        const target = e.target as Node;
+        const referenceElement = refs?.reference?.current as Node;
+        const floatingElement = refs?.floating?.current as Node;
+
+        if (
+          floatingElement && // Check if the floating element exists
+          e.target !== referenceElement && // Check if the target is not the reference (input)
+          !referenceElement?.contains?.(target) && // Check if the target is not inside the reference (input)
+          !floatingElement?.contains?.(target) // Check if the target is not inside the floating element (content)
+        ) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", close);
+      return () => document.removeEventListener("mousdown", close);
+    }, [refs.floating, refs.reference]);
+
+    useEffect(() => {
+      if (isOpen && searchable) {
+        searchInputRef?.current?.focus?.();
+      }
+      if (!isOpen) {
+        setSearchValue("");
+      }
+    }, [isOpen, searchable]);
+
+    const scrollActive =
+      (scrollContainerRef?.current?.scrollHeight || 0) >
+      (scrollContainerRef?.current?.clientHeight || 0);
+
+    return (
+      <div className={className + " mfDropDownMenu"}>
+        <Button
+          ref={(ref) => {
+            refs.setReference(ref);
+          }}
+          onMouseDown={() => setIsOpen(!isOpen)}
+          rightSection={arrow ? <span>▼</span> : null}
+          size={size}
+          {...buttonProps}
+        >
+          {children}
+        </Button>
+        {isOpen && (
+          <FloatingPortal preserveTabOrder>
+            <FloatingFocusManager context={context} modal={false}>
+              <StyledFloatContainer
+                ref={refs.setFloating}
+                style={floatingStyles}
+                className="mfFloating"
+              >
+                <StyledContent
+                  className="mfFloatingContent"
+                  style={{ width: 150, maxWidth: 400 }}
+                  variant={variant}
+                  {...dropDownProps}
+                >
+                  <StyledInnerItemContainer
+                    ref={scrollContainerRef}
+                    data-scroll-active={scrollActive}
+                    onScroll={onScroll}
+                  >
+                    {loading && <div>Loading...</div>}
+                    {searchable && (
+                      <SearchInput
+                        ref={searchInputRef}
+                        variant="outlined"
+                        placeholder="Search"
+                        onChange={handleSearch}
+                      />
+                    )}
+                    {!loading &&
+                      data
+                        .filter((item) => {
+                          if (!searchable) return true;
+                          if (isObjectArray) {
+                            return (
+                              item?.label
+                                ?.toLowerCase()
+                                .includes(searchValue.toLowerCase()) ||
+                              item?.value
+                                ?.toLowerCase()
+                                .includes(searchValue.toLowerCase())
+                            );
+                          }
+                          return item
+                            .toLowerCase?.()
+                            .includes(searchValue.toLowerCase());
+                        })
+                        .map((item, index) => {
+                          const isSelected = !!selected?.find((s) =>
+                            isObjectArray
+                              ? s?.value === item?.value
+                              : s === item
+                          );
+                          return (
+                            <Tooltip
+                              key={index}
+                              content={
+                                TooltipContent ? (
+                                  <TooltipContent data={item.data} />
+                                ) : null
+                              }
+                              side="left"
+                            >
+                              <StyledItem
+                                className="mfFloatingItem"
+                                onClick={(e) => {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  if (multiselect) {
+                                    isSelected
+                                      ? handleRemoveItem(item)
+                                      : handleAddItem(item);
+                                  } else {
+                                    setIsOpen(false);
+                                  }
+                                  onItemSelect?.(item);
+                                }}
+                                data-selected={isSelected}
+                                size={size}
+                              >
+                                {multiselect && <CheckBox value={isSelected} />}
+                                <>
+                                  {renderOption?.(item) || item?.label || item}
+                                </>
+                              </StyledItem>
+                            </Tooltip>
+                          );
+                        })}
+                  </StyledInnerItemContainer>
+                </StyledContent>
+              </StyledFloatContainer>
+            </FloatingFocusManager>
+          </FloatingPortal>
+        )}
+      </div>
+    );
+  }
+)``;
+
+export default DropDownMenu;

package/DropDownMenu/index.ts

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

package/Error/Error.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { XIcon, ShieldAlert } from "lucide-react";
+
+const ErrorContainer = styled.div`
+  background-color: ${({ theme }) => theme.palette.error.main + "15"};
+  color: ${({ theme }) => theme.palette.error.light};
+  border: 1px solid #d93025;
+  padding: 10px;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  border-radius: 5px;
+  align-items: center;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.palette.error.light};
+  cursor: pointer;
+`;
+
+const ErrorText = styled.span`
+  margin-left: 10px;
+  flex: 1;
+`;
+
+const ErrorComponent = ({ error }: { error: string }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <>
+      {isVisible && (
+        <ErrorContainer>
+          <ShieldAlert size={19} />
+          <ErrorText>{error}</ErrorText>
+          <CloseButton onClick={handleClose}>
+            <XIcon size={19} />
+          </CloseButton>
+        </ErrorContainer>
+      )}
+    </>
+  );
+};
+
+export default ErrorComponent;

package/Error/index.ts

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

package/{src/components/FieldLabel → FieldLabel}/FieldLabel.tsx

@@ -1,15 +1,17 @@
-import React from "react";
 import styled from "styled-components";
 import * as Tooltip from "@radix-ui/react-tooltip";
+import { ReactNode } from "react";
+import { Size } from "../core";
 
 interface InfoComponentProps {
-  description?: string | null;
-  label?: string | Element;
-  children: React.ReactNode;
+  className?: string;
+  children?: ReactNode;
+  description?: string;
+  label?: string | ReactNode;
 }
 
-const InfoComponent: React.FC<InfoComponentProps> = styled(
-  ({ className, children, description, label }) => {
+export const InfoComponent = styled(
+  ({ className, children, description, label }: InfoComponentProps) => {
     if (!description) return children;
 
     return (
@@ -38,7 +40,7 @@ const InfoComponent: React.FC<InfoComponentProps> = styled(
   }
 )`
   pointer-events: none;
-  z-index: 99999;
+  z-index: 999999;
   background-color: ${({ theme }) => theme.palette.background.default};
   padding: 15px;
   border-radius: 5px;
@@ -57,46 +59,46 @@ const InfoComponent: React.FC<InfoComponentProps> = styled(
 `;
 
 interface FieldLabelProps {
-  errorMessage?: string;
-  error?: boolean;
-  description?: string | null;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  children?: ReactNode;
+  error?: string;
+  description?: string;
+  size?: Size;
   asterisk?: boolean;
-  children: string | Element;
 }
 
-const FieldLabel: React.FC<FieldLabelProps> = styled(
+const FieldLabel = styled(
   ({
     className,
     children,
-    errorMessage,
-    error = false,
-    description = null,
-  }) => {
+    error,
+    description,
+    size = "sm",
+  }: FieldLabelProps) => {
     return (
-      <div className={className}>
+      <div className={className + " FieldLabel"}>
         <InfoComponent description={description} label={children}>
           <div className="label">{children}</div>
         </InfoComponent>
         {error && (
-          <div className="error" title={errorMessage || error}>
-            {errorMessage || error || "Invalid Value"}
+          <div className="error" title={error}>
+            {error || "Invalid Value"}
           </div>
         )}
       </div>
     );
   }
 )`
+  user-select: none;
   font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
   user-select: none;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: baseline;
   gap: 5px;
 
   min-height: 15px;
-  // font-size: 12px;
   font-weight: 400;
   margin-bottom: 2.5px;
 
@@ -134,6 +136,7 @@ const FieldLabel: React.FC<FieldLabelProps> = styled(
   }
 
   .error {
+    user-select: none;
     transition: all 0.2s ease;
     cursor: pointer;
     color: ${({ theme }) => theme.palette.error.main};

package/{src/components/FileInputField/FileInputField.js → FileInputField/FileInputField.tsx}

@@ -1,8 +1,22 @@
-import { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
+import { useCallback, useState, ReactNode, HTMLAttributes } from "react";
 import styled from "styled-components";
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import Pill from "../Pill/Pill.js";
+import { useDropzone, DropzoneOptions } from "react-dropzone";
+import { Pill, FieldLabel } from "..";
+import { Size, Variant } from "../core";
+
+interface FileInputFieldProps {
+  className?: string;
+  children?: ReactNode;
+  variant?: Variant;
+  label?: string;
+  error?: string;
+  required?: boolean;
+  size?: Size;
+  onChange?: (files: File[]) => void;
+  onFocus?: () => void;
+  dropZoneOptions?: DropzoneOptions;
+  style?: HTMLAttributes<HTMLDivElement>;
+}
 
 const FileInputField = styled(
   ({
@@ -10,23 +24,22 @@ const FileInputField = styled(
     children,
     label,
     error,
-    errorMessage,
     required,
     size,
     onChange,
     onFocus,
     dropZoneOptions = {},
     style = {},
-  }) => {
-    const [files, setFiles] = useState([]);
+  }: FileInputFieldProps) => {
+    const [files, setFiles] = useState<File[]>([]);
 
-    const onDrop = useCallback((acceptedFiles) => {
+    const onDrop = useCallback((acceptedFiles: File[]) => {
       setFiles(acceptedFiles);
       // Do something with the files
       onChange?.(acceptedFiles);
     }, []);
 
-    const handleRemoveFile = (file) => {
+    const handleRemoveFile = (file: File) => {
       setFiles((prev) => prev.filter((f) => f !== file));
     };
 
@@ -38,12 +51,7 @@ const FileInputField = styled(
     return (
       <div className={className}>
         {label && (
-          <FieldLabel
-            error={error}
-            errorMessage={errorMessage}
-            asterisk={required}
-            size={size}
-          >
+          <FieldLabel error={error} asterisk={required} size={size}>
             {label}
           </FieldLabel>
         )}

package/FileInputField/index.ts

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