@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/Flyout/Flyout.tsx

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

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

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

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

package/FormSection/FormSection.tsx

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

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

package/Grid/Grid.tsx

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

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

package/IconButton/IconButton.tsx

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

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

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

@@ -1,36 +1,58 @@
-import React from "react";
 import styled from "styled-components";
+import { Size, Variant } from "../core";
+import { forwardRef } from "react";
 
-interface StyledInputProps {
-  variant?: "contained" | "filled" | "outlined" | "text";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  width?: string | number | null;
-  error?: boolean;
+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 StyledInput = styled.input<StyledInputProps>`
+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 }) => {
-    switch (size) {
-      case "xs":
-        return "12px";
-      case "sm":
-        return "14px";
-      case "md":
-        return "16px";
-      case "lg":
-        return "18px";
-      case "xl":
-        return "20px";
-      default:
-        return "12px";
-    }
-  }};
+  font-size: ${({ size }) =>
+    size === "xs"
+      ? "11px"
+      : size === "sm"
+      ? "13px"
+      : size === "md"
+      ? "15px"
+      : size === "lg"
+      ? "17px"
+      : size === "xl"
+      ? "19px"
+      : "11px"};
 
   height: ${({ size }) =>
     size === "xs"
@@ -58,11 +80,10 @@ const StyledInput = styled.input<StyledInputProps>`
       ? "50px"
       : "26px"};
 
+  transition: border 0.1s ease-in-out;
   border-radius: 4px;
   border: 1px solid
-    ${({ theme, variant, error }) => {
-      // if (!!error) return theme.palette.error.main;
-
+    ${({ theme, variant }) => {
       switch (variant) {
         case "contained":
           return "transparent";
@@ -112,8 +133,6 @@ const StyledInput = styled.input<StyledInputProps>`
     }
   }};
 
-  transition: border 0.1s ease-in-out;
-
   ::placeholder {
     font-size: ${({ size }) =>
       size === "xs"
@@ -129,13 +148,17 @@ const StyledInput = styled.input<StyledInputProps>`
         : "10px"};
   }
 
-  // &:hover {
-  //   border: 1px solid ${(props) => props.theme.palette.input.border};
-  // }
-
   &:focus {
-    border: 1px solid ${({ theme, error }) => theme.palette.primary.main};
+    border: 1px solid ${({ theme }) => theme.palette.primary.main};
+  }
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  &[readOnly] {
+    cursor: pointer;
   }
 `;
 
-export default StyledInput;
+export default Input;

package/Modal/Modal.tsx

@@ -0,0 +1,172 @@
+import styled from "styled-components";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useFloating,
+} from "@floating-ui/react";
+import { CSSProperties, Ref } from "react";
+
+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;
+    }
+  }
+`;
+
+interface StyledContentProps {
+  style?: CSSProperties;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+  // Add other props that StyledContent might receive
+  [key: string]: any; // For additional props such as `floatingStyles`
+}
+
+const StyledContent = styled.div<StyledContentProps>`
+  background-color: ${({ theme }) =>
+    theme.name === "DARK"
+      ? theme.palette.background.default
+      : theme.palette.background.default};
+  border-radius: 6px;
+  border: 1px solid ${(props) => props.theme.palette.divider};
+  position: fixed;
+  top: 25px;
+  left: 50%;
+  transform: translate(-50%, 0px);
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+
+  z-index: 2;
+
+  max-height: calc(100vh - 50px);
+  max-width: calc(100vw - 50px);
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: hidden;
+
+  &:focus {
+    outline: none;
+  }
+
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+  }
+`;
+
+const StyledInnerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+  padding: 25px;
+`;
+
+const StyledClose = styled(RadixDialog.Close)`
+  position: absolute;
+  top: 15px;
+  right: 15px;
+
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+
+const StyledButton = styled.button`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+`;
+
+const Title = styled.h1`
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0px;
+`;
+
+const SubTitle = styled.h2`
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0px;
+  color: ${(props) => props.theme.palette.text.secondary};
+`;
+
+interface ModalProps {
+  children: React.ReactNode;
+  open?: boolean;
+  onClose?: () => void;
+  style?: React.CSSProperties;
+  showCloseButton?: boolean;
+  FocusProps?: any;
+}
+
+const Modal = ({
+  children,
+  open = false,
+  onClose,
+  style = {},
+  showCloseButton = false,
+  FocusProps = {},
+}: ModalProps) => {
+  const { refs, floatingStyles, context } = useFloating({
+    open,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        onClose?.();
+      }
+    },
+  });
+
+  const handleMouseDown = () => {
+    onClose?.();
+  };
+
+  return (
+    <FloatingPortal preserveTabOrder>
+      {open && (
+        <StyledOverlay className="mf-ModalOverlay" lockScroll>
+          <FloatingFocusManager context={context} modal={true} {...FocusProps}>
+            <StyledContent
+              style={style}
+              className="mf-Modal"
+              ref={refs.setFloating}
+              {...floatingStyles}
+            >
+              {showCloseButton && (
+                <StyledClose asChild>
+                  <StyledButton onMouseDown={handleMouseDown}>
+                    <X size={18} />
+                  </StyledButton>
+                </StyledClose>
+              )}
+              <StyledInnerContent>{children}</StyledInnerContent>
+            </StyledContent>
+          </FloatingFocusManager>
+        </StyledOverlay>
+      )}
+    </FloatingPortal>
+  );
+};
+
+Modal.Title = Title;
+Modal.SubTitle = SubTitle;
+
+export default Modal;

package/Modal/index.ts

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