@zentauri-ui/zentauri-components 2.1.8 → 2.2.0

package/src/ui/code-diff/code-diff-base.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { diffLines } from "diff";
+import { useMemo } from "react";
+
+import { cn } from "../../lib/utils";
+
+import type { CodeDiffBaseProps, DiffLine } from "./types";
+import {
+  codeDiffLineContentVariants,
+  codeDiffLineNumberVariants,
+  codeDiffVariants,
+} from "./variants";
+
+function computeDiff(oldCode: string, newCode: string): DiffLine[] {
+  const changes = diffLines(oldCode, newCode);
+  const lines: DiffLine[] = [];
+  let oldLineNum = 1;
+  let newLineNum = 1;
+
+  for (const change of changes) {
+    const changeLines = change.value.replace(/\n$/, "").split("\n");
+    for (const content of changeLines) {
+      if (change.added) {
+        lines.push({
+          type: "added",
+          content,
+          oldLineNumber: null,
+          newLineNumber: newLineNum++,
+        });
+      } else if (change.removed) {
+        lines.push({
+          type: "removed",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: null,
+        });
+      } else {
+        lines.push({
+          type: "unchanged",
+          content,
+          oldLineNumber: oldLineNum++,
+          newLineNumber: newLineNum++,
+        });
+      }
+    }
+  }
+  return lines;
+}
+
+interface SplitRow {
+  oldLine: DiffLine | null;
+  newLine: DiffLine | null;
+}
+
+function toSplitRows(lines: DiffLine[]): SplitRow[] {
+  const rows: SplitRow[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const current = lines[i]!;
+
+    if (current.type === "unchanged") {
+      rows.push({ oldLine: current, newLine: current });
+      i++;
+    } else if (current.type === "removed") {
+      const removedBlock: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.type === "removed") {
+        removedBlock.push(lines[i]!);
+        i++;
+      }
+      const addedBlock: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.type === "added") {
+        addedBlock.push(lines[i]!);
+        i++;
+      }
+      const maxLen = Math.max(removedBlock.length, addedBlock.length);
+      for (let j = 0; j < maxLen; j++) {
+        rows.push({
+          oldLine: j < removedBlock.length ? removedBlock[j]! : null,
+          newLine: j < addedBlock.length ? addedBlock[j]! : null,
+        });
+      }
+    } else if (current.type === "added") {
+      const addedBlock: DiffLine[] = [];
+      while (i < lines.length && lines[i]!.type === "added") {
+        addedBlock.push(lines[i]!);
+        i++;
+      }
+      for (const added of addedBlock) {
+        rows.push({ oldLine: null, newLine: added });
+      }
+    } else {
+      i++;
+    }
+  }
+  return rows;
+}
+
+function LineNumberCell({
+  lineNumber,
+  type,
+  showLineNumbers,
+}: {
+  lineNumber: number | null;
+  type: DiffLine["type"];
+  showLineNumbers: boolean;
+}) {
+  return (
+    <td
+      className={codeDiffLineNumberVariants({ type })}
+      style={{ width: showLineNumbers ? "4.5rem" : "2rem" }}
+    >
+      {showLineNumbers && lineNumber !== null ? lineNumber : ""}
+    </td>
+  );
+}
+
+function LineContentCell({
+  line,
+  type,
+  showGutterMarkers,
+}: {
+  line: string;
+  type: DiffLine["type"];
+  showGutterMarkers: boolean;
+}) {
+  return (
+    <td className={codeDiffLineContentVariants({ type })}>
+      {showGutterMarkers ? (
+        <span className="inline-block w-4 select-none text-center">
+          {type === "added" ? "+" : type === "removed" ? "-" : " "}
+        </span>
+      ) : null}
+      <span>{line || " "}</span>
+    </td>
+  );
+}
+
+function UnifiedView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers,
+}: {
+  lines: DiffLine[];
+  showLineNumbers: boolean;
+  showGutterMarkers: boolean;
+}) {
+  return (
+    <table className="w-full border-collapse table-fixed">
+      <tbody>
+        {lines.map((line, idx) => (
+          <tr key={idx}>
+            <LineNumberCell
+              lineNumber={line.oldLineNumber}
+              type={line.type}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineNumberCell
+              lineNumber={line.newLineNumber}
+              type={line.type}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineContentCell
+              line={line.content}
+              type={line.type}
+              showGutterMarkers={showGutterMarkers}
+            />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function SplitView({
+  lines,
+  showLineNumbers,
+  showGutterMarkers,
+}: {
+  lines: DiffLine[];
+  showLineNumbers: boolean;
+  showGutterMarkers: boolean;
+}) {
+  const rows = toSplitRows(lines);
+
+  return (
+    <table className="w-full border-collapse table-fixed">
+      <colgroup>
+        <col style={{ width: showLineNumbers ? "4.5rem" : "2rem" }} />
+        <col />
+        <col style={{ width: showLineNumbers ? "4.5rem" : "2rem" }} />
+        <col />
+      </colgroup>
+      <tbody>
+        {rows.map((row, idx) => (
+          <tr key={idx}>
+            <LineNumberCell
+              lineNumber={row.oldLine?.oldLineNumber ?? null}
+              type={row.oldLine?.type ?? "unchanged"}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineContentCell
+              line={row.oldLine?.content ?? ""}
+              type={row.oldLine?.type ?? "unchanged"}
+              showGutterMarkers={showGutterMarkers}
+            />
+            <LineNumberCell
+              lineNumber={row.newLine?.newLineNumber ?? null}
+              type={row.newLine?.type ?? "unchanged"}
+              showLineNumbers={showLineNumbers}
+            />
+            <LineContentCell
+              line={row.newLine?.content ?? ""}
+              type={row.newLine?.type ?? "unchanged"}
+              showGutterMarkers={showGutterMarkers}
+            />
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export function CodeDiffBase({
+  className,
+  appearance,
+  size,
+  oldCode,
+  newCode,
+  viewType = "unified",
+  showLineNumbers = true,
+  showGutterMarkers = true,
+  oldTitle = "Old",
+  newTitle = "New",
+  ref,
+  as: Wrapper = "div",
+  ...rest
+}: CodeDiffBaseProps) {
+  const lines = useMemo(
+    () => computeDiff(oldCode ?? "", newCode ?? ""),
+    [oldCode, newCode],
+  );
+  const hasChanges = lines.some(
+    (l) => l.type === "added" || l.type === "removed",
+  );
+
+  return (
+    <Wrapper
+      ref={ref}
+      data-slot="code-diff"
+      className={cn(codeDiffVariants({ appearance, size }), className)}
+      {...rest}
+    >
+      {hasChanges ? (
+        <div className="sticky top-0 flex items-center justify-between border-b border-[color:var(--zui-code-diff-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-code-diff-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-code-diff-header-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-code-diff-header-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))] px-4 py-2">
+          <span className="text-xs font-medium">
+            {lines.filter((l) => l.type === "added").length} additions{" "}
+            <span className="mx-1">&bull;</span>{" "}
+            {lines.filter((l) => l.type === "removed").length} deletions
+          </span>
+          <span className="text-xs text-[color:var(--zui-code-diff-header-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-code-diff-header-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]">
+            {oldTitle} &rarr; {newTitle}
+          </span>
+        </div>
+      ) : null}
+      {viewType === "split" ? (
+        <SplitView
+          lines={lines}
+          showLineNumbers={showLineNumbers}
+          showGutterMarkers={showGutterMarkers}
+        />
+      ) : (
+        <UnifiedView
+          lines={lines}
+          showLineNumbers={showLineNumbers}
+          showGutterMarkers={showGutterMarkers}
+        />
+      )}
+    </Wrapper>
+  );
+}
+
+CodeDiffBase.displayName = "CodeDiff";

package/src/ui/code-diff/code-diff.test.tsx

@@ -0,0 +1,50 @@
+import { createRef } from "react";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { CodeDiff } from "./code-diff";
+
+const oldCode = "line one\nline two\nline three";
+const newCode = "line one\nline two modified\nline three\nline four";
+
+describe("CodeDiff", () => {
+  it("should expose displayName", () => {
+    expect(CodeDiff.displayName).toBe("CodeDiff");
+  });
+
+  it("should stamp data-slot", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} />);
+    const root = document.querySelector('[data-slot="code-diff"]');
+    expect(root).toBeTruthy();
+    expect(root?.getAttribute("data-slot")).toBe("code-diff");
+  });
+
+  it("should render diff lines", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} />);
+    expect(screen.getByText("line one")).toBeInTheDocument();
+    expect(screen.getByText("line two modified")).toBeInTheDocument();
+    expect(screen.getByText("line four")).toBeInTheDocument();
+  });
+
+  it("should show additions and deletions count", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} />);
+    expect(screen.getByText(/additions/)).toBeInTheDocument();
+    expect(screen.getByText(/deletions/)).toBeInTheDocument();
+  });
+
+  it("should render unchanged code when no changes", () => {
+    render(<CodeDiff oldCode="same" newCode="same" />);
+    expect(screen.getByText("same")).toBeInTheDocument();
+  });
+
+  it("should forward ref", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<CodeDiff ref={ref} oldCode={oldCode} newCode={newCode} />);
+    expect(ref.current?.getAttribute("data-slot")).toBe("code-diff");
+  });
+
+  it("should render in split view", () => {
+    render(<CodeDiff oldCode={oldCode} newCode={newCode} viewType="split" />);
+    expect(screen.getAllByText("line one").length).toBeGreaterThanOrEqual(1);
+  });
+});

package/src/ui/code-diff/code-diff.tsx

@@ -0,0 +1,8 @@
+import { CodeDiffBase } from "./code-diff-base";
+import type { CodeDiffProps } from "./types";
+
+export function CodeDiff(props: CodeDiffProps) {
+  return <CodeDiffBase {...props} />;
+}
+
+CodeDiff.displayName = "CodeDiff";

package/src/ui/code-diff/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export { CodeDiff } from "./code-diff";
+export type {
+  CodeDiffBaseProps,
+  CodeDiffProps,
+  CodeDiffVariantProps,
+  CodeDiffViewType,
+  DiffLine,
+} from "./types";
+export {
+  codeDiffLineContentVariants,
+  codeDiffLineNumberVariants,
+  codeDiffVariants,
+} from "./variants";

package/src/ui/code-diff/types.ts

@@ -0,0 +1,31 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ElementType } from "react";
+
+import type { codeDiffVariants } from "./variants";
+
+export type CodeDiffVariantProps = VariantProps<typeof codeDiffVariants>;
+
+export type CodeDiffViewType = "split" | "unified";
+
+export interface CodeDiffBaseProps extends ComponentPropsWithRef<"div"> {
+  oldCode: string;
+  newCode: string;
+  language?: string;
+  viewType?: CodeDiffViewType;
+  showLineNumbers?: boolean;
+  showGutterMarkers?: boolean;
+  oldTitle?: string;
+  newTitle?: string;
+  appearance?: CodeDiffVariantProps["appearance"];
+  size?: CodeDiffVariantProps["size"];
+  as?: ElementType;
+}
+
+export type CodeDiffProps = Omit<CodeDiffBaseProps, "as">;
+
+export interface DiffLine {
+  type: "added" | "removed" | "unchanged";
+  content: string;
+  oldLineNumber: number | null;
+  newLineNumber: number | null;
+}

package/src/ui/code-diff/variants.ts

@@ -0,0 +1,49 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiCodeDiffAppearances,
+  zuiCodeDiffBase,
+  zuiCodeDiffLineAdded,
+  zuiCodeDiffLineContentBase,
+  zuiCodeDiffLineNumberBase,
+  zuiCodeDiffLineRemoved,
+  zuiCodeDiffLineUnchanged,
+  zuiCodeDiffSizes,
+} from "../../design-system/code-diff";
+
+export const codeDiffVariants = cva(zuiCodeDiffBase, {
+  variants: {
+    appearance: zuiCodeDiffAppearances,
+    size: zuiCodeDiffSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+  },
+});
+
+export const codeDiffLineNumberVariants = cva(zuiCodeDiffLineNumberBase, {
+  variants: {
+    type: {
+      added: zuiCodeDiffLineAdded,
+      removed: zuiCodeDiffLineRemoved,
+      unchanged: zuiCodeDiffLineUnchanged,
+    },
+  },
+  defaultVariants: {
+    type: "unchanged",
+  },
+});
+
+export const codeDiffLineContentVariants = cva(zuiCodeDiffLineContentBase, {
+  variants: {
+    type: {
+      added: zuiCodeDiffLineAdded,
+      removed: zuiCodeDiffLineRemoved,
+      unchanged: zuiCodeDiffLineUnchanged,
+    },
+  },
+  defaultVariants: {
+    type: "unchanged",
+  },
+});

package/src/ui/typing-indicator/animated/animations.ts

@@ -0,0 +1,58 @@
+import type { Transition, Variants } from "framer-motion";
+
+export type TypingIndicatorAnimation = "none" | "bounce" | "pulse" | "wave";
+
+export type TypingIndicatorAnimationPresets = Record<
+  TypingIndicatorAnimation,
+  {
+    transition: Transition;
+    variants: Variants;
+  }
+>;
+
+export const typingIndicatorAnimationPresets: TypingIndicatorAnimationPresets =
+  {
+    none: {
+      transition: { duration: 0 },
+      variants: {
+        initial: { y: 0 },
+        animate: { y: 0 },
+      },
+    },
+    bounce: {
+      transition: {
+        type: "spring",
+        stiffness: 500,
+        damping: 10,
+        mass: 0.5,
+      },
+      variants: {
+        initial: { y: 0 },
+        animate: { y: -6 },
+      },
+    },
+    pulse: {
+      transition: {
+        duration: 0.8,
+        repeat: Infinity,
+        repeatType: "reverse",
+        ease: "easeInOut",
+      },
+      variants: {
+        initial: { scale: 1, opacity: 0.4 },
+        animate: { scale: 1.3, opacity: 1 },
+      },
+    },
+    wave: {
+      transition: {
+        type: "spring",
+        stiffness: 400,
+        damping: 8,
+        mass: 0.4,
+      },
+      variants: {
+        initial: { y: 0, scale: 1 },
+        animate: { y: -8, scale: 0.9 },
+      },
+    },
+  };

package/src/ui/typing-indicator/animated/index.ts

@@ -0,0 +1,8 @@
+"use client";
+
+export { TypingIndicatorAnimated } from "./typing-indicator-animated";
+export type {
+  TypingIndicatorAnimation,
+  TypingIndicatorAnimatedProps,
+} from "./types";
+export { typingIndicatorAnimationPresets } from "./animations";

package/src/ui/typing-indicator/animated/types.ts

@@ -0,0 +1,11 @@
+import type { Ref } from "react";
+
+import type { TypingIndicatorBaseProps } from "../types";
+import type { TypingIndicatorAnimation } from "./animations";
+
+export type { TypingIndicatorAnimation };
+
+export type TypingIndicatorAnimatedProps = TypingIndicatorBaseProps & {
+  animation?: TypingIndicatorAnimation;
+  ref?: Ref<HTMLSpanElement>;
+};

package/src/ui/typing-indicator/animated/typing-indicator-animated.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useMemo } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import {
+  typingIndicatorDotVariants,
+  typingIndicatorDotsVariants,
+  typingIndicatorVariants,
+} from "../variants";
+
+import { typingIndicatorAnimationPresets } from "./animations";
+import type { TypingIndicatorAnimatedProps } from "./types";
+import { TypingIndicatorLabel } from "../typing-indicator-base";
+
+export function TypingIndicatorAnimated({
+  appearance,
+  size,
+  dots = 3,
+  label,
+  labelPosition = "before",
+  animation = "bounce",
+  className,
+  ref,
+  ...rest
+}: TypingIndicatorAnimatedProps) {
+  const preset = typingIndicatorAnimationPresets[animation];
+
+  const dotTransitionOverrides = useMemo(
+    () =>
+      Array.from({ length: dots }).map((_, i) => ({
+        delay: i * 0.12,
+        ...(animation !== "none"
+          ? { repeat: Infinity, repeatType: "reverse" as const }
+          : {}),
+        ...preset.transition,
+      })),
+    [dots, animation, preset.transition],
+  );
+
+  return (
+    <span
+      ref={ref}
+      data-slot="typing-indicator"
+      className={cn(typingIndicatorVariants({ size }), className)}
+      {...rest}
+    >
+      {label && labelPosition === "before" && (
+        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>
+      )}
+      <span
+        data-slot="typing-indicator-dots"
+        className={typingIndicatorDotsVariants({ size })}
+      >
+        {Array.from({ length: dots }).map((_, i) => (
+          <motion.span
+            key={i}
+            data-slot="typing-indicator-dot"
+            className={cn(
+              typingIndicatorDotVariants({ appearance, size }),
+              "animate-none",
+            )}
+            initial="initial"
+            animate="animate"
+            variants={preset.variants}
+            transition={dotTransitionOverrides[i]}
+          />
+        ))}
+      </span>
+      {label && labelPosition === "after" && (
+        <TypingIndicatorLabel size={size}>{label}</TypingIndicatorLabel>
+      )}
+    </span>
+  );
+}
+
+TypingIndicatorAnimated.displayName = "TypingIndicatorAnimated";

package/src/ui/typing-indicator/index.ts

@@ -0,0 +1,15 @@
+"use client";
+
+export { TypingIndicator } from "./typing-indicator";
+export type {
+  TypingIndicatorBaseProps,
+  TypingIndicatorDots,
+  TypingIndicatorProps,
+  TypingIndicatorVariantProps,
+} from "./types";
+export {
+  typingIndicatorDotVariants,
+  typingIndicatorDotsVariants,
+  typingIndicatorLabelVariants,
+  typingIndicatorVariants,
+} from "./variants";

package/src/ui/typing-indicator/types.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { typingIndicatorDotVariants } from "./variants";
+
+export type TypingIndicatorVariantProps = VariantProps<
+  typeof typingIndicatorDotVariants
+>;
+
+export type TypingIndicatorDots = 3 | 4 | 5;
+
+export type TypingIndicatorBaseProps = TypingIndicatorVariantProps &
+  ComponentPropsWithRef<"span"> & {
+    dots?: TypingIndicatorDots;
+    label?: ReactNode;
+    labelPosition?: "before" | "after";
+    children?: ReactNode;
+  };
+
+export type TypingIndicatorProps = TypingIndicatorBaseProps;