@monolith-forensics/monolith-ui 1.0.7 → 1.0.9

package/package.json

@@ -1,20 +1,38 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "UI used for Monolith Apps",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "compile": "rollup -c",
     "publish": "npm publish"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Monolith-Forensics/monolith-ui.git"
   },
-  "author": "Matt Danner",
+  "author": "Matt Danner, Monolith Forensics LLC",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/Monolith-Forensics/monolith-ui/issues"
   },
-  "homepage": "https://github.com/Monolith-Forensics/monolith-ui#readme"
+  "homepage": "https://github.com/Monolith-Forensics/monolith-ui#readme",
+  "dependencies": {
+    "@floating-ui/react": "^0.26.16",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "deepmerge": "^4.3.1",
+    "lucide-react": "^0.378.0",
+    "react-textarea-autosize": "^8.5.3",
+    "styled-components": "^6.1.11"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react": "^18.3.2",
+    "react": "^18.3.1",
+    "rollup": "^4.18.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,10 @@
+import typescript from "@rollup/plugin-typescript";
+
+export default {
+  input: "src/index.ts",
+  output: {
+    dir: "dist",
+    format: "cjs",
+  },
+  plugins: [typescript()],
+};

package/src/components/ArrowButton/ArrowButton.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { ChevronDownIcon } from "lucide-react";
+import styled from "styled-components";
+
+interface ArrowIconProps {
+  className?: string;
+}
+
+const ArrowIcon: React.FC<ArrowIconProps> = styled(
+  ({ className, ...props }: ArrowIconProps) => (
+    <div className={className} {...props}>
+      <ChevronDownIcon size={16} />
+    </div>
+  )
+)`
+  color: ${(props) => props.theme.palette.text.secondary};
+  transition: transform 0.2s ease-in-out;
+  transform: rotate(0deg);
+  will-change: transform;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+interface ArrowButtonProps {
+  className?: string;
+}
+
+const ArrowButton: React.FC<ArrowButtonProps> = styled(
+  ({ className, ...props }: ArrowButtonProps) => (
+    <button
+      className={className}
+      {...props}
+      tabIndex={-1}
+      data-default-btn={true}
+    >
+      <ArrowIcon />
+    </button>
+  )
+)`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  padding-inline: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  outline: none;
+`;
+
+export default ArrowButton;

package/src/components/ArrowButton/index.tsx

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

package/src/components/Button/Button.tsx

@@ -0,0 +1,278 @@
+import React from "react";
+import { forwardRef } from "react";
+import styled from "styled-components";
+
+const colors = {
+  gray: "#dee2e6",
+  red: "#e03131",
+  pink: "#c2255c",
+  grape: "#9c36b5",
+  violet: "#6741d9",
+  indigo: "#3b5bdb",
+  cyan: "#0c8599",
+  teal: "#099268",
+  green: "#2f9e44",
+  lime: "#66a80f",
+  yellow: "#f08c00",
+  orange: "#e8590c",
+};
+
+interface StyledButtonProps {
+  variant?:
+    | "default"
+    | "contained"
+    | "filled"
+    | "light"
+    | "outlined"
+    | "text"
+    | "subtle";
+  color?: string;
+  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+  fullWidth?: boolean;
+}
+
+const StyledButton = styled.button<StyledButtonProps>`
+  width: ${({ fullWidth }) => (fullWidth ? "100%" : "auto")};
+  height: ${({ 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: ${({ 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: ${({ size }) => {
+    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 || null:
+        return theme.palette.text.primary;
+      default:
+        return (
+          theme?.palette?.[color!]?.main ||
+          colors?.[color!] ||
+          theme.palette.text.primary
+        );
+    }
+  }};
+
+  background-color: ${({ theme, variant, color }) => {
+    if (variant === "default") return "transparent";
+    switch (variant) {
+      case "contained":
+        if (!color) return theme.palette.background.secondary;
+        return (
+          theme?.palette?.[color]?.main ||
+          colors?.[color] ||
+          theme.palette.background.secondary
+        );
+      case "filled":
+        if (!color) return theme.palette.background.secondary;
+        return (
+          theme?.palette?.[color]?.main ||
+          colors?.[color] ||
+          theme.palette.background.secondary
+        );
+      case "light":
+        if (!color) return theme.palette.background.secondary + "30";
+        return (
+          (theme?.palette?.[color]?.main ||
+            colors?.[color] ||
+            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":
+          if (!color) return theme.palette.divider;
+          return (
+            theme?.palette?.[color]?.main ||
+            colors?.[color] ||
+            theme.palette.divider
+          );
+        case "text":
+          return "transparent";
+        case "subtle":
+          return "transparent";
+        default:
+          if (!color) return theme.palette.divider;
+          return (
+            theme?.palette?.[color]?.main ||
+            colors?.[color] ||
+            theme.palette.divider
+          );
+      }
+    }};
+
+  cursor: pointer;
+
+  transition: background-color 0.2s, border 0.2s;
+
+  &:hover {
+    background-color: ${({ theme, variant, color }) => {
+      if (variant === "default") return "transparent";
+      switch (variant) {
+        case "contained":
+          if (!color) return theme.palette.background.secondary + "90";
+          return (
+            (theme?.palette?.[color]?.main ||
+              colors?.[color] ||
+              theme.palette.background.secondary) + "90"
+          );
+        case "filled":
+          if (!color) return theme.palette.background.secondary + "90";
+          return (
+            (theme?.palette?.[color]?.main ||
+              colors?.[color] ||
+              theme.palette.background.secondary) + "90"
+          );
+        case "light":
+          if (!color) return theme.palette.background.secondary + "70";
+          return (
+            (theme?.palette?.[color]?.main ||
+              colors?.[color] ||
+              theme.palette.background.secondary) + "70"
+          );
+        case "outlined":
+          return theme.palette.action.hover;
+        case "text":
+          return "transparent";
+        case "subtle":
+          if (!color) return theme.palette.action.hover;
+          return theme?.palette?.[color]?.main || colors?.[color]
+            ? (theme?.palette?.[color]?.main || colors?.[color]) + "30"
+            : 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":
+            if (!color) return theme.palette.divider;
+            return colors?.[color] || theme.palette.divider;
+          case "text":
+            return "transparent";
+          case "subtle":
+            return "transparent";
+          default:
+            if (!color) return theme.palette.divider;
+            return (
+              theme?.palette?.[color]?.main ||
+              colors?.[color] ||
+              theme.palette.divider
+            );
+        }
+      }};
+  }
+`;
+
+export interface ButtonProps {
+  children: React.ReactNode;
+  variant?:
+    | "default"
+    | "contained"
+    | "filled"
+    | "light"
+    | "outlined"
+    | "text"
+    | "subtle";
+  color?: string;
+  size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+  fullWidth?: boolean;
+  onClick?: () => void;
+}
+
+const Button = forwardRef(
+  (props: ButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+    const { children, ...other } = props;
+    return (
+      <StyledButton ref={ref} {...other}>
+        <span style={{ height: "100%" }}>
+          <span style={{ height: "100%" }}>{children}</span>
+        </span>
+      </StyledButton>
+    );
+  }
+);
+
+export default Button;

package/src/components/Button/index.ts

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