@1kbirds/chidori-mock-gmail 0.1.0

package/src/state.ts

@@ -0,0 +1,159 @@
+import type { GmailDraft, GmailLabel, GmailMessage, GmailMockOptions, GmailSeed, GmailSnapshot, GmailUser, SystemLabelId } from "./types";
+
+export interface GmailMockStore {
+  users: Map<string, GmailUser>;
+  currentUserId: string;
+  labels: Map<string, GmailLabel>;
+  messages: Map<string, GmailMessage>;
+  drafts: Map<string, GmailDraft>;
+  historyId: number;
+  now(): Date;
+  nextId(prefix: string): string;
+  listeners: Set<() => void>;
+}
+
+const defaultUser: GmailUser = {
+  id: "me",
+  emailAddress: "user@example.com",
+  displayName: "Mock User",
+};
+
+const systemLabels: Array<{ id: SystemLabelId; name: string }> = [
+  { id: "INBOX", name: "Inbox" },
+  { id: "SENT", name: "Sent" },
+  { id: "DRAFT", name: "Drafts" },
+  { id: "TRASH", name: "Trash" },
+  { id: "SPAM", name: "Spam" },
+  { id: "STARRED", name: "Starred" },
+  { id: "UNREAD", name: "Unread" },
+  { id: "IMPORTANT", name: "Important" },
+  { id: "CATEGORY_PRIMARY", name: "Primary" },
+];
+
+export function createStore(options: GmailMockOptions = {}): GmailMockStore {
+  const fixedNow = options.now ? new Date(options.now) : undefined;
+  const user = { ...defaultUser, ...options.currentUser };
+  const counters = new Map<string, number>();
+  const store: GmailMockStore = {
+    users: new Map([[user.id, user]]),
+    currentUserId: user.id,
+    labels: new Map(defaultLabels().map((label) => [label.id, label])),
+    messages: new Map(),
+    drafts: new Map(),
+    historyId: 1,
+    now: () => new Date(fixedNow ?? new Date()),
+    nextId: (prefix) => {
+      const next = (counters.get(prefix) ?? 0) + 1;
+      counters.set(prefix, next);
+      return `${prefix}_${next.toString(36)}`;
+    },
+    listeners: new Set(),
+  };
+
+  if (options.seed) {
+    applySeed(store, options.seed);
+  } else {
+    recomputeLabelStats(store);
+  }
+
+  return store;
+}
+
+export function defaultLabels(): GmailLabel[] {
+  return systemLabels.map((label) => ({
+    id: label.id,
+    name: label.name,
+    type: "system",
+    messageListVisibility: "show",
+    labelListVisibility: "labelShow",
+    messagesTotal: 0,
+    messagesUnread: 0,
+    threadsTotal: 0,
+    threadsUnread: 0,
+  }));
+}
+
+export function snapshot(store: GmailMockStore): GmailSnapshot {
+  recomputeLabelStats(store);
+  return {
+    users: Array.from(store.users.values()).map(clone),
+    currentUserId: store.currentUserId,
+    labels: Array.from(store.labels.values()).map(clone),
+    messages: Array.from(store.messages.values()).map(clone),
+    drafts: Array.from(store.drafts.values()).map(clone),
+    historyId: String(store.historyId),
+  };
+}
+
+export function applySnapshot(store: GmailMockStore, next: GmailSnapshot): void {
+  store.users = new Map(next.users.map((user) => [user.id, clone(user)]));
+  store.currentUserId = next.currentUserId;
+  store.labels = new Map(next.labels.map((label) => [label.id, clone(label)]));
+  store.messages = new Map(next.messages.map((message) => [message.id, clone(message)]));
+  store.drafts = new Map(next.drafts.map((draft) => [draft.id, clone(draft)]));
+  store.historyId = Number(next.historyId);
+  recomputeLabelStats(store);
+  emit(store);
+}
+
+export function applySeed(store: GmailMockStore, seed: GmailSeed): void {
+  applySnapshot(store, {
+    users: seed.users ?? Array.from(store.users.values()),
+    currentUserId: seed.currentUserId ?? seed.users?.[0]?.id ?? store.currentUserId,
+    labels: seed.labels ?? defaultLabels(),
+    messages: seed.messages ?? [],
+    drafts: seed.drafts ?? [],
+    historyId: "1",
+  });
+}
+
+export function bumpHistory(store: GmailMockStore): string {
+  store.historyId += 1;
+  return String(store.historyId);
+}
+
+export function emit(store: GmailMockStore): void {
+  recomputeLabelStats(store);
+  for (const listener of store.listeners) {
+    listener();
+  }
+}
+
+export function recomputeLabelStats(store: GmailMockStore): void {
+  for (const label of store.labels.values()) {
+    label.messagesTotal = 0;
+    label.messagesUnread = 0;
+    label.threadsTotal = 0;
+    label.threadsUnread = 0;
+  }
+  const threadIdsByLabel = new Map<string, Set<string>>();
+  const unreadThreadIdsByLabel = new Map<string, Set<string>>();
+  for (const message of store.messages.values()) {
+    for (const labelId of message.labelIds) {
+      const label = store.labels.get(labelId);
+      if (!label) continue;
+      label.messagesTotal += 1;
+      if (message.labelIds.includes("UNREAD")) {
+        label.messagesUnread += 1;
+      }
+      if (!threadIdsByLabel.has(labelId)) threadIdsByLabel.set(labelId, new Set());
+      threadIdsByLabel.get(labelId)!.add(message.threadId);
+      if (message.labelIds.includes("UNREAD")) {
+        if (!unreadThreadIdsByLabel.has(labelId)) unreadThreadIdsByLabel.set(labelId, new Set());
+        unreadThreadIdsByLabel.get(labelId)!.add(message.threadId);
+      }
+    }
+  }
+  for (const [labelId, threadIds] of threadIdsByLabel) {
+    const label = store.labels.get(labelId);
+    if (label) label.threadsTotal = threadIds.size;
+  }
+  for (const [labelId, threadIds] of unreadThreadIdsByLabel) {
+    const label = store.labels.get(labelId);
+    if (label) label.threadsUnread = threadIds.size;
+  }
+}
+
+export function clone<T>(value: T): T {
+  return structuredClone(value);
+}

package/src/types.ts

@@ -0,0 +1,149 @@
+export type SystemLabelId =
+  | "INBOX"
+  | "SENT"
+  | "DRAFT"
+  | "TRASH"
+  | "SPAM"
+  | "STARRED"
+  | "UNREAD"
+  | "IMPORTANT"
+  | "CATEGORY_PRIMARY";
+
+export type LabelType = "system" | "user";
+
+export interface GmailUser {
+  id: string;
+  emailAddress: string;
+  displayName: string;
+}
+
+export interface GmailLabel {
+  id: string;
+  name: string;
+  type: LabelType;
+  messageListVisibility?: "show" | "hide";
+  labelListVisibility?: "labelShow" | "labelHide";
+  color?: {
+    textColor: string;
+    backgroundColor: string;
+  };
+  messagesTotal: number;
+  messagesUnread: number;
+  threadsTotal: number;
+  threadsUnread: number;
+}
+
+export interface GmailHeader {
+  name: string;
+  value: string;
+}
+
+export interface GmailMessagePartBody {
+  attachmentId?: string;
+  size: number;
+  data?: string;
+}
+
+export interface GmailMessagePart {
+  partId: string;
+  mimeType: string;
+  filename?: string;
+  headers: GmailHeader[];
+  body: GmailMessagePartBody;
+  parts?: GmailMessagePart[];
+}
+
+export interface GmailAttachment {
+  id: string;
+  filename: string;
+  mimeType: string;
+  size: number;
+  data?: string;
+}
+
+export interface GmailMessage {
+  id: string;
+  threadId: string;
+  labelIds: string[];
+  snippet: string;
+  historyId: string;
+  internalDate: string;
+  payload: GmailMessagePart;
+  sizeEstimate: number;
+  raw?: string;
+  attachments?: GmailAttachment[];
+}
+
+export interface GmailThread {
+  id: string;
+  historyId: string;
+  snippet: string;
+  messages: GmailMessage[];
+}
+
+export interface GmailDraft {
+  id: string;
+  message: GmailMessage;
+}
+
+export interface GmailProfile {
+  emailAddress: string;
+  messagesTotal: number;
+  threadsTotal: number;
+  historyId: string;
+}
+
+export interface GmailMockOptions {
+  currentUser?: Partial<GmailUser>;
+  now?: string | Date;
+  seed?: GmailSeed;
+}
+
+export interface GmailSeed {
+  users?: GmailUser[];
+  currentUserId?: string;
+  labels?: GmailLabel[];
+  messages?: GmailMessage[];
+  drafts?: GmailDraft[];
+}
+
+export interface GmailSnapshot {
+  users: GmailUser[];
+  currentUserId: string;
+  labels: GmailLabel[];
+  messages: GmailMessage[];
+  drafts: GmailDraft[];
+  historyId: string;
+}
+
+export interface GmailListResponse<T> {
+  resultSizeEstimate: number;
+  nextPageToken?: string;
+  messages?: T[];
+  threads?: T[];
+  labels?: T[];
+  drafts?: T[];
+}
+
+export interface GmailModifyRequest {
+  addLabelIds?: string[];
+  removeLabelIds?: string[];
+}
+
+export interface GmailSendRequest {
+  raw?: string;
+  message?: Partial<GmailMessage>;
+  to?: string[];
+  cc?: string[];
+  bcc?: string[];
+  subject?: string;
+  body?: string;
+  attachments?: GmailAttachment[];
+}
+
+export interface GmailSearchOptions {
+  q?: string;
+  labelIds?: string[];
+  includeSpamTrash?: boolean;
+  maxResults?: number;
+}

package/src/ui/GmailMockApp.tsx

@@ -0,0 +1,236 @@
+import { useEffect, useMemo, useState } from "react";
+import { demoSeed } from "../seed";
+import { decodeBase64Url } from "../service";
+import type { GmailMessage } from "../types";
+import type { GmailMock } from "../service";
+import "./styles.css";
+
+export interface GmailMockAppProps {
+  mock: GmailMock;
+}
+
+interface ComposeDraft {
+  id?: string;
+  to: string;
+  subject: string;
+  body: string;
+}
+
+const primaryLabels = ["INBOX", "STARRED", "SENT", "DRAFT", "TRASH", "SPAM"];
+
+export function GmailMockApp({ mock }: GmailMockAppProps) {
+  const [state, setState] = useState(() => mock.snapshot());
+  useEffect(() => mock.subscribe(() => setState(mock.snapshot())), [mock]);
+  const [activeLabel, setActiveLabel] = useState("INBOX");
+  const [query, setQuery] = useState("");
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
+  const [compose, setCompose] = useState<ComposeDraft | null>(null);
+
+  const label = state.labels.find((item) => item.id === activeLabel);
+  const messages = useMemo(
+    () =>
+      state.messages
+        .filter((message) => activeLabel === "ALL" || message.labelIds.includes(activeLabel))
+        .filter((message) => activeLabel === "TRASH" || activeLabel === "SPAM" || (!message.labelIds.includes("TRASH") && !message.labelIds.includes("SPAM")))
+        .filter((message) => !query || matchesUiQuery(message, query))
+        .sort((a, b) => Number(b.internalDate) - Number(a.internalDate)),
+    [activeLabel, query, state.messages],
+  );
+  const selected = messages.find((message) => message.id === selectedMessageId) ?? messages[0] ?? null;
+  const selectedThread = selected ? state.messages.filter((message) => message.threadId === selected.threadId).sort((a, b) => Number(a.internalDate) - Number(b.internalDate)) : [];
+
+  function resetDemo() {
+    mock.reset({
+      users: demoSeed.users!,
+      currentUserId: demoSeed.currentUserId!,
+      labels: demoSeed.labels!,
+      messages: demoSeed.messages!,
+      drafts: demoSeed.drafts!,
+      historyId: "1",
+    });
+    setActiveLabel("INBOX");
+    setSelectedMessageId(null);
+    setCompose(null);
+  }
+
+  function openDraft(message: GmailMessage) {
+    const draft = state.drafts.find((item) => item.message.id === message.id);
+    setCompose({
+      id: draft?.id,
+      to: header(message, "To"),
+      subject: header(message, "Subject"),
+      body: bodyText(message),
+    });
+  }
+
+  function saveDraft() {
+    if (!compose) return;
+    const request = { to: compose.to.split(",").map((value) => value.trim()).filter(Boolean), subject: compose.subject, body: compose.body };
+    if (compose.id) {
+      mock.updateDraft(compose.id, request);
+    } else {
+      mock.createDraft(request);
+    }
+    setCompose(null);
+    setActiveLabel("DRAFT");
+  }
+
+  function sendCompose() {
+    if (!compose) return;
+    if (compose.id) {
+      mock.updateDraft(compose.id, { to: compose.to.split(",").map((value) => value.trim()).filter(Boolean), subject: compose.subject, body: compose.body });
+      mock.sendDraft(compose.id);
+    } else {
+      mock.send({ to: compose.to.split(",").map((value) => value.trim()).filter(Boolean), subject: compose.subject, body: compose.body });
+    }
+    setCompose(null);
+    setActiveLabel("SENT");
+  }
+
+  return (
+    <div className="gmail-shell">
+      <aside className="gmail-sidebar">
+        <div className="gmail-brand">Gmail</div>
+        <button className="gmail-compose" type="button" onClick={() => setCompose({ to: "", subject: "", body: "" })}>
+          Compose
+        </button>
+        <nav>
+          {[...primaryLabels, "ALL"].map((labelId) => {
+            const item = state.labels.find((entry) => entry.id === labelId);
+            return (
+              <button className={labelId === activeLabel ? "active" : ""} type="button" key={labelId} onClick={() => { setActiveLabel(labelId); setSelectedMessageId(null); }}>
+                <span>{item?.name ?? "All Mail"}</span>
+                {item?.messagesUnread ? <strong>{item.messagesUnread}</strong> : null}
+              </button>
+            );
+          })}
+        </nav>
+        <section className="gmail-labels">
+          <h2>Labels</h2>
+          {state.labels
+            .filter((item) => item.type === "user")
+            .map((item) => (
+              <button className={item.id === activeLabel ? "active" : ""} type="button" key={item.id} onClick={() => setActiveLabel(item.id)}>
+                {item.name}
+              </button>
+            ))}
+        </section>
+        <section className="gmail-account">
+          <strong>{state.users.find((user) => user.id === state.currentUserId)?.displayName}</strong>
+          <span>{state.users.find((user) => user.id === state.currentUserId)?.emailAddress}</span>
+          <button type="button" onClick={resetDemo}>
+            Reset demo seed
+          </button>
+        </section>
+      </aside>
+
+      <main className="gmail-main">
+        <header className="gmail-toolbar">
+          <input value={query} placeholder="Search mail" onChange={(event) => setQuery(event.target.value)} />
+          <div>
+            <strong>{label?.name ?? "All Mail"}</strong>
+            <span>{messages.length} messages</span>
+          </div>
+        </header>
+
+        <section className="gmail-workspace">
+          <div className="gmail-list">
+            {messages.map((message) => (
+              <button
+                className={`${message.id === selected?.id ? "selected" : ""} ${message.labelIds.includes("UNREAD") ? "unread" : ""}`}
+                type="button"
+                key={message.id}
+                onClick={() => {
+                  setSelectedMessageId(message.id);
+                  if (message.labelIds.includes("UNREAD")) mock.modifyMessage(message.id, { removeLabelIds: ["UNREAD"] });
+                }}
+              >
+                <span>{header(message, activeLabel === "SENT" || activeLabel === "DRAFT" ? "To" : "From")}</span>
+                <strong>{header(message, "Subject")}</strong>
+                <small>{message.snippet}</small>
+                <time>{formatDate(message.internalDate)}</time>
+              </button>
+            ))}
+          </div>
+
+          <article className="gmail-reader">
+            {selected ? (
+              <>
+                <div className="gmail-reader-head">
+                  <div>
+                    <h1>{header(selected, "Subject")}</h1>
+                    <p>
+                      {selectedThread.length} message{selectedThread.length === 1 ? "" : "s"} in thread
+                    </p>
+                  </div>
+                  <div className="gmail-actions">
+                    {selected.labelIds.includes("DRAFT") ? <button type="button" onClick={() => openDraft(selected)}>Edit draft</button> : null}
+                    <button type="button" onClick={() => mock.modifyThread(selected.threadId, { removeLabelIds: ["INBOX"] })}>Archive</button>
+                    <button type="button" onClick={() => mock.trashThread(selected.threadId)}>Trash</button>
+                    <button type="button" onClick={() => mock.modifyThread(selected.threadId, { addLabelIds: ["STARRED"] })}>Star</button>
+                  </div>
+                </div>
+                <div className="gmail-thread">
+                  {selectedThread.map((message) => (
+                    <section className="gmail-thread-message" key={message.id}>
+                      <header>
+                        <div>
+                          <strong>{header(message, "From")}</strong>
+                          <span>to {header(message, "To")}</span>
+                        </div>
+                        <time>{formatDate(message.internalDate)}</time>
+                      </header>
+                      <p>{bodyText(message)}</p>
+                      {message.attachments?.length ? (
+                        <div className="gmail-attachments">
+                          {message.attachments.map((attachment) => (
+                            <span key={attachment.id}>{attachment.filename} · {attachment.size} bytes</span>
+                          ))}
+                        </div>
+                      ) : null}
+                    </section>
+                  ))}
+                </div>
+              </>
+            ) : (
+              <div className="gmail-empty">No messages.</div>
+            )}
+          </article>
+        </section>
+      </main>
+
+      {compose ? (
+        <form className="gmail-composer" onSubmit={(event) => { event.preventDefault(); sendCompose(); }}>
+          <header>
+            <strong>{compose.id ? "Edit draft" : "New Message"}</strong>
+            <button type="button" onClick={() => setCompose(null)}>×</button>
+          </header>
+          <input value={compose.to} placeholder="Recipients" onChange={(event) => setCompose({ ...compose, to: event.target.value })} />
+          <input value={compose.subject} placeholder="Subject" onChange={(event) => setCompose({ ...compose, subject: event.target.value })} />
+          <textarea value={compose.body} onChange={(event) => setCompose({ ...compose, body: event.target.value })} />
+          <footer>
+            <button type="button" onClick={saveDraft}>Save draft</button>
+            <button className="gmail-send" type="submit">Send</button>
+          </footer>
+        </form>
+      ) : null}
+    </div>
+  );
+}
+
+function header(message: GmailMessage, name: string): string {
+  return message.payload.headers.find((item) => item.name.toLowerCase() === name.toLowerCase())?.value ?? "";
+}
+
+function bodyText(message: GmailMessage): string {
+  return message.payload.body.data ? decodeBase64Url(message.payload.body.data) : message.snippet;
+}
+
+function matchesUiQuery(message: GmailMessage, query: string): boolean {
+  const target = [message.snippet, bodyText(message), ...message.payload.headers.map((item) => item.value)].join(" ").toLowerCase();
+  return target.includes(query.toLowerCase());
+}
+
+function formatDate(internalDate: string): string {
+  return new Date(Number(internalDate)).toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+}

package/src/ui/dev.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { createGmailMock, demoSeed } from "../index";
+import { GmailMockApp } from "./GmailMockApp";
+import "./styles.css";
+
+const mock = createGmailMock({
+  now: "2026-06-01T16:30:00.000Z",
+  seed: demoSeed,
+});
+
+createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <GmailMockApp mock={mock} />
+  </React.StrictMode>,
+);

package/src/ui/index.ts

@@ -0,0 +1,2 @@
+export { GmailMockApp } from "./GmailMockApp";
+export type { GmailMockAppProps } from "./GmailMockApp";