@api-client/ui 0.5.38 → 0.5.40

package/demo/elements/http/request-editor.ts

@@ -1,197 +0,0 @@
-import { CSSResult, html, TemplateResult } from 'lit'
-import { ProjectMock } from '@api-client/core/mocking/ProjectMock.js'
-import { HttpRequest, type IHttpRequest } from '@api-client/core/models/HttpRequest.js'
-import type { IRequestAuthorization } from '@api-client/core/models/RequestAuthorization.js'
-import type { IRequestUiMeta } from '@api-client/core/models/RequestUiMeta.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import surfaceStyles from '../../../src/styles/m3/surface.module.js'
-// import { WebHttpClientStoreBindings } from '../../../src/bindings/web/WebHttpClientStoreBindings.js'
-// import { WebProxyBindings } from '../../../src/bindings/web/WebProxyBindings.js'
-import RequestEditor, { SendDetails } from '../../../src/elements/http/RequestEditor.js'
-// import env from '../../env.js'
-import '../../../src/define/http/http-request-editor.js'
-
-const REQUEST_STORE_KEY = 'demo.request-ui.editor.request-data'
-const AUTH_STORE_KEY = 'demo.request-ui.editor.request-auth'
-const UI_STORE_KEY = 'demo.request-ui.editor.request-ui'
-
-// const workerUri = new URL('/src/http-client/store/IdbThread.ts', import.meta.url).toString()
-
-// const AppInfo: IApplication = { code: 'demo', name: 'Demo', version: '0' }
-
-class ComponentDemoPage extends DemoPage {
-  static override get styles(): CSSResult[] {
-    return [...DemoPage.styles, surfaceStyles]
-  }
-
-  override accessor componentName = 'http-request-editor'
-
-  mock = new ProjectMock()
-
-  @reactive() accessor request = new HttpRequest().toJSON()
-
-  @reactive() accessor auth: IRequestAuthorization[] | undefined
-
-  @reactive() accessor ui: IRequestUiMeta = {}
-
-  @reactive() accessor initialized: boolean
-
-  oauth2RedirectUri = 'https://auth.advancedrestclient.com/arc.html'
-
-  oauth2AuthorizationUri = `${window.location.protocol}//${window.location.host}${window.location.pathname}oauth-authorize.html`
-
-  // store = new WebHttpClientStoreBindings(AppInfo, workerUri)
-
-  // http = new WebProxyBindings(AppInfo, `${env.proxyUri}/open`)
-
-  constructor() {
-    super()
-    this.initialized = false
-    this.init()
-  }
-
-  async init(): Promise<void> {
-    // await this.store.initialize()
-    // await this.http.initialize()
-    await this.loadMonaco()
-    await this.restoreRequest()
-    await this.restoreAuth()
-    await this.restoreUi()
-    this.initialized = true
-  }
-
-  async restoreRequest(): Promise<void> {
-    const data = localStorage.getItem(REQUEST_STORE_KEY)
-    if (!data) {
-      return
-    }
-    try {
-      const tmp = JSON.parse(data)
-      if (tmp) {
-        const request = tmp as IHttpRequest
-        this.request = request
-      }
-    } catch {
-      //
-    }
-  }
-
-  async restoreAuth(): Promise<void> {
-    const data = localStorage.getItem(AUTH_STORE_KEY)
-    if (!data) {
-      return
-    }
-    try {
-      const tmp = JSON.parse(data)
-      if (Array.isArray(tmp)) {
-        this.auth = tmp
-      }
-    } catch {
-      //
-    }
-  }
-
-  async restoreUi(): Promise<void> {
-    const data = localStorage.getItem(UI_STORE_KEY)
-    if (!data) {
-      return
-    }
-    try {
-      const tmp = JSON.parse(data)
-      if (tmp) {
-        this.ui = tmp
-      }
-    } catch {
-      //
-    }
-  }
-
-  async handleChange(e: Event): Promise<void> {
-    const editor = e.target as RequestEditor
-    const request = await editor.serialize()
-    this.request = request
-    localStorage.setItem(REQUEST_STORE_KEY, JSON.stringify(request))
-    console.log('request change', request)
-  }
-
-  handleAuthorizationChange(e: Event): void {
-    const editor = e.target as RequestEditor
-    this.auth = editor.authorization
-    if (editor.authorization) {
-      localStorage.setItem(AUTH_STORE_KEY, JSON.stringify(editor.authorization))
-    } else {
-      localStorage.removeItem(AUTH_STORE_KEY)
-    }
-    console.log('auth change', editor.authorization)
-  }
-
-  handleUiChange(e: Event): void {
-    const editor = e.target as RequestEditor
-    if (!editor.ui) {
-      return
-    }
-    this.ui = editor.ui
-    if (editor.ui) {
-      localStorage.setItem(UI_STORE_KEY, JSON.stringify(editor.ui))
-    } else {
-      localStorage.removeItem(UI_STORE_KEY)
-    }
-    console.log('ui change', editor.ui)
-  }
-
-  handleSend(e: CustomEvent<SendDetails>): void {
-    this.send(e.detail)
-  }
-
-  async send(sendInfo: SendDetails): Promise<void> {
-    console.log(sendInfo)
-    throw new Error(`Not implemented`)
-    // const { request, assertions, authorization, config } = sendInfo
-    // const init: IRequestProxyInit = {
-    //   kind: HttpRequestKind,
-    //   request,
-    //   assertions,
-    //   authorization,
-    //   config,
-    // }
-    // const result = await this.http.coreRequest(init)
-    // console.log(result.result.response)
-  }
-
-  contentTemplate(): TemplateResult {
-    if (!this.initialized) {
-      return html`
-        <a href="./">Back</a>
-        <div class="screen-loader">
-          <p>Loading demo page</p>
-          <progress></progress>
-        </div>
-      `
-    }
-    const { request, auth, ui } = this
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">HTTP request editor</h2>
-
-        <div class="editor-wrapper surface1">
-          <http-request-editor
-            .request="${request}"
-            .authorization="${auth}"
-            .ui="${ui}"
-            .oauth2RedirectUri="${this.oauth2RedirectUri}"
-            .oauth2AuthorizationUri="${this.oauth2AuthorizationUri}"
-            @change="${this.handleChange}"
-            @authorizationchange="${this.handleAuthorizationChange}"
-            @uichange="${this.handleUiChange}"
-            @send="${this.handleSend}"
-          ></http-request-editor>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/http/request-log.html

@@ -1,16 +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">
-  <title>Request log</title>
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <style></style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/elements/http/request-log.js"></script>
-</body>
-</html>

package/demo/elements/http/request-log.ts

@@ -1,136 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { type IRequestLogInit, ProjectMock } from '@api-client/core/mocking/ProjectMock.js'
-import { RequestLog, type IRequestLog } from '@api-client/core/models/RequestLog.js'
-import type { Response } from '@api-client/core/models/Response.js'
-import { Headers } from '@api-client/core/lib/headers/Headers.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/define/http/http-request-log.js'
-import { reactive } from '../../../src/decorators/index.js'
-
-const ResourceIcons = [
-  'favorite.png',
-  'fingerprint.png',
-  'stars.png',
-  'calendar-month.png',
-  'theaters.png',
-  'home-work.png',
-  'print.png',
-  'mood.png',
-]
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Request Log'
-
-  mock = new ProjectMock()
-
-  @reactive() accessor httpLog: IRequestLog | undefined
-
-  constructor() {
-    super()
-    this.initLog()
-  }
-
-  async initLog(): Promise<void> {
-    this.httpLog = await this.mock.projectRequest.log({
-      response: {
-        timings: true,
-      },
-      redirects: true,
-    })
-  }
-
-  protected _generatorClick(e: Event): void {
-    const node = e.target as HTMLButtonElement
-    const { generator, type } = node.dataset
-    if (generator && type) {
-      this._runGenerator(generator, type)
-    }
-  }
-
-  protected _generatorKeydown(e: KeyboardEvent): void {
-    if (e.key !== 'Enter' && e.key !== 'Space') {
-      return
-    }
-    const node = e.target as HTMLButtonElement
-    const { generator, type } = node.dataset
-    if (generator && type) {
-      this._runGenerator(generator, type)
-    }
-  }
-
-  protected _runGenerator(generator: string, type: string): void {
-    if (generator === 'response') {
-      this.generateResponse(type)
-    }
-  }
-
-  async generateResponse(type = 'json'): Promise<void> {
-    let contentType: string | undefined
-    if (type === 'json') {
-      contentType = 'application/json'
-    } else if (type === 'xml') {
-      contentType = 'application/xml'
-    } else if (type === 'svg') {
-      contentType = 'image/svg+xml'
-    } else if (type === 'form-data') {
-      contentType = 'multipart/form-data'
-    } else if (type === 'urlencoded') {
-      contentType = 'application/x-www-form-urlencoded'
-    }
-    const init: IRequestLogInit = {
-      response: {
-        statusGroup: 2,
-        payload: {
-          contentType,
-          force: true,
-        },
-        timings: true,
-      },
-    }
-    if (type === 'redirects') {
-      init.redirects = true
-    }
-
-    let log = await this.mock.projectRequest.log(init)
-
-    if (type === 'png') {
-      const icon = this.mock.random.pickOne(ResourceIcons)
-      const r = await fetch(`/demo/resources/${icon}`)
-      const data = await r.arrayBuffer()
-      const instance = new RequestLog(log)
-      const response = instance.response as Response
-      await response.writePayload(data)
-      const headers = new Headers(response.headers)
-      headers.set('content-type', 'image/png')
-      response.headers = headers.toString()
-      log = instance.toJSON()
-    }
-
-    this.httpLog = log
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <section class="centered">
-        <http-request-log .httpLog="${this.httpLog}"></http-request-log>
-      </section>
-    `
-  }
-
-  override navigationTemplate(): TemplateResult {
-    return html`
-      <nav @click="${this._generatorClick}" @keydown="${this._generatorKeydown}">
-        <button class="nav-item" data-generator="response" data-type="json">JSON response</button>
-        <button class="nav-item" data-generator="response" data-type="xml">XML response</button>
-        <button class="nav-item" data-generator="response" data-type="svg">SVG image response</button>
-        <button class="nav-item" data-generator="response" data-type="png">PNG image response</button>
-        <button class="nav-item" data-generator="response" data-type="form-data">Form Data response</button>
-        <button class="nav-item" data-generator="response" data-type="urlencoded">URL encoded response</button>
-        <button class="nav-item" data-generator="response" data-type="redirects">Redirects</button>
-      </nav>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/http/url-editing.html

@@ -1,17 +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>HTTP url editing</title>
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/http/url-editing.js"></script>
-</body>
-
-</html>

package/demo/elements/http/url-editing.ts

@@ -1,112 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { ProjectMock } from '@api-client/core/mocking/ProjectMock.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-// import { WebHttpClientStoreBindings } from '../../../src/bindings/web/WebHttpClientStoreBindings.js'
-import UrlInput from '../../../src/elements/http/UrlInput.js'
-import { EventTypes } from '../../../src/events/EventTypes.js'
-import '../../../src/define/http/http-url-input.js'
-import '../../../src/define/http/http-url-params-form.js'
-import '../../../src/md/button/ui-button.js'
-import UrlParamsForm from '../../../src/elements/http/UrlParamsForm.js'
-
-// const workerUri = new URL('/src/http-client/store/IdbThread.ts', import.meta.url).toString()
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'URL Editing'
-
-  mock = new ProjectMock()
-
-  @reactive() accessor initialized = false
-
-  @reactive() accessor value = '/?q=my query&type=folder'
-
-  // store = new WebHttpClientStoreBindings({ code: 'demo', name: 'Demo', version: '0' }, workerUri)
-
-  constructor() {
-    super()
-    this.init()
-    window.addEventListener(EventTypes.Http.Request.State.urlChange, this.handleGlobalUrlChange)
-  }
-
-  async init(): Promise<void> {
-    // await this.store.initialize()
-    this.initialized = true
-  }
-
-  protected handleGenerateHistory(): void {
-    this.generateHistory()
-  }
-
-  protected handleClearHistory(): void {
-    this.clearHistory()
-  }
-
-  async generateHistory(): Promise<void> {
-    // const values = this.mock.url.urls(100)
-    // await Promise.all(values.map((i) => this.store.urlHistoryAdd(i.key)))
-  }
-
-  async clearHistory(): Promise<void> {
-    // await this.store.urlHistoryClear()
-  }
-
-  handleRequestSend(e: Event): void {
-    const input = e.target as UrlInput
-    console.log('Request send', input.value)
-  }
-
-  handleChange(e: Event): void {
-    const input = e.target as UrlInput
-    console.log('Change from URL input', input.value)
-    this.value = input.value
-  }
-
-  handleGlobalUrlChange(e: Event): void {
-    const input = e.target as UrlInput
-    console.log('Global URL change', input.value)
-  }
-
-  handleParamsChange(e: Event): void {
-    const input = e.target as UrlParamsForm
-    console.log('Change from params editor', input.value)
-    this.value = input.value
-  }
-
-  contentTemplate(): TemplateResult {
-    if (!this.initialized) {
-      return html`
-        <a href="./">Back</a>
-        <div class="screen-loader">
-          <p>Loading demo page</p>
-          <progress></progress>
-        </div>
-      `
-    }
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Data configuration</h2>
-        <div class="demo-row">
-          <ui-button color="outlined" @click="${this.handleGenerateHistory}">Generate URL history</ui-button>
-          <ui-button color="outlined" @click="${this.handleClearHistory}">Clear URL history</ui-button>
-        </div>
-      </section>
-      <section class="demo-section">
-        <h2 class="title-large">HTTP URL input</h2>
-        <http-url-input
-          .value="${this.value || ''}"
-          @requestsend="${this.handleRequestSend}"
-          @change="${this.handleChange}"
-        ></http-url-input>
-      </section>
-      <section class="demo-section">
-        <h2 class="title-large">HTTP parameters form</h2>
-        <http-url-params-form .value="${this.value || ''}" @change="${this.handleParamsChange}"></http-url-params-form>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/icons/index.html

@@ -1,81 +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">
-  <title>Icons</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" />
-  <style>
-  h2 {
-    text-transform: capitalize;
-  }
-
-  .icon {
-    transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-    width: 24px;
-    height: 24px;
-  }
-
-  .icon:hover {
-    fill: #f09300;
-  }
-
-  .set {
-    margin: auto;
-    padding: 1em 0;
-    border-bottom: 1px solid silver;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  .set:last-of-type {
-    border-bottom: none;
-  }
-
-  .set:nth-of-type(4n-3) {
-    color: #616161;
-  }
-
-  .set:nth-of-type(4n-2) {
-    color: #e91e63;
-  }
-
-  .set:nth-of-type(4n-1) {
-    color: #0f9d58;
-  }
-
-  .set:nth-of-type(4n) {
-    color: #4285f4;
-  }
-
-  .container {
-    min-width: 10em;
-    padding: 1em 0.5em;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    flex: 1;
-  }
-
-  .container> div {
-    margin-top: 0.5em;
-    color: black;
-    font-size: 10px;
-  }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/elements/icons/index.js"></script>
-</body>
-</html>

package/demo/elements/icons/index.ts

@@ -1,52 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/md/icons/ui-icon.js'
-import * as icons from '../../../src/md/icons/Icons.js'
-import { IconType } from '../../../src/md/icons/Icons.js'
-
-const ignored: string[] = ['iconWrapper']
-const keys = Object.keys(icons) as IconType[]
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Icons'
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <section class="centered large">
-        <h2>With "icon" attribute</h2>
-
-        <div class="set">
-          ${keys.map((name) => {
-            if (ignored.indexOf(name) !== -1) {
-              return ''
-            }
-            return html`
-              <span class="container">
-                <ui-icon icon="${name}" class="icon"></ui-icon>
-                <span>${name}</span>
-              </span>
-            `
-          })}
-        </div>
-
-        <h2>With child node</h2>
-        <div class="set">
-          ${keys.map((name) => {
-            if (ignored.indexOf(name) !== -1) {
-              return ''
-            }
-            return html`
-              <span class="container">
-                <ui-icon class="icon">${icons[name]}</ui-icon>
-                <span>${name}</span>
-              </span>
-            `
-          })}
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/index.html

@@ -1,72 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>API Client UI</title>
-  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
-  <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 web components library</h1>
-    <a href="../">Back</a>
-    <nav>
-      <dl>
-
-        <dt><a href="autocomplete/index.html">Autocomplete input</a></dt>
-        <dd>Turns an input element into an autocomplete.</dd>
-
-        <dt><a href="authorization/index.html">Authorization element</a></dt>
-        <dd>Elements to define HTTP authorization.</dd>
-
-        <dt><a href="code-editor/index.html">Code editor</a></dt>
-        <dd>An element that render a code editor.</dd>
-
-        <dt><a href="context-menu/index.html">Context menu</a></dt>
-        <dd>An element that render a context menu.</dd>
-
-        <dt><a href="currency/index.html">Currency picker</a></dt>
-        <dd>A component for selecting currencies with chips display.</dd>
-
-        <dt><a href="environment/index.html">Environment</a></dt>
-        <dd>The environment elements library.</dd>
-
-        <dt><a href="har/index.html">HAR utilities</a></dt>
-        <dd>Elements related to processing and visualizing HAR data.</dd>
-
-        <dt><a href="highlight/index.html">Highlight</a></dt>
-        <dd>The syntax highlighting library.</dd>
-
-        <dt><a href="http/index.html">HTTP</a></dt>
-        <dd>The HTTP UI library.</dd>
-
-        <dt><a href="http-client/index.html">HTTP Client</a></dt>
-        <dd>The HTTP Client UI library.</dd>
-
-        <dt><a href="mention-textarea/index.html">Mention Textarea</a></dt>
-        <dd>The mention-textarea component.</dd>
-
-        <dt><a href="navigation/navigation.html">Navigation Menu</a></dt>
-        <dd>The navigation component.</dd>
-        <dt><a href="navigation/navigation-item.html">Navigation Item</a></dt>
-        <dd>The navigation-item component.</dd>
-
-        <dt><a href="icons/index.html">Icons</a></dt>
-        <dd>The icons library.</dd>
-
-        <dt><a href="project/index.html">HTTP project</a></dt>
-        <dd>Elements related to HTTP project.</dd>
-
-        <dt><a href="user/user-avatar.html">User avatar</a></dt>
-        <dd>User avatar element.</dd>
-      </dl>
-    </nav>
-  </main>
-</body>
-</html>