@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-thread.js

@@ -0,0 +1,374 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { srOnly } from "./sr-only.js";
+import "./tt-avatar.js";
+import "./tt-button.js";
+import "./tt-textarea.js";
+import "./tt-empty-state.js";
+/**
+ * The reading side of a messaging surface. Pairs with tt-inbox.
+ *
+ * Split from the list because the two sit in different places: side by
+ * side on a desktop, two separate routes on a phone. One component would
+ * have to make that layout decision for the app.
+ *
+ * THREE THINGS THAT ARE EASY TO GET WRONG AND ANNOYING TO LIVE WITH.
+ *
+ * It scrolls to the bottom on new messages, because a thread is read
+ * newest-last and opening one part-way up is disorienting. It only does
+ * so when the reader was ALREADY at the bottom, so it never yanks
+ * somebody out of older messages they were deliberately reading.
+ *
+ * Consecutive messages from the same author collapse: the avatar and name
+ * appear once and the following bubbles are bare. Repeating the name on
+ * every line of a burst is noise.
+ *
+ * The composer is Enter to send, Shift+Enter for a newline. That is what
+ * every messaging product does, and a thread that needs a mouse click to
+ * send feels broken regardless of how correct it is.
+ */
+let TTThread = class TTThread extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.messages = [];
+        this.heading = "";
+        this.placeholder = "Write a message";
+        this.sendLabel = "Send";
+        // Hides the composer, for a read-only or archived thread.
+        this.readonly = false;
+        this.sending = false;
+        this.emptyText = "No messages yet";
+        // Whether the reader was pinned to the bottom BEFORE this render. Read
+        // in willUpdate, because by updated() the new message has already
+        // changed scrollHeight and the answer would always be "no".
+        this.wasAtBottom = true;
+    }
+    willUpdate(changed) {
+        if (!changed.has("messages") || !this.scroller)
+            return;
+        const { scrollTop, clientHeight, scrollHeight } = this.scroller;
+        // A few pixels of tolerance: sub-pixel layout means scrollTop rarely
+        // lands exactly on the bottom.
+        this.wasAtBottom = scrollHeight - scrollTop - clientHeight < 40;
+    }
+    updated(changed) {
+        if (changed.has("messages") && this.wasAtBottom) {
+            this.scrollToEnd();
+        }
+    }
+    firstUpdated() {
+        this.scrollToEnd();
+    }
+    scrollToEnd() {
+        // After paint, or scrollHeight is still the old value.
+        requestAnimationFrame(() => {
+            if (this.scroller)
+                this.scroller.scrollTop = this.scroller.scrollHeight;
+        });
+    }
+    send() {
+        const body = this.composer?.value?.trim();
+        // Silently ignore empty sends rather than emitting a blank message.
+        if (!body || this.sending)
+            return;
+        this.dispatchEvent(new CustomEvent("tt-send", {
+            detail: { body },
+            bubbles: true,
+            composed: true,
+        }));
+        // The parent decides whether the send succeeded, but clearing here
+        // keeps the field responsive. A parent that fails can put the text
+        // back from the event detail.
+        this.composer.value = "";
+    }
+    handleKeydown(event) {
+        if (event.key === "Enter" && !event.shiftKey) {
+            event.preventDefault();
+            this.send();
+        }
+    }
+    static { this.styles = [srOnly, css `
+    /* The browser's own [hidden] rule loses to any :host display, so a
+       hidden element would still show. Important, so it always wins. */
+    :host([hidden]) {
+      display: none !important;
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+
+      height: 100%;
+      min-height: 0;
+
+      font-family: var(--tt-font-sans);
+    }
+
+    header {
+      flex: 0 0 auto;
+
+      display: flex;
+      align-items: center;
+      gap: var(--tt-space-3);
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+      border-bottom: 1px solid var(--tt-border);
+    }
+
+    .heading {
+      margin: 0;
+      font-size: var(--tt-text-md);
+      font-weight: var(--tt-weight-semibold);
+      color: var(--tt-foreground);
+    }
+
+    /*
+      min-height:0 is load-bearing. A flex child will not shrink below its
+      content by default, so without it this box grows to fit every
+      message and the whole page scrolls instead of the thread.
+    */
+    .messages {
+      flex: 1;
+      min-height: 0;
+      overflow-y: auto;
+
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-2);
+
+      padding: var(--tt-space-4);
+    }
+
+    .message {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--tt-space-2);
+
+      max-width: 78%;
+    }
+
+    .message.own {
+      align-self: flex-end;
+      flex-direction: row-reverse;
+    }
+
+    /* Bursts collapse: the avatar shows once and later bubbles indent to
+       where it would have been, so the column still lines up. */
+    .message.continued {
+      margin-top: calc(var(--tt-space-2) * -1 + 2px);
+      padding-left: calc(var(--tt-control-sm) - 4px);
+    }
+
+    .message.continued.own {
+      padding-left: 0;
+      padding-right: calc(var(--tt-control-sm) - 4px);
+    }
+
+    .bubble {
+      padding: var(--tt-space-2) var(--tt-space-3);
+
+      border: 1px solid var(--tt-border);
+      border-radius: var(--tt-radius-lg);
+
+      background: var(--tt-card);
+      color: var(--tt-foreground);
+
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-snug);
+
+      /* Long unbroken strings, a URL or a VAT number, must wrap rather
+         than widen the bubble past the thread. */
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
+    }
+
+    .message.own .bubble {
+      background: var(--tt-primary);
+      color: var(--tt-primary-foreground);
+      border-color: var(--tt-primary);
+    }
+
+    .meta {
+      display: flex;
+      align-items: baseline;
+      gap: var(--tt-space-2);
+
+      margin-bottom: 2px;
+
+      font-size: var(--tt-text-xs);
+      color: var(--tt-muted-foreground);
+    }
+
+    .author {
+      font-weight: var(--tt-weight-medium);
+      color: var(--tt-foreground);
+    }
+
+    .stack {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    footer {
+      flex: 0 0 auto;
+
+      display: flex;
+      align-items: flex-end;
+      gap: var(--tt-space-2);
+
+      padding: var(--tt-space-3) var(--tt-space-4);
+      border-top: 1px solid var(--tt-border);
+    }
+
+    tt-textarea {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .state {
+      margin: auto;
+      padding: var(--tt-space-8);
+    }
+  `]; }
+    render() {
+        return html `
+      ${this.heading
+            ? html `
+            <header part="header">
+              <h2 class="heading">${this.heading}</h2>
+              <slot name="actions"></slot>
+            </header>
+          `
+            : ""}
+
+      <!--
+        role="log": a live region for a conversation. New messages are
+        read out as they arrive, which is the whole point of a thread,
+        and nothing else on the page has to change for it.
+      -->
+      <div
+        class="messages"
+        part="messages"
+        role="log"
+        aria-label=${this.heading || "Messages"}
+      >
+        ${this.messages.length === 0
+            ? html `<div class="state">
+              <tt-empty-state heading=${this.emptyText}></tt-empty-state>
+            </div>`
+            : this.messages.map((message, index) => {
+                // Same author as the message before it: collapse the header.
+                const previous = this.messages[index - 1];
+                const continued = previous?.author === message.author;
+                return html `
+                <div
+                  class="message ${message.own ? "own" : ""} ${continued
+                    ? "continued"
+                    : ""}"
+                  part="message"
+                >
+                  ${continued
+                    ? ""
+                    : html `
+                        <tt-avatar
+                          size="small"
+                          src=${message.avatar ?? ""}
+                          name=${message.author}
+                        ></tt-avatar>
+                      `}
+
+                  <div class="stack">
+                    <!--
+                      A continued message hides its author from the EYE
+                      only. Read on its own, a burst of four bodies would
+                      otherwise reach a screen reader as four anonymous
+                      lines.
+                    -->
+                    ${continued
+                    ? html `<span class="sr-only">${message.author}</span>`
+                    : html `
+                          <span class="meta">
+                            <span class="author">${message.author}</span>
+                            ${message.timestamp
+                        ? html `<span>${message.timestamp}</span>`
+                        : ""}
+                          </span>
+                        `}
+
+                    <div class="bubble" part="bubble">${message.body}</div>
+                  </div>
+                </div>
+              `;
+            })}
+      </div>
+
+      ${this.readonly
+            ? ""
+            : html `
+            <footer part="composer">
+              <!--
+                Not disabled while sending. Disabling the focused field
+                threw focus to <body> the moment Enter sent a message, so
+                the next message started with finding the composer again.
+                send() already refuses while a send is in flight.
+              -->
+              <tt-textarea
+                full-width
+                auto-grow
+                .rows=${1}
+                placeholder=${this.placeholder}
+                label=${this.placeholder}
+                label-hidden
+                @keydown=${this.handleKeydown}
+              ></tt-textarea>
+
+              <tt-button
+                ?loading=${this.sending}
+                @tt-button-click=${this.send}
+              >
+                ${this.sendLabel}
+              </tt-button>
+            </footer>
+          `}
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], TTThread.prototype, "messages", void 0);
+__decorate([
+    property({ type: String })
+], TTThread.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTThread.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String, attribute: "send-label" })
+], TTThread.prototype, "sendLabel", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTThread.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTThread.prototype, "sending", void 0);
+__decorate([
+    property({ type: String, attribute: "empty-text" })
+], TTThread.prototype, "emptyText", void 0);
+__decorate([
+    query(".messages")
+], TTThread.prototype, "scroller", void 0);
+__decorate([
+    query("tt-textarea")
+], TTThread.prototype, "composer", void 0);
+TTThread = __decorate([
+    customElement("tt-thread")
+], TTThread);
+export { TTThread };
+//# sourceMappingURL=tt-thread.js.map

package/dist/tt-thread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-thread.js","sourceRoot":"","sources":["../src/tt-thread.ts"],"names":[],"mappings":"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"}

package/dist/tt-toast.d.ts

@@ -0,0 +1,49 @@
+import { LitElement } from "lit";
+import "./tt-icon.js";
+export type ToastVariant = "neutral" | "success" | "warning" | "danger";
+export interface ToastOptions {
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+}
+/**
+ * Drop one of these anywhere in the app, then call the module-level
+ * toast() from anywhere else. Notifications are global by nature, so
+ * routing every message down through props would mean every component
+ * in the tree carrying a notify callback it does not otherwise need.
+ */
+export declare class TTToast extends LitElement {
+    position: "top-right" | "top-center" | "bottom-right" | "bottom-center";
+    private items;
+    private leaving;
+    private exits;
+    private politeText;
+    private alertText;
+    private timers;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    show(options: ToastOptions): void;
+    private clearTimer;
+    private restartTimer;
+    private announce;
+    private hold;
+    private release;
+    dismiss(id: number): void;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+/**
+ * Show a toast from anywhere:
+ *
+ *   toast({ message: "Request posted", variant: "success" });
+ *
+ * Requires a <tt-toast> mounted somewhere in the page.
+ */
+export declare function toast(options: ToastOptions): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-toast": TTToast;
+    }
+}
+//# sourceMappingURL=tt-toast.d.ts.map

package/dist/tt-toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-toast.d.ts","sourceRoot":"","sources":["../src/tt-toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAsBD;;;;;GAKG;AACH,qBACa,OAAQ,SAAQ,UAAU;IAgBrC,QAAQ,EAAE,WAAW,GAAG,YAAY,GAAG,cAAc,GAAG,eAAe,CACzD;IAEL,OAAO,CAAC,KAAK,CAAmB;IAQhC,OAAO,CAAC,OAAO,CAAmB;IAC3C,OAAO,CAAC,KAAK,CAAiC;IAKrC,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,SAAS,CAAM;IAEhC,OAAO,CAAC,MAAM,CAAoD;IAElE,iBAAiB;IAKjB,oBAAoB;IAYpB,OAAO;IAeP,IAAI,CAAC,OAAO,EAAE,YAAY;IAoD1B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,EAAE,EAAE,MAAM;IAclB,MAAM,CAAC,MAAM,4BAsKV;IAEH,MAAM;CA0DP;AAMD;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,QAS1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}