@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/components/ui/dropdown.tsx

@@ -0,0 +1,448 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import iconCarrotExpand from "@/assets/dropdown/icon-carrot-expand.svg";
+import iconCarrotContract from "@/assets/dropdown/icon-carrot-contract.svg";
+import iconEnter from "@/assets/dropdown/icon-enter.svg";
+import iconClear from "@/assets/dropdown/icon-clear.svg";
+import { UtilityChangeType } from "@/components/icons/UtilityChangeType";
+
+export type DropdownOption = {
+  value: string;
+  label: string;
+  secondary?: string;
+  actionLabel?: string;
+};
+
+/** Figma `icon_utility_change-type_*`. */
+export type DropdownTagChangeType = "mild" | "medium" | "hot";
+
+/** Figma `tags / tag`. */
+export type DropdownTag = {
+  id: string;
+  label: string;
+  /** Renders `dot_branded_large`. */
+  dot?: boolean;
+  /** Renders one `icon_utility_change-type_*` glyph. */
+  changeType?: DropdownTagChangeType;
+};
+
+/** Two-tone glyph, so it is inline rather than a masked `<img>`. */
+function ChangeTypeIcon({ kind }: { kind: DropdownTagChangeType }) {
+  return (
+    <UtilityChangeType
+      className={`dropdown-tag-change dropdown-tag-change--${kind}`}
+    />
+  );
+}
+
+export type DropdownProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "onChange"
+> & {
+  label?: string;
+  placeholder?: string;
+  options?: DropdownOption[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+  /** Force the menu open — used by Storybook state specimens. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Seed the input text — used for typeahead / auto-suggest specimens. */
+  defaultInputValue?: string;
+  /** Figma `tags` row. Rendered between the label and the field. */
+  tags?: DropdownTag[];
+  /** Remove one tag. Omit to render tags as non-removable. */
+  onTagRemove?: (id: string) => void;
+  /** Clear-all control in the label row. Omit to hide it. */
+  onClearTags?: () => void;
+  name?: string;
+  id?: string;
+};
+
+function MaskIcon({ src, className }: { src: string; className?: string }) {
+  return (
+    <span
+      className={cn("dropdown-mask-icon", className)}
+      style={{
+        WebkitMaskImage: `url(${src})`,
+        maskImage: `url(${src})`,
+      }}
+      aria-hidden
+    />
+  );
+}
+
+function matchPrefix(query: string, label: string) {
+  if (!query) return null;
+  if (label.toLowerCase().startsWith(query.toLowerCase())) {
+    return {
+      matched: label.slice(0, query.length),
+      rest: label.slice(query.length),
+    };
+  }
+  return null;
+}
+
+const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      className,
+      label = "Label",
+      placeholder = "Placeholder",
+      options = [],
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      error = false,
+      errorMessage = "Choose an option",
+      disabled = false,
+      open: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      defaultInputValue,
+      tags,
+      onTagRemove,
+      onClearTags,
+      name,
+      id,
+      ...props
+    },
+    ref,
+  ) => {
+    const listId = React.useId();
+    const inputId = id ?? listId;
+    const rootRef = React.useRef<HTMLDivElement>(null);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(
+      defaultValue ?? "",
+    );
+    const [query, setQuery] = React.useState(defaultInputValue ?? "");
+    const [highlighted, setHighlighted] = React.useState(-1);
+    const [typing, setTyping] = React.useState(Boolean(defaultInputValue));
+
+    const isOpen = openProp ?? uncontrolledOpen;
+    const selectedValue = valueProp ?? uncontrolledValue;
+    const selected = options.find((option) => option.value === selectedValue);
+
+    const setOpen = (next: boolean) => {
+      if (openProp === undefined) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+      if (!next) {
+        setTyping(false);
+        setQuery("");
+      }
+    };
+
+    const setValue = (next: string) => {
+      if (valueProp === undefined) setUncontrolledValue(next);
+      onValueChange?.(next);
+    };
+
+    const filtered = React.useMemo(() => {
+      if (!query) return options;
+      const needle = query.toLowerCase();
+      return options.filter(
+        (option) =>
+          option.label.toLowerCase().includes(needle) ||
+          option.secondary?.toLowerCase().includes(needle),
+      );
+    }, [options, query]);
+
+    const ghost = React.useMemo(() => {
+      if (!query || !isOpen) return "";
+      const hit = filtered.find(
+        (option) =>
+          option.label.toLowerCase().startsWith(query.toLowerCase()) &&
+          option.label.length > query.length,
+      );
+      if (!hit) return "";
+      return hit.label.slice(query.length);
+    }, [filtered, isOpen, query]);
+
+    React.useEffect(() => {
+      setHighlighted(query ? 0 : -1);
+    }, [query, isOpen]);
+
+    React.useEffect(() => {
+      const onPointerDown = (event: PointerEvent) => {
+        if (!rootRef.current?.contains(event.target as Node)) {
+          if (openProp === undefined) setUncontrolledOpen(false);
+          onOpenChange?.(false);
+          setTyping(Boolean(defaultInputValue));
+          setQuery(defaultInputValue ?? "");
+        }
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [defaultInputValue, onOpenChange, openProp]);
+
+    const selectOption = (option: DropdownOption) => {
+      setValue(option.value);
+      setQuery("");
+      setTyping(false);
+      setOpen(false);
+    };
+
+    const clearValue = (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setValue("");
+      setQuery("");
+      setTyping(false);
+      inputRef.current?.focus();
+      setOpen(true);
+    };
+
+    const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        if (!isOpen) setOpen(true);
+        setHighlighted((index) =>
+          Math.min(index + 1, Math.max(filtered.length - 1, 0)),
+        );
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setHighlighted((index) => Math.max(index - 1, 0));
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        const option = filtered[highlighted];
+        if (option) selectOption(option);
+      } else if (event.key === "Escape") {
+        setOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+
+    const displayValue = isOpen ? query : (selected?.label ?? query);
+    const showPlaceholder = !displayValue && !ghost;
+    const isRich = filtered.some(
+      (option) => option.secondary || option.actionLabel,
+    );
+    const trailingIcon = error
+      ? "expand"
+      : isOpen && (typing || query)
+        ? "enter"
+        : isOpen
+          ? "contract"
+          : selected
+            ? "clear"
+            : "expand";
+
+    return (
+      <div
+        ref={(node) => {
+          (rootRef as React.MutableRefObject<HTMLDivElement | null>).current =
+            node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        }}
+        className={cn("dropdown font-mazzardSoft", className)}
+        data-open={isOpen || undefined}
+        data-filled={(!showPlaceholder && !isOpen) || undefined}
+        data-error={error || undefined}
+        data-disabled={disabled || undefined}
+        {...props}
+      >
+        {label ? (
+          <div className="dropdown-label-row">
+            <label className="dropdown-label overline-medium" htmlFor={inputId}>
+              {label}
+            </label>
+            {onClearTags ? (
+              <span className="dropdown-label-actions">
+                <button
+                  type="button"
+                  className="dropdown-label-clear"
+                  aria-label="Clear all"
+                  onClick={onClearTags}
+                >
+                  <MaskIcon
+                    src={iconClear}
+                    className="dropdown-label-clear-icon"
+                  />
+                </button>
+              </span>
+            ) : null}
+          </div>
+        ) : null}
+
+        {tags && tags.length > 0 ? (
+          <ul className="dropdown-tags">
+            {tags.map((tag) => (
+              <li key={tag.id} className="dropdown-tag">
+                <span className="dropdown-tag-label">{tag.label}</span>
+                {tag.dot ? (
+                  <span className="dropdown-tag-dot" aria-hidden />
+                ) : null}
+                {tag.changeType ? (
+                  <ChangeTypeIcon kind={tag.changeType} />
+                ) : null}
+                {onTagRemove ? (
+                  <button
+                    type="button"
+                    className="dropdown-tag-remove"
+                    aria-label={`Remove ${tag.label}`}
+                    onClick={() => onTagRemove(tag.id)}
+                  >
+                    <MaskIcon
+                      src={iconClear}
+                      className="dropdown-tag-remove-icon"
+                    />
+                  </button>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+
+        <div className="dropdown-field">
+          <div
+            className="dropdown-input"
+            onClick={() => {
+              if (disabled) return;
+              inputRef.current?.focus();
+              setOpen(true);
+            }}
+          >
+            <div className="dropdown-input-value">
+              {showPlaceholder ? (
+                <span className="dropdown-placeholder">{placeholder}</span>
+              ) : (
+                <span className="dropdown-entry">
+                  {displayValue}
+                  {ghost ? (
+                    <span className="dropdown-ghost">{ghost}</span>
+                  ) : null}
+                </span>
+              )}
+            </div>
+            <input
+              ref={inputRef}
+              id={inputId}
+              name={name}
+              className="dropdown-native"
+              value={displayValue}
+              disabled={disabled}
+              autoComplete="off"
+              role="combobox"
+              aria-expanded={isOpen}
+              aria-controls={listId}
+              aria-invalid={error || undefined}
+              aria-autocomplete="list"
+              placeholder=""
+              onFocus={() => {
+                if (disabled) return;
+                setOpen(true);
+                if (selected && !query) setQuery(selected.label);
+              }}
+              onChange={(event) => {
+                setTyping(true);
+                setQuery(event.target.value);
+                if (!isOpen) setOpen(true);
+                if (selected && event.target.value !== selected.label) {
+                  setValue("");
+                }
+              }}
+              onKeyDown={onKeyDown}
+            />
+            <div className="dropdown-actions">
+              {trailingIcon === "clear" ? (
+                <button
+                  type="button"
+                  className="dropdown-icon-button"
+                  aria-label="Clear"
+                  onClick={clearValue}
+                >
+                  <MaskIcon src={iconClear} className="dropdown-icon-clear" />
+                </button>
+              ) : (
+                <MaskIcon
+                  src={
+                    trailingIcon === "enter"
+                      ? iconEnter
+                      : trailingIcon === "contract"
+                        ? iconCarrotContract
+                        : iconCarrotExpand
+                  }
+                  className={
+                    trailingIcon === "enter"
+                      ? "dropdown-icon-enter"
+                      : "dropdown-icon-carrot"
+                  }
+                />
+              )}
+            </div>
+          </div>
+
+          {isOpen && !error ? (
+            <ul
+              id={listId}
+              role="listbox"
+              className={cn("dropdown-menu", isRich && "dropdown-menu--rich")}
+            >
+              {filtered.map((option, index) => {
+                const prefix = query ? matchPrefix(query, option.label) : null;
+                const isHighlighted = index === highlighted;
+                return (
+                  <li key={option.value} role="presentation">
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={option.value === selectedValue}
+                      className={cn(
+                        "dropdown-item",
+                        (option.secondary || option.actionLabel) &&
+                          "dropdown-item--rich",
+                      )}
+                      data-highlighted={isHighlighted || undefined}
+                      onMouseEnter={() => setHighlighted(index)}
+                      onMouseDown={(event) => event.preventDefault()}
+                      onClick={() => selectOption(option)}
+                    >
+                      <span className="dropdown-item-primary">
+                        {prefix ? (
+                          <>
+                            <span className="dropdown-item-match">
+                              {prefix.matched}
+                            </span>
+                            <span className="dropdown-item-rest">
+                              {prefix.rest}
+                            </span>
+                          </>
+                        ) : (
+                          option.label
+                        )}
+                      </span>
+                      {option.actionLabel ? (
+                        <span className="dropdown-item-action">
+                          {option.actionLabel}
+                        </span>
+                      ) : option.secondary ? (
+                        <span className="dropdown-item-secondary">
+                          {option.secondary}
+                        </span>
+                      ) : null}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          ) : null}
+        </div>
+
+        {error ? <p className="dropdown-error">{errorMessage}</p> : null}
+      </div>
+    );
+  },
+);
+Dropdown.displayName = "Dropdown";
+
+export { Dropdown };

package/client/components/ui/empty-state.tsx

@@ -0,0 +1,197 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── EmptyState Root ──────────────────────────────────────────────────────────
+
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Large display headline (e.g. "Whoops, 404" or "No Messages Yet").
+   * Rendered above the title. Ignored when `headline` slot is used.
+   */
+  headline?: string;
+  /**
+   * Main title below the headline.
+   * Ignored when `title` slot is used.
+   */
+  title?: string;
+  /**
+   * Subtitle rendered between title and body text.
+   * Ignored when `subtitle` slot is used.
+   */
+  subtitle?: string;
+  /**
+   * Body copy below the title.
+   * Ignored when `text` slot is used.
+   */
+  text?: string;
+  /**
+   * URL for an illustration / image rendered above the headline.
+   * Ignored when `media` slot is used.
+   */
+  image?: string;
+  /** Alt text for the image */
+  imageAlt?: string;
+  /**
+   * Icon rendered in the media area when no `image` is provided.
+   * Pass any React node (SVG, lucide icon, etc.).
+   * Ignored when `media` slot is used.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Label for the primary action button.
+   * When provided an `<EmptyStateAction>` button is rendered automatically.
+   * Ignored when `actions` slot is used.
+   */
+  actionText?: string;
+  /** Fires when the auto-rendered action button is clicked */
+  onClickAction?: () => void;
+
+  // ── Slot overrides ──────────────────────────────────────────────────────
+  /** Replaces the media area (image / icon) */
+  mediaSlot?: React.ReactNode;
+  /** Replaces the headline */
+  headlineSlot?: React.ReactNode;
+  /** Replaces the title */
+  titleSlot?: React.ReactNode;
+  /** Replaces the subtitle */
+  subtitleSlot?: React.ReactNode;
+  /** Replaces the body text */
+  textSlot?: React.ReactNode;
+  /** Replaces the actions area */
+  actionsSlot?: React.ReactNode;
+}
+
+const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
+  (
+    {
+      className,
+      children,
+      headline,
+      title,
+      subtitle,
+      text,
+      image,
+      imageAlt = "",
+      icon,
+      actionText,
+      onClickAction,
+      mediaSlot,
+      headlineSlot,
+      titleSlot,
+      subtitleSlot,
+      textSlot,
+      actionsSlot,
+      ...props
+    },
+    ref
+  ) => {
+    const hasMedia = mediaSlot || image || icon;
+    const hasHeadline = headlineSlot || headline;
+    const hasTitle = titleSlot || title;
+    const hasSubtitle = subtitleSlot || subtitle;
+    const hasText = textSlot || text;
+    const hasActions = actionsSlot || actionText;
+
+    return (
+      <div
+        ref={ref}
+        className={cn("empty-state", className)}
+        {...props}
+      >
+        {/* Media: image or icon */}
+        {hasMedia && (
+          <div className="empty-state-media">
+            {mediaSlot ?? (
+              image ? (
+                <img
+                  src={image}
+                  alt={imageAlt}
+                  className="empty-state-image"
+                />
+              ) : (
+                <span className="empty-state-icon">{icon}</span>
+              )
+            )}
+          </div>
+        )}
+
+        {/* Headline */}
+        {hasHeadline && (
+          <div className="empty-state-headline">
+            {headlineSlot ?? headline}
+          </div>
+        )}
+
+        {/* Title */}
+        {hasTitle && (
+          <div className="empty-state-title">
+            {titleSlot ?? title}
+          </div>
+        )}
+
+        {/* Subtitle */}
+        {hasSubtitle && (
+          <div className="empty-state-subtitle">
+            {subtitleSlot ?? subtitle}
+          </div>
+        )}
+
+        {/* Body text */}
+        {hasText && (
+          <div className="empty-state-text">
+            {textSlot ?? text}
+          </div>
+        )}
+
+        {/* Default slot (custom content — e.g. a card grid) */}
+        {children && (
+          <div className="empty-state-default">{children}</div>
+        )}
+
+        {/* Actions */}
+        {hasActions && (
+          <div className="empty-state-actions">
+            {actionsSlot ?? (
+              <EmptyStateAction onClick={onClickAction}>
+                {actionText}
+              </EmptyStateAction>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+EmptyState.displayName = "EmptyState";
+
+// ─── EmptyStateAction ─────────────────────────────────────────────────────────
+// Pre-styled CTA button. Use inside `actionsSlot` for custom actions,
+// or let `EmptyState` auto-render one via the `actionText` prop.
+
+export interface EmptyStateActionProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual variant */
+  variant?: "default" | "primary" | "outline";
+}
+
+const EmptyStateAction = React.forwardRef<
+  HTMLButtonElement,
+  EmptyStateActionProps
+>(({ className, variant = "default", ...props }, ref) => (
+  <button
+    ref={ref}
+    type="button"
+    className={cn(
+      "empty-state-action-btn",
+      variant === "primary" && "empty-state-action-btn--primary",
+      variant === "outline" && "empty-state-action-btn--outline",
+      className
+    )}
+    {...props}
+  />
+));
+EmptyStateAction.displayName = "EmptyStateAction";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export { EmptyState, EmptyStateAction };