@dmsi/wedgekit-react 0.0.2

package/src/components/Textarea.tsx

@@ -0,0 +1,101 @@
+"use client";
+import clsx from "clsx";
+import { ComponentProps, ReactNode } from "react";
+import { baseTransition, typography } from "../classNames";
+
+interface TextareaProps
+  extends Omit<
+    ComponentProps<"textarea">,
+    "children" | "dangerouslySetInnerHTML"
+  > {
+  label?: string;
+  error?: boolean;
+  caption?: ReactNode;
+}
+
+const textareaComponentPaddingMinusBorder = clsx(
+  "p-[calc(var(--spacing-mobile-component-padding)_+_var(--spacing-mobile-component-gap)_-_1px)]",
+  "desktop:p-[calc(var(--spacing-desktop-component-padding)_+_var(--spacing-desktop-component-gap)_-_1px)]",
+  "compact:p-[calc(var(--spacing-desktop-compact-component-padding)_+_var(--spacing-desktop-compact-component-gap)_-_1px)]",
+);
+
+const textareaBaseClass = clsx(
+  "w-full min-h-19",
+  "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
+  "outline-transparent outline-2",
+  textareaComponentPaddingMinusBorder,
+  baseTransition,
+);
+
+const textareaInvalidClass = clsx(
+  "data-error:not-disabled:border-transparent data-error:not-focus:outline-border-primary-error data-error:not-focus:outline-1",
+);
+
+const textareaFocusClass = clsx(
+  "focus:border-transparent focus:outline-border-primary-focus",
+);
+
+const textareaDisabledClass = clsx(
+  "disabled:bg-background-action-secondary-disabled disabled:border-border-primary-normal",
+);
+
+const textareaReadOnlyClass = clsx(
+  "read-only:outline-none read-only:bg-transparent read-only:border-transparent read-only:appearance-none read-only:resize-none read-only:not-disabled:pl-0",
+);
+
+export const Textarea = ({
+  label,
+  error,
+  caption,
+  ...props
+}: TextareaProps) => {
+  const attributes = {
+    "data-error": error || null,
+  };
+
+  return (
+    <label
+      className={clsx(
+        "block w-full space-y-desktop-component-gap",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        !props.disabled &&
+          !props.readOnly &&
+          "has-[[data-error]]:text-text-primary-error",
+      )}
+    >
+      {label && (
+        <span
+          className={clsx(
+            typography.label,
+            "text-inherit",
+            props.disabled || props.readOnly
+              ? "cursor-default"
+              : "cursor-pointer",
+            "inline-block",
+          )}
+        >
+          {label}
+        </span>
+      )}
+
+      <textarea
+        {...props}
+        {...attributes}
+        id={props.id}
+        className={clsx(
+          "disabled:text-text-primary-disabled",
+          typography.paragraph,
+          textareaBaseClass,
+          textareaInvalidClass,
+          textareaFocusClass,
+          textareaDisabledClass,
+          textareaReadOnlyClass,
+        )}
+      ></textarea>
+
+      {caption}
+    </label>
+  );
+};
+
+Textarea.displayName = "Textarea";

package/src/components/Theme.tsx

@@ -0,0 +1,13 @@
+export function Theme({
+  theme,
+  children,
+}: {
+  theme: "auto" | "brand";
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="contents" data-theme={theme}>
+      {children}
+    </div>
+  );
+}

package/src/components/Time.tsx

@@ -0,0 +1,438 @@
+import { ComponentProps, ReactNode, useEffect, useRef, useState } from "react";
+import { InputBase } from "./Input";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { typography } from "../classNames";
+import { Icon } from "./Icon";
+import { findDocumentRoot } from "../utils";
+import { Stack } from "./Stack";
+
+type TimeProps = {
+  label?: string;
+  error?: boolean;
+  readOnly?: boolean;
+  caption?: ReactNode;
+  format?: "12h" | "24h";
+} & Omit<ComponentProps<"input">, "type" | "children" | "dangerouslySetInnerHTML">;
+
+const timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
+
+export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputContainerRef = useRef<HTMLLabelElement>(null);
+  const timeRef = useRef<HTMLDivElement>(null);
+  const [timePosition, setTimePosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  const [hour, setHour] = useState<string | null>(null);
+  const [minute, setMinute] = useState<string | null>(null);
+  const [meridiem, setMeridiem] = useState<"AM" | "PM" | null>(null);
+  const [inputValue, setInputValue] = useState("");
+
+  const is12HourFormat = format === "12h";
+
+  const formattedTime =
+    hour && minute
+      ? is12HourFormat
+        ? meridiem
+          ? `${hour}:${minute} ${meridiem}`
+          : `${hour}:${minute}`
+        : `${hour}:${minute}`
+      : "";
+
+  const updatePosition = () => {
+    if (inputContainerRef.current) {
+      const rect = inputContainerRef.current.getBoundingClientRect();
+      setTimePosition({
+        top: rect.bottom + window.scrollY + 6,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (showTimePicker) {
+      updatePosition();
+    }
+  }, [showTimePicker, is12HourFormat]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        inputRef.current &&
+        timeRef.current &&
+        !inputRef.current.contains(event.target as Node) &&
+        !timeRef.current.contains(event.target as Node)
+      ) {
+        setShowTimePicker(false);
+      }
+    };
+
+    if (showTimePicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showTimePicker, is12HourFormat]);
+
+  useEffect(() => {
+    if (formattedTime && hasInteracted) {
+      setInputValue(formattedTime);
+
+      onChange?.({
+        target: { value: formattedTime },
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    }
+  }, [formattedTime, hasInteracted, onChange]);
+
+  const handleFocus = () => {
+    if (!props.disabled && !props.readOnly) {
+      setHasInteracted(true);
+      setShowTimePicker(true);
+
+      // Initialize meridiem to AM if not set and using 12-hour format
+      if (is12HourFormat && meridiem === null) {
+        setMeridiem("AM");
+      }
+    }
+  };
+
+  const handleSelect = (
+    type: "hour" | "minute" | "meridiem",
+    value: string,
+  ) => {
+    if (type === "hour") setHour(value);
+    if (type === "minute") setMinute(value);
+    if (type === "meridiem") setMeridiem(value as "AM" | "PM");
+
+    setTimeout(() => {
+      const allSet =
+        (type === "hour" ? value : hour) &&
+        (type === "minute" ? value : minute) &&
+        (is12HourFormat ? (type === "meridiem" ? value : meridiem) : true);
+
+      if (allSet) {
+        setShowTimePicker(false);
+      }
+    }, 100);
+  };
+
+  useEffect(() => {
+    if (!showTimePicker && formattedTime) {
+      setInputValue(formattedTime);
+    }
+  }, [showTimePicker, formattedTime]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+      .toUpperCase()
+      .replace(/[^0-9:APM ]/gi, "")
+      .trim();
+    setInputValue(value);
+
+    // Check if input is cleared
+    if (value === "") {
+      setHour(null);
+      setMinute(null);
+      setMeridiem(null);
+      setShowTimePicker(true); // Keep dropdown open
+    }
+
+    const match = value.match(
+      is12HourFormat
+        ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/
+        : /^(\d{1,2}):(\d{2})$/,
+    );
+
+    if (match) {
+      const [, hRaw, mRaw, mer] = match;
+      const h = parseInt(hRaw, 10);
+      const m = parseInt(mRaw, 10);
+
+      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+        let hStr: string;
+        const mStr = m.toString().padStart(2, "0");
+        let meridiemValue = mer as "AM" | "PM" | undefined;
+
+        if (is12HourFormat) {
+          hStr = (h % 12 || 12).toString().padStart(2, "0");
+          if (h > 12) {
+            meridiemValue = "PM";
+          }
+          setHour(hStr);
+          setMinute(mStr);
+          if (meridiemValue) {
+            setMeridiem(meridiemValue);
+          }
+        } else {
+          hStr = h.toString().padStart(2, "0");
+          setHour(hStr);
+          setMinute(mStr);
+        }
+      }
+    }
+
+    onChange?.(e);
+  };
+
+  const selectedRefs = {
+    hour: useRef<HTMLButtonElement | null>(null),
+    minute: useRef<HTMLButtonElement | null>(null),
+    meridiem: useRef<HTMLButtonElement | null>(null),
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      setShowTimePicker(false);
+      return;
+    }
+
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+
+    e.preventDefault();
+
+    let h: number;
+    let m: number;
+    let mer: "AM" | "PM";
+
+    if (
+      hour === null ||
+      minute === null ||
+      (is12HourFormat && meridiem === null)
+    ) {
+      const now = new Date();
+      h = now.getHours();
+      m = Math.round(now.getMinutes() / 5) * 5;
+      if (m === 60) {
+        m = 0;
+        h += 1;
+      }
+      if (is12HourFormat) {
+        mer = h >= 12 ? "PM" : "AM";
+        h = h % 12 || 12;
+      } else {
+        mer = "AM";
+      }
+    } else {
+      h = parseInt(hour, 10);
+      m = parseInt(minute, 10);
+      mer = (meridiem as "AM" | "PM") || "AM";
+    }
+
+    const step = 5;
+    const remainder = m % step;
+    m +=
+      e.key === "ArrowDown"
+        ? remainder === 0
+          ? step
+          : step - remainder
+        : -(remainder === 0 ? step : remainder);
+
+    if (m >= 60) {
+      m -= 60;
+      h += 1;
+    } else if (m < 0) {
+      m += 60;
+      h -= 1;
+    }
+
+    if (is12HourFormat) {
+      if (h > 12) {
+        h = 1;
+        mer = mer === "AM" ? "PM" : "AM";
+      } else if (h <= 0) {
+        h = 12;
+        mer = mer === "AM" ? "PM" : "AM";
+      }
+    } else {
+      h = (h + 24) % 24;
+    }
+
+    setHour(h.toString().padStart(2, "0"));
+    setMinute(m.toString().padStart(2, "0"));
+    if (is12HourFormat) setMeridiem(mer);
+  };
+
+  useEffect(() => {
+    if (showTimePicker) {
+      // Use a slight delay to ensure DOM is updated
+      setTimeout(() => {
+        selectedRefs.hour.current?.scrollIntoView({
+          block: "nearest",
+          behavior: "instant",
+        });
+        selectedRefs.minute.current?.scrollIntoView({
+          block: "nearest",
+          behavior: "instant",
+        });
+        if (is12HourFormat) {
+          selectedRefs.meridiem.current?.scrollIntoView({
+            block: "nearest",
+            behavior: "instant",
+          });
+        }
+      }, 0);
+    }
+  }, [showTimePicker, is12HourFormat, selectedRefs.hour, selectedRefs.minute, selectedRefs.meridiem]);
+  const renderOptions = (
+    items: string[],
+    type: "hour" | "minute" | "meridiem",
+  ) =>
+    items.map((val) => {
+      const isSelected =
+        (type === "hour" && val === hour) ||
+        (type === "minute" && val === minute) ||
+        (type === "meridiem" && val === meridiem);
+
+      return (
+        <TimeCell
+          key={val}
+          selected={isSelected}
+          ref={
+            isSelected
+              ? (el) => {
+                  selectedRefs[type].current = el;
+                }
+              : null
+          }
+          onClick={() => handleSelect(type, val)}
+          className={clsx("!size-10 cursor-pointer", typography.caption)}
+        >
+          {val}
+        </TimeCell>
+      );
+    });
+
+  return (
+    <div className="relative max-w-38">
+      <InputBase
+        {...props}
+        ref={inputRef}
+        inputContainerRef={inputContainerRef}
+        value={inputValue}
+        placeholder={is12HourFormat ? "hh:mm am" : "hh:mm"}
+        after={
+          <span className="text-icon-primary-normal contents">
+            <Icon name="schedule" />
+          </span>
+        }
+        onFocus={handleFocus}
+        caption={props.caption}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        type="text"
+      />
+      {showTimePicker &&
+        createPortal(
+          <Stack
+            elevation={4}
+            height={240}
+            position="absolute"
+            backgroundColor="background-grouped-primary-normal"
+            overflowX="hidden"
+            overflowY="hidden"
+            zIndex={50}
+            top={timePosition.top}
+            left={timePosition.left}
+            minWidth={timePosition.width}
+            maxWidth={0}
+            rounded
+          >
+            <div ref={timeRef} className="px-4 flex h-60">
+              <div className={clsx(timePickerScrollableStyle)}>
+                {renderOptions(
+                  Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) =>
+                    (i + 1).toString().padStart(2, "0"),
+                  ),
+                  "hour",
+                )}
+              </div>
+              <div className={clsx(timePickerScrollableStyle)}>
+                {renderOptions(
+                  Array.from({ length: 12 }, (_, i) =>
+                    (i * 5).toString().padStart(2, "0"),
+                  ),
+                  "minute",
+                )}
+              </div>
+              {is12HourFormat && (
+                <div className="py-4">
+                  {renderOptions(["AM", "PM"], "meridiem")}
+                </div>
+              )}
+            </div>
+          </Stack>,
+          findDocumentRoot(timeRef.current),
+        )}
+    </div>
+  );
+};
+
+type TimeCellProps = {
+  selected?: boolean;
+  children?: React.ReactNode;
+  start?: boolean;
+  intermediate?: boolean;
+  end?: boolean;
+  disabled?: boolean;
+  today?: boolean;
+  onClick?: () => void;
+  onHover?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  className?: string;
+  ref?: React.Ref<HTMLButtonElement> | undefined;
+};
+
+function TimeCell({
+  selected = false,
+  start = false,
+  intermediate = false,
+  end = false,
+  today = false,
+  disabled = false,
+  onClick,
+  onHover,
+  onKeyDown,
+  children,
+  className,
+  ref,
+  ...props
+}: TimeCellProps) {
+  const isDefault = !selected && !start && !intermediate && !end && !today;
+  const isToday = today && !selected && !start && !intermediate && !end;
+  return (
+    <button
+      onPointerOver={onHover}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      ref={ref}
+      className={clsx(
+        "w-full h-full aspect-square flex items-center justify-center ",
+        isDefault &&
+          "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
+        isToday &&
+          "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
+        selected &&
+          "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
+        start &&
+          "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
+        end &&
+          "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
+        intermediate && "bg-action-100 border-y border-action-400",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}