@tartaguti/ui-components 0.0.0-stage → 0.2.0

package/dist/tt-auth.js

@@ -0,0 +1,520 @@
+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, nothing } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import "./tt-card.js";
+import "./tt-form.js";
+import "./tt-input.js";
+import "./tt-checkbox.js";
+import "./tt-button.js";
+import "./tt-alert.js";
+import "./tt-divider.js";
+import "./tt-icon.js";
+/*
+  What each mode calls itself, in one table rather than spread across four
+  render methods. A consumer can still override any of it with the
+  heading and submitLabel properties; these are only the defaults, and a
+  default that has to be right in four places is a default that will
+  eventually disagree with itself in one of them.
+*/
+const COPY = {
+    signIn: {
+        heading: "Sign in",
+        submit: "Sign in",
+        description: "",
+    },
+    signUp: {
+        heading: "Create an account",
+        submit: "Create account",
+        description: "",
+    },
+    forgotPsw: {
+        heading: "Reset your password",
+        submit: "Send reset link",
+        description: "We will email you a link to choose a new password.",
+    },
+    resetPsw: {
+        heading: "Choose a new password",
+        submit: "Save password",
+        description: "",
+    },
+};
+/**
+ * The four screens every application needs, as one component.
+ *
+ * One element with a `mode` rather than four elements, the same choice
+ * tt-product and tt-profile-card make with `orientation`. All four share
+ * a card, a heading, an error region and a footer; only the fields and
+ * the event differ. Four components would repeat that shell four times
+ * and let it drift.
+ *
+ * IT NEVER TALKS TO A SERVER AND NEVER DECIDES ANYTHING. It reports what
+ * was typed and what was asked for. Whether the credentials are valid,
+ * whether the account exists, and what happens next all belong to
+ * whoever is using it. That is what keeps it usable against any backend.
+ *
+ * The events, for the custom-elements manifest. Its analyzer reads event
+ * names from string literals at the dispatch site, and these are chosen at
+ * run time, so without the tags the manifest listed a bogus event instead.
+ * @fires tt-sign-in - { email, password, remember } from the sign-in form.
+ * @fires tt-sign-up - { name, email, password, accepted } from the sign-up form.
+ * @fires tt-forgot - { email } from the forgot-password form.
+ * @fires tt-reset - { password } from the reset form.
+ * @fires tt-mode - { mode }, when a footer link asks for another screen.
+ */
+let TTAuth = class TTAuth extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mode = "signIn";
+        // Left empty to take the per-mode default from COPY above.
+        this.heading = "";
+        this.description = "";
+        this.submitLabel = "";
+        this.emailLabel = "Email";
+        this.passwordLabel = "Password";
+        this.nameLabel = "Full name";
+        // Prefilled after a failed attempt, so nothing has to be retyped.
+        this.email = "";
+        this.name = "";
+        this.rememberMe = false;
+        this.loading = false;
+        /*
+          forgotPsw only: swap the form for a confirmation.
+      
+          Deliberately a boolean and not an outcome. The message must be the
+          same whether or not the address is registered, or anyone can use this
+          form to discover which emails have accounts. See renderSent.
+        */
+        this.sent = false;
+        // A failure from the server, above the form. Field problems go on the
+        // field, which is where the person is looking.
+        this.error = "";
+        /*
+          The mismatch message, held here rather than passed in.
+      
+          It is the one error this component is allowed to decide, because it is
+          the one that needs no server: the two boxes either match or they do
+          not. Everything else arrives through `error`.
+        */
+        this.confirmError = "";
+    }
+    get copy() {
+        return COPY[this.mode];
+    }
+    get resolvedHeading() {
+        return this.heading || this.copy.heading;
+    }
+    get resolvedSubmit() {
+        return this.submitLabel || this.copy.submit;
+    }
+    get resolvedDescription() {
+        return this.description || this.copy.description;
+    }
+    /*
+      One submit handler, branching on mode.
+  
+      The event NAME and its payload both follow the mode. A single event
+      carrying { email, password, remember } would be wrong for three of
+      the four screens: sign-up drops the name and the terms box, and
+      forgot-password reports a password field that does not exist.
+    */
+    handleSubmit(event) {
+        const data = event.detail.formData;
+        const read = (key) => String(data.get(key) ?? "");
+        this.confirmError = "";
+        if (this.mode === "signIn") {
+            this.emit("tt-sign-in", {
+                email: read("email"),
+                password: read("password"),
+                remember: data.get("remember") !== null,
+            });
+            return;
+        }
+        if (this.mode === "forgotPsw") {
+            this.emit("tt-forgot", { email: read("email") });
+            return;
+        }
+        /*
+          The two modes that set a password both confirm it.
+    
+          Checked on SUBMIT, never on input: comparing as someone types tells
+          them they are wrong before they have finished being right, and the
+          message flickers on every keystroke.
+        */
+        const password = read("password");
+        if (password !== read("confirm")) {
+            this.confirmError = "The two passwords do not match.";
+            return;
+        }
+        if (this.mode === "signUp") {
+            this.emit("tt-sign-up", {
+                name: read("name"),
+                email: read("email"),
+                password,
+                accepted: data.get("accepted") !== null,
+            });
+            return;
+        }
+        this.emit("tt-reset", { password });
+    }
+    emit(type, detail) {
+        this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+    }
+    /*
+      The footer links announce rather than navigate.
+  
+      This component has no idea whether the app routes with a hash, real
+      paths, or by swapping a property. Same rule as every other composite
+      here: report the intent, let the owner act on it.
+    */
+    goTo(mode) {
+        this.emit("tt-mode", { mode });
+    }
+    // ---- pieces shared by every mode ----
+    renderEmail(autocomplete) {
+        return html `
+      <tt-input
+        name="email"
+        type="email"
+        full-width
+        required
+        autocomplete=${autocomplete}
+        label=${this.emailLabel}
+        placeholder="you@company.com"
+        .value=${this.email}
+        ?disabled=${this.loading}
+      ></tt-input>
+    `;
+    }
+    renderPassword(label, isNew) {
+        return html `
+      <tt-input
+        name="password"
+        type="password"
+        full-width
+        required
+        autocomplete=${isNew ? "new-password" : "current-password"}
+        label=${label}
+        ?disabled=${this.loading}
+      ></tt-input>
+    `;
+    }
+    /* The mismatch lands on this field, not above the form, because this is
+       the field that has to change. */
+    renderConfirm() {
+        return html `
+      <tt-input
+        name="confirm"
+        type="password"
+        full-width
+        required
+        autocomplete="new-password"
+        label="Confirm password"
+        error=${this.confirmError}
+        ?disabled=${this.loading}
+      ></tt-input>
+    `;
+    }
+    renderSubmit() {
+        return html `
+      <tt-button
+        type="submit"
+        full-width
+        ?loading=${this.loading}
+      >
+        ${this.resolvedSubmit}
+      </tt-button>
+    `;
+    }
+    link(label, mode) {
+        return html `
+      <button type="button" class="link" @click=${() => this.goTo(mode)}>
+        ${label}
+      </button>
+    `;
+    }
+    /*
+      The card, written once.
+  
+      Every mode used to carry its own copy of this, which is the
+      duplication a `mode` property exists to remove: four shells drift, and
+      a fix to the error region has to be made four times.
+    */
+    renderShell(body, footer) {
+        return html `
+      <tt-card part="card" variant="elevated">
+        <div class="head">
+          <h1 part="heading">${this.resolvedHeading}</h1>
+
+          ${this.resolvedDescription
+            ? html `<p class="description">${this.resolvedDescription}</p>`
+            : nothing}
+        </div>
+
+        ${this.error
+            ? html `<tt-alert class="error" variant="danger">${this.error}</tt-alert>`
+            : nothing}
+        ${body}
+
+        <div class="footer" part="footer">
+          <slot name="footer">${footer}</slot>
+        </div>
+      </tt-card>
+    `;
+    }
+    // ---- the four screens ----
+    renderSignIn() {
+        return this.renderShell(html `
+        <tt-form @tt-form-submit=${this.handleSubmit}>
+          ${this.renderEmail("username")}
+          ${this.renderPassword(this.passwordLabel, false)}
+
+          <div class="row">
+            <tt-checkbox
+              name="remember"
+              label="Remember me"
+              ?checked=${this.rememberMe}
+              ?disabled=${this.loading}
+            ></tt-checkbox>
+
+            <slot name="secondary">
+              ${this.link("Forgot password?", "forgotPsw")}
+            </slot>
+          </div>
+
+          ${this.renderSubmit()}
+        </tt-form>
+      `, html `No account? ${this.link("Create one", "signUp")}`);
+    }
+    renderSignUp() {
+        return this.renderShell(html `
+        <tt-form @tt-form-submit=${this.handleSubmit}>
+          <tt-input
+            name="name"
+            full-width
+            required
+            autocomplete="name"
+            label=${this.nameLabel}
+            placeholder="Ana Marku"
+            .value=${this.name}
+            ?disabled=${this.loading}
+          ></tt-input>
+
+          ${this.renderEmail("email")}
+          ${this.renderPassword("Password", true)} ${this.renderConfirm()}
+
+          <tt-checkbox
+            name="accepted"
+            required
+            label="I accept the terms and the privacy policy"
+            ?disabled=${this.loading}
+          ></tt-checkbox>
+
+          ${this.renderSubmit()}
+        </tt-form>
+      `, html `Already have an account? ${this.link("Sign in", "signIn")}`);
+    }
+    /*
+      The same message whether or not the address is registered.
+  
+      Telling someone "no account with that email" turns this form into a
+      way of testing which addresses have accounts, one request at a time.
+      The wording is deliberately conditional.
+    */
+    renderSent() {
+        return html `
+      <tt-alert variant="success" heading="Check your email">
+        If an account exists for that address, a reset link is on its way.
+      </tt-alert>
+    `;
+    }
+    renderForgot() {
+        return this.renderShell(this.sent
+            ? this.renderSent()
+            : html `
+            <tt-form @tt-form-submit=${this.handleSubmit}>
+              ${this.renderEmail("username")} ${this.renderSubmit()}
+            </tt-form>
+          `, html `Remembered it? ${this.link("Sign in", "signIn")}`);
+    }
+    renderReset() {
+        return this.renderShell(html `
+        <tt-form @tt-form-submit=${this.handleSubmit}>
+          ${this.renderPassword("New password", true)} ${this.renderConfirm()}
+          ${this.renderSubmit()}
+        </tt-form>
+      `, html `${this.link("Back to sign in", "signIn")}`);
+    }
+    static { this.styles = 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: block;
+      width: 100%;
+      max-width: 380px;
+
+      font-family: var(--tt-font-sans);
+      -webkit-font-smoothing: antialiased;
+    }
+
+    .head {
+      display: flex;
+      flex-direction: column;
+      gap: var(--tt-space-1);
+      margin-bottom: var(--tt-space-5);
+      text-align: center;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: var(--tt-text-xl);
+      font-weight: var(--tt-weight-bold);
+      letter-spacing: -0.01em;
+      color: var(--tt-foreground);
+    }
+
+    .description {
+      margin: 0;
+      font-size: var(--tt-text-sm);
+      line-height: var(--tt-leading-normal);
+      color: var(--tt-muted-foreground);
+    }
+
+    /* role="alert" makes a screen reader announce this the moment it
+       appears, which is the whole point of a failed sign-in message. */
+    /* A tt-alert, not a box of its own. This was a second, hand-drawn
+       danger banner (different tint, no accent edge) beside the one the
+       library already has; tt-alert danger is also role="alert". */
+    .error {
+      display: block;
+      margin-bottom: var(--tt-space-4);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--tt-space-3);
+      flex-wrap: wrap;
+    }
+
+    /* Pushed to the bottom of the card, separated from the fields. */
+    .footer {
+      margin-top: var(--tt-space-5);
+      padding-top: var(--tt-space-4);
+      border-top: 1px solid var(--tt-border);
+
+      font-size: var(--tt-text-sm);
+      color: var(--tt-muted-foreground);
+      text-align: center;
+    }
+
+    /*
+      A button, not an anchor, and that is deliberate.
+
+      These switch a screen inside this component; they do not go to a
+      URL, and this component does not know whether the app even has one
+      for them. An <a> with no href is not focusable and is announced as
+      nothing, so a real button carries the interaction and CSS makes it
+      read as a link.
+    */
+    .link {
+      padding: 0;
+      border: none;
+      background: none;
+
+      font: inherit;
+      color: var(--tt-foreground);
+      font-weight: var(--tt-weight-medium);
+
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .link:hover {
+      text-decoration: underline;
+    }
+
+    .link:focus-visible {
+      outline: var(--tt-ring-width) solid var(--tt-ring);
+      outline-offset: var(--tt-ring-offset);
+      border-radius: var(--tt-radius-sm);
+    }
+
+    ::slotted(a) {
+      color: var(--tt-foreground);
+      text-decoration: none;
+    }
+
+    ::slotted(a:hover) {
+      text-decoration: underline;
+    }
+  `; }
+    render() {
+        switch (this.mode) {
+            case "signUp":
+                return this.renderSignUp();
+            case "forgotPsw":
+                return this.renderForgot();
+            case "resetPsw":
+                return this.renderReset();
+            default:
+                return this.renderSignIn();
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], TTAuth.prototype, "mode", void 0);
+__decorate([
+    property({ type: String })
+], TTAuth.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], TTAuth.prototype, "description", void 0);
+__decorate([
+    property({ type: String, attribute: "submit-label" })
+], TTAuth.prototype, "submitLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "email-label" })
+], TTAuth.prototype, "emailLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "password-label" })
+], TTAuth.prototype, "passwordLabel", void 0);
+__decorate([
+    property({ type: String, attribute: "name-label" })
+], TTAuth.prototype, "nameLabel", void 0);
+__decorate([
+    property({ type: String })
+], TTAuth.prototype, "email", void 0);
+__decorate([
+    property({ type: String })
+], TTAuth.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "remember-me" })
+], TTAuth.prototype, "rememberMe", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTAuth.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], TTAuth.prototype, "sent", void 0);
+__decorate([
+    property({ type: String })
+], TTAuth.prototype, "error", void 0);
+__decorate([
+    state()
+], TTAuth.prototype, "confirmError", void 0);
+TTAuth = __decorate([
+    customElement("tt-auth")
+], TTAuth);
+export { TTAuth };
+//# sourceMappingURL=tt-auth.js.map

package/dist/tt-auth.js.map

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

package/dist/tt-avatar.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from "lit";
+export type AvatarSize = "small" | "medium" | "large";
+/**
+ * Image with an initials fallback. The fallback is the entire point:
+ * logos and profile photos fail to load constantly, and a broken image
+ * icon is the difference between a product that looks maintained and one
+ * that does not.
+ */
+export declare class TTAvatar extends LitElement {
+    src: string;
+    name: string;
+    size: AvatarSize;
+    square: boolean;
+    private failed;
+    updated(changed: Map<string, unknown>): void;
+    private get initials();
+    private get tone();
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "tt-avatar": TTAvatar;
+    }
+}
+//# sourceMappingURL=tt-avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tt-avatar.d.ts","sourceRoot":"","sources":["../src/tt-avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD;;;;;GAKG;AACH,qBACa,QAAS,SAAQ,UAAU;IACV,GAAG,SAAM;IAGT,IAAI,SAAM;IAEK,IAAI,EAAE,UAAU,CAAY;IAE3B,MAAM,UAAS;IAElD,OAAO,CAAC,MAAM,CAAS;IAIhC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQrC,OAAO,KAAK,QAAQ,GAQnB;IAOD,OAAO,KAAK,IAAI,GAMf;IAED,MAAM,CAAC,MAAM,0BAgEX;IAEF,MAAM;CA8BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}