@monolith-forensics/monolith-ui 1.1.0 → 1.1.2

package/DropDownMenu/DropDownMenu.tsx

@@ -1,402 +0,0 @@
-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

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

package/Error/Error.tsx

@@ -1,51 +0,0 @@
-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

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

package/FieldLabel/FieldLabel.tsx

@@ -1,155 +0,0 @@
-import styled from "styled-components";
-import * as Tooltip from "@radix-ui/react-tooltip";
-import { ReactNode } from "react";
-import { Size } from "../core";
-
-interface InfoComponentProps {
-  className?: string;
-  children?: ReactNode;
-  description?: string;
-  label?: string | ReactNode;
-}
-
-export const InfoComponent = styled(
-  ({ className, children, description, label }: InfoComponentProps) => {
-    if (!description) return children;
-
-    return (
-      <Tooltip.Provider
-        delayDuration={800}
-        skipDelayDuration={0}
-        disableHoverableContent
-      >
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-          <Tooltip.Portal>
-            <Tooltip.Content
-              className={className}
-              side="right"
-              sideOffset={15}
-              align="start"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <div className="title">{label || "Info"}</div>
-              <div>{description || "N/A"}</div>
-            </Tooltip.Content>
-          </Tooltip.Portal>
-        </Tooltip.Root>
-      </Tooltip.Provider>
-    );
-  }
-)`
-  pointer-events: none;
-  z-index: 999999;
-  background-color: ${({ theme }) => theme.palette.background.default};
-  padding: 15px;
-  border-radius: 5px;
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  font-size: 0.75rem;
-  max-width: 350px;
-  width: 250px;
-
-  white-space: pre-wrap;
-
-  .title {
-    font-size: 0.85rem;
-    font-weight: 600;
-    margin-bottom: 5px;
-  }
-`;
-
-interface FieldLabelProps {
-  className?: string;
-  children?: ReactNode;
-  error?: string;
-  description?: string;
-  size?: Size;
-  asterisk?: boolean;
-}
-
-const FieldLabel = styled(
-  ({
-    className,
-    children,
-    error,
-    description,
-    size = "sm",
-  }: FieldLabelProps) => {
-    return (
-      <div className={className + " FieldLabel"}>
-        <InfoComponent description={description} label={children}>
-          <div className="label">{children}</div>
-        </InfoComponent>
-        {error && (
-          <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: baseline;
-  gap: 5px;
-
-  min-height: 15px;
-  font-weight: 400;
-  margin-bottom: 2.5px;
-
-  font-size: ${({ size }) =>
-    size === "xs"
-      ? "10px"
-      : size === "sm"
-      ? "12px"
-      : size === "md"
-      ? "14px"
-      : size === "lg"
-      ? "16px"
-      : size === "xl"
-      ? "18px"
-      : "10px"};
-
-  transition: all 0.2s ease;
-  color: ${({ theme, error }) => theme.palette.text.secondary};
-
-  .label {
-    width: fit-content;
-    min-width: fit-content;
-  }
-
-  .label::after {
-    content: ${(props) => (props.asterisk ? "'*'" : "")};
-    color: ${({ theme }) => theme.palette.error.main};
-    margin-left: 2px;
-  }
-
-  .label:hover {
-    cursor: ${({ description }) => (description ? "pointer" : "default")};
-    color: ${({ description, theme }) =>
-      description ? theme.palette.text.primary : theme.palette.text.secondary};
-  }
-
-  .error {
-    user-select: none;
-    transition: all 0.2s ease;
-    cursor: pointer;
-    color: ${({ theme }) => theme.palette.error.main};
-    font-size: 10px;
-    max-width: 85%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .error:hover {
-    color: ${({ theme }) => theme.palette.error.light};
-  }
-`;
-
-export default FieldLabel;

package/FieldLabel/index.ts

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