willa-workspace 0.0.3-alpha.2739b3e

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

@@ -0,0 +1,486 @@
+import { useMemo, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { CheckIcon, ClipboardIcon } from "@radix-ui/react-icons";
+import { diffLines as createDiffLineChanges } from "diff";
+import classNames from "classnames";
+
+import { CopyButton } from "#content/components/CopyButton";
+import { highlightCodeToHtml } from "@willa-ui/shared";
+
+export type DiffViewerVariant = "unified" | "split";
+
+export type DiffViewerProps = Omit<
+  ComponentPropsWithoutRef<"div">,
+  "children"
+> & {
+  before: string;
+  after: string;
+  language?: string;
+  title?: ReactNode;
+  beforeLabel?: ReactNode;
+  afterLabel?: ReactNode;
+  variant?: DiffViewerVariant;
+  showLineNumbers?: boolean;
+  contextLines?: number;
+  copyable?: boolean;
+  copiedDuration?: number;
+};
+
+type DiffLine = {
+  type: "equal" | "delete" | "insert";
+  text: string;
+  oldLine?: number;
+  newLine?: number;
+};
+
+type SplitRowSide = {
+  type: "equal" | "delete" | "insert" | "empty";
+  text: string;
+  line?: number;
+};
+
+type SplitRow =
+  | {
+      type: "line";
+      oldSide: SplitRowSide;
+      newSide: SplitRowSide;
+    }
+  | {
+      type: "omitted";
+      count: number;
+    };
+
+type UnifiedRow =
+  | {
+      type: "line";
+      line: DiffLine;
+    }
+  | {
+      type: "omitted";
+      count: number;
+    };
+
+export function DiffViewer(props: DiffViewerProps) {
+  const {
+    before,
+    after,
+    language = "text",
+    title,
+    beforeLabel = "Before",
+    afterLabel = "After",
+    variant = "unified",
+    showLineNumbers = true,
+    contextLines,
+    copyable = true,
+    copiedDuration = 300,
+    className,
+    style,
+    ...rootProps
+  } = props;
+  const lineDiff = useMemo(
+    () => createLineDiff(before, after),
+    [after, before],
+  );
+  const stats = useMemo(() => createDiffStats(lineDiff), [lineDiff]);
+  const unifiedRows = useMemo(
+    () => createUnifiedRows(lineDiff, contextLines),
+    [contextLines, lineDiff],
+  );
+  const splitRows = useMemo(
+    () => createSplitRows(lineDiff, contextLines),
+    [contextLines, lineDiff],
+  );
+
+  return (
+    <div
+      {...rootProps}
+      className={classNames(
+        "willa-diff-viewer",
+        `willa-diff-viewer--${variant}`,
+        !showLineNumbers && "willa-diff-viewer--no-line-numbers",
+        className,
+      )}
+      style={style}
+    >
+      <div className="willa-diff-viewer__header">
+        <div className="willa-diff-viewer__heading">
+          {title ? (
+            <div className="willa-diff-viewer__title">{title}</div>
+          ) : null}
+          <div className="willa-diff-viewer__meta">
+            <span className="willa-diff-viewer__stat willa-diff-viewer__stat--insert">
+              +{stats.insertions}
+            </span>
+            <span className="willa-diff-viewer__stat willa-diff-viewer__stat--delete">
+              -{stats.deletions}
+            </span>
+            <span className="willa-diff-viewer__language">
+              {language.toLowerCase()}
+            </span>
+          </div>
+        </div>
+        {copyable ? (
+          <CopyButton
+            ariaLabel="复制新版内容"
+            className="willa-diff-viewer__copy"
+            copiedClassName="willa-diff-viewer__copy--copied"
+            copiedDuration={copiedDuration}
+            copiedIcon={<CheckIcon />}
+            icon={<ClipboardIcon />}
+            size="sm"
+            statusClassName="willa-diff-viewer__copy-status"
+            text={after}
+            variant="soft"
+          >
+            复制新版
+          </CopyButton>
+        ) : null}
+      </div>
+
+      {variant === "split" ? (
+        <div className="willa-diff-viewer__split-labels">
+          <div>{beforeLabel}</div>
+          <div>{afterLabel}</div>
+        </div>
+      ) : null}
+
+      <div className="willa-diff-viewer__body" role="table">
+        <div className="willa-diff-viewer__content" role="rowgroup">
+          {variant === "split"
+            ? splitRows.map((row, index) => (
+                <SplitDiffRow
+                  key={index}
+                  row={row}
+                  language={language}
+                  showLineNumbers={showLineNumbers}
+                />
+              ))
+            : unifiedRows.map((row, index) => (
+                <UnifiedDiffRow
+                  key={index}
+                  row={row}
+                  language={language}
+                  showLineNumbers={showLineNumbers}
+                />
+              ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const UnifiedDiffRow = (props: {
+  row: UnifiedRow;
+  language: string;
+  showLineNumbers: boolean;
+}) => {
+  if (props.row.type === "omitted") {
+    return <OmittedRow count={props.row.count} />;
+  }
+
+  const { line } = props.row;
+  const marker =
+    line.type === "insert" ? "+" : line.type === "delete" ? "-" : " ";
+
+  return (
+    <div
+      className={classNames(
+        "willa-diff-viewer__row",
+        `willa-diff-viewer__row--${line.type}`,
+      )}
+      role="row"
+    >
+      {props.showLineNumbers ? (
+        <span className="willa-diff-viewer__line-number">
+          {line.oldLine ?? ""}
+        </span>
+      ) : null}
+      {props.showLineNumbers ? (
+        <span className="willa-diff-viewer__line-number">
+          {line.newLine ?? ""}
+        </span>
+      ) : null}
+      <span className="willa-diff-viewer__marker">{marker}</span>
+      <CodeLine text={line.text} language={props.language} />
+    </div>
+  );
+};
+
+const SplitDiffRow = (props: {
+  row: SplitRow;
+  language: string;
+  showLineNumbers: boolean;
+}) => {
+  if (props.row.type === "omitted") {
+    return <OmittedRow count={props.row.count} />;
+  }
+
+  return (
+    <div className="willa-diff-viewer__split-row" role="row">
+      <SplitDiffCell
+        side={props.row.oldSide}
+        language={props.language}
+        showLineNumbers={props.showLineNumbers}
+      />
+      <SplitDiffCell
+        side={props.row.newSide}
+        language={props.language}
+        showLineNumbers={props.showLineNumbers}
+      />
+    </div>
+  );
+};
+
+const SplitDiffCell = (props: {
+  side: SplitRowSide;
+  language: string;
+  showLineNumbers: boolean;
+}) => {
+  const marker =
+    props.side.type === "insert"
+      ? "+"
+      : props.side.type === "delete"
+        ? "-"
+        : " ";
+
+  return (
+    <div
+      className={classNames(
+        "willa-diff-viewer__split-cell",
+        `willa-diff-viewer__split-cell--${props.side.type}`,
+      )}
+      role="cell"
+    >
+      {props.showLineNumbers ? (
+        <span className="willa-diff-viewer__line-number">
+          {props.side.line ?? ""}
+        </span>
+      ) : null}
+      <span className="willa-diff-viewer__marker">{marker}</span>
+      <CodeLine text={props.side.text} language={props.language} />
+    </div>
+  );
+};
+
+const OmittedRow = (props: { count: number }) => {
+  return (
+    <div className="willa-diff-viewer__omitted" role="row">
+      <span>省略 {props.count} 行未变化内容</span>
+    </div>
+  );
+};
+
+const CodeLine = (props: { text: string; language: string }) => {
+  const { html } = highlightCodeToHtml(props.text || " ", props.language);
+
+  return (
+    <code
+      className="willa-diff-viewer__code hljs"
+      dangerouslySetInnerHTML={{ __html: html || " " }}
+    />
+  );
+};
+
+const createLineDiff = (before: string, after: string) => {
+  const changes = createDiffLineChanges(before, after);
+  const lines: Array<DiffLine> = [];
+  let oldLine = 1;
+  let newLine = 1;
+
+  if (changes.length === 0) {
+    return [{ type: "equal", text: "", oldLine, newLine } satisfies DiffLine];
+  }
+
+  for (const change of changes) {
+    const type = change.added ? "insert" : change.removed ? "delete" : "equal";
+
+    for (const text of splitChangeValue(change.value)) {
+      if (type === "insert") {
+        lines.push({ type, text, newLine });
+        newLine += 1;
+        continue;
+      }
+
+      if (type === "delete") {
+        lines.push({ type, text, oldLine });
+        oldLine += 1;
+        continue;
+      }
+
+      lines.push({ type, text, oldLine, newLine });
+      oldLine += 1;
+      newLine += 1;
+    }
+  }
+
+  return lines;
+};
+
+const splitChangeValue = (value: string) => {
+  if (!value) return [];
+  const normalizedValue = value.endsWith("\n") ? value.slice(0, -1) : value;
+  return normalizedValue.split("\n");
+};
+
+const createDiffStats = (lines: Array<DiffLine>) => {
+  return lines.reduce(
+    (stats, line) => {
+      if (line.type === "insert") {
+        stats.insertions += 1;
+      }
+      if (line.type === "delete") {
+        stats.deletions += 1;
+      }
+      return stats;
+    },
+    { deletions: 0, insertions: 0 },
+  );
+};
+
+const createUnifiedRows = (lines: Array<DiffLine>, contextLines?: number) => {
+  return applyContext(lines, contextLines).map((chunk) =>
+    "count" in chunk
+      ? ({
+          type: "omitted",
+          count: chunk.count,
+        } satisfies UnifiedRow)
+      : ({
+          type: "line",
+          line: chunk,
+        } satisfies UnifiedRow),
+  );
+};
+
+const createSplitRows = (lines: Array<DiffLine>, contextLines?: number) => {
+  const visibleLines = applyContext(lines, contextLines);
+  const rows: Array<SplitRow> = [];
+  let index = 0;
+
+  while (index < visibleLines.length) {
+    const line = visibleLines[index];
+
+    if ("count" in line) {
+      rows.push({ type: "omitted", count: line.count });
+      index += 1;
+      continue;
+    }
+
+    if (line.type === "equal") {
+      rows.push({
+        type: "line",
+        oldSide: {
+          type: "equal",
+          text: line.text,
+          line: line.oldLine,
+        },
+        newSide: {
+          type: "equal",
+          text: line.text,
+          line: line.newLine,
+        },
+      });
+      index += 1;
+      continue;
+    }
+
+    const deletions: Array<DiffLine> = [];
+    const insertions: Array<DiffLine> = [];
+
+    while (index < visibleLines.length) {
+      const current = visibleLines[index];
+
+      if ("count" in current || current.type === "equal") {
+        break;
+      }
+
+      if (current.type === "delete") {
+        deletions.push(current);
+      } else {
+        insertions.push(current);
+      }
+
+      index += 1;
+    }
+
+    const count = Math.max(deletions.length, insertions.length);
+
+    for (let rowIndex = 0; rowIndex < count; rowIndex += 1) {
+      const deletion = deletions[rowIndex];
+      const insertion = insertions[rowIndex];
+      rows.push({
+        type: "line",
+        oldSide: deletion
+          ? {
+              type: "delete",
+              text: deletion.text,
+              line: deletion.oldLine,
+            }
+          : {
+              type: "empty",
+              text: "",
+            },
+        newSide: insertion
+          ? {
+              type: "insert",
+              text: insertion.text,
+              line: insertion.newLine,
+            }
+          : {
+              type: "empty",
+              text: "",
+            },
+      });
+    }
+  }
+
+  return rows;
+};
+
+const applyContext = (lines: Array<DiffLine>, contextLines?: number) => {
+  if (contextLines === undefined || contextLines < 0) {
+    return lines;
+  }
+
+  const changedIndexes = lines
+    .map((line, index) => (line.type === "equal" ? -1 : index))
+    .filter((index) => index >= 0);
+
+  if (changedIndexes.length === 0) {
+    return lines;
+  }
+
+  const visibleIndexes = new Set<number>();
+
+  for (const index of changedIndexes) {
+    const start = Math.max(0, index - contextLines);
+    const end = Math.min(lines.length - 1, index + contextLines);
+
+    for (let visibleIndex = start; visibleIndex <= end; visibleIndex += 1) {
+      visibleIndexes.add(visibleIndex);
+    }
+  }
+
+  const result: Array<DiffLine | { count: number }> = [];
+  let omittedCount = 0;
+
+  lines.forEach((line, index) => {
+    if (!visibleIndexes.has(index)) {
+      omittedCount += 1;
+      return;
+    }
+
+    if (omittedCount > 0) {
+      result.push({ count: omittedCount });
+      omittedCount = 0;
+    }
+
+    result.push(line);
+  });
+
+  if (omittedCount > 0) {
+    result.push({ count: omittedCount });
+  }
+
+  return result;
+};
+
+DiffViewer.displayName = "DiffViewer";

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

@@ -0,0 +1,118 @@
+.willa-download {
+  display: inline-flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--willa-download-text);
+  font-family: var(--willa-body-font);
+  font-weight: 600;
+  line-height: 1.2;
+  text-decoration: none;
+  vertical-align: middle;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.willa-download:hover {
+  border-color: var(--willa-download-border-hover);
+  background: var(--willa-download-bg-hover);
+  color: var(--willa-download-text-hover);
+}
+
+.willa-download:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 3px var(--willa-focus-ring);
+}
+
+.willa-download--chip {
+  border-color: var(--willa-download-border);
+  background: var(--willa-download-bg);
+}
+
+.willa-download--button {
+  border-color: var(--willa-download-button-border);
+  background: var(--willa-download-button-bg);
+  box-shadow: var(--willa-download-button-shadow);
+}
+
+.willa-download--plain {
+  border-color: transparent;
+  background: transparent;
+}
+
+.willa-download--sm {
+  gap: 0.42rem;
+  min-height: 2rem;
+  padding: 0.34rem 0.44rem;
+  font-size: 0.78rem;
+}
+
+.willa-download--md {
+  gap: 0.5rem;
+  min-height: 2.42rem;
+  padding: 0.46rem 0.56rem;
+  font-size: 0.88rem;
+}
+
+.willa-download--disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.willa-download-icon,
+.willa-download-action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+
+.willa-download-action {
+  width: 1.36rem;
+  height: 1.36rem;
+  margin-inline-start: 0.04rem;
+  color: var(--willa-download-action);
+}
+
+.willa-download-action svg {
+  position: relative;
+  z-index: 1;
+}
+
+.willa-download-action svg {
+  width: 0.95rem;
+  height: 0.95rem;
+}
+
+.willa-download--md .willa-download-action {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.willa-download-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.18rem;
+}
+
+.willa-download-name,
+.willa-download-meta {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.willa-download-meta {
+  color: var(--willa-download-meta);
+  font-size: 0.78em;
+  font-weight: 500;
+  line-height: 1.1;
+}

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

@@ -0,0 +1,96 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+import { DownloadIcon } from "@radix-ui/react-icons";
+
+import { FileCardIcon } from "#content/components/FileCard";
+
+export type DownloadVariant = "chip" | "button" | "plain";
+export type DownloadSize = "sm" | "md";
+
+type DownloadBaseProps = {
+  href: string;
+  name: ReactNode;
+  meta?: ReactNode;
+  variant?: DownloadVariant;
+  size?: DownloadSize;
+  icon?: ReactNode;
+  trailingIcon?: ReactNode;
+  downloadName?: string;
+  disabled?: boolean;
+  className?: string;
+};
+
+export type DownloadProps = DownloadBaseProps &
+  Omit<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    keyof DownloadBaseProps | "children" | "download" | "href"
+  >;
+
+export function Download(props: DownloadProps) {
+  const {
+    href,
+    name,
+    meta,
+    variant = "chip",
+    size = "sm",
+    icon,
+    trailingIcon = <DownloadIcon />,
+    downloadName,
+    disabled = false,
+    className,
+    target,
+    rel,
+    onClick,
+    ...anchorProps
+  } = props;
+  const resolvedRel = target === "_blank" && !rel ? "noreferrer" : rel;
+  const iconName =
+    downloadName ?? href ?? (typeof name === "string" ? name : "");
+
+  return (
+    <a
+      {...anchorProps}
+      className={classNames(
+        "willa-download",
+        `willa-download--${variant}`,
+        `willa-download--${size}`,
+        disabled && "willa-download--disabled",
+        className,
+      )}
+      href={disabled ? undefined : href}
+      download={disabled ? undefined : (downloadName ?? true)}
+      target={target}
+      rel={resolvedRel}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : anchorProps.tabIndex}
+      onClick={(event) => {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+
+        onClick?.(event);
+      }}
+    >
+      {icon !== null ? (
+        <FileCardIcon
+          className="willa-download-icon"
+          icon={icon}
+          name={iconName}
+          size={size}
+        />
+      ) : null}
+      <span className="willa-download-content">
+        <span className="willa-download-name">{name}</span>
+        {meta ? <span className="willa-download-meta">{meta}</span> : null}
+      </span>
+      {trailingIcon ? (
+        <span className="willa-download-action" aria-hidden="true">
+          {trailingIcon}
+        </span>
+      ) : null}
+    </a>
+  );
+}
+
+Download.displayName = "Download";