@dmsi/wedgekit-react 0.0.4

package/src/components/DateInput.tsx

@@ -0,0 +1,188 @@
+import { useRef, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { InputBaseProps, InputBase } from "./Input";
+import { CalendarRange } from "./CalendarRange";
+import { Icon } from "./Icon";
+import { findDocumentRoot } from "../utils";
+
+type DateInputProps = InputBaseProps & {
+  /**
+   * Value in the format "YYYY-MM-DD" or empty string.
+   * When enableRangeInSingleMode is true, this should be in format "YYYY-MM-DD|YYYY-MM-DD"
+   */
+  value: string;
+  /**
+   * Called when the date changes.
+   * For single date: receives "YYYY-MM-DD"
+   * For range: receives "YYYY-MM-DD|YYYY-MM-DD"
+   */
+  onChange: (value: string) => void;
+  /**
+   * Optional placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Optional disabled state
+   */
+  disabled?: boolean;
+  /**
+   * Enable range selection in single mode calendar
+   */
+  readOnly?: boolean; // If true, input is read-only and cannot be focused
+  label?: string; // Optional label for the input
+};
+export const DateInput = ({
+  value,
+  onChange,
+  placeholder = "MM/DD/YYYY",
+  disabled,
+  readOnly = false,
+  label,
+  ...props
+}: DateInputProps) => {
+  const [visible, setVisible] = useState(false);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLInputElement | null>(null);
+  const [calendarPosition, setCalendarPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  // Extract from and to values from the pipe-separated string when range is enabled
+  const [from, to] = [value, ""];
+
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      requestAnimationFrame(() => {
+        if (triggerRef.current) {
+          const rect = triggerRef.current.getBoundingClientRect();
+          setCalendarPosition({
+            top: rect.bottom + window.scrollY,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+          });
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (triggerRef.current) {
+      resizeObserver.observe(triggerRef.current);
+    }
+
+    window.addEventListener("scroll", updatePosition);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && popoverRef.current) {
+        setVisible(false);
+        triggerRef.current?.blur();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as HTMLElement) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as HTMLElement)
+      ) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  function handleDateChange(fromValue: string) {
+    // For single date selection, only pass the from value
+    onChange(fromValue);
+    setVisible(false);
+  }
+
+  const handleFocus = () => {
+    if (readOnly) return;
+    setVisible(true);
+    updatePosition();
+  };
+
+  function formatDisplayValue(from?: string) {
+    if (!from) return "";
+
+    // Show single date format: "MM/DD/YYYY"
+    return formatDate(from ?? "");
+  }
+
+  function formatDate(date: string) {
+    if (!date) return "";
+    const [y, m, d] = date.split("-");
+    return `${m}/${d}/${y}`;
+  }
+
+  return (
+    <div className="relative">
+      <InputBase
+        ref={(el) => {
+          triggerRef.current = el;
+        }}
+        {...props}
+        value={formatDisplayValue(from)}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        after={<Icon name="calendar_month" />}
+        onFocus={handleFocus}
+        onChange={() => {
+          // Input is controlled by calendar picker, ignore direct text changes
+        }}
+        label={label}
+      />
+      {visible &&
+        !readOnly &&
+        createPortal(
+          <div
+            ref={(el) => {
+              popoverRef.current = el;
+            }}
+            className="absolute z-40 bg-white"
+            style={{
+              top: `${calendarPosition.top + 16}px`,
+              left: `${calendarPosition.left - 4}px`,
+              minWidth: `${calendarPosition.width}px`,
+            }}
+          >
+            <CalendarRange
+              from={from}
+              to={to || from}
+              onChange={handleDateChange}
+              cardStyle
+              mode="single"
+              disableRange
+            />
+          </div>,
+          findDocumentRoot(popoverRef.current),
+        )}
+    </div>
+  );
+};
+
+DateInput.displayName = "DateInput";

package/src/components/DateRangeInput.tsx

@@ -0,0 +1,179 @@
+import { useRef, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { InputBaseProps, InputBase } from "./Input";
+import { CalendarRange } from "./CalendarRange";
+import { Icon } from "./Icon";
+import { findDocumentRoot } from "../utils";
+
+type DateRangeInputProps = InputBaseProps & {
+  /**
+   * Value in the format "YYYY-MM-DD|YYYY-MM-DD" or empty string
+   */
+  value: string;
+  /**
+   * Called when the range changes. Value is in the format "YYYY-MM-DD|YYYY-MM-DD"
+   */
+  onChange: (value: string) => void;
+  /**
+   * Optional placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Optional disabled state
+   */
+  disabled?: boolean;
+  single?: boolean; // If true, allows single date selection instead of range
+  readOnly?: boolean; // If true, input is read-only and cannot be focused
+  label?: string; // Optional label for the input
+};
+
+export const DateRangeInput = ({
+  value,
+  onChange,
+  placeholder = "MM/DD/YYYY - MM/DD/YYYY",
+  disabled,
+  readOnly = false,
+  single = false, // Enables single date selection instead of range
+  label,
+  ...props
+}: DateRangeInputProps) => {
+  const [visible, setVisible] = useState(false);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLInputElement | null>(null);
+  const [calendarPosition, setCalendarPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  const [from, to] = value.split("|");
+
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      requestAnimationFrame(() => {
+        const rect = triggerRef.current!.getBoundingClientRect();
+        setCalendarPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left + window.scrollX,
+          width: rect.width,
+        });
+      });
+    }
+  };
+
+  useEffect(() => {
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (triggerRef.current) {
+      resizeObserver.observe(triggerRef.current);
+    }
+
+    window.addEventListener("scroll", updatePosition);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && popoverRef.current) {
+        setVisible(false);
+        triggerRef.current?.blur();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  });
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(event.target as HTMLElement) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as HTMLElement)
+      ) {
+        setVisible(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  function handleRangeChange(fromValue: string, toValue: string) {
+    onChange(`${fromValue}|${toValue}`);
+    setVisible(false);
+  }
+
+  const handleFocus = () => {
+    if (readOnly) return; // Do not open calendar if read-only
+    setVisible(true);
+    updatePosition();
+  };
+
+  function formatDisplayValue(from?: string, to?: string) {
+    if (!from && !to) return "";
+    if (from && to) return `${formatDate(from)} - ${formatDate(to)}`;
+    if (from) return `${formatDate(from)} -`;
+    return "";
+  }
+
+  function formatDate(date: string) {
+    const [y, m, d] = date.split("-");
+    return `${m}/${d}/${y}`;
+  }
+
+  return (
+    <div className="relative">
+      <InputBase
+        ref={(el) => {
+          triggerRef.current = el;
+        }}
+        {...props}
+        value={formatDisplayValue(from, to)}
+        placeholder={placeholder}
+        disabled={disabled}
+        after={<Icon name="calendar_month" />}
+        onFocus={handleFocus}
+        readOnly={readOnly}
+        label={label}
+        onChange={() => {
+          // Input is controlled by calendar picker, ignore direct text changes
+        }}
+      />
+      {visible &&
+        !readOnly &&
+        createPortal(
+          <div
+            ref={(el) => {
+              popoverRef.current = el;
+            }}
+            className="absolute z-40 bg-white"
+            style={{
+              top: `${calendarPosition.top + 16}px`,
+              left: `${calendarPosition.left - 4}px`,
+              minWidth: `${calendarPosition.width}px`,
+            }}
+          >
+            <CalendarRange
+              from={from}
+              to={to}
+              onChange={handleRangeChange}
+              cardStyle
+              mode={single ? "single" : "double"}
+            />
+          </div>,
+          findDocumentRoot(popoverRef.current),
+        )}
+    </div>
+  );
+};
+
+DateRangeInput.displayName = "DateRangeInput";

package/src/components/DebugJson.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { useState } from "react";
+
+export function DebugJson({ data }: { data: unknown }) {
+  const [open, setOpen] = useState(false);
+
+  if (process.env.NODE_ENV !== "development") {
+    return null;
+  }
+
+  return (
+    <div className="p-2 rounded bg-neutral-100  border border-red-500 my-4">
+      <button
+        onClick={() => setOpen((prev) => !prev)}
+        className="px-4 py-2 border rounded bg-white"
+      >
+        {open ? "Hide JSON" : "Show JSON"}
+      </button>
+      {open && <pre className="mt-4">{JSON.stringify(data, null, 4)}</pre>}
+    </div>
+  );
+}
+
+DebugJson.displayName = "dasda";

package/src/components/Display.tsx

@@ -0,0 +1,60 @@
+import clsx from "clsx";
+import { AsProps, TextAttributes, TypographyProps } from "../types";
+import { typography } from "../classNames";
+
+type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
+
+type DisplayVariant = "display1" | "display2";
+
+type DisplayProps = {
+  as?: Tags;
+  variant?: DisplayVariant;
+} & AsProps<Tags> &
+  TextAttributes &
+  TypographyProps;
+
+export const Display = ({
+  className,
+  children,
+  as,
+  color,
+  align,
+  variant = "display1",
+  ...props
+}: DisplayProps) => {
+  const defaultElement = variant === "display1" ? "h1" : "h2";
+  const Element = as ?? defaultElement;
+
+  return (
+    <Element
+      className={clsx(
+        typography[variant],
+        className,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+      )}
+      style={{
+        ...props.style,
+        color: color ? `var(--color-${color})` : undefined,
+      }}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+};
+
+Display.displayName = "Display";
+
+// Backward compatibility exports
+export const Display1 = (props: Omit<DisplayProps, "variant">) => (
+  <Display {...props} variant="display1" />
+);
+
+export const Display2 = (props: Omit<DisplayProps, "variant">) => (
+  <Display {...props} variant="display2" />
+);
+
+Display1.displayName = "Display1";
+Display2.displayName = "Display2";

package/src/components/EditingContext.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { createContext, PropsWithChildren, useState } from "react";
+
+type EditingContextType<T> = {
+  data: T[];
+  setData: (row: number, key: string, value: string) => void;
+};
+
+export const EditingContext = createContext<EditingContextType<any>>({
+  data: [],
+  setData: (row: number, key: string, value: string) => {
+    console.log(row, key, value);
+  },
+});
+
+type EditingProviderProps<T> = PropsWithChildren<{ data: T[] }>;
+
+export const EditingProvider = <T,>({ data, children }: EditingProviderProps<T>) => 
+{
+  const [actual, setData] = useState<T[]>(data);
+  
+  const context: EditingContextType<T> = {
+    data: actual,
+    setData: (row: number, key: string, value: string) => 
+    {
+      setData((prev) => {
+        const newData = [...prev];
+        newData[row] = {
+          ...newData[row],
+          [key]: value,
+        };
+
+        return newData;
+      });
+    },
+  };
+
+  return <EditingContext value={context}>{children}</EditingContext>;
+};

package/src/components/FilterGroup.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { ComponentProps, useState, Children, isValidElement } from "react";
+import { Label } from "./Label";
+
+import { Checkbox } from "./Checkbox";
+import { OptionPill } from "./OptionPill";
+import clsx from "clsx";
+import { Link } from "./Link";
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingBottom,
+  componentPaddingY,
+  layoutGroupGap,
+  layoutPaddingBottom,
+} from "../classNames";
+import { Icon } from "./Icon";
+
+type FilterGroupProps = {
+  label: string;
+  open?: boolean;
+  showMore?: boolean;
+  type?: "link" | "checkbox" | "summary";
+  onShowMore?: () => void;
+  onClearAll?: () => void; // ✅ NEW
+};
+
+export const FilterGroup = ({
+  label,
+  type = "link",
+  open = false,
+  showMore = false,
+  onShowMore,
+  onClearAll,
+  children,
+  ...props
+}: ComponentProps<"div"> & FilterGroupProps) => {
+  const isSummary = type === "summary";
+  const [internalExpanded, setInternalExpanded] = useState(open);
+  const [showAllItems, setShowAllItems] = useState(false);
+  const isExpanded = open || internalExpanded;
+  const childArray = Children.toArray(children).filter(isValidElement);
+  const shouldShowAll = isSummary || showAllItems;
+  const visibleChildren = childArray.slice(
+    0,
+    shouldShowAll ? childArray.length : 5,
+  );
+  const showShowMoreLink =
+    showMore &&
+    !isSummary &&
+    childArray.length > 5 &&
+    !showAllItems &&
+    isExpanded;
+
+  return (
+    <div
+      {...props}
+      className={clsx(
+        "border-b border-border-primary-normal",
+        isSummary ? layoutPaddingBottom : componentPaddingBottom,
+      )}
+    >
+      <div
+        className={clsx(
+          "flex items-center justify-between cursor-pointer",
+          layoutGroupGap,
+        )}
+        onClick={handleToggleExpanded}
+      >
+        <Label>{label}</Label>
+
+        {type !== "summary" ? (
+          <Icon
+            name="keyboard_arrow_down"
+            className={clsx(
+              baseTransition.replace(
+                "transition-colors",
+                "transition-transform",
+              ),
+              isExpanded && "rotate-180",
+              "text-icon-action-primary-normal",
+            )}
+          />
+        ) : (
+          <Link
+            className={clsx("block", componentPaddingY)}
+            onClick={handleClearAll}
+          >
+            Clear All
+          </Link>
+        )}
+      </div>
+
+      <div
+        className={clsx(
+          "grid",
+          baseTransition.replace(
+            "transition-colors",
+            "transition-[grid-template-rows]",
+          ),
+          isExpanded || isSummary ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        )}
+      >
+        <div
+          className={clsx(
+            "overflow-hidden",
+            componentGap,
+            (isExpanded || isSummary || internalExpanded) &&
+              "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap",
+          )}
+        >
+          <div className={clsx(isSummary && `flex flex-col ${componentGap}`)}>
+            {visibleChildren}
+          </div>
+          {showShowMoreLink && (
+            <Link
+              className={clsx("block", "!items-start", componentPaddingY)}
+              onClick={handleOnShowMore}
+            >
+              Show More
+            </Link>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+
+  function handleOnShowMore(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    setShowAllItems(true);
+    onShowMore?.();
+  }
+
+  function handleToggleExpanded(e: React.MouseEvent<HTMLElement>) {
+    if (type === "summary") return;
+    e.stopPropagation();
+    setInternalExpanded(!internalExpanded);
+  }
+
+  function handleClearAll(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    onClearAll?.();
+  }
+};
+
+type FilterGroupItemProps = {
+  count?: number;
+  type?: FilterGroupProps["type"];
+};
+
+export const FilterGroupItem = ({
+  type = "link",
+  children,
+  onClick,
+  ...props
+}: ComponentProps<React.ElementType> & FilterGroupItemProps) => {
+  return (
+    <div
+      onClick={handleClick}
+      {...props}
+      className={clsx(
+        "flex items-center justify-between *:first:flex-1 cursor-pointer",
+        type !== "summary"
+          ? "*:first:py-mobile-component-padding *:first:desktop:py-desktop-component-padding *:first:compact:py-desktop-compact-component-padding"
+          : "",
+      )}
+    >
+      <FilterGroupItemChildComponent {...props} type={type} count={props.count}>
+        <span className="flex items-center justify-between w-full">
+          {children}
+
+          {type !== "summary" && props.count && <span>({props.count})</span>}
+        </span>
+      </FilterGroupItemChildComponent>
+    </div>
+  );
+
+  function handleClick(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    onClick?.();
+  }
+};
+
+const FilterGroupItemChildComponent = ({
+  type = "link",
+  children,
+  ...props
+}: ComponentProps<React.ElementType> & {
+  type: FilterGroupItemProps["type"];
+}) => {
+  if (type === "checkbox") {
+    return <Checkbox paragraphClassName="w-full" label={children} {...props} />;
+  }
+
+  if (type === "summary") {
+    return (
+      <div>
+        <OptionPill removable {...props}>
+          {children}
+        </OptionPill>
+      </div>
+    );
+  }
+
+  return (
+    <Link variant="secondary" {...props}>
+      {children}
+    </Link>
+  );
+};