@api-client/ui 0.5.57 → 0.6.0

package/src/elements/search-input/internals/input.ts

@@ -0,0 +1,74 @@
+import { html, LitElement, type TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
+import { live } from 'lit/directives/live.js'
+
+/**
+ * A simple input element for rendering a search input.
+ *
+ * @fires {CustomEvent} search - Fired when a search is initiated.
+ * @fires {CustomEvent} clear - Fired when the search input is cleared.
+ */
+export default class SearchInput extends LitElement {
+  static override shadowRootOptions: ShadowRootInit = {
+    delegatesFocus: true,
+    mode: 'open',
+  }
+
+  /**
+   * The placeholder text for the search input.
+   * @attribute
+   */
+  @property({ type: String }) accessor placeholder = 'Find'
+
+  /**
+   * The last value dispatched with the `search` event.
+   */
+  @property({ type: String }) accessor value: string | undefined
+
+  protected handleKeyDown(e: KeyboardEvent): void {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      const input = this.shadowRoot?.querySelector('.search-input') as HTMLInputElement
+      this.notifySearch(input.value.trim())
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      this.value = ''
+      this.dispatchEvent(new CustomEvent('clear', { bubbles: false, composed: false }))
+    }
+  }
+
+  /**
+   * Notifies the parent component that a search has been initiated.
+   * @param input - The search input value.
+   */
+  protected notifySearch(input?: string): void {
+    if (!input || input === this.value) {
+      return
+    }
+    this.value = input
+    this.dispatchEvent(
+      new CustomEvent('search', {
+        bubbles: false,
+        composed: false,
+        detail: { input },
+      })
+    )
+  }
+
+  protected override render(): TemplateResult {
+    const icon = this.value ? 'arrow_back' : 'search'
+    return html`
+      <ui-focus-ring part="focus-ring" for="search-input"></ui-focus-ring>
+      <ui-icon class="search-icon">${icon}</ui-icon>
+      <input
+        class="search-input body-large"
+        id="search-input"
+        type="text"
+        placeholder="${this.placeholder}"
+        autocomplete="off"
+        @keydown="${this.handleKeyDown}"
+        .value="${live(this.value || '')}"
+      />
+    `
+  }
+}

package/src/elements/search-input/search-input.ts

@@ -0,0 +1,18 @@
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/input.js'
+import styles from './internals/input.styles.js'
+import typography from '../../styles/m3/typography.module.js'
+
+import '../../md/icons/ui-icon.js'
+import '../../md/focus-ring/ui-focus-ring.js'
+
+@customElement('search-input')
+export class SearchInputElement extends Element {
+  static override styles = [styles, typography]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'search-input': SearchInputElement
+  }
+}

package/src/elements/setup/Readme.md

@@ -0,0 +1,3 @@
+# Setup Components
+
+Contains UI components for setting up the application (orgs, the user, etc).

package/src/elements/setup/internals/InvitationScreen.styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit'
+
+export default css``

package/src/elements/setup/internals/InvitationScreen.ts

@@ -0,0 +1,418 @@
+import { html, TemplateResult, LitElement, nothing } from 'lit'
+import { property } from 'lit/decorators.js'
+import { consume } from '@lit/context'
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js'
+import type { AuthProviders } from '@api-client/core/sdk/AuthSdk.js'
+import type { InvitationSchema } from '@api-client/core/models/store/Invitation.js'
+import { github, google, linkedin } from './icons.js'
+import { type IOrganization, organizationContext } from '../../../providers/organization.js'
+
+export enum State {
+  /**
+   * The initial state (default).
+   *
+   * Next possible states:
+   * - `Initialized`
+   * - `Error`
+   */
+  Initializing = 'initializing',
+  /**
+   * The state when an error occurred.
+   * In this state, set the `errors` property to show error details.
+   * There are no next possible states from here, the parent app has to reset the flow.
+   */
+  Error = 'error',
+  /**
+   * State after the app initialization is complete.
+   * It means that the app has read all necessary config but has not yet fetched invitation data.
+   *
+   * Next possible states:
+   * - `ReadingStatus`
+   */
+  Initialized = 'initialized',
+  /**
+   * The state when the application is fetching invitation data.
+   * The component renders the loading indicator in this state.
+   *
+   * Next possible states:
+   * - `Login`
+   * - `Error`
+   */
+  ReadingStatus = 'reading-status',
+  /**
+   * The main interaction state where the user can choose to log in (accept) or decline.
+   *
+   * Next possible states:
+   * - `Rejecting`
+   * - `InvitationAccepted`
+   * - `InvitationDeclined`
+   * - `Error`
+   */
+  Login = 'login',
+  /**
+   * The state when the rejection request is being processed.
+   *
+   * Next possible states:
+   * - `Rejected`
+   * - `Error`
+   */
+  Rejecting = 'rejecting',
+  /**
+   * The state when the invitation has been rejected by the user in the current session.
+   *
+   * There are no next possible states from here, the parent app has to reset the flow.
+   */
+  Rejected = 'rejected',
+  /**
+   * The state when the invitation has been successfully accepted.
+   * This state can be set after reading the invitation status that was already accepted previously.
+   *
+   * There are no next possible states from here, the parent app has to reset the flow.
+   */
+  InvitationAccepted = 'invitation-accepted',
+  /**
+   * The state when the invitation is found to be deleted or invalid.
+   *
+   * There are no next possible states from here, the parent app has to reset the flow.
+   */
+  InvitationDeleted = 'invitation-deleted',
+  /**
+   * The state when the invitation was already declined previously.
+   *
+   * There are no next possible states from here, the parent app has to reset the flow.
+   */
+  InvitationDeclined = 'invitation-declined',
+  /**
+   * The state when the invitation has expired.
+   *
+   * There are no next possible states from here, the parent app has to reset the flow.
+   */
+  InvitationExpired = 'invitation-expired',
+}
+
+/**
+ * An App screen (HTML Element) allowing the user to accept an invitation to join an organization.
+ *
+ * This component handles the UI for invitation acceptance flow.
+ * It does not implement the actual invitation logic but dispatches events. However, the state can be set
+ * via the `state` property to reflect the current status.
+ *
+ * The parent app has to handle the invitation acceptance logic and update the state accordingly.
+ *
+ * When it comes to the user flow, the user can either accept or decline the invitation. To accept the
+ * initivation the user has to log in through one of the supported providers (Google, GitHub, LinkedIn).
+ * After successful login, the invitation is accepted. If the user declines the invitation, the invitation
+ * is rejected immediately.
+ *
+ * @fires authenticate - Dispatched when the user clicks on one of the authentication buttons.
+ *                       The detail object `CustomEvent<{ provider: AuthProviders }>` contains the selected provider.
+ * @fires reject - Dispatched when the user clicks the "Decline" button.
+ * @fires open - Dispatched when the user clicks the "Open organization" button
+ *               after a successful acceptance (state `InvitationAccepted`).
+ *
+ * @example
+ * ```html
+ * <invitation-screen
+ *   .state="${this.invitationState}"
+ *   .invitation="${this.invitationData}"
+ *   ?google="${true}"
+ *   @authenticate="${this.handleAuth}"
+ *   @reject="${this.handleReject}"
+ * ></invitation-screen>
+ * ```
+ */
+export default class InvitationScreen extends LitElement {
+  /**
+   * This is the main state definition that controls what is rendered on the screen.
+   * It can be one of the `State` enum values.
+   *
+   * @attribute
+   */
+  @property({ type: String }) accessor state = State.Initializing
+  /**
+   * When set it renders the Google login button. Disabled by default.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor google = false
+
+  /**
+   * When set it renders the LinkedIn login button. Disabled by default.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor linkedin = false
+
+  /**
+   * When set it renders the GitHub login button. Disabled by default.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor github = false
+
+  /**
+   * The list of errors to display.
+   */
+  @property({ type: Array }) accessor errors: string[] | undefined
+  /**
+   * The invitation details retreived from the backend.
+   * This property must be set for the component to function correctly.
+   */
+  @property({ type: Object }) accessor invitation: InvitationSchema | undefined
+
+  /**
+   * The fetched organization details for which the invitation is valid.
+   *
+   * This property consumes the `organizationContext`.
+   */
+  @property({ type: Object, attribute: false })
+  @consume({ context: organizationContext })
+  accessor organization: IOrganization | undefined
+
+  /**
+   * Dispatches the authentication event for the selected provider.
+   *
+   * @param provider The authentication provider to use.
+   */
+  protected dispatchAuth(provider: AuthProviders): void {
+    this.dispatchEvent(
+      new CustomEvent('authenticate', {
+        detail: { provider },
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  protected authenticateGoogle(): void {
+    this.dispatchAuth('google')
+  }
+
+  protected authenticateGithub(): void {
+    this.dispatchAuth('github')
+  }
+
+  protected authenticateLinkedin(): void {
+    this.dispatchAuth('linkedin')
+  }
+
+  /**
+   * Handles the click on the "Open organization" button after accepting the invitation.
+   */
+  protected handleAcceptedOpen(): void {
+    this.dispatchEvent(
+      new CustomEvent('open', {
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  /**
+   * Handles the click on the "Decline" button to reject the invitation.
+   */
+  protected handleReject(): void {
+    this.dispatchEvent(
+      new CustomEvent('reject', {
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  protected override render(): unknown {
+    const classes: ClassInfo = {
+      'slide': true,
+      'login-slide': true,
+      'error': [
+        State.Error,
+        State.InvitationDeclined,
+        State.InvitationDeleted,
+        State.InvitationDeclined,
+        State.InvitationExpired,
+      ].includes(this.state),
+    }
+    return html`
+      <div class="content">
+        <div class="${classMap(classes)}">${this.renderPage()}</div>
+      </div>
+    `
+  }
+
+  renderPage(): TemplateResult {
+    switch (this.state) {
+      case State.Initializing:
+        return this.renderCheckingUser()
+      case State.Error:
+        return this.renderError()
+      case State.Initialized:
+        // This is only an intermediate state before fetching data
+        return this.renderCheckingUser()
+      case State.ReadingStatus:
+        return this.renderCheckingUser()
+      case State.Login:
+        return html`${this.renderInto()} ${this.renderLoginForm()}`
+      case State.Rejecting:
+        return this.renderRejecting()
+      case State.Rejected:
+        return this.renderRejected()
+      case State.InvitationAccepted:
+        return this.renderInvitationAccepted()
+      case State.InvitationDeclined:
+        return this.renderInvitationDeclined()
+      case State.InvitationDeleted:
+        return this.renderInvitationDeleted()
+      case State.InvitationExpired:
+        return this.renderInvitationExpired()
+      default:
+        return html`<p>Unknown state.</p>`
+    }
+  }
+
+  protected renderCheckingUser(): TemplateResult {
+    return html`<div class="login">
+      <p class="body-large">Loading...</p>
+      <ui-progress indeterminate class="login-progress"></ui-progress>
+    </div>`
+  }
+
+  protected renderInto(): TemplateResult {
+    const { invitation } = this
+    const name = invitation?.name
+    return html` <div class="intro">
+      <h1 class="display-small">${name ? html`Hi ${name}` : 'Welcome to API Now!'}</h1>
+      <p class="body-large">You've been invited to join an organization.</p>
+    </div>`
+  }
+
+  protected renderLoginForm(): TemplateResult {
+    return html`
+      <div class="login">
+        <p class="body-large">To respond to the invitation, please log in.</p>
+        <div class="login-option">${this.renderGoogleButton()}</div>
+        <div class="login-option">${this.renderGithubButton()}</div>
+        <div class="login-option">${this.renderLinkedinButton()}</div>
+        <div class="login-option">
+          <ui-button class="decline" color="text" @click="${this.handleReject}">Decline invitation</ui-button>
+        </div>
+      </div>
+    `
+  }
+
+  protected renderRejecting(): TemplateResult {
+    return html`<div class="login">
+      <h1 class="display-medium">Thank you for responding</h1>
+      <p class="body-large">We will let them know you were not the intended recipient.</p>
+      <ui-progress indeterminate class="login-progress"></ui-progress>
+    </div>`
+  }
+
+  protected renderRejected(): TemplateResult {
+    return html`<div class="login">
+      <h1 class="display-medium">Thank you for responding</h1>
+      <p class="body-large">We've let them know you were not the intended recipient.</p>
+    </div>`
+  }
+
+  protected renderError(): TemplateResult {
+    const { errors = [] } = this
+    return html`<div class="login">
+      <h1 class="display-medium">Responding error</h1>
+      <p class="body-large">An error occurred while processing your request.</p>
+      <ul>
+        ${errors.map((error) => html`<li>${error}</li>`)}
+      </ul>
+    </div>`
+  }
+
+  protected renderInvitationAccepted(): TemplateResult {
+    return html`<div class="login">
+      <h1 class="display-medium">Invitation accepted</h1>
+      <p class="body-large">You have successfully accepted the invitation.</p>
+      <ui-button class="open" color="filled" @click="${this.handleAcceptedOpen}">Open organization</ui-button>
+    </div>`
+  }
+
+  protected renderInvitationDeclined(): TemplateResult {
+    const { invitation } = this
+    const time = invitation?.respondedAt
+    let info: TemplateResult
+    if (time) {
+      const d = new Date(time)
+      info = html`<p class="body-large">
+        You declined the invitation <relative-time datetime="${d.toISOString()}">${d.toLocaleString()}</relative-time>.
+      </p>`
+    } else {
+      info = html`<p class="body-large">You have declined the invitation.</p>`
+    }
+    return html`<div class="login">
+      <h1 class="display-medium">Invitation declined</h1>
+      ${info}
+      <p class="body-large">You can safely close this page.</p>
+    </div>`
+  }
+
+  protected renderInvitationDeleted(): TemplateResult {
+    const { invitation } = this
+    const time = invitation?.deletedInfo?.time
+    let info: TemplateResult
+    if (time) {
+      const d = new Date(time)
+      info = html`<p class="body-large">
+        The invitation has been deleted
+        <relative-time datetime="${d.toISOString()}">${d.toLocaleString()}</relative-time>.
+      </p>`
+    } else {
+      info = html`<p class="body-large">The invitation has been deleted.</p>`
+    }
+    return html`<div class="login">
+      <h1 class="display-medium">Invitation deleted</h1>
+      ${info}
+      <p class="body-large">You can safely close this page.</p>
+    </div>`
+  }
+
+  protected renderInvitationExpired(): TemplateResult {
+    const { invitation } = this
+    const time = invitation?.expiresAt
+    let info: TemplateResult
+    if (time) {
+      const d = new Date(time)
+      info = html`<p class="body-large">
+        The invitation expired <relative-time datetime="${d.toISOString()}">${d.toLocaleString()}</relative-time>.
+      </p>`
+    } else {
+      info = html`<p class="body-large">The invitation has expired.</p>`
+    }
+
+    return html`<div class="login">
+      <h1 class="display-medium">Invitation expired</h1>
+      ${info}
+      <p class="body-large">You can safely close this page.</p>
+    </div>`
+  }
+
+  protected renderGoogleButton(): TemplateResult | typeof nothing {
+    if (!this.google) {
+      return nothing
+    }
+    return html`<ui-button class="auth-button" color="outlined" @click="${this.authenticateGoogle}"
+      >${google} Google</ui-button
+    >`
+  }
+
+  protected renderGithubButton(): TemplateResult | typeof nothing {
+    if (!this.github) {
+      return nothing
+    }
+    return html`<ui-button class="auth-button" color="outlined" @click="${this.authenticateGithub}"
+      >${github} Github</ui-button
+    >`
+  }
+
+  protected renderLinkedinButton(): TemplateResult | typeof nothing {
+    if (!this.linkedin) {
+      return nothing
+    }
+    return html`<ui-button class="auth-button" color="outlined" @click="${this.authenticateLinkedin}"
+      >${linkedin} LinkedIn</ui-button
+    >`
+  }
+}

package/src/elements/setup/internals/LoginScreen.styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit'
+
+export default css``

package/src/elements/setup/internals/LoginScreen.ts

@@ -0,0 +1,136 @@
+import { html, TemplateResult, LitElement, nothing } from 'lit'
+import { property } from 'lit/decorators.js'
+import type { AuthProviders } from '@api-client/core/sdk/AuthSdk.js'
+import { github, google, linkedin } from './icons.js'
+
+/**
+ * An App screen (HTML Element) allowing the user to log in via supported providers (Google, GitHub, LinkedIn).
+ *
+ * This component handles the UI for authentication options and the loading state.
+ * It does not implement actual authentication logic but delegates it via events.
+ *
+ * @fires authenticate - Dispatched when the user clicks on one of the authentication buttons.
+ *                       The detail object `CustomEvent<{ provider: AuthProviders }>` contains the selected provider.
+ *
+ * @example
+ * ```html
+ * <login-screen
+ *   .loading="${this.isLoggingIn}"
+ *   google
+ *   linkedin
+ *   github
+ *   @authenticate="${this.handleLogin}"
+ * ></login-screen>
+ * ```
+ */
+export default class LoginScreen extends LitElement {
+  /**
+   * When true, shows a loading indicator instead of the login buttons.
+   * Set this while the authentication request is in progress.
+   */
+  @property({ type: Boolean }) accessor loading = false
+
+  /**
+   * When set it renders the Google login button. Disabled by default.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor google = false
+
+  /**
+   * When set it renders the LinkedIn login button. Disabled by default.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor linkedin = false
+
+  /**
+   * When set it renders the GitHub login button. Disabled by default.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor github = false
+
+  /**
+   * Dispatches the authentication event for the selected provider.
+   *
+   * @param provider The authentication provider to use.
+   */
+  protected dispatchAuth(provider: AuthProviders): void {
+    this.dispatchEvent(
+      new CustomEvent('authenticate', {
+        detail: { provider },
+        bubbles: false,
+        composed: false,
+      })
+    )
+  }
+
+  protected authenticateGoogle(): void {
+    this.dispatchAuth('google')
+  }
+
+  protected authenticateGithub(): void {
+    this.dispatchAuth('github')
+  }
+
+  protected authenticateLinkedin(): void {
+    this.dispatchAuth('linkedin')
+  }
+
+  protected override render(): unknown {
+    return html`<div class="content">
+      <div class="slide login-slide">${this.renderInto()} ${this.renderLoginForm()}</div>
+    </div>`
+  }
+
+  protected renderInto(): TemplateResult {
+    return html` <div class="intro">
+      <h1 class="display-medium">Welcome to API Now!</h1>
+      <p class="title-large">Sign in to your account.</p>
+    </div>`
+  }
+
+  protected renderLoginForm(): TemplateResult {
+    if (this.loading) {
+      return this.renderCheckingUser()
+    }
+    return html`<div class="login">
+      <p class="body-large">Sign up using</p>
+      <div class="login-option">${this.renderGoogleButton()}</div>
+      <div class="login-option">${this.renderGithubButton()}</div>
+      <div class="login-option">${this.renderLinkedinButton()}</div>
+    </div>`
+  }
+
+  protected renderCheckingUser(): TemplateResult {
+    return html`<div class="login">
+      <p class="body-large">Loading...</p>
+      <ui-progress indeterminate class="login-progress"></ui-progress>
+    </div>`
+  }
+
+  protected renderGoogleButton(): TemplateResult | typeof nothing {
+    if (!this.google) {
+      return nothing
+    }
+    return html`<ui-button class="auth-button google" color="outlined" @click="${this.authenticateGoogle}"
+      >${google} Google</ui-button
+    >`
+  }
+
+  protected renderGithubButton(): TemplateResult | typeof nothing {
+    if (!this.github) {
+      return nothing
+    }
+    return html`<ui-button class="auth-button github" color="outlined" @click="${this.authenticateGithub}"
+      >${github} Github</ui-button
+    >`
+  }
+
+  protected renderLinkedinButton(): TemplateResult | typeof nothing {
+    if (!this.linkedin) {
+      return nothing
+    }
+    return html`<ui-button class="auth-button linkedin" color="outlined" @click="${this.authenticateLinkedin}"
+      >${linkedin} LinkedIn</ui-button
+    >`
+  }
+}

package/src/elements/setup/internals/OrganizationCreateScreen.styles.ts

@@ -0,0 +1,3 @@
+import { css } from 'lit'
+
+export default css``