willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/Avatar/index.tsx

@@ -0,0 +1,331 @@
+import {
+  useEffect,
+  useState,
+  type CSSProperties,
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded" | "square";
+
+export type AvatarProps = {
+  src?: string;
+  alt?: string;
+  name: string;
+  size?: AvatarSize;
+  shape?: AvatarShape;
+  className?: string;
+  hoverable?: boolean;
+  hoverCard?: ReactNode;
+  hoverCardClassName?: string;
+  previewable?: boolean;
+  previewSrc?: string;
+  previewLabel?: string;
+  closeLabel?: string;
+  href?: string;
+  target?: string;
+  rel?: string;
+  imageProps?: Omit<
+    ImgHTMLAttributes<HTMLImageElement>,
+    "alt" | "children" | "className" | "src"
+  >;
+  backgroundColor?: string;
+  textColor?: string;
+} & Omit<HTMLAttributes<HTMLElement>, "children">;
+
+export function Avatar(props: AvatarProps) {
+  const {
+    src,
+    alt,
+    name,
+    size = "md",
+    shape = "circle",
+    className,
+    hoverable = false,
+    hoverCard,
+    hoverCardClassName,
+    previewable = false,
+    previewSrc,
+    previewLabel = "预览头像",
+    closeLabel = "关闭头像预览",
+    href,
+    target,
+    rel,
+    imageProps,
+    backgroundColor,
+    textColor,
+    style,
+    ...avatarProps
+  } = props;
+  const normalizedSrc = src?.trim() ?? "";
+  const normalizedHref = href?.trim() ?? "";
+  const [imageFailed, setImageFailed] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const normalizedPreviewSrc =
+    previewSrc?.trim() || (imageFailed ? "" : normalizedSrc);
+
+  useEffect(() => {
+    setImageFailed(false);
+  }, [normalizedSrc]);
+
+  const showImage = Boolean(normalizedSrc) && !imageFailed;
+  const resolvedLabel = alt?.trim() || name.trim();
+  const explicitAriaLabel = avatarProps["aria-label"];
+  const hasHoverCard =
+    hoverCard !== undefined && hoverCard !== null && hoverCard !== false;
+  const isPreviewButton = previewable;
+  const isLink = Boolean(normalizedHref) && !isPreviewButton;
+  const isInteractive = hoverable || hasHoverCard || isPreviewButton || isLink;
+  const avatarStyle = getAvatarStyle({ backgroundColor, textColor, style });
+  const avatarClassName = classNames(
+    "willa-avatar",
+    `willa-avatar--${size}`,
+    `willa-avatar--${shape}`,
+    isInteractive && "willa-avatar--interactive",
+    className,
+  );
+  const rootAriaLabel =
+    explicitAriaLabel ??
+    (showImage || !resolvedLabel ? undefined : resolvedLabel);
+  const content = renderAvatarContent({
+    alt: resolvedLabel,
+    imageProps,
+    name,
+    setImageFailed,
+    showImage,
+    src: normalizedSrc,
+  });
+
+  let avatarNode: ReactNode;
+  let previewNode: ReactNode = null;
+
+  if (isPreviewButton) {
+    avatarNode = (
+      <button
+        {...avatarProps}
+        className={avatarClassName}
+        style={avatarStyle}
+        type="button"
+        aria-label={explicitAriaLabel ?? previewLabel}
+        onClick={(event) => {
+          handleAvatarClick(event, avatarProps.onClick, () => {
+            setPreviewOpen(true);
+          });
+        }}
+      >
+        {content}
+      </button>
+    );
+    previewNode = previewOpen ? (
+      <AvatarPreview
+        alt={resolvedLabel}
+        closeLabel={closeLabel}
+        initials={getAvatarInitials(name)}
+        onClose={() => setPreviewOpen(false)}
+        src={normalizedPreviewSrc}
+      />
+    ) : null;
+  } else if (isLink) {
+    const resolvedRel = target === "_blank" && !rel ? "noreferrer" : rel;
+
+    avatarNode = (
+      <a
+        {...avatarProps}
+        className={avatarClassName}
+        style={avatarStyle}
+        href={normalizedHref}
+        target={target}
+        rel={resolvedRel}
+        aria-label={rootAriaLabel}
+      >
+        {content}
+      </a>
+    );
+  } else {
+    avatarNode = (
+      <span
+        {...avatarProps}
+        className={avatarClassName}
+        style={avatarStyle}
+        aria-label={rootAriaLabel}
+      >
+        {content}
+      </span>
+    );
+  }
+
+  return (
+    <>
+      {hasHoverCard ? (
+        <span className="willa-avatar-hover-root">
+          {avatarNode}
+          <span
+            className={classNames(
+              "willa-avatar-hover-card",
+              hoverCardClassName,
+            )}
+            role="tooltip"
+          >
+            {hoverCard}
+          </span>
+        </span>
+      ) : (
+        avatarNode
+      )}
+      {previewNode}
+    </>
+  );
+}
+
+type AvatarStyle = CSSProperties & {
+  "--willa-avatar-custom-bg"?: string;
+  "--willa-avatar-custom-text"?: string;
+};
+
+const getAvatarStyle = (options: {
+  backgroundColor?: string;
+  textColor?: string;
+  style?: CSSProperties;
+}) => {
+  if (!options.backgroundColor && !options.textColor) return options.style;
+
+  const style: AvatarStyle = { ...options.style };
+
+  if (options.backgroundColor) {
+    style["--willa-avatar-custom-bg"] = options.backgroundColor;
+  }
+
+  if (options.textColor) {
+    style["--willa-avatar-custom-text"] = options.textColor;
+  }
+
+  return style;
+};
+
+const getAvatarInitials = (value?: string) => {
+  const words = value?.trim().split(/\s+/).filter(Boolean);
+
+  if (!words?.length) return "?";
+
+  return words
+    .slice(-2)
+    .map((word) => Array.from(word)[0])
+    .join("")
+    .toUpperCase();
+};
+
+const handleAvatarClick = (
+  event: MouseEvent<HTMLElement>,
+  onClick: HTMLAttributes<HTMLElement>["onClick"],
+  action: () => void,
+) => {
+  onClick?.(event);
+
+  if (!event.defaultPrevented) {
+    action();
+  }
+};
+
+const renderAvatarContent = (options: {
+  alt: string;
+  imageProps?: AvatarProps["imageProps"];
+  name: string;
+  setImageFailed: (failed: boolean) => void;
+  showImage: boolean;
+  src: string;
+}) => {
+  if (options.showImage) {
+    return (
+      <img
+        {...options.imageProps}
+        className="willa-avatar-image"
+        src={options.src}
+        alt={options.alt}
+        onError={(event) => {
+          options.imageProps?.onError?.(event);
+          options.setImageFailed(true);
+        }}
+      />
+    );
+  }
+
+  return (
+    <span className="willa-avatar-initials" aria-hidden={!!options.alt}>
+      {getAvatarInitials(options.name)}
+    </span>
+  );
+};
+
+type AvatarPreviewProps = {
+  alt: string;
+  closeLabel: string;
+  initials: ReactNode;
+  onClose: () => void;
+  src: string;
+};
+
+const AvatarPreview = (props: AvatarPreviewProps) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        props.onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [props.onClose]);
+
+  const dialog = (
+    <div
+      className="willa-avatar-preview"
+      role="dialog"
+      aria-modal="true"
+      aria-label={props.alt || props.closeLabel}
+      onClick={props.onClose}
+    >
+      <button
+        className="willa-avatar-preview-close"
+        type="button"
+        aria-label={props.closeLabel}
+        onClick={(event) => {
+          event.stopPropagation();
+          props.onClose();
+        }}
+      >
+        <Cross2Icon aria-hidden="true" />
+      </button>
+      <figure
+        className="willa-avatar-preview-figure"
+        onClick={(event) => event.stopPropagation()}
+      >
+        {props.src ? (
+          <img
+            className="willa-avatar-preview-image"
+            src={props.src}
+            alt={props.alt}
+            decoding="async"
+          />
+        ) : (
+          <span className="willa-avatar-preview-initials">
+            {props.initials}
+          </span>
+        )}
+      </figure>
+    </div>
+  );
+
+  if (typeof document === "undefined") {
+    return dialog;
+  }
+
+  return createPortal(dialog, document.body);
+};
+
+Avatar.displayName = "Avatar";

package/packages/willa-content/src/components/Badge/index.css

@@ -0,0 +1,111 @@
+.willa-badge {
+  --willa-badge-bg: var(--willa-badge-neutral-bg);
+  --willa-badge-border: var(--willa-badge-neutral-border);
+  --willa-badge-text: var(--willa-badge-neutral-text);
+  --willa-badge-solid-bg: var(--willa-badge-neutral-solid-bg);
+  --willa-badge-solid-text: var(--willa-badge-neutral-solid-text);
+
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-family: var(--willa-body-font);
+  font-weight: 600;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  text-shadow: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.willa-badge--info {
+  --willa-badge-bg: var(--willa-badge-info-bg);
+  --willa-badge-border: var(--willa-badge-info-border);
+  --willa-badge-text: var(--willa-badge-info-text);
+  --willa-badge-solid-bg: var(--willa-badge-info-solid-bg);
+  --willa-badge-solid-text: var(--willa-badge-info-solid-text);
+}
+
+.willa-badge--success {
+  --willa-badge-bg: var(--willa-badge-success-bg);
+  --willa-badge-border: var(--willa-badge-success-border);
+  --willa-badge-text: var(--willa-badge-success-text);
+  --willa-badge-solid-bg: var(--willa-badge-success-solid-bg);
+  --willa-badge-solid-text: var(--willa-badge-success-solid-text);
+}
+
+.willa-badge--warning {
+  --willa-badge-bg: var(--willa-badge-warning-bg);
+  --willa-badge-border: var(--willa-badge-warning-border);
+  --willa-badge-text: var(--willa-badge-warning-text);
+  --willa-badge-solid-bg: var(--willa-badge-warning-solid-bg);
+  --willa-badge-solid-text: var(--willa-badge-warning-solid-text);
+}
+
+.willa-badge--danger {
+  --willa-badge-bg: var(--willa-badge-danger-bg);
+  --willa-badge-border: var(--willa-badge-danger-border);
+  --willa-badge-text: var(--willa-badge-danger-text);
+  --willa-badge-solid-bg: var(--willa-badge-danger-solid-bg);
+  --willa-badge-solid-text: var(--willa-badge-danger-solid-text);
+}
+
+.willa-badge--soft {
+  border-color: var(--willa-badge-border);
+  background: var(--willa-badge-bg);
+  color: var(--willa-badge-text);
+}
+
+.willa-badge--outline {
+  border-color: var(--willa-badge-border);
+  background: transparent;
+  color: var(--willa-badge-text);
+}
+
+.willa-badge--solid {
+  border-color: transparent;
+  background: var(--willa-badge-solid-bg);
+  color: var(--willa-badge-solid-text);
+}
+
+.willa-badge--sm {
+  gap: 0.26rem;
+  min-height: 1.45rem;
+  padding: 0.28rem 0.48rem;
+  font-size: 0.72rem;
+}
+
+.willa-badge--md {
+  gap: 0.32rem;
+  min-height: 1.72rem;
+  padding: 0.34rem 0.6rem;
+  font-size: 0.82rem;
+}
+
+.willa-badge-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1;
+}
+
+.willa-badge-icon {
+  display: inline-grid;
+  place-items: center;
+  width: 1em;
+  height: 1em;
+  flex: none;
+}
+
+.willa-badge-icon svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+  transform: translateY(0.06em);
+}

package/packages/willa-content/src/components/Badge/index.tsx

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type BadgeVariant = "soft" | "outline" | "solid";
+export type BadgeTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type BadgeSize = "sm" | "md";
+
+export type BadgeProps = {
+  variant?: BadgeVariant;
+  tone?: BadgeTone;
+  size?: BadgeSize;
+  icon?: ReactNode;
+  trailingIcon?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLSpanElement>, "children">;
+
+export function Badge(props: BadgeProps) {
+  const {
+    variant = "soft",
+    tone = "neutral",
+    size = "md",
+    icon,
+    trailingIcon,
+    className,
+    children,
+    ...badgeProps
+  } = props;
+
+  return (
+    <span
+      {...badgeProps}
+      className={classNames(
+        "willa-badge",
+        `willa-badge--${variant}`,
+        `willa-badge--${tone}`,
+        `willa-badge--${size}`,
+        className,
+      )}
+    >
+      {icon ? (
+        <span className="willa-badge-icon" aria-hidden="true">
+          {icon}
+        </span>
+      ) : null}
+      {children ? <span className="willa-badge-label">{children}</span> : null}
+      {trailingIcon ? (
+        <span className="willa-badge-icon" aria-hidden="true">
+          {trailingIcon}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+Badge.displayName = "Badge";

package/packages/willa-content/src/components/Breadcrumb/index.css

@@ -0,0 +1,92 @@
+.willa-breadcrumb {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--willa-text-soft);
+  font-family: var(--willa-body-font);
+}
+
+.willa-breadcrumb-list {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.22rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.willa-breadcrumb-item {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.22rem;
+}
+
+.willa-breadcrumb-link,
+.willa-breadcrumb-current {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.32rem;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 1.35;
+  text-decoration: none;
+}
+
+.willa-breadcrumb-link {
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+.willa-breadcrumb-link:hover {
+  color: var(--willa-text-strong);
+}
+
+.willa-breadcrumb-link:focus-visible {
+  border-radius: 0.28rem;
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-breadcrumb-current {
+  color: var(--willa-text-strong);
+  font-weight: 620;
+}
+
+.willa-breadcrumb-icon,
+.willa-breadcrumb-separator {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.willa-breadcrumb-icon svg,
+.willa-breadcrumb-separator svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-breadcrumb-separator {
+  color: var(--willa-text-faint);
+}
+
+.willa-breadcrumb-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-breadcrumb--sm {
+  font-size: 0.78rem;
+}
+
+.willa-breadcrumb--md {
+  font-size: 0.84rem;
+}

package/packages/willa-content/src/components/Breadcrumb/index.tsx

@@ -0,0 +1,129 @@
+import {
+  type ComponentPropsWithoutRef,
+  type MouseEventHandler,
+  type ReactNode,
+} from "react";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
+import classNames from "classnames";
+
+export type BreadcrumbSize = "sm" | "md";
+
+export type BreadcrumbItem = {
+  id?: string | number;
+  label: ReactNode;
+  href?: string;
+  target?: string;
+  rel?: string;
+  current?: boolean;
+  icon?: ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+};
+
+export type BreadcrumbProps = Omit<
+  ComponentPropsWithoutRef<"nav">,
+  "children"
+> & {
+  items: Array<BreadcrumbItem>;
+  size?: BreadcrumbSize;
+  separator?: ReactNode;
+};
+
+export function Breadcrumb(props: BreadcrumbProps) {
+  const {
+    items,
+    size = "md",
+    separator = <ChevronRightIcon />,
+    className,
+    "aria-label": ariaLabel = "Breadcrumb",
+    ...breadcrumbProps
+  } = props;
+
+  return (
+    <nav
+      {...breadcrumbProps}
+      aria-label={ariaLabel}
+      className={classNames(
+        "willa-breadcrumb",
+        `willa-breadcrumb--${size}`,
+        className,
+      )}
+    >
+      <ol className="willa-breadcrumb-list">
+        {items.map((item, index) => {
+          const isCurrent = item.current ?? index === items.length - 1;
+
+          return (
+            <li
+              className="willa-breadcrumb-item"
+              key={item.id ?? `breadcrumb-${index}`}
+            >
+              {index > 0 ? (
+                <span className="willa-breadcrumb-separator" aria-hidden="true">
+                  {separator}
+                </span>
+              ) : null}
+              <BreadcrumbItemContent item={item} current={isCurrent} />
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+const BreadcrumbItemContent = ({
+  item,
+  current,
+}: {
+  item: BreadcrumbItem;
+  current: boolean;
+}) => {
+  const content = (
+    <>
+      {item.icon ? (
+        <span className="willa-breadcrumb-icon" aria-hidden="true">
+          {item.icon}
+        </span>
+      ) : null}
+      <span className="willa-breadcrumb-label">{item.label}</span>
+    </>
+  );
+
+  if (item.href && !current) {
+    const rel = item.target === "_blank" && !item.rel ? "noreferrer" : item.rel;
+
+    return (
+      <a
+        className="willa-breadcrumb-link"
+        href={item.href}
+        target={item.target}
+        rel={rel}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  if (item.onClick && !current) {
+    return (
+      <button
+        className="willa-breadcrumb-link"
+        type="button"
+        onClick={item.onClick}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span
+      className="willa-breadcrumb-current"
+      aria-current={current ? "page" : undefined}
+    >
+      {content}
+    </span>
+  );
+};
+
+Breadcrumb.displayName = "Breadcrumb";