willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,160 @@
+.willa-drawer-root {
+  display: contents;
+}
+
+.willa-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--willa-layer-modal, 1200);
+  display: flex;
+  background: var(--willa-drawer-overlay-bg);
+}
+
+.willa-drawer--left {
+  justify-content: flex-start;
+}
+
+.willa-drawer--right {
+  justify-content: flex-end;
+}
+
+.willa-drawer--top {
+  align-items: flex-start;
+}
+
+.willa-drawer--bottom {
+  align-items: flex-end;
+}
+
+.willa-drawer__panel {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  color: var(--willa-drawer-text);
+  background: var(--willa-drawer-bg);
+  box-shadow: var(--willa-drawer-shadow);
+  outline: none;
+}
+
+.willa-drawer--left .willa-drawer__panel,
+.willa-drawer--right .willa-drawer__panel {
+  width: min(var(--willa-drawer-size), calc(100vw - 1.5rem));
+  height: 100%;
+}
+
+.willa-drawer--top .willa-drawer__panel,
+.willa-drawer--bottom .willa-drawer__panel {
+  width: 100%;
+  height: min(var(--willa-drawer-size), calc(100vh - 1.5rem));
+}
+
+.willa-drawer__panel--sm {
+  --willa-drawer-size: 22rem;
+}
+
+.willa-drawer__panel--md {
+  --willa-drawer-size: 30rem;
+}
+
+.willa-drawer__panel--lg {
+  --willa-drawer-size: 42rem;
+}
+
+.willa-drawer__panel--full {
+  --willa-drawer-size: 100vw;
+}
+
+.willa-drawer--top .willa-drawer__panel--full,
+.willa-drawer--bottom .willa-drawer__panel--full {
+  --willa-drawer-size: 100vh;
+}
+
+.willa-drawer__header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 0.8rem;
+  align-items: start;
+  padding: 1rem 1.1rem;
+  border-bottom: 1px solid var(--willa-drawer-border);
+}
+
+.willa-drawer__heading {
+  min-width: 0;
+}
+
+.willa-drawer__title {
+  margin: 0;
+  color: var(--willa-drawer-title);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.willa-drawer__description {
+  margin: 0.3rem 0 0;
+  color: var(--willa-drawer-muted);
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+
+.willa-drawer__extra {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.willa-drawer__body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--willa-content-scrollbar-thumb) transparent;
+  -ms-overflow-style: auto;
+  padding: 1.1rem;
+}
+
+.willa-drawer__body::-webkit-scrollbar {
+  width: 0.36rem;
+  height: 0.36rem;
+}
+
+.willa-drawer__body::-webkit-scrollbar-track,
+.willa-drawer__body::-webkit-scrollbar-track-piece,
+.willa-drawer__body::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.willa-drawer__body::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--willa-content-scrollbar-thumb);
+}
+
+.willa-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  padding: 0.9rem 1.1rem;
+  border-top: 1px solid var(--willa-drawer-border);
+}
+
+@media (max-width: 640px) {
+  .willa-drawer--left .willa-drawer__panel,
+  .willa-drawer--right .willa-drawer__panel {
+    width: 100%;
+  }
+
+  .willa-drawer__header {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .willa-drawer__extra {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+
+  .willa-drawer__footer {
+    flex-wrap: wrap;
+  }
+}

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

@@ -0,0 +1,323 @@
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type CSSProperties,
+  type MouseEvent,
+  type MouseEventHandler,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import {
+  formatCssSize,
+  getFocusableElements,
+  useControllableState,
+} from "@willa-ui/shared";
+import { isPromiseLike } from "aidly";
+import classNames from "classnames";
+
+import { Button } from "#content/components/Button";
+import { IconButton } from "#content/components/IconButton";
+
+export type DrawerPlacement = "left" | "right" | "top" | "bottom";
+export type DrawerSize = "sm" | "md" | "lg" | "full";
+
+export type DrawerProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger?: ReactElement<DrawerTriggerProps>;
+  title?: ReactNode;
+  description?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  extra?: ReactNode;
+  placement?: DrawerPlacement;
+  size?: DrawerSize;
+  width?: number | string;
+  height?: number | string;
+  closeText?: ReactNode;
+  confirmText?: ReactNode;
+  confirmDisabled?: boolean;
+  confirmLoading?: boolean;
+  ariaLabel?: string;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  showCloseButton?: boolean;
+  className?: string;
+  overlayClassName?: string;
+  panelClassName?: string;
+  onConfirm?: () => void | Promise<void>;
+  onOpenChange?: (open: boolean) => void;
+};
+
+type DrawerTriggerProps = {
+  onClick?: MouseEventHandler<HTMLElement>;
+  [key: string]: unknown;
+};
+
+export function Drawer(props: DrawerProps) {
+  const {
+    open,
+    defaultOpen,
+    trigger,
+    title,
+    description,
+    children,
+    footer,
+    extra,
+    placement = "right",
+    size = "md",
+    width,
+    height,
+    closeText = "取消",
+    confirmText,
+    confirmDisabled = false,
+    confirmLoading = false,
+    ariaLabel,
+    closeOnOverlayClick = true,
+    closeOnEscape = true,
+    showCloseButton = true,
+    className,
+    overlayClassName,
+    panelClassName,
+    onConfirm,
+    onOpenChange,
+  } = props;
+  const [isOpen, setDrawerOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen ?? false,
+    onChange: onOpenChange,
+  });
+  const [confirmPending, setConfirmPending] = useState(false);
+  const drawerId = useId();
+  const titleId = title ? `${drawerId}-title` : undefined;
+  const descriptionId = description ? `${drawerId}-description` : undefined;
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  const closeDrawer = useCallback(() => {
+    setDrawerOpen(false);
+  }, [setDrawerOpen]);
+
+  useEffect(() => {
+    if (!isOpen || typeof document === "undefined") return;
+
+    const previousOverflow = document.body.style.overflow;
+    previousFocusRef.current =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    document.body.style.overflow = "hidden";
+
+    const focusTimer = window.setTimeout(() => {
+      const panel = panelRef.current;
+      if (!panel) return;
+
+      const firstFocusable = getFocusableElements(panel)[0];
+      (firstFocusable ?? panel).focus();
+    }, 0);
+
+    return () => {
+      window.clearTimeout(focusTimer);
+      document.body.style.overflow = previousOverflow;
+      previousFocusRef.current?.focus();
+      previousFocusRef.current = null;
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setConfirmPending(false);
+    }
+  }, [isOpen]);
+
+  const handleTriggerClick = (event: MouseEvent<HTMLElement>) => {
+    trigger?.props.onClick?.(event);
+    if (!event.defaultPrevented) {
+      setDrawerOpen(true);
+    }
+  };
+
+  const handleOverlayClick = (event: MouseEvent<HTMLDivElement>) => {
+    if (!closeOnOverlayClick || event.target !== event.currentTarget) return;
+    closeDrawer();
+  };
+
+  const handlePanelKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Escape" && closeOnEscape) {
+      event.stopPropagation();
+      closeDrawer();
+      return;
+    }
+
+    if (event.key !== "Tab") return;
+
+    const panel = panelRef.current;
+    if (!panel) return;
+
+    const focusableElements = getFocusableElements(panel);
+    if (focusableElements.length === 0) {
+      event.preventDefault();
+      panel.focus();
+      return;
+    }
+
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    const activeElement = document.activeElement;
+
+    if (event.shiftKey && activeElement === firstElement) {
+      event.preventDefault();
+      lastElement.focus();
+      return;
+    }
+
+    if (!event.shiftKey && activeElement === lastElement) {
+      event.preventDefault();
+      firstElement.focus();
+    }
+  };
+
+  const handleConfirm = () => {
+    if (confirmDisabled || confirmLoading || confirmPending) return;
+
+    try {
+      const result = onConfirm?.();
+
+      if (isPromiseLike(result)) {
+        setConfirmPending(true);
+        void result
+          .then(() => {
+            closeDrawer();
+          })
+          .catch(() => {
+            setConfirmPending(false);
+          });
+        return;
+      }
+
+      closeDrawer();
+    } catch {
+      setConfirmPending(false);
+    }
+  };
+
+  const resolvedTrigger = isValidElement(trigger)
+    ? cloneElement(trigger, {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        onClick: handleTriggerClick,
+      })
+    : null;
+
+  const shouldRenderDefaultFooter =
+    footer === undefined && (confirmText !== undefined || onConfirm);
+
+  const resolvedFooter =
+    footer ??
+    (shouldRenderDefaultFooter ? (
+      <>
+        <Button type="button" variant="ghost" onClick={closeDrawer}>
+          {closeText}
+        </Button>
+        <Button
+          type="button"
+          variant="solid"
+          loading={confirmLoading || confirmPending}
+          disabled={confirmDisabled}
+          onClick={handleConfirm}
+        >
+          {confirmText ?? "确认"}
+        </Button>
+      </>
+    ) : null);
+  const customDrawerSize =
+    placement === "left" || placement === "right" ? width : height;
+  const panelStyle =
+    customDrawerSize === undefined
+      ? undefined
+      : ({
+          "--willa-drawer-size": formatCssSize(customDrawerSize),
+        } as CSSProperties);
+
+  const drawerContent =
+    isOpen && typeof document !== "undefined"
+      ? createPortal(
+          <div
+            className={classNames(
+              "willa-drawer",
+              `willa-drawer--${placement}`,
+              overlayClassName,
+            )}
+            onClick={handleOverlayClick}
+          >
+            <div
+              className={classNames(
+                "willa-drawer__panel",
+                `willa-drawer__panel--${size}`,
+                panelClassName,
+              )}
+              style={panelStyle}
+              ref={panelRef}
+              role="dialog"
+              aria-modal="true"
+              aria-label={ariaLabel}
+              aria-labelledby={titleId}
+              aria-describedby={descriptionId}
+              tabIndex={-1}
+              onKeyDown={handlePanelKeyDown}
+            >
+              <div className="willa-drawer__header">
+                <div className="willa-drawer__heading">
+                  {title ? (
+                    <h2 className="willa-drawer__title" id={titleId}>
+                      {title}
+                    </h2>
+                  ) : null}
+                  {description ? (
+                    <p className="willa-drawer__description" id={descriptionId}>
+                      {description}
+                    </p>
+                  ) : null}
+                </div>
+                {extra ? (
+                  <div className="willa-drawer__extra">{extra}</div>
+                ) : null}
+                {showCloseButton ? (
+                  <IconButton
+                    ariaLabel="关闭抽屉"
+                    icon={<Cross2Icon />}
+                    variant="ghost"
+                    size="sm"
+                    onClick={closeDrawer}
+                  />
+                ) : null}
+              </div>
+              <div className="willa-drawer__body">{children}</div>
+              {resolvedFooter ? (
+                <div className="willa-drawer__footer">{resolvedFooter}</div>
+              ) : null}
+            </div>
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <>
+      {resolvedTrigger}
+      <span className={classNames("willa-drawer-root", className)}>
+        {drawerContent}
+      </span>
+    </>
+  );
+}
+
+Drawer.displayName = "Drawer";

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

@@ -0,0 +1,220 @@
+.willa-empty-state {
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  color: var(--willa-empty-state-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-empty-state--plain {
+  background: transparent;
+}
+
+.willa-empty-state--soft {
+  border: 1px solid var(--willa-empty-state-soft-border);
+  border-radius: 0.85rem;
+  background: var(--willa-empty-state-soft-bg);
+}
+
+.willa-empty-state--outline {
+  border: 1px dashed var(--willa-empty-state-outline-border);
+  border-radius: 0.85rem;
+  background: var(--willa-empty-state-outline-bg);
+}
+
+.willa-empty-state--sm {
+  gap: 0.7rem;
+  padding: 1rem;
+}
+
+.willa-empty-state--md {
+  gap: 0.85rem;
+  padding: 1.35rem;
+}
+
+.willa-empty-state--lg {
+  gap: 1rem;
+  padding: 1.75rem;
+}
+
+.willa-empty-state--compact {
+  gap: 0.42rem;
+  padding: 0.35rem;
+}
+
+.willa-empty-state--start {
+  justify-items: start;
+  text-align: left;
+}
+
+.willa-empty-state--center {
+  justify-items: center;
+  text-align: center;
+}
+
+.willa-empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--willa-empty-state-icon-border);
+  border-radius: 0.78rem;
+  background: var(--willa-empty-state-icon-bg);
+  color: var(--willa-empty-state-icon-text);
+}
+
+.willa-empty-state-icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.willa-empty-state-image {
+  display: grid;
+  width: min(100%, 46rem);
+  min-width: 0;
+  justify-items: center;
+}
+
+.willa-empty-state-image > img,
+.willa-empty-state-image > picture,
+.willa-empty-state-image > svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.willa-empty-state--sm .willa-empty-state-icon {
+  width: 2.1rem;
+  height: 2.1rem;
+  font-size: 1.05rem;
+}
+
+.willa-empty-state--md .willa-empty-state-icon {
+  width: 2.55rem;
+  height: 2.55rem;
+  font-size: 1.18rem;
+}
+
+.willa-empty-state--lg .willa-empty-state-icon {
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.35rem;
+}
+
+.willa-empty-state--compact .willa-empty-state-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  font-size: 0.82rem;
+}
+
+.willa-empty-state-content {
+  display: grid;
+  max-width: 34rem;
+  min-width: 0;
+  gap: 0.38rem;
+}
+
+.willa-empty-state--compact .willa-empty-state-content {
+  gap: 0.22rem;
+  max-width: none;
+}
+
+.willa-empty-state-title {
+  margin: 0;
+  color: var(--willa-empty-state-title);
+  font-family: var(--willa-title-font);
+  font-weight: 650;
+  letter-spacing: 0;
+  line-height: 1.32;
+}
+
+.willa-empty-state--sm .willa-empty-state-title {
+  font-size: 1rem;
+}
+
+.willa-empty-state--md .willa-empty-state-title {
+  font-size: 1.08rem;
+}
+
+.willa-empty-state--lg .willa-empty-state-title {
+  font-size: 1.18rem;
+}
+
+.willa-empty-state--compact .willa-empty-state-title {
+  font-family: var(--willa-body-font);
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.willa-empty-state-description {
+  margin: 0;
+  color: var(--willa-empty-state-description);
+  line-height: 1.55;
+}
+
+.willa-empty-state--sm .willa-empty-state-description,
+.willa-empty-state--sm .willa-empty-state-body,
+.willa-empty-state--sm .willa-empty-state-footer {
+  font-size: 0.86rem;
+}
+
+.willa-empty-state--md .willa-empty-state-description,
+.willa-empty-state--md .willa-empty-state-body,
+.willa-empty-state--md .willa-empty-state-footer {
+  font-size: 0.92rem;
+}
+
+.willa-empty-state--lg .willa-empty-state-description,
+.willa-empty-state--lg .willa-empty-state-body,
+.willa-empty-state--lg .willa-empty-state-footer {
+  font-size: 0.95rem;
+}
+
+.willa-empty-state-body {
+  color: var(--willa-empty-state-text);
+  line-height: 1.55;
+}
+
+.willa-empty-state--compact .willa-empty-state-description,
+.willa-empty-state--compact .willa-empty-state-body,
+.willa-empty-state--compact .willa-empty-state-footer {
+  font-size: 0.84rem;
+  line-height: 1.45;
+}
+
+.willa-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  min-width: 0;
+}
+
+.willa-empty-state--center .willa-empty-state-actions {
+  justify-content: center;
+}
+
+.willa-empty-state--start .willa-empty-state-actions {
+  justify-content: flex-start;
+}
+
+.willa-empty-state-footer {
+  max-width: 34rem;
+  min-width: 0;
+  color: var(--willa-empty-state-footer);
+  line-height: 1.5;
+}
+
+@media (max-width: 520px) {
+  .willa-empty-state--md,
+  .willa-empty-state--lg {
+    padding: 1.1rem;
+  }
+
+  .willa-empty-state-actions {
+    width: 100%;
+  }
+
+  .willa-empty-state-actions > * {
+    flex: 1 1 auto;
+  }
+}