@dmsi/wedgekit-react 0.0.4

package/src/components/Search.tsx

@@ -0,0 +1,129 @@
+"use client";
+import {
+  ReactNode,
+  RefObject,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import { Input, InputBaseProps } from "./Input";
+
+export interface SearchProps {
+  renderMenu?: (props: {
+    positionTo: RefObject<HTMLElement | null> | undefined;
+    show: boolean;
+    setShow: (value: boolean) => void;
+    topOffset?: number | null;
+    autoFocusOff?: boolean;
+    menuName?: string;
+  }) => ReactNode;
+  value?: string;
+}
+
+export const Search = ({
+  label,
+  error,
+  children,
+  readOnly,
+  renderMenu,
+  onClick,
+  className,
+  wrapperClassName,
+  removeRoundness,
+  ...props
+}: Omit<InputBaseProps, "after"> & SearchProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputContainerRef = useRef(null);
+  const preventFocusOnInitialRender = useRef(true);
+  const [show, setShow] = useState(false);
+  const [clearing, setClearing] = useState(false);
+  const uniqueId = useId();
+  const searchMenuName = `search-menu-${uniqueId}`;
+
+  useEffect(() => {
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+
+    inputRef.current?.focus();
+  }, [props.value]);
+
+  return (
+    <>
+      <Input
+        variant="search"
+        inputContainerRef={inputContainerRef}
+        ref={inputRef}
+        label={label}
+        wrapperClassName={wrapperClassName}
+        onClick={(e) => {
+            if (props.disabled || readOnly) {
+                return;
+            }
+
+            if (clearing) {
+                setClearing(false);
+                return;
+            }
+
+            onClick?.(e);
+            setShow(!show)
+        }}
+        onClear={() => {
+            setClearing(true);
+        }}
+        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+            setShow(true);
+
+            if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+                e.preventDefault();
+
+                const menu = document.querySelector<HTMLElement>(`[data-menu="${searchMenuName}"]`);
+                const selectedMenuOption = menu?.querySelector<HTMLElement>('[data-selected]');
+
+                if (selectedMenuOption) {
+                    const allMenuOptions = Array.from(menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') || []);
+                    const currentIndex = allMenuOptions.indexOf(selectedMenuOption);
+
+                    let targetOption: HTMLElement | undefined;
+
+                    if (e.key === 'ArrowDown') {
+                        targetOption = allMenuOptions[currentIndex + 1] || allMenuOptions[0]; // Wrap to first
+                    } else {
+                        targetOption = allMenuOptions[currentIndex - 1] || allMenuOptions[allMenuOptions.length - 1]; // Wrap to last
+                    }
+
+                    targetOption?.focus();
+                } else {
+                    const toFocusMenuOption = e.key === 'ArrowDown'
+                        ? menu?.querySelector<HTMLElement>('[role="menuitem"]')
+                        : menu?.querySelector<HTMLElement>('[role="menuitem"]:last-child');
+
+                    toFocusMenuOption?.focus();
+                }
+            }
+        }}
+        error={error}
+        readOnly={readOnly}
+        removeRoundness={removeRoundness}
+        focus={show}
+        {...props}
+      />
+
+      {renderMenu
+        ? renderMenu({
+            positionTo: inputContainerRef,
+            show,
+            setShow,
+            topOffset: props.caption ? -16 : null,
+            autoFocusOff: true,
+            menuName: searchMenuName
+          })
+        : children}
+    </>
+  );
+};
+
+Search.displayName = "Search";

package/src/components/Select.tsx

@@ -0,0 +1,106 @@
+"use client";
+import {
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { InputBase, InputBaseProps } from "./Input";
+import { Icon } from "./Icon";
+import clsx from "clsx";
+
+export interface SelectProps {
+  renderMenu?: (props: {
+    positionTo: RefObject<HTMLElement | null> | undefined;
+    show: boolean;
+    setShow: (value: boolean) => void;
+    topOffset?: number | null;
+  }) => ReactNode;
+}
+
+export const Select = ({
+  label,
+  error,
+  children,
+  readOnly,
+  renderMenu,
+  onClick,
+  className,
+  wrapperClassName,
+  removeRoundness,
+  ...props
+}: Omit<InputBaseProps, "after"> & SelectProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputContainerRef = useRef(null);
+  const preventFocusOnInitialRender = useRef(true);
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    if (preventFocusOnInitialRender.current) {
+      preventFocusOnInitialRender.current = false;
+      return;
+    }
+
+    inputRef.current?.focus();
+  }, [props.value]);
+
+  return (
+    <>
+      <InputBase
+        inputContainerRef={inputContainerRef}
+        ref={inputRef}
+        label={label}
+        after={
+          !readOnly && (
+            <span
+              className={clsx(
+                props.disabled
+                  ? "text-icon-action-primary-disabled"
+                  : "text-icon-action-primary-normal",
+                "contents",
+              )}
+            >
+              <Icon name="keyboard_arrow_down" />
+            </span>
+          )
+        }
+        maxLength={0}
+        className={clsx("!caret-transparent !cursor-default", className)}
+        wrapperClassName={wrapperClassName}
+        onKeyDown={(e) => {
+          const openKeys = ["Enter", "Space", " "];
+
+          if (openKeys.includes(e.key)) {
+            e.preventDefault();
+            (e.target as HTMLElement).click();
+          }
+        }}
+        onClick={(e) => {
+          if (props.disabled || readOnly) {
+            return;
+          }
+
+          setShow(!show);
+          onClick?.(e);
+        }}
+        error={error}
+        readOnly={readOnly}
+        removeRoundness={removeRoundness}
+        focus={show}
+        {...props}
+      />
+
+      {renderMenu
+        ? renderMenu({
+            positionTo: inputContainerRef,
+            show,
+            setShow,
+            topOffset: props.caption ? -16 : null
+          })
+        : children}
+    </>
+  );
+};
+
+Select.displayName = "Select";

package/src/components/SideMenu.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from "react";
+import clsx from "clsx";
+
+type SideMenuProps = PropsWithChildren<{
+  cardStyle?: boolean;
+}>;
+
+export const SideMenu = ({ children, cardStyle = false }: SideMenuProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col",
+        cardStyle &&
+          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal",
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+SideMenu.displayName = "SideMenu";

package/src/components/SideMenuGroup.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import clsx from "clsx";
+import { PropsWithChildren, useEffect, useState } from "react";
+import { Label } from "./Label";
+import { baseTransition } from "../classNames";
+import { Stack } from "./Stack";
+import { Icon } from "./Icon";
+
+export type SideMenuGroupProps = PropsWithChildren<{
+  label?: string;
+  groupIndentLevel?: 1 | 2 | 3 | 4;
+  collapsed?: boolean;
+  disabled?: boolean;
+}>;
+
+export const SideMenuGroup = ({
+  label,
+  groupIndentLevel = 1,
+  collapsed = false,
+  disabled = false,
+  children,
+}: SideMenuGroupProps) => {
+  const [internalCollapsed, setInternalCollapsed] = useState(collapsed);
+
+  useEffect(() => {
+    setInternalCollapsed(collapsed);
+  }, [collapsed]);
+
+  const toggleCollapse = () => {
+    if (!disabled) setInternalCollapsed((prev) => !prev);
+  };
+
+  const enabledDisabledStyles = disabled
+    ? clsx("text-text-action-disabled pointer-events-none")
+    : clsx("text-text-primary-normal");
+
+  const additionalAttr = {
+    "data-disabled": disabled || null,
+  };
+
+  return (
+    <>
+      <div
+        className={clsx(
+          "group/sm-group flex rounded cursor-pointer",
+          "bg-transparent",
+          "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+          "active:bg-background-action-secondary-active active:text-text-action-active",
+          baseTransition,
+          enabledDisabledStyles,
+        )}
+        onClick={toggleCollapse}
+        {...additionalAttr}
+      >
+        <Stack horizontal items="center" sizing="component" padding>
+          {groupIndentLevel === 2 && <div className="pl-6" />}
+          {groupIndentLevel === 3 && <div className="pl-13" />}
+          {groupIndentLevel === 4 && <div className="pl-20" />}
+
+          <Icon
+            name="keyboard_arrow_down"
+            className={clsx(
+              "transition duration-100 ease-in-out",
+              "pointer-events-none",
+              {
+                "rotate-180": !internalCollapsed,
+              },
+            )}
+            size={24}
+          />
+
+          <Label padded>{label}</Label>
+        </Stack>
+      </div>
+      {!internalCollapsed && children}
+    </>
+  );
+};
+
+SideMenuGroup.displayName = "SideMenuGroup";

package/src/components/SideMenuItem.tsx

@@ -0,0 +1,90 @@
+import clsx from "clsx";
+import { baseTransition, componentPaddingMinus2pxBorder } from "../classNames";
+import { Stack } from "./Stack";
+import { Paragraph } from "./Paragraph";
+
+export type SideMenuItemProps = {
+  label?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  href?: string;
+  groupIndentLevel?: 1 | 2 | 3 | 4 | 5;
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+export const SideMenuItem = ({
+  label,
+  leftIcon,
+  rightIcon,
+  href,
+  groupIndentLevel,
+  selected = false,
+  disabled = false,
+  onClick,
+}: SideMenuItemProps) => {
+  const unselectedStateStyles =
+    !selected && !disabled && clsx("border-transparent");
+
+  const unselectedDisabledStateStyles =
+    !selected && disabled && clsx("bg-transparent border-transparent");
+
+  const selectedStateStyles =
+    selected &&
+    !disabled &&
+    clsx(
+      "bg-background-action-secondary-hover border-border-action-normal",
+      "hover:border-border-action-hover",
+      "active:border-border-action-active",
+    );
+
+  const selectedDisabledStateStyles =
+    selected &&
+    disabled &&
+    clsx(
+      "bg-background-action-secondary-disabled border-border-action-disabled",
+    );
+
+  const enabledDisabledStyles = disabled
+    ? clsx("text-text-action-disabled pointer-events-none")
+    : clsx("text-text-primary-normal");
+
+  return (
+    <a
+      href={href}
+      className={clsx(
+        "group flex w-full rounded border-2 cursor-pointer",
+        "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+        "active:bg-background-action-secondary-active active:text-text-action-active",
+        baseTransition,
+        componentPaddingMinus2pxBorder,
+        unselectedStateStyles,
+        unselectedDisabledStateStyles,
+        selectedStateStyles,
+        selectedDisabledStateStyles,
+        enabledDisabledStyles,
+      )}
+      onClick={onClick}
+    >
+      <Stack horizontal items="center" sizing="component">
+        {groupIndentLevel === 2 && <div className="pl-6" />}
+        {groupIndentLevel === 3 && <div className="pl-13" />}
+        {groupIndentLevel === 4 && <div className="pl-20" />}
+        {groupIndentLevel === 5 && <div className="pl-27" />}
+
+        {leftIcon && leftIcon}
+
+        {!leftIcon && groupIndentLevel && <div className="w-6 h-6" />}
+
+        <Paragraph as="span" padded className="mr-auto !leading-6">
+          {label}
+        </Paragraph>
+
+        {rightIcon && rightIcon}
+      </Stack>
+    </a>
+  );
+};
+
+SideMenuItem.displayName = "SideMenuItem";

package/src/components/Stack.tsx

@@ -0,0 +1,114 @@
+import clsx from "clsx";
+import {
+  BackgroundColorTokens,
+  BorderColorTokens,
+  Elevation,
+  ItemsAlign,
+  JustifyAlign,
+  Sizing,
+} from "../types";
+import { ComponentProps } from "react";
+type StackProps = {
+  children: React.ReactNode;
+  horizontal?: boolean;
+  horizontalMobile?: boolean;
+  padding?: boolean;
+  sizing?: Sizing;
+  items?: ItemsAlign;
+  justify?: JustifyAlign;
+  elevation?: Elevation;
+  rounded?: boolean;
+  centered?: boolean;
+  width?: number;
+  maxWidth?: number;
+  height?: number;
+  maxHeight?: number;
+  borderColor?: BorderColorTokens;
+  backgroundColor?: BackgroundColorTokens;
+  overflowY?: "hidden" | "scroll" | "auto" | "inherit";
+} & Omit<ComponentProps<"div">, "className">;
+
+export const Stack = ({
+  children,
+  items,
+  justify,
+  padding,
+  horizontal,
+  horizontalMobile,
+  elevation = 0,
+  rounded,
+  centered,
+  width,
+  maxWidth,
+  height,
+  maxHeight,
+  borderColor,
+  backgroundColor,
+  sizing = "none",
+  overflowY = "inherit",
+}: StackProps) => {
+  return (
+    <div
+      style={{
+        height: height !== undefined ? `${height}px` : undefined,
+        maxHeight: maxHeight !== undefined ? `${maxHeight}px` : undefined,
+        maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined,
+        width: width !== undefined ? `${width}px` : undefined,
+        border: borderColor
+          ? `1px solid var(--color-${borderColor})`
+          : undefined,
+        backgroundColor: backgroundColor
+          ? `var(--color-${backgroundColor})`
+          : undefined,
+      }}
+      className={clsx(
+        "scrollbar-thin",
+        "w-full",
+        "flex",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        padding &&
+          sizing === "container" &&
+          "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding &&
+          sizing === "layout" &&
+          "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding &&
+          sizing === "layout-group" &&
+          "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding &&
+          sizing === "component" &&
+          "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        items === "start" && "items-start",
+        items === "center" && "items-center",
+        items === "end" && "items-end",
+        items === "start-center" && "items-start desktop:items-center",
+        justify === "start" && "justify-start",
+        justify === "center" && "justify-center",
+        justify === "end" && "justify-end",
+        justify === "end" && "justify-end",
+        justify === "between" && "justify-between",
+        justify === "around" && "justify-around",
+        sizing === "layout-group" &&
+          "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+        sizing === "layout" &&
+          "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+        sizing === "container" &&
+          "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+        sizing === "component" &&
+          "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap",
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded",
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/StatusPill.tsx

@@ -0,0 +1,51 @@
+import { PropsWithChildren } from "react";
+import { Label } from "./Label";
+import clsx from "clsx";
+
+type StatusPillProps = PropsWithChildren<{
+  intent?: "neutral" | "warning" | "success" | "critical";
+  state?: "in-progress" | "completed";
+}>;
+
+
+export const StatusPill = ({
+  children,
+  state = "in-progress",
+  intent = "neutral",
+  ...props
+}: StatusPillProps) => {
+  const textColor = clsx(
+    state === "completed" && ["neutral", "critical"].includes(intent)
+      ? "text-text-on-action-primary-normal"
+      : "text-neutral-500",
+  );
+
+  const backgroundColor = clsx({
+    "bg-neutral-200": intent === "neutral" && state === "in-progress",
+    "bg-text-primary-normal": intent === "neutral" && state === "completed",
+    "bg-warning-200": intent === "warning" && state === "in-progress",
+    "bg-background-warning-normal":
+      intent === "warning" && state === "completed",
+    "bg-success-200": intent === "success" && state === "in-progress",
+    "bg-background-success-normal":
+      intent === "success" && state === "completed",
+    "bg-critical-200": intent === "critical" && state === "in-progress",
+    "bg-background-critical-normal":
+      intent === "critical" && state === "completed",
+  });
+
+  return (
+    <div
+      {...props}
+      className={clsx(
+        "px-desktop-component-padding py-desktop-compact-component-padding rounded flex items-center",
+        textColor,
+        backgroundColor,
+      )}
+    >
+      <Label>{children}</Label>
+    </div>
+  );
+};
+
+StatusPill.displayName = "StatusPill";

package/src/components/Stepper.tsx

@@ -0,0 +1,91 @@
+"use client";
+import { Button } from "./Button";
+import { InputBase } from "./Input";
+import { Icon } from "./Icon";
+import clsx from "clsx";
+
+type StepperProps = {
+  error?: boolean;
+  disabled?: boolean;
+  id?: string;
+  value: number;
+  setValue: React.Dispatch<React.SetStateAction<number>>;
+  onIncrease?: () => void;
+  onDecrease?: () => void;
+};
+
+export const Stepper = ({
+  error,
+  disabled,
+  value,
+  setValue,
+  onDecrease,
+  onIncrease,
+  ...props
+}: StepperProps) => {
+  function handleIncrease() {
+    setValue((prevVal) => prevVal + 1);
+    onIncrease?.();
+  }
+
+  function handleDecrease() {
+    setValue((prevVal) => prevVal - 1);
+    onDecrease?.();
+  }
+
+  return (
+    <div className="flex items-center gap-desktop-component-gap">
+      <Button
+        iconOnly
+        variant="tertiary"
+        leftIcon={
+          <span
+            className={clsx(
+              !disabled || (value > 0 && "text-icon-action-primary-normal"),
+              disabled || (value === 0 && "text-icon-action-primary-disabled"),
+              "contents",
+            )}
+          >
+            <Icon name="remove" />
+          </span>
+        }
+        onClick={handleDecrease}
+        disabled={disabled || value === 0}
+      />
+
+      <div className="flex-1">
+        <InputBase
+          {...props}
+          id={props.id}
+          type="number"
+          align="center"
+          value={value}
+          onChange={(e) => setValue(+e.target.value)}
+          error={error}
+          disabled={disabled}
+          className="!w-6 !h-4.5 !px-0 disabled:!text-text-on-action-primary-disabled disabled:!bg-background-action-secondary-disabled disabled:!border-border-primary-normal"
+        />
+      </div>
+
+      <Button
+        iconOnly
+        variant="tertiary"
+        leftIcon={
+          <span
+            className={clsx(
+              !disabled && "text-icon-action-primary-normal",
+              disabled && "text-icon-action-primary-disabled",
+              "contents",
+            )}
+          >
+            <Icon name="add" />
+          </span>
+        }
+        onClick={handleIncrease}
+        disabled={disabled}
+      />
+    </div>
+  );
+};
+
+Stepper.displayName = "Stepper";