@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/Button/Button.tsx

@@ -0,0 +1,382 @@
+import { ButtonHTMLAttributes, ReactNode, forwardRef } from "react";
+import styled from "styled-components";
+import { Loader2Icon } from "lucide-react";
+import { Size, Variant } from "../core";
+
+const colors = {
+  gray: "#888888",
+  red: "#e03131",
+  pink: "#c2255c",
+  grape: "#9c36b5",
+  violet: "#6741d9",
+  indigo: "#3b5bdb",
+  cyan: "#0c8599",
+  teal: "#099268",
+  green: "#2f9e44",
+  lime: "#66a80f",
+  yellow: "#f08c00",
+  orange: "#e8590c",
+};
+
+type ColorKeys = keyof typeof colors;
+
+interface StyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  fullWidth?: boolean;
+  size?: string;
+  variant?: string;
+  color?: ColorKeys | string;
+  // Add more custom props here if needed
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
+  user-select: none;
+  display: flex;
+  outline: none;
+  white-space: nowrap;
+
+  width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
+  height: ${({ theme, size }) => {
+    switch (size) {
+      case "xxs":
+        return `24px`;
+      case "xs":
+        return `28px`;
+      case "sm":
+        return `34px`;
+      case "md":
+        return `40px`;
+      case "lg":
+        return `48px`;
+      case "xl":
+        return `58px`;
+      default:
+        return `34px`;
+    }
+  }};
+
+  font-weight: 525;
+  letter-spacing: 0.75px;
+  font-size: ${({ theme, size }) => {
+    switch (size) {
+      case "xxs":
+        return `11px`;
+      case "xs":
+        return `12px`;
+      case "sm":
+        return `14px`;
+      case "md":
+        return `16px`;
+      case "lg":
+        return `18px`;
+      case "xl":
+        return `20px`;
+      default:
+        return `14px`;
+    }
+  }};
+
+  padding: ${({ theme, size, variant }) => {
+    if (variant === "text") return `0px 0px`;
+    switch (size) {
+      case "xxs":
+        return `0px 8px`;
+      case "xs":
+        return `0px 12px`;
+      case "sm":
+        return `0px 16px`;
+      case "md":
+        return `0px 20px`;
+      case "lg":
+        return `0px 24px`;
+      case "xl":
+        return `0px 30px`;
+      default:
+        return `0px 16px`;
+    }
+  }};
+
+  color: ${({ theme, variant, color }) => {
+    if (variant === "default") return theme.palette.text.primary;
+    if (variant === "contained") return "white";
+    if (variant === "filled") return "white";
+
+    switch (color) {
+      case "primary":
+        return theme.palette.primary.main;
+      case undefined:
+        return theme.palette.text.primary;
+      default:
+        return color
+          ? theme?.palette?.[color]?.main ||
+              colors[color as keyof typeof colors] ||
+              theme.palette.text.primary
+          : theme.palette.text.primary;
+    }
+  }};
+
+  background-color: ${({ theme, variant, color }) => {
+    if (variant === "default") return "transparent";
+    switch (variant) {
+      case "contained":
+        return color
+          ? theme?.palette?.[color]?.main ||
+              colors[color as keyof typeof colors] ||
+              theme.palette.background.secondary
+          : theme.palette.background.secondary;
+      case "filled":
+        return color
+          ? theme?.palette?.[color]?.main ||
+              colors[color as keyof typeof colors] ||
+              theme.palette.background.secondary
+          : theme.palette.background.secondary;
+      case "light":
+        return (
+          (color
+            ? theme?.palette?.[color]?.main ||
+              colors[color as keyof typeof colors] ||
+              theme.palette.background.secondary
+            : theme.palette.background.secondary) + "30"
+        );
+      case "outlined":
+        return "transparent";
+      case "text":
+        return "transparent";
+      default:
+        return "transparent";
+    }
+  }};
+
+  border-radius: 4px;
+  border: 1px solid
+    ${({ theme, variant, color }) => {
+      switch (variant) {
+        case "contained":
+          return "transparent";
+        case "filled":
+          return "transparent";
+        case "light":
+          return "transparent";
+        case "outlined":
+          return color
+            ? theme?.palette?.[color]?.main ||
+                colors[color as keyof typeof colors] ||
+                theme.palette.divider
+            : theme.palette.divider;
+        case "text":
+          return "transparent";
+        case "subtle":
+          return "transparent";
+        default:
+          return color
+            ? theme?.palette?.[color]?.main ||
+                colors[color as keyof typeof colors] ||
+                theme.palette.divider
+            : theme.palette.divider;
+      }
+    }};
+
+  cursor: pointer;
+
+  transition: background-color 0.2s, border 0.2s;
+
+  .inner-span {
+    display: flex;
+    align-items: center;
+  }
+
+  .button-label {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-position="left"] {
+    margin-inline-end: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  [data-position="right"] {
+    margin-inline-start: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  &:hover {
+    background-color: ${({ theme, variant, color }) => {
+      if (variant === "default") return "transparent";
+      switch (variant) {
+        case "contained":
+          return (
+            (color
+              ? theme?.palette?.[color]?.main ||
+                colors[color as keyof typeof colors] ||
+                theme.palette.background.secondary
+              : theme.palette.background.secondary) + "90"
+          );
+        case "filled":
+          return (
+            (color
+              ? theme?.palette?.[color]?.main ||
+                colors[color as keyof typeof colors] ||
+                theme.palette.background.secondary
+              : theme.palette.background.secondary) + "90"
+          );
+        case "light":
+          return (
+            (color
+              ? theme?.palette?.[color]?.main ||
+                colors[color as keyof typeof colors] ||
+                theme.palette.background.secondary
+              : theme.palette.background.secondary) + "70"
+          );
+        case "outlined":
+          return theme.palette.action.hover;
+        case "text":
+          return "transparent";
+        case "subtle":
+          return color
+            ? (theme?.palette?.[color]?.main ||
+                colors[color as keyof typeof colors]) + "30" ||
+                theme.palette.action.hover
+            : theme.palette.action.hover;
+        default:
+          return theme.palette.action.hover;
+      }
+    }};
+
+    border: 1px solid
+      ${({ theme, variant, color }) => {
+        switch (variant) {
+          case "contained":
+            return "transparent";
+          case "filled":
+            return "transparent";
+          case "light":
+            return "transparent";
+          case "outlined":
+            return color
+              ? colors[color as keyof typeof colors] || theme.palette.divider
+              : theme.palette.divider;
+          case "text":
+            return "transparent";
+          case "subtle":
+            return "transparent";
+          default:
+            return color
+              ? theme?.palette?.[color]?.main ||
+                  colors[color as keyof typeof colors] ||
+                  theme.palette.divider
+              : theme.palette.divider;
+        }
+      }};
+    opacity: ${({ variant }) => (variant === "text" ? 0.8 : 1)};
+  }
+
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+
+  &:focus {
+    text-decoration: underline;
+  }
+
+  &:active {
+    // simulate physical button press
+    translate: 0px 1px;
+    text-decoration: none;
+  }
+
+  // disabled styles
+  ${({ disabled }) =>
+    disabled &&
+    `
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  `}
+`;
+
+const StyledAnchor = styled.a`
+  text-decoration: none;
+  height: 100%;
+
+  &:hover {
+    text-decoration: none !important;
+  }
+`;
+
+const StyledLoader = styled.span`
+  svg {
+    width: 16px;
+    height: 16px;
+    color: ${({ theme, color }) =>
+      color
+        ? theme.palette[color] || colors[color as keyof typeof colors]
+        : theme.palette.primary};
+
+    animation: spin 0.75s linear infinite;
+
+    @keyframes spin {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+`;
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode | string;
+  className?: string;
+  loading?: boolean;
+  leftSection?: ReactNode;
+  rightSection?: ReactNode;
+  href?: string | null;
+  download?: string | null;
+  fullWidth?: boolean;
+  size?: Size;
+  variant?: Variant;
+  color?: string;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    children,
+    loading = false,
+    leftSection = null,
+    rightSection = null,
+    href = null,
+    download = null,
+    ...other
+  } = props;
+
+  const buttonContent = (
+    <span className="inner-span" style={{ height: "100%" }}>
+      {loading ? (
+        <StyledLoader>
+          <Loader2Icon />
+        </StyledLoader>
+      ) : (
+        <>
+          {leftSection && <span data-position="left">{leftSection}</span>}
+          <span className="button-label">{children}</span>
+          {rightSection && <span data-position="right">{rightSection}</span>}
+        </>
+      )}
+    </span>
+  );
+
+  return (
+    <StyledButton ref={ref} {...other}>
+      {href ? (
+        <StyledAnchor href={href} download={download}>
+          {buttonContent}
+        </StyledAnchor>
+      ) : (
+        buttonContent
+      )}
+    </StyledButton>
+  );
+});
+
+export default Button;

package/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button";
+export type { ButtonProps } from "./Button";