@monolith-forensics/monolith-ui 1.1.0 → 1.1.1

package/FileInputField/FileInputField.tsx

@@ -1,179 +0,0 @@
-import { useCallback, useState, ReactNode, HTMLAttributes } from "react";
-import styled from "styled-components";
-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(
-  ({
-    className,
-    children,
-    label,
-    error,
-    required,
-    size,
-    onChange,
-    onFocus,
-    dropZoneOptions = {},
-    style = {},
-  }: FileInputFieldProps) => {
-    const [files, setFiles] = useState<File[]>([]);
-
-    const onDrop = useCallback((acceptedFiles: File[]) => {
-      setFiles(acceptedFiles);
-      // Do something with the files
-      onChange?.(acceptedFiles);
-    }, []);
-
-    const handleRemoveFile = (file: File) => {
-      setFiles((prev) => prev.filter((f) => f !== file));
-    };
-
-    const { getRootProps, getInputProps } = useDropzone({
-      onDrop,
-      ...dropZoneOptions,
-    });
-
-    return (
-      <div className={className}>
-        {label && (
-          <FieldLabel error={error} asterisk={required} size={size}>
-            {label}
-          </FieldLabel>
-        )}
-        <div
-          className={"file-input-container"}
-          {...getRootProps()}
-          onFocus={onFocus}
-          style={style}
-        >
-          <input {...getInputProps()} />
-          {children && children}
-          {!children && <div>Drop files here or click to select files ...</div>}
-        </div>
-        <div className="file-selections">
-          {files.map((file, index) => (
-            <Pill
-              size="sm"
-              key={index}
-              showRemoveIcon
-              onRemove={() => handleRemoveFile(file)}
-            >
-              {file.name}
-            </Pill>
-          ))}
-        </div>
-      </div>
-    );
-  }
-)`
-  display: flex;
-  flex-direction: column;
-
-  .file-input-container {
-    user-select: none;
-    cursor: pointer;
-    outline: none;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 75px;
-
-    color: ${({ theme }) => theme.palette.text.secondary};
-
-    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;
-    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;
-        }
-      }};
-
-    padding: ${({ size }) =>
-      size === "xs"
-        ? "0px 8px"
-        : size === "sm"
-        ? "0px 10px"
-        : size === "md"
-        ? "0px 12px"
-        : size === "lg"
-        ? "0px 14px"
-        : size === "xl"
-        ? "0px 16px"
-        : "0px 8px"};
-
-    max-width: 100%;
-
-    transition: border 0.2s;
-
-    &:hover {
-      border: 1px solid ${({ theme }) => theme.palette.primary.main};
-    }
-
-    &:focus {
-      border: 1px solid ${({ theme }) => theme.palette.primary.main};
-    }
-  }
-
-  .file-selections {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    margin-top: 10px;
-  }
-`;
-
-export default FileInputField;

package/FileInputField/index.ts

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

package/Flyout/Flyout.tsx

@@ -1,172 +0,0 @@
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  useFloating,
-} from "@floating-ui/react";
-import { XIcon } from "lucide-react";
-import styled from "styled-components";
-
-const ANIMATION_TIME = 300;
-
-const StyledOverlay = styled(FloatingOverlay)`
-  background-color: rgba(0, 0, 0, 0.3);
-  position: fixed;
-  inset: 0;
-  z-index: 1400;
-
-  @keyframes overlayShow {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`;
-
-const StyledClose = styled.div`
-  position: absolute;
-  top: 20px;
-  right: 20px;
-
-  color: ${(props) => props.theme.palette.text.secondary};
-`;
-
-const StyledButton = styled.button`
-  background-color: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 0;
-
-  color: ${(props) => props.theme.palette.text.primary};
-
-  &:hover {
-    background-color: ${(props) => props.theme.palette.action.hover};
-  }
-`;
-
-interface StyledContentProps {
-  translate?: any;
-}
-
-const StyledContent = styled.div<StyledContentProps>`
-  background-color: ${({ theme }) =>
-    theme.name === "DARK"
-      ? theme.palette.background.alt
-      : theme.palette.background.default};
-  border-radius: 6px;
-  border: 1px solid ${(props) => props.theme.palette.divider};
-  position: fixed;
-  margin: 10px;
-
-  top: 0px;
-  right: 0px;
-  width: 50vw;
-  height: calc(100vh - 20px);
-
-  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
-
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-
-  overflow-y: hidden;
-
-  &:focus {
-    outline: none;
-  }
-
-  animation: contentShow ${ANIMATION_TIME}ms cubic-bezier(0.16, 1, 0.3, 1);
-
-  // slide in from right to left
-  @keyframes contentShow {
-    from {
-      transform: translate(100%, 0);
-    }
-    to {
-      transform: translate(0, 0);
-    }
-  }
-`;
-
-const StyledInnerContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-
-  overflow-y: auto;
-  padding: 25px;
-`;
-
-interface FlyoutProps {
-  children: React.ReactNode;
-  open?: boolean;
-  onClose?: () => void;
-  style?: React.CSSProperties;
-  closeOnOutsideClick?: boolean;
-  showCloseButton?: boolean;
-}
-
-const Flyout: React.FC<FlyoutProps> = ({
-  children,
-  open = false,
-  onClose = () => {},
-  style = {},
-  closeOnOutsideClick = true,
-  showCloseButton = true,
-}) => {
-  const { refs, floatingStyles, context } = useFloating({
-    open,
-    onOpenChange: (isOpen) => {
-      if (!isOpen) {
-        onClose?.();
-      }
-    },
-  });
-
-  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-    const target = event.target as HTMLDivElement;
-    if (
-      target?.className?.includes?.("mf-ModalOverlay") &&
-      closeOnOutsideClick
-    ) {
-      onClose?.();
-    }
-  };
-
-  return (
-    <FloatingPortal preserveTabOrder>
-      {open && (
-        <StyledOverlay
-          className="mf-ModalOverlay"
-          lockScroll
-          onMouseDown={handleMouseDown}
-        >
-          <FloatingFocusManager context={context} modal={true}>
-            <StyledContent
-              style={style}
-              className={`mf-Modal mf-Flyout`}
-              ref={refs.setFloating}
-              {...floatingStyles}
-            >
-              {showCloseButton && (
-                <StyledClose>
-                  <StyledButton onMouseDown={() => onClose?.()}>
-                    <XIcon size={18} />
-                  </StyledButton>
-                </StyledClose>
-              )}
-              <StyledInnerContent className="mf-Flyout inner-content">
-                {children}
-              </StyledInnerContent>
-            </StyledContent>
-          </FloatingFocusManager>
-        </StyledOverlay>
-      )}
-    </FloatingPortal>
-  );
-};
-
-export default Flyout;

package/Flyout/FlyoutHeader.tsx

@@ -1,14 +0,0 @@
-import styled from "styled-components";
-
-interface FlyoutHeaderProps {
-  hasBorder?: boolean;
-}
-
-const FlyoutHeader = styled.div<FlyoutHeaderProps>`
-  border-bottom: ${({ theme, hasBorder }) =>
-    hasBorder ? `1px solid ${theme.palette.divider}` : "none"};
-
-  min-height: 50px;
-`;
-
-export default FlyoutHeader;

package/Flyout/FlyoutTitle.tsx

@@ -1,10 +0,0 @@
-import styled from "styled-components";
-
-const FlyoutTitle = styled.h1`
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0px;
-  color: ${(props) => props.theme.palette.text.primary};
-`;
-
-export default FlyoutTitle;

package/Flyout/index.ts

@@ -1,3 +0,0 @@
-export { default } from "./Flyout";
-export { default as FlyoutHeader } from "./FlyoutHeader";
-export { default as FlyoutTitle } from "./FlyoutTitle";

package/FormSection/FormSection.tsx

@@ -1,71 +0,0 @@
-import { ChevronDownIcon } from "lucide-react";
-import { ReactNode, useState } from "react";
-import styled from "styled-components";
-
-interface FormSectionProps {
-  children?: ReactNode;
-  className?: string;
-  title?: string;
-  defaultOpen?: boolean;
-}
-
-const FormSection = styled(
-  ({ className, title, children, defaultOpen = true }: FormSectionProps) => {
-    const [open, setOpen] = useState(defaultOpen);
-
-    return (
-      <div className={className}>
-        <div
-          className="section-header"
-          onClick={(e) => setOpen((prev) => !prev)}
-        >
-          <h3>{title}</h3>
-          <div className="section-line"></div>
-          <ChevronDownIcon size={18} className={open ? "open" : ""} />
-        </div>
-        <div className="section-content" data-open={open}>
-          {children}
-        </div>
-      </div>
-    );
-  }
-)`
-  h3 {
-    margin: 0;
-  }
-
-  .section-header {
-    user-select: none;
-    cursor: pointer;
-    margin-bottom: 10px;
-
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    align-items: center;
-
-    .section-line {
-      flex: 1;
-      height: 1px;
-      background-color: ${({ theme }) => theme.palette.divider};
-    }
-
-    svg {
-      transition: transform 0.2s;
-      color: ${({ theme }) => theme.palette.text.secondary};
-
-      &.open {
-        transform: rotate(180deg);
-      }
-    }
-  }
-
-  .section-content {
-    padding: 10px 0px;
-    &[data-open="false"] {
-      display: none;
-    }
-  }
-`;
-
-export default FormSection;

package/FormSection/index.ts

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

package/Grid/Grid.tsx

@@ -1,18 +0,0 @@
-import styled from "styled-components";
-
-interface GridProps {
-  col?: number;
-  width?: string | number;
-}
-
-const Grid = styled.div<GridProps>`
-  display: grid;
-  grid-template-columns: repeat(${({ col }) => col || 1}, minmax(0, 1fr));
-  gap: 20px;
-
-  width: ${({ width }) =>
-    Number.isInteger(width) ? `${width}px` : width || "100%"};
-  height: auto;
-`;
-
-export default Grid;

package/Grid/index.ts

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

package/IconButton/IconButton.tsx

@@ -1,27 +0,0 @@
-import styled from "styled-components";
-import { Button } from "..";
-import { ButtonProps } from "../Button/Button.js";
-
-const IconButton = styled(Button)<ButtonProps>`
-  padding: ${({ size, variant }) => {
-    if (variant === "text") return `0px 0px`;
-    switch (size) {
-      case "xxs":
-        return `0px 4px`;
-      case "xs":
-        return `0px 4px`;
-      case "sm":
-        return `0px 6px`;
-      case "md":
-        return `0px 8px`;
-      case "lg":
-        return `0px 10px`;
-      case "xl":
-        return `0px 12px`;
-      default:
-        return `0px 6px`;
-    }
-  }};
-`;
-
-export default IconButton;

package/IconButton/index.ts

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

package/Input/Input.tsx

@@ -1,164 +0,0 @@
-import styled from "styled-components";
-import { Size, Variant } from "../core";
-import { forwardRef } from "react";
-
-export interface InputProps {
-  ref?: React.Ref<HTMLInputElement>;
-  className?: string;
-  size?: Size;
-  variant?: Variant;
-  width?: string | number | null | undefined;
-  style?: React.CSSProperties;
-  placeholder?: string;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-  autoFocus?: boolean;
-  readOnly?: boolean;
-}
-
-const Input = styled(
-  forwardRef(
-    (
-      {
-        className,
-        size = "sm",
-        variant = "outlined",
-        width,
-        ...rest
-      }: InputProps,
-      ref: React.Ref<HTMLInputElement>
-    ) => {
-      return <input ref={ref} className={className} {...rest} />;
-    }
-  )
-)`
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-  pointer-events: "all";
-  user-select: "all";
-  outline: none;
-
-  color: ${({ theme }) => theme.palette.text.primary};
-  font-size: ${({ size }) =>
-    size === "xs"
-      ? "11px"
-      : size === "sm"
-      ? "13px"
-      : size === "md"
-      ? "15px"
-      : size === "lg"
-      ? "17px"
-      : size === "xl"
-      ? "19px"
-      : "11px"};
-
-  height: ${({ size }) =>
-    size === "xs"
-      ? "26px"
-      : size === "sm"
-      ? "30px"
-      : size === "md"
-      ? "36px"
-      : size === "lg"
-      ? "42px"
-      : size === "xl"
-      ? "50px"
-      : "26px"};
-
-  min-height: ${({ size }) =>
-    size === "xs"
-      ? "26px"
-      : size === "sm"
-      ? "30px"
-      : size === "md"
-      ? "36px"
-      : size === "lg"
-      ? "42px"
-      : size === "xl"
-      ? "50px"
-      : "26px"};
-
-  transition: border 0.1s ease-in-out;
-  border-radius: 4px;
-  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;
-      }
-    }};
-
-  padding: ${({ size }) =>
-    size === "xs"
-      ? "0px 8px"
-      : size === "sm"
-      ? "0px 10px"
-      : size === "md"
-      ? "0px 12px"
-      : size === "lg"
-      ? "0px 14px"
-      : size === "xl"
-      ? "0px 16px"
-      : "0px 8px"};
-
-  width: ${({ width }) => {
-    if (typeof width === "undefined") return "100%";
-    if (width === null) return "100%";
-    if (typeof width === "string") return width;
-    if (typeof width === "number") return `${width}px`;
-  }};
-
-  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;
-    }
-  }};
-
-  ::placeholder {
-    font-size: ${({ size }) =>
-      size === "xs"
-        ? "10px"
-        : size === "sm"
-        ? "12px"
-        : size === "md"
-        ? "14px"
-        : size === "lg"
-        ? "16px"
-        : size === "xl"
-        ? "18px"
-        : "10px"};
-  }
-
-  &:focus {
-    border: 1px solid ${({ theme }) => theme.palette.primary.main};
-  }
-
-  &[data-button-right="true"] {
-    padding-right: 36px;
-  }
-
-  &[readOnly] {
-    cursor: pointer;
-  }
-`;
-
-export default Input;

package/Input/index.ts

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