@dmsi/wedgekit-react 0.0.2

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>;
+};