@api-client/ui 0.2.0 → 0.2.2

package/src/elements/amf/ApiSummary.element.ts

@@ -1,387 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { property, state } from 'lit/decorators.js'
-import { unsafeHTML } from 'lit/directives/unsafe-html.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { ApiDocumentationBase } from './ApiDocumentationBase.js'
-import { sanitizeHTML } from '../../amf/lib/Utils.js'
-import * as UrlLib from '../../amf/lib/UrlUtils.js'
-import { NavigationEvents } from '../../events/amf/NavigationEvents.js'
-import { ApiEvents } from '../../events/amf/ApiEvents.js'
-import { ReportingEvents } from '../../events/amf/ReportingEvents.js'
-import { TelemetryEvents } from '../../events/amf/TelemetryEvents.js'
-import { ServerEvents } from '../../events/amf/ServerEvents.js'
-import { EndpointEvents } from '../../events/amf/EndpointEvents.js'
-import { SelectionType } from '../../amf/types.js'
-import type {
-  IApiEndPointWithOperationsListItem,
-  IApiOperationListItem,
-  IApiServer,
-  IApiSummary,
-} from '@api-client/core/amf/definitions/Api.js'
-import { AmfNamespace } from '@api-client/core/amf/definitions/Namespace.js'
-
-import '../../elements/highlight/marked-highlight.js'
-
-/**
- * A web component that renders the documentation page for an API documentation (like in RAML documentations) built from
- * the AMF graph model.
- */
-export default class ApiSummary extends ApiDocumentationBase {
-  protected summaryValue?: IApiSummary
-
-  get summary(): IApiSummary | undefined {
-    return this.summaryValue
-  }
-
-  protected serversValue?: IApiServer[]
-
-  get servers(): IApiServer[] | undefined {
-    return this.serversValue
-  }
-
-  /**
-   * A property to set to override AMF's model base URI information.
-   * When this property is set, the `endpointUri` property is recalculated.
-   * @attribute
-   */
-  @property({ type: String }) accessor baseUri: string | undefined
-
-  /**
-   * API title header level in value range from 1 to 6.
-   * This is made for accessibility. It the component is used in a context
-   * where headers order matters then this property is to be set to
-   * arrange headers in the right order.
-   *
-   * @default 2
-   * @attribute
-   */
-  @property({ type: Number }) accessor titleLevel: number | undefined
-
-  /**
-   * A property to hide the table of contents list of endpoints.
-   * @attribute
-   */
-  @property({ type: Boolean }) accessor hideToc: boolean | undefined
-
-  @state() accessor protocols: string[] | undefined
-
-  protected endpointsValue: IApiEndPointWithOperationsListItem[] | undefined
-
-  get endpoints(): IApiEndPointWithOperationsListItem[] | undefined {
-    if (this.endpointsValue) {
-      return [...this.endpointsValue]
-    }
-    return undefined
-  }
-
-  protected isAsyncValue?: boolean
-
-  constructor() {
-    super()
-    this.titleLevel = 2
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback()
-    this.processDebounce()
-  }
-
-  /**
-   * Queries the graph store for the API data.
-   */
-  override async processGraph(): Promise<void> {
-    await this.querySummary()
-    await this.queryServers()
-    await this.queryEndpoints()
-    await this.processSummary()
-    this.requestUpdate()
-  }
-
-  /**
-   * Queries the API store for the API summary object.
-   */
-  async querySummary(): Promise<void> {
-    this.summaryValue = undefined
-    try {
-      const info = await ApiEvents.summary(this)
-      this.summaryValue = info
-    } catch (e) {
-      const ex = e as Error
-      TelemetryEvents.exception(this, ex.message, false)
-      ReportingEvents.error(this, ex, `Unable to query for API summary data: ${ex.message}`, this.localName)
-    }
-  }
-
-  /**
-   * Queries the API store for the API summary object.
-   */
-  async queryServers(): Promise<void> {
-    this.serversValue = undefined
-    try {
-      const info = await ServerEvents.query(this)
-      this.serversValue = info
-    } catch (e) {
-      const ex = e as Error
-      TelemetryEvents.exception(this, ex.message, false)
-      ReportingEvents.error(this, ex, `Unable to query for API servers: ${ex.message}`, this.localName)
-    }
-  }
-
-  /**
-   * Logic executed after the summary is requested from the store.
-   */
-  async processSummary(): Promise<void> {
-    this.isAsyncValue = undefined
-    const { summary } = this
-    if (!summary) {
-      return
-    }
-    this.isAsyncValue = summary.types.includes(AmfNamespace.aml.vocabularies.apiContract.AsyncAPI)
-  }
-
-  /**
-   * Queries the API endpoints and methods.
-   */
-  async queryEndpoints(): Promise<void> {
-    this.endpointsValue = undefined
-    try {
-      const info = await EndpointEvents.list(this)
-      this.endpointsValue = info
-    } catch (e) {
-      const ex = e as Error
-      TelemetryEvents.exception(this, ex.message, false)
-      ReportingEvents.error(this, ex, `Unable to query for API endpoints: ${ex.message}`, this.localName)
-    }
-  }
-
-  protected navigateHandler(e: Event): void {
-    e.preventDefault()
-    const target = e.composedPath()[0] as HTMLElement
-    const data = target.dataset
-    if (!data.id || !data.shapeType) {
-      return
-    }
-    NavigationEvents.apiNavigate(this, data.id, data.shapeType as SelectionType, data.parent)
-  }
-
-  override render(): TemplateResult {
-    const { summary } = this
-    if (!summary) {
-      return html``
-    }
-    return html`
-      ${this.titleTemplate()} ${this.versionTemplate()} ${this.descriptionTemplate(summary.description)}
-      ${this.serversTemplate()} ${this.protocolsTemplate()} ${this.contactInfoTemplate()} ${this.licenseTemplate()}
-      ${this.termsOfServiceTemplate()} ${this.endpointsTemplate()}
-    `
-  }
-
-  protected titleTemplate(): TemplateResult | string {
-    const { summary, titleLevel } = this
-    if (!summary || !summary.name) {
-      return ''
-    }
-    return html` <div class="api-title" role="heading" aria-level="${titleLevel || ''}" part="api-title">
-      <label part="api-title-label">API title:</label>
-      <span class="text-selectable">${summary.name}</span>
-    </div>`
-  }
-
-  protected versionTemplate(): TemplateResult | string {
-    const { summary } = this
-    if (!summary || !summary.version) {
-      return ''
-    }
-    return html` <p class="inline-description version" part="api-version">
-      <label>Version:</label>
-      <span class="text-selectable">${summary.version}</span>
-    </p>`
-  }
-
-  /**
-   * @returns A template for a server, servers, or no servers
-   * whether it's defined in the main API definition or not.
-   */
-  protected serversTemplate(): TemplateResult | string {
-    const { servers, baseUri } = this
-    if (baseUri) {
-      return this.baseUriTemplate(undefined)
-    }
-    if (!servers || !servers.length) {
-      return ''
-    }
-    if (servers.length === 1) {
-      return this.baseUriTemplate(servers[0])
-    }
-    return html` <div class="servers" slot="markdown-html">
-      <p class="servers-label">API servers</p>
-      <ul class="server-lists">
-        ${servers.map((server) => this.serverTemplate(server))}
-      </ul>
-    </div>`
-  }
-
-  /**
-   * @param server Server definition
-   * @returns A template for a single server in the main API definition
-   */
-  protected baseUriTemplate(server?: IApiServer): TemplateResult {
-    const { baseUri, protocols } = this
-    const uri = UrlLib.computeApiBaseUri({ baseUri, server, protocols })
-    return html`
-      <div class="endpoint-url">
-        <div class="url-value">${uri}</div>
-      </div>
-    `
-  }
-
-  /**
-   * @param server Server definition
-   * @returns Template for a server list items when there is more than one server.
-   */
-  protected serverTemplate(server: IApiServer): TemplateResult {
-    const { baseUri, protocols } = this
-    const uri = UrlLib.computeApiBaseUri({ baseUri, server, protocols })
-    const { description } = server
-    return html` <li class="text-selectable">
-      ${uri}
-      ${description
-        ? html`<marked-highlight .markdown=${description} class="server-description"></marked-highlight>`
-        : ''}
-    </li>`
-  }
-
-  protected protocolsTemplate(): TemplateResult | string {
-    const { summary } = this
-    if (!summary || !summary.schemes || !summary.schemes.length) {
-      return ''
-    }
-    const result = summary.schemes.map((item) => html`<span class="chip text-selectable">${item}</span>`)
-
-    return html` <label class="section">Supported protocols</label>
-      <div class="protocol-chips">${result}</div>`
-  }
-
-  protected contactInfoTemplate(): TemplateResult | string {
-    const { summary } = this
-    if (!summary || !summary.provider || !summary.provider.name) {
-      return ''
-    }
-    const { name = '', email, url } = summary.provider
-    const link = url
-      ? sanitizeHTML(`<a href="${url}" target="_blank" class="app-link provider-url text-selectable">${url}</a>`)
-      : ''
-    return html` <section role="contentinfo" class="docs-section" part="info-section">
-      <label class="section">Contact information</label>
-      <p class="inline-description" part="info-inline-desc">
-        <span class="provider-name text-selectable">${name}</span>
-        ${email
-          ? html`<a class="app-link link-padding provider-email text-selectable" href="mailto:${email}">${email}</a>`
-          : ''}
-      </p>
-      ${url ? html` <p class="inline-description text-selectable" part="info-inline-desc">${unsafeHTML(link)}</p>` : ''}
-    </section>`
-  }
-
-  protected licenseTemplate(): TemplateResult | string {
-    const { summary } = this
-    if (!summary || !summary.license) {
-      return ''
-    }
-    const { url, name } = summary.license
-    if (!url || !name) {
-      return ''
-    }
-    const link = sanitizeHTML(`<a href="${url}" target="_blank" class="app-link text-selectable">${name}</a>`)
-    return html` <section aria-labelledby="licenseLabel" class="docs-section" part="license-section">
-      <label class="section" id="licenseLabel">License</label>
-      <p class="inline-description">${unsafeHTML(link)}</p>
-    </section>`
-  }
-
-  protected termsOfServiceTemplate(): TemplateResult | string {
-    const { summary } = this
-    if (!summary || !summary.termsOfService || !summary.termsOfService.length) {
-      return ''
-    }
-    return html` <section aria-labelledby="tocLabel" class="docs-section">
-      <label class="section" id="tocLabel">Terms of service</label>
-      <marked-highlight .markdown="${summary.termsOfService}" sanitize>
-        <div slot="markdown-html" class="markdown-body text-selectable"></div>
-      </marked-highlight>
-    </section>`
-  }
-
-  protected endpointsTemplate(): TemplateResult | string {
-    if (this.hideToc) {
-      return ''
-    }
-    const endpoints = this.endpointsValue as IApiEndPointWithOperationsListItem[]
-    if (!endpoints || !endpoints.length) {
-      return ''
-    }
-    const result = endpoints.map((item) => this.endpointTemplate(item))
-    const pathLabel = this.isAsyncValue ? 'channels' : 'endpoints'
-    return html`
-      <div class="separator" part="separator"></div>
-      <div class="toc" part="toc">
-        <label class="section endpoints-title">API ${pathLabel}</label>
-        ${result}
-      </div>
-    `
-  }
-
-  protected endpointTemplate(item: IApiEndPointWithOperationsListItem): TemplateResult {
-    const { operations = [] } = item
-    const ops = operations.length ? operations.map((op) => this.methodTemplate(op, item)) : ''
-    return html` <div class="endpoint-item" @click="${this.navigateHandler}">
-      ${item.name ? this.endpointNameTemplate(item) : this.endpointPathTemplate(item)}
-      <div class="endpoint-header">${ops}</div>
-    </div>`
-  }
-
-  protected endpointPathTemplate(item: IApiEndPointWithOperationsListItem): TemplateResult {
-    return html`
-      <a
-        class="endpoint-path text-selectable"
-        href="#${item.path}"
-        data-id="${ifDefined(item.id)}"
-        data-shape-type="resource"
-        title="Open endpoint documentation"
-        >${item.path}</a
-      >
-    `
-  }
-
-  protected endpointNameTemplate(item: IApiEndPointWithOperationsListItem): TemplateResult | string {
-    if (!item.name) {
-      return ''
-    }
-    return html`
-      <a
-        class="endpoint-path text-selectable"
-        href="#${item.path}"
-        data-id="${ifDefined(item.id)}"
-        data-shape-type="resource"
-        title="Open endpoint documentation"
-        >${item.name}</a
-      >
-      <p class="endpoint-path-name">${item.path}</p>
-    `
-  }
-
-  protected methodTemplate(item: IApiOperationListItem, endpoint: IApiEndPointWithOperationsListItem): TemplateResult {
-    return html`
-      <a
-        href="#${`${endpoint.path}/${item.method}`}"
-        class="http-label pill"
-        data-method="${item.method}"
-        data-id="${item.id}"
-        data-shape-type="operation"
-        data-parent="${ifDefined(endpoint.id)}"
-        title="Open method documentation"
-        >${item.method}</a
-      >
-    `
-  }
-}

package/src/elements/amf/ApiSummary.styles.ts

@@ -1,192 +0,0 @@
-import { css } from 'lit'
-import commonStyles from './styles/Common.js'
-import MarkdownStyles from '../highlight/MarkdownStyles.js'
-import HttpLabelColors from '../http/HttpLabelColors.js'
-import HttpLabelStyles from '../http/HttpLabelStyles.js'
-
-export default [
-  commonStyles,
-  MarkdownStyles,
-  HttpLabelColors,
-  HttpLabelStyles,
-  css`
-    :host {
-      display: block;
-      color: var(--api-summary-color, inherit);
-    }
-
-    .api-title {
-      margin: 12px 0;
-      font-size: var(--api-summary-title-font-size, 16px);
-    }
-
-    marked-highlight {
-      padding: 0;
-    }
-
-    .marked-description {
-      margin: 24px 0;
-    }
-
-    .markdown-body {
-      margin-bottom: 28px;
-    }
-
-    :host([narrow]) h1 {
-      font-size: var(--api-summary-title-narrow-font-size, 1.2rem);
-      margin: 0;
-    }
-
-    .url-area {
-      display: flex;
-      flex-direction: column;
-      font-family: var(--arc-font-code-family);
-
-      margin-bottom: 40px;
-      margin-top: 20px;
-      background-color: var(--code-background-color);
-      color: var(--code-color);
-      padding: 8px;
-      border-radius: var(--api-endpoint-documentation-url-border-radius, 4px);
-    }
-
-    .url-label {
-      font-size: 0.75rem;
-      font-weight: 700;
-    }
-
-    .url-value {
-      font-size: var(--api-endpoint-documentation-url-font-size, 1.07rem);
-      word-break: break-all;
-    }
-
-    .method-value {
-      text-transform: uppercase;
-      white-space: nowrap;
-    }
-
-    label.section {
-      color: var(--arc-font-subhead-color);
-      font-weight: var(--arc-font-subhead-font-weight);
-      line-height: var(--arc-font-subhead-line-height);
-      /* font-size: 18px; */
-      margin-top: 20px;
-      display: block;
-    }
-
-    a {
-      color: var(--link-color);
-    }
-
-    a:hover {
-      color: var(--link-hover-color);
-    }
-
-    .chip {
-      display: inline-block;
-      white-space: nowrap;
-      padding: 2px 4px;
-      margin-right: 8px;
-      background-color: var(--api-summary-chip-background-color, #f0f0f0);
-      color: var(--api-summary-chip-color, #616161);
-      border-radius: var(--api-summary-chip-border-radius, 2px);
-    }
-
-    .app-link {
-      color: var(--link-color);
-    }
-
-    .link-padding {
-      margin-left: 8px;
-    }
-
-    .inline-description {
-      padding: 0;
-      margin: 0;
-    }
-
-    .docs-section {
-      margin-bottom: 40px;
-    }
-
-    .separator {
-      background-color: var(--api-summary-separator-color, rgba(0, 0, 0, 0.12));
-      height: 1px;
-      margin: var(--api-summary-separator-margin, 40px 0);
-    }
-
-    .endpoint-item {
-      margin-bottom: 32px;
-    }
-
-    /* .http-label {
-  margin-right: 8px;
-  margin-bottom: 8px;
-  text-decoration: none;
-}
-
-.http-label:hover,
-.http-label:focus {
-  text-decoration: underline;
-} */
-
-    .endpoint-path {
-      display: block;
-      text-decoration: none;
-      cursor: pointer;
-      margin-bottom: 4px;
-      display: inline-block;
-      font-weight: var(--api-summary-endpoint-path-font-weight, 500);
-      color: var(--link-color, #0277bd);
-      margin: 4px 0;
-      word-break: break-all;
-    }
-
-    .endpoint-path:hover,
-    .endpoint-path:focus {
-      text-decoration: underline;
-      color: var(--link-color, #0277bd);
-    }
-
-    .toc .section {
-      margin-bottom: 24px;
-    }
-
-    .section {
-      font-size: var(--api-summary-section-title-font-size);
-    }
-
-    .section.endpoints-title {
-      font-weight: var(--arc-font-title-font-weight, 500);
-      color: var(--arc-font-title-color);
-      font-weight: var(--arc-font-title-font-weight);
-      line-height: var(--arc-font-title-line-height);
-      font-size: var(--arc-font-title-font-size);
-    }
-
-    .endpoint-path-name {
-      word-break: break-all;
-      margin: 8px 0;
-    }
-
-    .servers .servers-label {
-      font-size: 0.75rem;
-      font-weight: 700;
-      margin: 0.8em 0 0.2em 0;
-    }
-
-    .server-description {
-      display: block;
-      font-size: var(--api-summary-server-description-font-size, 12px);
-      font-weight: var(--api-summary-server-description-font-weight, 600);
-    }
-
-    .http-label.pill {
-      text-decoration: none;
-    }
-
-    .http-label.pill:hover {
-      text-decoration: underline;
-    }
-  `,
-]