@monolith-forensics/monolith-ui 1.1.0 → 1.1.1

package/DateInput/DateInput.tsx

@@ -1,717 +0,0 @@
-import moment from "moment";
-import { useFloating, flip, offset, FloatingPortal } from "@floating-ui/react";
-import React, {
-  MutableRefObject,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import styled from "styled-components";
-import { FieldLabel, Calendar } from "..";
-import {
-  StyledContent,
-  StyledFloatContainer,
-  ArrowButton,
-  ClearButton,
-  Size,
-  Variant,
-} from "../core";
-
-const StyledInputContainer = styled.div<{
-  size: Size;
-  variant: Variant;
-}>`
-  position: relative;
-
-  caret-color: transparent;
-  user-select: none;
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  user-select: none;
-
-  pointer-events: all;
-  outline: none;
-
-  border-radius: 5px;
-  transition: border 0.1s ease-in-out;
-  border: 1px solid
-    ${({ theme, variant }) => {
-      switch (variant) {
-        case "filled":
-          return "transparent";
-        case "outlined":
-          return theme.palette.input.border;
-        case "text":
-          return "transparent";
-        default:
-          return theme.palette.input.border;
-      }
-    }};
-
-  font-family: ${({ theme }) => theme.typography.fontFamily};
-
-  color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) =>
-    size === "xs"
-      ? "11px"
-      : size === "sm"
-      ? "13px"
-      : size === "md"
-      ? "15px"
-      : size === "lg"
-      ? "17px"
-      : size === "xl"
-      ? "19px"
-      : "11px"};
-
-  width: 100%;
-  height: ${({ size }) =>
-    size === "xs"
-      ? "26px"
-      : size === "sm"
-      ? "30px"
-      : size === "md"
-      ? "36px"
-      : size === "lg"
-      ? "42px"
-      : size === "xl"
-      ? "50px"
-      : "26px"};
-
-  padding: ${({ size }) =>
-    size === "xs"
-      ? "0px 8px"
-      : size === "sm"
-      ? "0px 10px"
-      : size === "md"
-      ? "0px 12px"
-      : size === "lg"
-      ? "0px 14px"
-      : size === "xl"
-      ? "0px 16px"
-      : "0px 8px"};
-
-  &[data-button-right="true"] {
-    padding-right: 36px;
-  }
-
-  background-color: ${({ theme, variant }) => {
-    switch (variant) {
-      case "filled":
-        return theme.palette.input.background;
-      case "outlined":
-        return theme.palette.input.background;
-      case "text":
-        return "transparent";
-      default:
-        return theme.palette.input.background;
-    }
-  }};
-
-  &[readOnly] {
-    cursor: pointer;
-  }
-
-  & [data-has-space="true"] {
-    padding-left: 4px;
-  }
-
-  & [data-selected="true"] {
-    background-color: ${(props) => props.theme.palette.primary.main}50;
-  }
-
-  &[data-empty="true"] {
-    color: ${(props) => props.theme.palette.input.placeholder};
-    div {
-      color: ${(props) => props.theme.palette.input.placeholder};
-    }
-  }
-
-  & [data-default-btn="true"] {
-    color: ${(props) => props.theme.palette.text.secondary};
-    div {
-      color: ${(props) => props.theme.palette.text.secondary};
-    }
-  }
-
-  &:focus {
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
-  }
-`;
-
-const InputSegment = styled.div<{
-  size: Size;
-}>`
-  user-select: none;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  pointer-events: all;
-  outline: none;
-  border: none;
-  padding: 0;
-
-  height: ${({ size }) =>
-    size === "xs"
-      ? "22px"
-      : size === "sm"
-      ? "26px"
-      : size === "md"
-      ? "32px"
-      : size === "lg"
-      ? "38px"
-      : size === "xl"
-      ? "46px"
-      : "22px"};
-
-  height: 100%;
-
-  background-color: transparent;
-  color: ${(props) => props.theme.palette.text.primary};
-
-  ::placeholder {
-    font-size: ${({ size }) =>
-      size === "xs"
-        ? "10px"
-        : size === "sm"
-        ? "12px"
-        : size === "md"
-        ? "14px"
-        : size === "lg"
-        ? "16px"
-        : size === "xl"
-        ? "18px"
-        : "10px"};
-  }
-`;
-
-type Segment = {
-  value: string;
-  text: string;
-  placeholder: string;
-  type: moment.unitOfTime.DurationConstructor | "separator";
-  index: number;
-  momentType?: moment.unitOfTime.All | moment.unitOfTime.DurationConstructor;
-  pattern?: string;
-};
-
-function parseTimestamp(
-  timestamp: string,
-  format: string,
-  utc = false
-): Segment[] {
-  // Define patterns to identify datetime components and their placeholders
-  const patterns = [
-    { pattern: "YYYY", placeholder: "YYYY", type: "year", momentType: "year" },
-    { pattern: "MM", placeholder: "MM", type: "month", momentType: "month" },
-    { pattern: "DD", placeholder: "DD", type: "day", momentType: "date" },
-    { pattern: "HH", placeholder: "HH", type: "hour", momentType: "hour" },
-    { pattern: "h", placeholder: "h", type: "hour", momentType: "hour" },
-    { pattern: "mm", placeholder: "mm", type: "minute", momentType: "minute" },
-    { pattern: "ss", placeholder: "ss", type: "second", momentType: "second" },
-    {
-      pattern: "SSS",
-      placeholder: "SSS",
-      type: "millisecond",
-      momentType: "millisecond",
-    },
-    {
-      pattern: "A",
-      placeholder: "AM/PM",
-      type: "meridiem",
-      momentType: "meridiem",
-    },
-    {
-      pattern: "Z",
-      placeholder: "Z",
-      type: "timezone",
-      momentType: "timezone",
-    },
-  ] as Segment[];
-
-  // Helper function to split format into datetime components and separators
-  function splitFormat(format: string) {
-    return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
-  }
-
-  // Helper function to match segments to their placeholders and types
-  function matchSegment(segment: string): Segment {
-    const pattern = patterns.find((p) => p.pattern === segment);
-    return pattern
-      ? pattern
-      : {
-          pattern: segment,
-          placeholder: segment,
-          type: "separator",
-          value: "",
-          text: "",
-          index: -1,
-        };
-  }
-
-  const segments = splitFormat(format).map((segment, i) => {
-    const { pattern, placeholder, type, momentType } = matchSegment(segment);
-    const value = timestamp
-      ? utc === true
-        ? moment.utc(timestamp).format(pattern)
-        : moment(timestamp).format(pattern)
-      : placeholder;
-
-    return {
-      value,
-      text: value,
-      placeholder,
-      type,
-      momentType,
-      index: i,
-    };
-  });
-
-  return segments;
-}
-
-interface DateInputProps {
-  className?: string;
-  defaultValue?: string | null;
-  format?: string;
-  label?: string;
-  description?: string;
-  arrow?: boolean;
-  size?: Size;
-  variant?: Variant;
-  clearable?: boolean;
-  required?: boolean;
-  onChange?: (value: string | null) => void;
-  min?: Date;
-  max?: Date;
-  error?: string;
-  width?: string;
-  enableCalendar?: boolean;
-  utc?: boolean;
-  closeOnSelect?: boolean;
-}
-
-const DateInput = styled(
-  ({
-    className,
-    defaultValue = null,
-    format = "YYYY-MM-DD HH:mm:ss",
-    label,
-    description,
-    arrow = true,
-    size = "sm",
-    variant = "outlined",
-    clearable = false,
-    required = false,
-    onChange = () => {},
-    min,
-    max,
-    error,
-    enableCalendar = false,
-    utc = false,
-    closeOnSelect = true,
-  }: DateInputProps) => {
-    const [value, setValue] = useState<string | null>(defaultValue);
-    const [selectedSegment, setSelectedSegment] = useState<
-      Segment | null | undefined
-    >();
-    const [isOpen, setIsOpen] = useState(false);
-
-    // Check if format is date only and does not include time
-    const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
-
-    const mainRef: MutableRefObject<HTMLElement | null> =
-      useRef<HTMLElement>(null);
-
-    const typedKeys = useRef("");
-
-    const { refs, floatingStyles } = useFloating({
-      open: isOpen,
-      onOpenChange: setIsOpen,
-      placement: "bottom-start",
-      strategy: "absolute",
-      // Handle collisions with the viewport
-      middleware: [flip(), offset(5)],
-    });
-
-    const segments: Segment[] = useMemo(
-      () => parseTimestamp(moment(value).toISOString(), format, utc),
-      [value, format, utc]
-    );
-
-    const checkValidRange = (value: string) => {
-      if (min && moment(value).isBefore(min)) return false;
-      if (max && moment(value).isAfter(max)) return false;
-      return true;
-    };
-
-    const toggleOpen = () => {
-      setIsOpen((prev) => {
-        return !prev;
-      });
-    };
-
-    const handleClear = (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      setValue(null);
-      onChange?.(null);
-      setIsOpen(false);
-    };
-
-    const handleSegmentClick = (e: React.MouseEvent, segment: Segment) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (segment.type === "separator") return;
-      if (mainRef?.current) {
-        const input: HTMLInputElement | null = mainRef.current.querySelector(
-          "div[data-type='input']"
-        );
-        if (input) {
-          input.focus();
-        }
-      }
-      setSelectedSegment(segment);
-    };
-
-    const handleContainerClick = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (mainRef?.current) {
-        const input: HTMLInputElement | null = mainRef.current.querySelector(
-          "div[data-type='input']"
-        );
-        if (input) {
-          input.focus();
-        }
-      }
-      toggleOpen();
-      setIsOpen(true);
-      setSelectedSegment(segments[0]);
-    };
-
-    const nextSegment = () => {
-      setSelectedSegment((prev) => {
-        if (!prev) return segments[0];
-        const next = segments[prev.index + 2];
-        return next || prev;
-      });
-    };
-
-    // prevent click and drag selection
-    const handleMouseDown = (
-      e: React.MouseEvent<HTMLDivElement, MouseEvent>
-    ) => {
-      e.preventDefault();
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (!selectedSegment) return;
-      // tab
-      if (e.key === "Tab") {
-        setSelectedSegment(null);
-        setIsOpen(false);
-        return;
-      }
-      // Right Arrow
-      if (e.key === "ArrowRight") {
-        e.preventDefault();
-
-        setSelectedSegment((prev) => {
-          if (!prev) return segments[0];
-          const next = segments[prev.index + 2];
-          return next || prev;
-        });
-      }
-      // Left Arrow
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        setSelectedSegment((prev) => {
-          if (!prev) return segments[0];
-          const next = segments[prev.index - 2];
-          return next || prev;
-        });
-      }
-
-      // Up Arrow
-      if (e.key === "ArrowUp") {
-        e.preventDefault();
-
-        setValue((prev) => {
-          if (selectedSegment.type === "separator") return prev;
-          let newValue = prev
-            ? moment(prev).add(1, selectedSegment.type).toISOString()
-            : moment().toISOString();
-          if (!checkValidRange(newValue)) return prev;
-          if (isDateOnly) {
-            newValue = moment(newValue).format("YYYY-MM-DD");
-          }
-          onChange?.(newValue);
-          return newValue;
-        });
-      }
-
-      // Down Arrow
-      if (e.key === "ArrowDown") {
-        e.preventDefault();
-
-        setValue((prev) => {
-          if (selectedSegment.type === "separator") return prev;
-          let newValue = prev
-            ? moment(prev).subtract(1, selectedSegment.type).toISOString()
-            : moment().toISOString();
-          if (!checkValidRange(newValue)) return prev;
-
-          if (isDateOnly) {
-            newValue = moment(newValue).format("YYYY-MM-DD");
-          }
-
-          onChange?.(newValue);
-          return newValue;
-        });
-      }
-
-      // handle paste
-      if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
-        return;
-      }
-
-      // only allow numbers
-      if (e.key.match(/[0-9]/)) {
-        e.preventDefault();
-        const segmentLength = selectedSegment.text.length;
-
-        typedKeys.current += e.key;
-        let tempValue = typedKeys.current;
-
-        if (
-          ["month", "day"].includes(selectedSegment.type) &&
-          Array.from(tempValue).every((c) => c === "0")
-        ) {
-          tempValue = "01";
-        }
-
-        setValue((prev) => {
-          if (!selectedSegment?.momentType) return prev;
-          const newValue = moment(prev)
-            .set(
-              selectedSegment.momentType,
-              parseInt(tempValue, 10) -
-                (selectedSegment.type === "month" ? 1 : 0)
-            )
-            .toISOString();
-          if (!checkValidRange(newValue)) return prev;
-          onChange?.(newValue);
-          return newValue;
-        });
-
-        if (typedKeys.current.length === segmentLength) {
-          nextSegment();
-          typedKeys.current = "";
-        }
-      }
-
-      e.preventDefault();
-    };
-
-    const handleWheelEvent = (e: WheelEvent) => {
-      if (!selectedSegment) return;
-
-      if (e.deltaY > 0) {
-        setValue((prev) => {
-          if (selectedSegment.type === "separator") return prev;
-          const newValue = prev
-            ? moment(prev).subtract(1, selectedSegment.type).toISOString()
-            : moment().toISOString();
-          if (!checkValidRange(newValue)) return prev;
-          onChange?.(newValue);
-          return newValue;
-        });
-      } else {
-        setValue((prev) => {
-          if (selectedSegment.type === "separator") return prev;
-          const newValue = prev
-            ? moment(prev).add(1, selectedSegment.type).toISOString()
-            : moment().toISOString();
-          if (!checkValidRange(newValue)) return prev;
-          onChange?.(newValue);
-          return newValue;
-        });
-      }
-    };
-
-    const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      const pastedText = e?.clipboardData?.getData?.("text");
-      if (!pastedText) return;
-
-      // check if pasted text is a valid timestamp
-      if (!moment(pastedText).isValid()) return;
-
-      const parsedTimestamp = moment.utc(pastedText).toISOString();
-
-      setValue(parsedTimestamp);
-    };
-
-    // Close on outside click
-    useEffect(() => {
-      const close = (e: MouseEvent) => {
-        const target = e.target as Node;
-        const referenceElement = refs?.reference?.current as Node;
-        const floatingElement = refs?.floating?.current as Node;
-
-        if (
-          floatingElement && // Check if the floating element exists
-          e.target !== referenceElement && // Check if the target is not the reference (input)
-          !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
-          !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
-        ) {
-          setIsOpen(false);
-        }
-        setSelectedSegment(null); // clear selected segment when clicked outside component
-      };
-      document.addEventListener("click", close);
-      return () => document.removeEventListener("click", close);
-    }, [refs.floating]);
-
-    // Global Wheel Event when segement selected
-    useEffect(() => {
-      if (selectedSegment) {
-        document.addEventListener("wheel", handleWheelEvent);
-      }
-      return () => {
-        document.removeEventListener("wheel", handleWheelEvent);
-      };
-    }, [selectedSegment]);
-
-    return (
-      <div className={className}>
-        {label && (
-          <FieldLabel
-            error={error}
-            asterisk={required}
-            size={size}
-            description={description}
-          >
-            {label}
-          </FieldLabel>
-        )}
-        <StyledInputContainer
-          ref={(ref) => {
-            mainRef.current = ref;
-            refs.setReference(ref);
-          }}
-          onClick={handleContainerClick}
-          onMouseDown={handleMouseDown}
-          onKeyDown={handleKeyDown}
-          onPaste={handlePaste}
-          onFocus={(e) => {
-            e.preventDefault();
-            setSelectedSegment(segments[0]);
-          }}
-          data-empty={!value}
-          role="textbox"
-          size={size}
-          variant={variant}
-          data-button-right={arrow || clearable}
-        >
-          {segments.map((segment, i) => {
-            if (segment.type === "separator") {
-              return (
-                <div
-                  className="separator"
-                  key={i}
-                  tabIndex={-1}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                  onFocus={(e) => e.preventDefault()}
-                  onPointerDown={(e) => e.preventDefault()}
-                  data-type="separator"
-                  data-identifier={segment.type}
-                  data-has-space={segment.text.includes(" ")}
-                  data-placeholder={segment.placeholder}
-                  data-value={segment.value}
-                >
-                  {segment.text}
-                </div>
-              );
-            }
-            return (
-              <InputSegment
-                className={"input"}
-                contentEditable
-                suppressContentEditableWarning
-                key={i}
-                tabIndex={i === 0 ? 0 : -1}
-                onClick={(e) => handleSegmentClick(e, segment)}
-                data-type="input"
-                size={size}
-                data-identifier={segment.type}
-                data-has-space={segment.text.includes(" ")}
-                data-placeholder={segment.placeholder}
-                data-value={segment.value}
-                data-selected={selectedSegment?.index === segment.index}
-              >
-                {value ? segment.text : segment.placeholder}
-              </InputSegment>
-            );
-          })}
-          {utc && <div style={{ marginLeft: 5 }}>UTC</div>}
-          {clearable && value ? (
-            <ClearButton onClick={handleClear} />
-          ) : arrow ? (
-            <ArrowButton />
-          ) : null}
-        </StyledInputContainer>
-        {enableCalendar && isOpen && (
-          <FloatingPortal preserveTabOrder>
-            <StyledFloatContainer ref={refs.setFloating} style={floatingStyles}>
-              <StyledContent maxDropdownHeight="fit-content">
-                <div>
-                  <Calendar
-                    key={1}
-                    value={moment(value).toDate()}
-                    clearable={false}
-                    min={min}
-                    max={max}
-                    // hourFormat={hourFormat}
-                    onChange={(date) => {
-                      setValue((prev) => {
-                        // make copy of prev variable
-                        const oldValue = moment(prev).toISOString();
-
-                        const result = `${moment(date).format(
-                          "YYYY-MM-DD"
-                        )}T${moment(prev || undefined).format("HH:mm:ss")}`;
-
-                        let isoResult = moment(result).toISOString();
-
-                        if (!checkValidRange(result)) return oldValue;
-
-                        if (isDateOnly) {
-                          isoResult = moment(result).format("YYYY-MM-DD");
-                        }
-                        onChange?.(isoResult);
-                        setIsOpen(closeOnSelect ? false : true);
-                        return isoResult;
-                      });
-                    }}
-                    includeTime={false}
-                  />
-                </div>
-              </StyledContent>
-            </StyledFloatContainer>
-          </FloatingPortal>
-        )}
-      </div>
-    );
-  }
-)``;
-
-export default DateInput;

package/DateInput/index.ts

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