@dmsi/wedgekit-react 0.0.2

package/src/components/Input.tsx

@@ -0,0 +1,511 @@
+"use client";
+import {
+  ComponentProps,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+import clsx from "clsx";
+import {
+  baseTransition,
+  componentGap,
+  componentPaddingMinusBorder,
+  componentPaddingXUsingComponentGap,
+  typography,
+} from "../classNames";
+import { Label } from "./Label";
+import { Icon } from "./Icon";
+import {
+  getDecimalPlaceholder,
+  formatDecimalValue,
+  formatCurrencyDisplay,
+} from "../utils/formatting";
+import { TextAlign } from "../types";
+
+export type InputVariant =
+  | "default"
+  | "search"
+  | "finder"
+  | "currency"
+  | "percentage"
+  | "uom";
+
+export type InputFormatting = {
+  variant?: InputVariant;
+  decimals?: number;
+  uom?: string;
+  removeSearchIcon?: boolean;
+};
+
+export type InputBaseProps = {
+  after?: ReactNode;
+  before?: ReactNode;
+  label?: string;
+  error?: boolean;
+  align?: TextAlign;
+  caption?: ReactNode;
+  required?: boolean;
+  selectOnFocus?: boolean;
+  inputContainerRef?: RefObject<HTMLLabelElement | null>;
+  removeRoundness?: boolean;
+  removeBorder?: boolean;
+  wrapperClassName?: string;
+  focus?: boolean;
+} & InputFormatting &
+  Omit<ComponentProps<"input">, "align">;
+
+export const InputBase = ({
+  before,
+  after,
+  type,
+  label,
+  error,
+  className,
+  align = "left",
+  caption,
+  required,
+  selectOnFocus,
+  removeRoundness,
+  inputContainerRef,
+  removeBorder,
+  wrapperClassName,
+  focus,
+  ...props
+}: InputBaseProps) => {
+  const attributes = {
+    "data-error": (error && !focus) || null,
+    "data-focus": focus || null,
+  };
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    const input = inputRef.current;
+    const focusHandler = () => {
+      input?.select();
+    };
+    if (selectOnFocus) {
+      inputRef.current?.addEventListener("focus", focusHandler);
+
+      return () => {
+        input?.removeEventListener("focus", focusHandler);
+      };
+    }
+  }, [selectOnFocus]);
+
+  const inputBaseClass = clsx(
+    "w-full",
+    "flex flex-row items-center",
+    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+    componentGap,
+    baseTransition,
+    "outline-transparent outline-2 -outline-offset-2",
+    componentPaddingMinusBorder,
+    !removeRoundness && "rounded-base",
+    !removeBorder && "border border-border-primary-normal",
+    "relative",
+  );
+
+  const inputFocusClass = clsx(
+    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus",
+  );
+
+  const inputDisabledClass = clsx(
+    "has-disabled:bg-background-action-secondary-disabled",
+  );
+
+  const inputReadOnlyClass = clsx(
+    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0",
+  );
+
+  const inputInvalidClass = clsx(
+    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1",
+  );
+
+  return (
+    <label
+      ref={inputContainerRef}
+      className={clsx(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        componentGap,
+      )}
+      style={{
+        ...props.style,
+      }}
+    >
+      {label && (
+        <div className={clsx("flex items-center", componentGap)}>
+          <Label
+            className={clsx(
+              props.disabled || props.readOnly
+                ? "cursor-default"
+                : "cursor-pointer",
+            )}
+          >
+            {label}
+          </Label>
+
+          {required && (
+            <span
+              className={clsx(typography.label, "text-text-critical-normal")}
+            >
+              *
+            </span>
+          )}
+        </div>
+      )}
+
+      <div
+        className={clsx(
+          inputBaseClass,
+          !props.disabled && inputInvalidClass,
+          inputFocusClass,
+          inputDisabledClass,
+          inputReadOnlyClass,
+          wrapperClassName,
+        )}
+      >
+        {before}
+
+        <input
+          ref={(el) => {
+            inputRef.current = el;
+          }}
+          type={type}
+          required={required}
+          {...props}
+          {...attributes}
+          id={props.id}
+          className={clsx(
+            "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+            "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
+            align === "right" && "text-right",
+            align === "center" && "text-center",
+            componentPaddingXUsingComponentGap,
+            typography.paragraph,
+            className,
+            props.readOnly && !props.disabled && "!px-0",
+          )}
+        />
+
+        {after}
+      </div>
+
+      {caption}
+    </label>
+  );
+};
+
+export const Input = ({
+  variant = "default",
+  decimals,
+  uom,
+  removeSearchIcon,
+  value: propValue,
+  onChange,
+  onBlur,
+  onClear,
+  ...props
+}: Omit<ComponentProps<"input">, "value" | "onChange" | "align" | "children"> &
+  InputBaseProps & {
+    value?: string | number;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onClear?: () => void;
+  }) => {
+  const [internalValue, setInternalValue] = useState("");
+  const [displayValue, setDisplayValue] = useState("");
+
+  // Initialize values based on variant
+  useEffect(() => {
+    const stringValue = propValue?.toString() ?? "";
+
+    if (variant === "currency") {
+      if (
+        propValue === undefined ||
+        propValue === "" ||
+        (typeof propValue === "number" && isNaN(propValue))
+      ) {
+        setInternalValue("");
+        setDisplayValue("");
+      } else {
+        const numValue =
+          typeof propValue === "string" ? parseFloat(propValue) : propValue;
+        if (!isNaN(numValue)) {
+          const formatted = numValue.toFixed(decimals ?? 2);
+          setInternalValue(formatted);
+          setDisplayValue(formatCurrencyDisplay(formatted));
+        }
+      }
+    } else {
+      setInternalValue(stringValue);
+      setDisplayValue(stringValue);
+    }
+  }, [propValue, decimals, variant]);
+
+  const getInputProps = () => {
+    const baseProps = {
+      ...props,
+      ...getDecimalPlaceholder(decimals),
+      value: propValue
+    };
+
+    switch (variant) {
+      case "search":
+        return {
+          ...baseProps,
+          placeholder: props.placeholder ?? "Search",
+          className: "!mr-6",
+          value: displayValue,
+        };
+
+      case "finder":
+        return baseProps;
+
+      case "currency":
+        return {
+          ...baseProps,
+          align: "right" as const,
+          type: "text" as const,
+          value: displayValue,
+        };
+
+      case "percentage":
+      case "uom":
+        return {
+          ...baseProps,
+          type: "number" as const,
+          align: "right" as const,
+        };
+
+      default:
+        return baseProps;
+    }
+  };
+
+  const getBeforeElement = () => {
+    if (props.before) return props.before;
+
+    switch (variant) {
+      case "search":
+        return !removeSearchIcon ? (
+          <span className="text-icon-primary-normal contents">
+            <Icon name="search" />
+          </span>
+        ) : null;
+
+      case "currency":
+        return (
+          <span className="text-icon-primary-normal contents">
+            <Icon name="attach_money" />
+          </span>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const getAfterElement = () => {
+    if (props.after) return props.after;
+
+    switch (variant) {
+      case "search": {
+        const hasValue = displayValue.length > 0;
+        return hasValue && !props.readOnly ? (
+          <Icon
+            name="close"
+            onClick={handleSearchReset}
+            className="cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          />
+        ) : null;
+      }
+
+      case "finder":
+        return <Icon name="search" />;
+
+      case "uom":
+        return uom ? (
+            <span className="text-text-secondary-normal uppercase">
+            {uom.slice(0, 4)}
+            </span>
+        ) : null;
+
+      case "percentage":
+        return (
+          <span className="text-icon-primary-normal contents">
+            <Icon name="percent" />
+          </span>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const handleSearchReset = () => {
+    setInternalValue("");
+    setDisplayValue("");
+
+    if (onChange) {
+      const syntheticEvent = {
+        target: { value: "" },
+      } as React.ChangeEvent<HTMLInputElement>;
+
+      if (typeof onChange === "function") {
+        onChange(syntheticEvent);
+      }
+    }
+
+    onClear?.();
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = e.target.value;
+
+    if (variant === "search") {
+      setInternalValue(rawValue);
+      setDisplayValue(rawValue);
+      if (typeof onChange === "function") {
+        onChange(e);
+      }
+      return;
+    }
+
+    if (variant === "currency") {
+      const raw = rawValue.replace(/,/g, ""); // Remove commas for processing
+
+      if (raw === "") {
+        setInternalValue("");
+        setDisplayValue("");
+        if (onChange) {
+          const syntheticEvent = {
+            ...e,
+            target: { ...e.target, value: "" },
+          };
+          onChange(syntheticEvent);
+        }
+        return;
+      }
+
+      const regex = /^\d*\.?\d*$/;
+      if (!regex.test(raw)) return;
+
+      const parts = raw.split(".");
+      const currentDecimals = decimals ?? 2;
+      if (parts.length === 2 && parts[1].length > currentDecimals) return;
+
+      setInternalValue(raw);
+      setDisplayValue(formatCurrencyDisplay(raw));
+
+      const asNumber = Number(raw);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = {
+          ...e,
+          target: { ...e.target, value: asNumber.toString() },
+        };
+        onChange(syntheticEvent);
+      }
+      return;
+    }
+
+    // Default behavior for other variants
+    setInternalValue(rawValue);
+    setDisplayValue(rawValue);
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (variant === "currency") {
+      const formatted = formatDecimalValue(internalValue, decimals ?? 2);
+      setInternalValue(formatted);
+      setDisplayValue(formatCurrencyDisplay(formatted));
+
+      const asNumber = Number(formatted);
+      if (!isNaN(asNumber) && onChange) {
+        const syntheticEvent = {
+          ...e,
+          target: { ...e.target, value: asNumber.toString() },
+        } as React.ChangeEvent<HTMLInputElement>;
+        onChange(syntheticEvent);
+      }
+    } else if (variant === "uom" || variant === "percentage") {
+      const formattedValue = formatDecimalValue(e.target.value, decimals);
+      e.target.value = formattedValue;
+    }
+
+    onBlur?.(e);
+  };
+
+  const inputProps = getInputProps();
+
+  return (
+    <InputBase
+      {...inputProps}
+      before={getBeforeElement()}
+      after={getAfterElement()}
+      onChange={handleChange}
+      onBlur={handleBlur}
+    />
+  );
+};
+
+Input.displayName = "Input";
+
+// Legacy component exports for backward compatibility
+export const Finder = (
+  props: Omit<ComponentProps<"input">, "value" | "align" | "children"> &
+    InputBaseProps & { value?: string | number },
+) => <Input {...props} variant="finder" />;
+
+export const UOM = (
+  props: Omit<ComponentProps<"input">, "value" | "align" | "children"> &
+    InputBaseProps & {
+      uom: string;
+      value?: string | number;
+    },
+) => <Input {...props} variant="uom" />;
+
+export const Currency = (
+  props: Omit<
+    ComponentProps<"input">,
+    "value" | "onChange" | "align" | "children"
+  > &
+    InputBaseProps & {
+      value?: number;
+      onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    },
+) => {
+  const handleCurrencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // For currency, we want to pass the numeric value but maintain the string interface
+    props.onChange?.(e);
+  };
+
+  return (
+    <Input
+      {...props}
+      variant="currency"
+      decimals={props.decimals ?? 2}
+      onChange={handleCurrencyChange}
+    />
+  );
+};
+
+export const Percentage = (
+  props: Omit<ComponentProps<"input">, "value" | "align" | "children"> &
+    InputBaseProps & {
+      value?: string | number;
+    },
+) => <Input {...props} variant="percentage" />;
+
+// Set display names for legacy components
+Finder.displayName = "Finder";
+UOM.displayName = "UOM";
+Currency.displayName = "Currency";
+Percentage.displayName = "Percentage";

package/src/components/InputGroup.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { ComponentProps, ReactNode } from "react";
+import { Label } from "./Label";
+import clsx from "clsx";
+import { useId } from "react";
+import { componentGap, layoutGap } from "../classNames";
+
+type InputGroupProps = {
+  label: string;
+  orientation?: "vertical" | "horizontal";
+  error?: boolean;
+  caption?: ReactNode;
+};
+
+export const InputGroup = ({
+  label,
+  orientation = "horizontal",
+  error = false,
+  children,
+  caption,
+  ...props
+}: ComponentProps<"div"> & InputGroupProps) => {
+  const id = useId();
+
+  return (
+    <div {...props} className={clsx("flex flex-col", componentGap)}>
+      <Label
+        as="label"
+        className={clsx({ "!text-text-primary-error": error })}
+        htmlFor={id}
+      >
+        {label}
+      </Label>
+
+      <div
+        className={clsx(
+          "flex *:py-mobile-component-padding desktop:*:py-desktop-component-padding compact:*:py-desktop-compact-component-padding",
+          orientation === "vertical"
+            ? "flex-col"
+            : clsx("items-center", layoutGap),
+        )}
+      >
+        {children}
+      </div>
+
+      {caption}
+    </div>
+  );
+};
+
+InputGroup.displayName = "InputGroup";

package/src/components/Label.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+import { AsProps, TextAttributes, TypographyProps } from "../types";
+import { componentPaddingXUsingComponentGap, typography } from "../classNames";
+export type Tags = "span" | "label" | "p" | "a";
+
+type LabelProps = {
+  as?: Tags;
+} & AsProps<Tags> &
+  TextAttributes &
+  TypographyProps;
+
+export const Label = ({
+  as = "span",
+  padded,
+  className,
+  color,
+  align,
+  ...props
+}: LabelProps) => {
+  const Element = as;
+  return (
+    <Element
+      className={clsx(
+        typography.label,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className,
+        padded && componentPaddingXUsingComponentGap,
+      )}
+      {...props}
+      style={{
+        ...props.style,
+        color: color ? `var(--color-${color})` : undefined,
+      }}
+    />
+  );
+};
+
+Label.displayName = "Label";

package/src/components/Link.tsx

@@ -0,0 +1,106 @@
+import clsx from "clsx";
+import { MouseEvent } from "react";
+
+import { AsProps, TextAttributes, TypographyProps } from "../types";
+import { baseTransition, componentPaddingY, typography } from "../classNames";
+
+export type LinkProps = AsProps &
+  TextAttributes &
+  TypographyProps & {
+    variant?: "primary" | "secondary" | "critical";
+    typographyStyle?: "paragraph" | "caption";
+    disabled?: boolean;
+    paddedY?: boolean;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    underline?: boolean;
+  };
+
+export const Link = ({
+  as = "a",
+  className,
+  variant = "primary",
+  typographyStyle = "paragraph",
+  disabled = false,
+  color,
+  paddedY,
+  align,
+  underline = false,
+  ...props
+}: LinkProps) => {
+  const Component = as;
+
+  const primaryStateStyles =
+    variant === "primary" &&
+    !disabled &&
+    clsx(
+      "text-text-link-normal hover:text-text-link-hover active:text-text-link-active",
+    );
+
+  const secondaryStateStyles =
+    variant === "secondary" &&
+    !disabled &&
+    clsx(
+      "text-text-primary-normal hover:text-text-link-hover active:text-text-link-active",
+    );
+
+  const criticalStateStyles =
+    variant === "critical" &&
+    !disabled &&
+    clsx(
+      "text-text-action-critical-normal hover:text-text-action-critical-hover active:text-text-action-critical-active",
+    );
+
+  const criticalStateDisabledStyles =
+    disabled &&
+    variant === "critical" &&
+    clsx("text-text-action-critical-disabled");
+
+  const disabledStateStyles =
+    disabled &&
+    ["primary", "secondary"].includes(variant) &&
+    clsx("text-text-link-disabled");
+
+  const disabledStyles = disabled && clsx("pointer-events-none cursor-default");
+  const underlineStyles = underline
+    ? "decoration-current"
+    : "decoration-transparent";
+
+  const paddingY = paddedY && componentPaddingY;
+
+  return (
+    <Component
+      className={clsx(
+        "inline",
+        disabled ? "cursor-default" : "cursor-pointer",
+        "underline decoration-[10%] underline-offset-[32%]",
+        !disabled && "hover:decoration-current",
+        !disabled && "active:decoration-transparent",
+        "flex flex-col items-center justify-center",
+        baseTransition,
+        primaryStateStyles,
+        secondaryStateStyles,
+        criticalStateStyles,
+        criticalStateDisabledStyles,
+        disabledStateStyles,
+        disabledStyles,
+        underlineStyles,
+        typographyStyle === "caption" && typography.caption,
+        typographyStyle === "paragraph" && typography.paragraph,
+        align === "left" && "text-left",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        paddingY,
+        className,
+      )}
+      {...props}
+      style={{
+        ...props.style,
+        color: color ? `var(--color-${color})` : undefined,
+      }}
+      aria-disabled={disabled}
+      tabIndex={disabled ? -1 : undefined}
+    />
+  );
+};
+
+Link.displayName = "Link";

package/src/components/List.tsx

@@ -0,0 +1,10 @@
+export function List({
+  children,
+  ordered,
+}: {
+  children: React.ReactNode;
+  ordered?: boolean;
+}) {
+  const Element = ordered ? "ol" : "ul";
+  return <Element className="list-disc list-inside">{children}</Element>;
+}