@monolith-forensics/monolith-ui 1.0.12 → 1.1.1

package/src/components/FieldLabel/FieldLabel.tsx

@@ -1,152 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import * as Tooltip from "@radix-ui/react-tooltip";
-
-interface InfoComponentProps {
-  description?: string | null;
-  label?: string | Element;
-  children: React.ReactNode;
-}
-
-const InfoComponent: React.FC<InfoComponentProps> = styled(
-  ({ className, children, description, label }) => {
-    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: 99999;
-  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 {
-  errorMessage?: string;
-  error?: boolean;
-  description?: string | null;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  asterisk?: boolean;
-  children: string | Element;
-}
-
-const FieldLabel: React.FC<FieldLabelProps> = styled(
-  ({
-    className,
-    children,
-    errorMessage,
-    error = false,
-    description = null,
-  }) => {
-    return (
-      <div className={className}>
-        <InfoComponent description={description} label={children}>
-          <div className="label">{children}</div>
-        </InfoComponent>
-        {error && (
-          <div className="error" title={errorMessage || error}>
-            {errorMessage || error || "Invalid Value"}
-          </div>
-        )}
-      </div>
-    );
-  }
-)`
-  font-family: apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, sans-serif;
-  user-select: none;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-
-  min-height: 15px;
-  // font-size: 12px;
-  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 {
-    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/src/components/FileInputField/FileInputField.js

@@ -1,171 +0,0 @@
-import { useCallback, useState } from "react";
-import { useDropzone } from "react-dropzone";
-import styled from "styled-components";
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import Pill from "../Pill/Pill.js";
-
-const FileInputField = styled(
-  ({
-    className,
-    children,
-    label,
-    error,
-    errorMessage,
-    required,
-    size,
-    onChange,
-    onFocus,
-    dropZoneOptions = {},
-    style = {},
-  }) => {
-    const [files, setFiles] = useState([]);
-
-    const onDrop = useCallback((acceptedFiles) => {
-      setFiles(acceptedFiles);
-      // Do something with the files
-      onChange?.(acceptedFiles);
-    }, []);
-
-    const handleRemoveFile = (file) => {
-      setFiles((prev) => prev.filter((f) => f !== file));
-    };
-
-    const { getRootProps, getInputProps } = useDropzone({
-      onDrop,
-      ...dropZoneOptions,
-    });
-
-    return (
-      <div className={className}>
-        {label && (
-          <FieldLabel
-            error={error}
-            errorMessage={errorMessage}
-            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/src/components/Input/Input.tsx

@@ -1,141 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-interface StyledInputProps {
-  variant?: "contained" | "filled" | "outlined" | "text";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  width?: string | number | null;
-  error?: boolean;
-}
-
-const StyledInput = styled.input<StyledInputProps>`
-  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";
-    }
-  }};
-
-  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"};
-
-  border-radius: 4px;
-  border: 1px solid
-    ${({ theme, variant, error }) => {
-      // if (!!error) return theme.palette.error.main;
-
-      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;
-    }
-  }};
-
-  transition: border 0.1s ease-in-out;
-
-  ::placeholder {
-    font-size: ${({ size }) =>
-      size === "xs"
-        ? "10px"
-        : size === "sm"
-        ? "12px"
-        : size === "md"
-        ? "14px"
-        : size === "lg"
-        ? "16px"
-        : size === "xl"
-        ? "18px"
-        : "10px"};
-  }
-
-  // &:hover {
-  //   border: 1px solid ${(props) => props.theme.palette.input.border};
-  // }
-
-  &:focus {
-    border: 1px solid ${({ theme, error }) => theme.palette.primary.main};
-  }
-`;
-
-export default StyledInput;

package/src/components/Pill/Pill.tsx

@@ -1,144 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { X } from "lucide-react";
-
-interface PillProps {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  showRemoveIcon?: boolean;
-  onRemove?: () => void;
-}
-
-const StyledButton = styled.button`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  outline: none;
-  transition: color 0.2s;
-  padding-inline-end: 5px;
-`;
-
-const Pill: React.FC<PillProps> = styled(
-  ({ className, children, size, showRemoveIcon = true, onRemove }) => {
-    const handleRemove = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onRemove?.();
-    };
-    return (
-      <div className={className}>
-        <span className="pill-content">{children}</span>
-        {showRemoveIcon && (
-          <StyledButton onClick={handleRemove}>
-            <X />
-          </StyledButton>
-        )}
-      </div>
-    );
-  }
-)`
-  user-select: none;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: row;
-  width: fit-content;
-  max-width: 250px;
-  gap: 5px;
-  flex: 0;
-
-  font-weight: 500;
-  color: ${({ theme }) => theme.palette.text.primary};
-
-  padding-inline-end: 0px;
-
-  padding-inline-start: ${({ size }) => {
-    switch (size) {
-      case "xs":
-        return "8px";
-      case "sm":
-        return "10px";
-      case "md":
-        return "12px";
-      case "lg":
-        return "14px";
-      case "xl":
-        return "16px";
-      default:
-        return "10px";
-    }
-  }};
-
-  height: ${({ size }) => {
-    switch (size) {
-      case "xs":
-        return "20px";
-      case "sm":
-        return "22px";
-      case "md":
-        return "24px";
-      case "lg":
-        return "26px";
-      case "xl":
-        return "28px";
-      default:
-        return "22px";
-    }
-  }};
-
-  border: 1px solid ${({ theme }) => theme.palette.divider};
-  border-radius: 1000px;
-
-  background-color: ${({ theme }) => theme.palette.background.secondary};
-
-  .pill-content {
-    // max-width: 90%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    font-size: ${({ size }) => {
-      switch (size) {
-        case "xs":
-          return "10px";
-        case "sm":
-          return "12px";
-        case "md":
-          return "14px";
-        case "lg":
-          return "16px";
-        case "xl":
-          return "18px";
-        default:
-          return "12px";
-      }
-    }};
-  }
-
-  svg {
-    color: ${({ theme }) => theme.palette.text.primary};
-
-    width: ${({ 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 "14px";
-      }
-    }};
-  }
-`;
-
-export default Pill;