npm - @api-client/ui - Versions diffs - 0.2.0 → 0.2.3 - Mend

@api-client/ui 0.2.0 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1525) hide show

package/demo/amf/bare-components.css DELETED Viewed

@@ -1,11 +0,0 @@
-body {
-  display: flex;
-  flex-direction: row;
-}
-nav {
-  width: 360px;
-}
-aside {
-  width: 480px;
-}

package/demo/amf/bare-components.html DELETED Viewed

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>Bare components demo</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="stylesheet" href="./demo.css" />
-  <link rel="stylesheet" href="./styles/api-console.css" />
-  <link rel="stylesheet" href="./bare-components.css" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body class="demo styled">
-  <nav>
-    <!-- The navigation element. Starts with the "summary" page selection. -->
-    <api-navigation summary domainId="summary" domainType="summary"></api-navigation>
-  </nav>
-  <main>
-    <!-- The main documentation element. Starts with the "summary" page selection. -->
-    <api-documentation handleNavigationEvents domainId="summary" domainType="summary"></api-documentation>
-  </main>
-  <aside>
-    <!-- The HTTP request editor. Renders forms for user input to make an HTTP request -->
-    <api-request handleNavigationEvents></api-request>
-  </aside>
-  <script type="module" src="bare-components.ts"></script>
-</body>
-</html>

package/demo/amf/bare-components.ts DELETED Viewed

@@ -1,18 +0,0 @@
-import { IAmfDocument } from '@api-client/core/amf/definitions/Amf.js'
-import '../../src/define/amf/api-documentation.js'
-import '../../src/define/amf/api-request.js'
-import '../../src/define/amf/api-navigation.js'
-import { DomEventsAmfStore } from '../../src/amf/store/DomEventsAmfStore.js'
-async function downloadAmfModel(): Promise<IAmfDocument> {
-  const response = await fetch('/demo/models/demo-api.json')
-  return response.json()
-}
-async function init(): Promise<void> {
-  const apiStore = new DomEventsAmfStore()
-  apiStore.listen()
-  const model = await downloadAmfModel()
-  apiStore.amf = model
-}
-init()

package/demo/amf/demo.css DELETED Viewed

@@ -1,136 +0,0 @@
-body .centered {
-  max-width: 1900px;
-}
-.api-demo-content {
-  display: flex;
-}
-.api-demo-content arc-interactive-demo {
-  flex: 1;
-}
-.api-demo-content api-navigation {
-  width: 360px;
-  margin-right: 24px;
-}
-.request-dialog {
-  width: 90%;
-}
-.header-link {
-  margin: 0 8px;
-  color: var(--primary-text-color);
-  display: flex;
-  align-items: center;
-  font-size: 1.2rem;
-}
-body.styled {
-  --http-get-color-text: #fff;
-  --http-patch-color-text: #fff;
-}
-.block {
-  display: block;
-}
-@media (prefers-color-scheme: dark) {
-  body.styled header {
-    background-color: var(--secondary-background-color);
-  }
-  body.styled {
-    --operation-params-title-color: var(--primary-text-color);
-    --operation-subheader-color: var(--secondary-text-color);
-    --operation-description-color: var(--secondary-text-color);
-    --resource-subheader-color: var(--secondary-text-color);
-    --security-subheader-color: var(--secondary-text-color);
-    --pill-color: #000;
-    --markdown-styles-code-text-shadow: none;
-    --markdown-styles-h6-color: var(--secondary-text-color);
-    --markdown-styles-table-row-background-color: var(--primary-background-color);
-    --markdown-styles-table-even-row-background-color: var(--secondary-background-color);
-    --code-color: var(--primary-text-color);
-    --code-background-color: #202020;
-    --code-punctuation-value-color: var(--code-color);
-    --api-annotation-document-color: var(--primary-text-color);
-    --api-annotation-background-color: var(--primary-background-color);
-    --api-body-document-description-color: var(--primary-text-color);
-    --api-endpoint-url-background-color: var(--primary-background-color);
-    --api-endpoint-url-color: var(--primary-text-color);
-    --http-code-snippet-code-text-shadow: var(--primary-text-color);
-    --http-code-snippet-container-background-color: var(--code-background-color);
-    --http-code-snippet-code-function-color: #82AAFF;
-    --http-code-snippet-code-keyword-color: #C792EA;
-    --http-code-snippet-code-cdata-color: #adb9c5;
-    --resource-tryit-background-color: var(--code-background-color);
-    --resource-tryit-panels-background-color: transparent;
-    --error-message-icon-color: #cccccc;
-    --error-message-code-color: var(--secondary-text-color);
-    --auth-method-oauth2-redirect-info-color: #fff;
-    --inline-documentation-background-color: #3a3a3a;
-  }
-}
-api-request-editor {
-  width: 600px;
-  margin: 12px;
-  padding: 12px;
-}
-api-request-editor[invalid] {
-  border: 1px var(--error-color) solid;
-}
-.other-section {
-  padding: 4px 12px;
-  color: rgba(0, 0, 0, 0.54);
-  text-transform: uppercase;
-  font-size: 0.8rem;
-}
-output {
-  background-color: #FFF3E0;
-  white-space: pre-wrap;
-  margin-top: 40px;
-}
-body.styled.dark output {
-  background-color: #3a3a3a;
-}
-.response-output {
-  max-height: 300px;
-  overflow: auto;
-  display: block;
-  width: 700px;
-}
-#app.layout {
-  display: grid;
-  grid-template:
-    "header header" 72px
-    "nav content" auto / minmax(320px, 2fr) 10fr;
-}
-#app.layout header {
-  grid-area: header;
-}
-#app.layout [role=navigation] {
-  grid-area: nav;
-}
-#app.layout main {
-  grid-area: content;
-}

package/demo/amf/index.html DELETED Viewed

@@ -1,65 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>AMF Components</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body>
-  <main>
-    <h1>The UI library for the AMF components</h1>
-    <nav>
-      <h2>Documentation viewers</h2>
-      <a href="../">Back</a>
-      <dl>
-        <dt><a href="api-navigation.html">Api navigation</a></dt>
-        <dd>The main navigation view.</dd>
-        <dt><a href="api-documentation.html">Api documentation</a></dt>
-        <dd>The main element that renders the documentation from the current AMF model and navigation selection.</dd>
-        <dt><a href="api-resource.html">Api resource (an endpoint)</a></dt>
-        <dd>A documentation viewer for an API endpoint. Works with HTTP APIs.</dd>
-        <dt><a href="api-channel.html">Api channel</a></dt>
-        <dd>A documentation viewer for an API channel. Works with Async APIs.</dd>
-        <dt><a href="api-operation.html">Api Operation</a></dt>
-        <dd>A documentation viewer for an API operation. Works with both HTTP and Async APIs.</dd>
-        <dt><a href="api-summary.html">Api summary</a></dt>
-        <dd>A start page with API general info</dd>
-        <dt><a href="api-server-picker.html">Api server picker</a></dt>
-        <dd>An element to render a list of API servers</dd>
-        <dt><a href="api-documentation-document.html">Api documentation</a></dt>
-        <dd>A documentation viewer for an API Documentation.</dd>
-        <dt><a href="api-schema-documentation.html">Api schema documentation</a></dt>
-        <dd>A documentation viewer for an schema (data type).</dd>
-        <dt><a href="api-security-documentation.html">Api security schema documentation</a></dt>
-        <dd>A documentation viewer for an security schema.</dd>
-        <dt><a href="api-annotation.html">Api annotation</a></dt>
-        <dd>An annotation render element.</dd>
-        <dt><a href="api-payload.html">Api payload</a></dt>
-        <dd>A documentation for a payload (request and response).</dd>
-      </dl>
-      <h2>Request editor</h2>
-      <dl>
-        <dt><a href="request-editor.html">API request editor</a></dt>
-        <dd>An HTTP editor UI powered by the AMF model.</dd>
-        <dt><a href="api-request.html">API request</a></dt>
-        <dd>An HTTP editor UI powered by the AMF model with the response view.</dd>
-      </dl>
-      <h2>Experience</h2>
-      <dl>
-        <dt><a href="api-console.html">API Console</a></dt>
-        <dd>A dynamically created documentation page for an API.</dd>
-        <dt><a href="api-editor.html">API Editor</a></dt>
-        <dd>A text editor for RAML and OAS.</dd>
-        <dt><a href="bare-components.html">Bare components</a></dt>
-        <dd>Using the components in the bare web platform.</dd>
-      </dl>
-    </nav>
-  </main>
-</body>
-</html>

package/demo/amf/lib/AmfDemoPage.ts DELETED Viewed

@@ -1,285 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import type { ContextEvent } from '@api-client/core/events/BaseEvents.js'
-import type { IAmfDocument } from '@api-client/core/amf/definitions/Amf.js'
-import { OidcAuthorization } from '@api-client/core/authorization/OidcAuthorization.js'
-import { OAuth2Authorization } from '@api-client/core/authorization/OAuth2Authorization.js'
-import type {
-  IOAuth2Authorization,
-  IOidcTokenError,
-  IOidcTokenInfo,
-  ITokenInfo,
-} from '@api-client/core/models/Authorization.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import type { IRoute, IRouteResult } from '../../../src/mixins/RouteMixin.js'
-import * as Router from '../../../src/lib/route.js'
-import reactive from '../../../src/decorators/reactive.js'
-import type { ApiNavigationEvent } from '../../../src/events/amf/NavigationEvents.js'
-import { DomEventsAmfStore } from '../../../src/amf/store/DomEventsAmfStore.js'
-import { ReportingErrorEventDetail } from '../../../src/events/amf/ReportingEvents.js'
-import { EventTypes } from '../../../src/events/amf/EventTypes.js'
-import '../../../src/define/amf/api-navigation.js'
-import '../../../src/md/icons/ui-icon.js'
-import '../../../src/md/list/ui-list-item.js'
-import '../../../src/md/dropdown-list/ui-dropdown-list.js'
-import '../../../src/md/list/ui-list.js'
-import '../../../src/md/button/ui-filled-button.js'
-import '../../../src/md/button/ui-text-button.js'
-export interface ApiDemoSource {
-  label: string
-  file: string
-}
-export abstract class AmfDemoPage extends DemoPage {
-  @reactive() accessor initialized = false
-  @reactive() accessor loaded = false
-  /**
-   * Currently loaded file.
-   */
-  @reactive() accessor selectedFile: string | undefined
-  /**
-   * Currently loaded file.
-   */
-  @reactive() accessor redirectUri: string | undefined
-  store: DomEventsAmfStore
-  /**
-   * When set the endpoint section in navigation is opened by default.
-   */
-  endpointsOpened: boolean
-  /**
-   * When set the documentation section in navigation is opened by default.
-   */
-  docsOpened: boolean
-  /**
-   * When set the types section in navigation is opened by default.
-   */
-  typesOpened: boolean
-  /**
-   * When set the security section in navigation is opened by default.
-   */
-  securityOpened: boolean
-  /**
-   * AMF model read from the API model file downloaded after initialization.
-   */
-  amf?: IAmfDocument
-  /**
-   * When set the API Navigation element won't be rendered.
-   */
-  noApiNavigation: boolean
-  apis: ApiDemoSource[]
-  static get routes(): IRoute[] {
-    return [
-      {
-        pattern: '/file/(?<file>[^/]*)',
-        method: 'fileRoute',
-      },
-    ]
-  }
-  constructor() {
-    super()
-    this.store = new DomEventsAmfStore(window)
-    this.store.listen()
-    this.loaded = false
-    this.initialized = false
-    this.endpointsOpened = true
-    this.docsOpened = false
-    this.typesOpened = false
-    this.securityOpened = false
-    this.noApiNavigation = false
-    this.redirectUri = `${window.location.origin}/demo/oauth-popup.html`
-    window.addEventListener(EventTypes.Navigation.apiNavigate, this._navChanged.bind(this) as EventListener)
-    this.apis = [
-      {
-        file: 'models/demo-api.json',
-        label: 'Demo API',
-      },
-    ]
-  }
-  override firstRender(): void {
-    super.firstRender()
-    if (this.initialized) {
-      this.selectApiWhenNeeded()
-    }
-  }
-  async autoLoad(): Promise<void> {
-    await this.loadMonaco()
-    this.initializeRouting()
-    this.initialized = true
-    // router initializes itself in a raf
-    requestAnimationFrame(() => {
-      this.selectApiWhenNeeded()
-    })
-  }
-  selectApiWhenNeeded(): void {
-    if (this.selectedFile) {
-      return
-    }
-    const [api] = this.apis
-    if (!api) {
-      return
-    }
-    Router.navigate('file', api.file)
-  }
-  /**
-   * Handler for the API selection change
-   */
-  _apiChanged(e: CustomEvent): void {
-    const target = e.detail.item as HTMLElement | undefined
-    if (!target) {
-      return
-    }
-    const { src } = target.dataset
-    if (!src) {
-      return
-    }
-    Router.navigate('file', src)
-  }
-  fileRoute(info: IRouteResult): void {
-    const { params } = info
-    if (!params || !params.file) {
-      return
-    }
-    const file = params.file as string
-    if (file === this.selectedFile) {
-      return
-    }
-    this.selectedFile = file
-    this._loadFile(file)
-  }
-  /**
-   * Handler for the API errors
-   */
-  _errorHandler(e: CustomEvent): void {
-    const info = e.detail as ReportingErrorEventDetail
-    const { description, component = 'Unknown component', error } = info
-    console.error(`[${component}]: ${description}`)
-    console.error(error)
-  }
-  async _loadFile(file: string): Promise<void> {
-    this.loaded = false
-    const response = await fetch(`/demo/${file}`)
-    let data = await response.json()
-    if (Array.isArray(data)) {
-      ;[data] = data
-    }
-    this.amf = data
-    this.store.amf = data
-    this.loaded = true
-    console.log(data)
-    this.render()
-  }
-  oauth2authorizeHandler(e: ContextEvent<IOAuth2Authorization, ITokenInfo>): void {
-    e.preventDefault()
-    const config = { ...e.detail } as IOAuth2Authorization
-    e.detail.result = this.authorizeOauth2(config)
-  }
-  /**
-   * Authorize the user using provided settings.
-   *
-   * @param settings The authorization configuration.
-   */
-  async authorizeOauth2(settings: IOAuth2Authorization): Promise<ITokenInfo> {
-    const auth = new OAuth2Authorization(settings)
-    auth.checkConfig()
-    return auth.authorize() as Promise<ITokenInfo>
-  }
-  oidcAuthorizeHandler(e: ContextEvent<IOAuth2Authorization, (IOidcTokenInfo | IOidcTokenError)[]>): void {
-    const config = { ...e.detail } as IOAuth2Authorization
-    e.detail.result = this.authorizeOidc(config)
-  }
-  /**
-   * Authorize the user using provided settings.
-   *
-   * @param settings The authorization configuration.
-   */
-  async authorizeOidc(settings: IOAuth2Authorization): Promise<(IOidcTokenInfo | IOidcTokenError)[]> {
-    const auth = new OidcAuthorization(settings)
-    auth.checkConfig()
-    return auth.authorize()
-  }
-  /**
-   * This method to be overridden in child class to handle navigation.
-   * @param e Dispatched navigation event
-   */
-  _navChanged(e: ApiNavigationEvent): void {
-    const { domainId, domainType } = e.detail
-    console.log(`Navigation changed. Type: ${domainId}, selected: ${domainType}`)
-  }
-  /**
-   * This method to be overridden in child class to render API options.
-   * @returns HTML template for apis dropdown options.
-   */
-  _apiListTemplate(): TemplateResult[] {
-    const { apis } = this
-    return apis.map(
-      (item) => html` <ui-list-item role="menuitem" data-src="${item.file}">${item.label}</ui-list-item> `
-    )
-  }
-  /**
-   * Call this on the top of the `render()` method to render demo navigation
-   * @return HTML template for demo header
-   */
-  override headerTemplate(): TemplateResult {
-    const { componentName, selectedFile } = this
-    const info = this.apis.find((i) => i.file === selectedFile)
-    const label = info?.label || 'Select demo API'
-    return html`
-      <header>
-        ${componentName ? html`<h1 class="display-medium">${componentName}</h1>` : ''}
-        <ui-dropdown-list @select="${this._apiChanged}" closeOnOutsideClick style="margin-left: auto">
-          <ui-filled-button>
-            ${label}
-            <ui-icon role="presentation" icon="arrowDropDown"></ui-icon>
-          </ui-filled-button>
-          <ui-list slot="dropdown" role="menu"> ${this._apiListTemplate()} </ui-list>
-        </ui-dropdown-list>
-      </header>
-    `
-  }
-  override navigationTemplate(): TemplateResult {
-    if (this.noApiNavigation) {
-      return html``
-    }
-    // sort, filter
-    return html` <api-navigation
-      summary
-      ?endpointsOpened="${this.endpointsOpened}"
-      ?documentationsOpened="${this.docsOpened}"
-      ?schemasOpened="${this.typesOpened}"
-      ?securityOpened="${this.securityOpened}"
-      layout="tree"
-    ></api-navigation>`
-  }
-}

package/demo/amf/oauth-authorize.html DELETED Viewed

@@ -1,74 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../page.css" rel="stylesheet" type="text/css" />
-  <title>Demo log in</title>
-  <style>
-    html,
-    body {
-      height: 100vh;
-      margin: 0;
-      padding: 0;
-    }
-    html{
-      background-color: #fff;
-      -webkit-text-size-adjust: 100%;
-      -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-      text-size-adjust: 100%
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      text-rendering: optimizeLegibility;
-      font-size: 16px;
-      font-family: Roboto,sans-serif;
-      font-weight: 400;
-    }
-    .login {
-      width: 600px;
-      margin: 0 auto;
-    }
-  </style>
-</head>
-<body>
-  <section class="login">
-    <form autocomplete="on" method="post">
-      <h1>Demo log in</h1>
-      <p>Log in using any username and password to authorize Authorization Method component</p>
-      <ui-text-field
-        type="email"
-        name="username"
-        required
-        invalidMessage="Email is required"
-        label="Email"
-        autocomplete="on"
-      ></ui-text-field>
-      <ui-text-field
-        name="password"
-        required
-        autocomplete="on"
-        invalidMessage="Password is required"
-        label="Password"
-      ></ui-text-field>
-      <ui-filled-button class="login-button">Authorize</ui-filled-button>
-    </form>
-  </section>
-  <script type="module" src="oauth-authorize.ts"></script>
-</body>
-</html>

package/demo/amf/oauth-authorize.ts DELETED Viewed

@@ -1,40 +0,0 @@
-import { nanoid } from 'nanoid'
-import '../../src/md/button/ui-filled-button.js'
-import '../../src/md/text-field/ui-text-field.js'
-function setupFormAction(): void {
-  const u = new URL(window.location.href)
-  const state = u.searchParams.get('state') as string
-  const redirectUri = decodeURIComponent(u.searchParams.get('redirect_uri') as string)
-  const type = u.searchParams.get('response_type')
-  const codeParam = type === 'code' ? 'code' : 'access_token'
-  const params = new URLSearchParams()
-  params.set(codeParam, nanoid())
-  params.set('state', state)
-  params.set('expires_in', '3600')
-  params.set('scope', 'dummy')
-  if (type !== 'code') {
-    params.set('token_type', 'bearer')
-    params.set('refresh_token', nanoid())
-  }
-  const formUrl = `${redirectUri}#${params.toString()}`
-  const form = document.querySelector('form') as HTMLFormElement
-  form.action = formUrl
-}
-function loginHandler(): void {
-  const form = document.querySelector('form') as HTMLFormElement
-  window.location.assign(form.action)
-}
-function addButtonAction(): void {
-  const button = document.querySelector('.login-button') as HTMLButtonElement
-  button.addEventListener('click', loginHandler)
-}
-function initialize(): void {
-  setupFormAction()
-  addButtonAction()
-}
-initialize()