@api-client/ui 0.5.38 → 0.5.40

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

@@ -1,232 +0,0 @@
-import { CSSResult, html, TemplateResult } from 'lit'
-import { ProjectMock } from '@api-client/core/mocking/ProjectMock.js'
-import type { IApplication } from '@api-client/core/models/Application.js'
-import { HttpProject, type IHttpProject } from '@api-client/core/models/HttpProject.js'
-import type { IRequestUiMeta } from '@api-client/core/models/RequestUiMeta.js'
-import { Environment } from '@api-client/core/models/Environment.js'
-import JsonDiff from '@api-client/json/patch/diff.js'
-import * as KeyVal from 'idb-keyval'
-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 HttpProjectRequest from '../../../src/elements/project/HttpProjectRequest.js'
-// import { WebProxyBindings } from '../../../src/bindings/web/WebProxyBindings.js'
-// import env from '../../env.js'
-import '../../../src/define/http-project/http-project-request.js'
-import '../../../src/define/http-project/http-project-request-history.js'
-import '../../../src/md/button/ui-button.js'
-
-const PROJECT_STORE_KEY = 'demo.project-ui.http-editor.project-data'
-const REQUEST_STORE_KEY = 'demo.project-ui.http-editor.request-data'
-const UI_STORE_KEY = 'demo.project-ui.http-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 project request editor'
-
-  mock = new ProjectMock()
-
-  @reactive() accessor project: HttpProject | undefined
-
-  @reactive() accessor requestKey: string | 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.restoreData()
-    // await this.store.initialize()
-    // await this.http.initialize()
-    await this.loadMonaco()
-    this.initialized = true
-  }
-
-  async restoreData(): Promise<void> {
-    const data = await KeyVal.getMany([PROJECT_STORE_KEY, REQUEST_STORE_KEY, UI_STORE_KEY])
-    const [project, requestKey, ui] = data
-    this.setupProject(project, requestKey)
-    this.setupUi(ui)
-  }
-
-  setupProject(project?: IHttpProject, requestKey?: string): void {
-    let instance: HttpProject
-    if (project) {
-      instance = new HttpProject(project)
-    } else {
-      instance = HttpProject.fromName('demo project')
-    }
-    this.project = instance
-    if (requestKey) {
-      const value = instance.findRequest(requestKey)
-      if (value) {
-        this.requestKey = requestKey
-        return
-      }
-    }
-    const request = instance.addRequest('http://')
-    this.requestKey = request.key
-  }
-
-  setupUi(ui?: IRequestUiMeta): void {
-    if (ui) {
-      this.ui = ui
-    } else {
-      this.ui = {}
-    }
-  }
-
-  async storeProject(): Promise<void> {
-    await KeyVal.setMany([
-      [PROJECT_STORE_KEY, this.project],
-      [REQUEST_STORE_KEY, this.requestKey],
-    ])
-  }
-
-  async storeUi(): Promise<void> {
-    await KeyVal.set(UI_STORE_KEY, this.ui)
-  }
-
-  handleChange(): void {
-    console.log('change in the request')
-    this.storeProject()
-  }
-
-  handleUiChange(e: Event): void {
-    const editor = e.target as HttpProjectRequest
-    if (!editor.ui) {
-      return
-    }
-    this.ui = editor.ui
-    this.storeUi()
-    console.log('ui change', editor.ui)
-  }
-
-  addEnvironment(): void {
-    const { project } = this
-    if (!project) {
-      return
-    }
-    const name = this.mock.lorem.words(2)
-    const localEnv = Environment.fromName(name)
-    localEnv.addVariable('port', '8000')
-    localEnv.addVariable('host', 'localhost')
-    localEnv.addServer('http://{host}:{port}/')
-
-    const snapshot = project.toJSON()
-    project.addEnvironment(localEnv)
-    const compare = project.toJSON()
-    const patches = JsonDiff(snapshot, compare)
-    const editor = document.querySelector('http-project-request')
-    if (editor) {
-      patches.forEach((patch) => editor.applyPatch(patch))
-    }
-    this.storeProject()
-  }
-
-  clearEnvironments(): void {
-    const { project } = this
-    if (!project) {
-      return
-    }
-    const snapshot = project.toJSON()
-    const all = project.listEnvironments()
-    all.forEach((localEnv) => project.removeEnvironment(localEnv.key))
-    const compare = project.toJSON()
-    const patches = JsonDiff(snapshot, compare)
-    const editor = document.querySelector('http-project-request')
-    if (editor) {
-      patches.forEach((patch) => editor.applyPatch(patch))
-    }
-    this.storeProject()
-  }
-
-  clearAll(): void {
-    const instance = HttpProject.fromName('demo project')
-    this.project = instance
-    const request = instance.addRequest('http://')
-    this.requestKey = request.key
-    this.ui = {}
-  }
-
-  contentTemplate(): TemplateResult {
-    if (!this.initialized) {
-      return this.renderLoader()
-    }
-    return html`
-      <a href="./">Back</a>
-      ${this.renderDataControl()} ${this.renderComponent()}
-    `
-  }
-
-  renderLoader(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <div class="screen-loader">
-        <p>Loading demo page</p>
-        <progress></progress>
-      </div>
-    `
-  }
-
-  renderDataControl(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Data control</h2>
-        <ui-button color="outlined" @click="${this.addEnvironment}">Add environment</ui-button>
-        <ui-button color="outlined" @click="${this.clearEnvironments}">Remove all environments</ui-button>
-        <ui-button color="outlined" @click="${this.clearAll}">Clear all data</ui-button>
-      </section>
-    `
-  }
-
-  renderComponent(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">HTTP request editor</h2>
-        <div class="editor-wrapper surface1">
-          <http-project-request
-            .project="${this.project}"
-            .key="${this.requestKey}"
-            .ui="${this.ui}"
-            .oauth2RedirectUri="${this.oauth2RedirectUri}"
-            .oauth2AuthorizationUri="${this.oauth2AuthorizationUri}"
-            .appInfo="${AppInfo}"
-            @change="${this.handleChange}"
-            @uichange="${this.handleUiChange}"
-          ></http-project-request>
-        </div>
-        <div class="editor-wrapper surface1">
-          <http-project-request-history
-            .project="${this.project && this.project.key}"
-            .request="${this.requestKey}"
-          ></http-project-request-history>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/user/user-avatar.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>User Avatar</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/user/user-avatar.js"></script>
-</body>
-
-</html>

package/demo/elements/user/user-avatar.ts

@@ -1,60 +0,0 @@
-import { IUser } from '@api-client/core/models/store/User.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import { UserKind } from '@api-client/core/models/kinds.js'
-import { html, TemplateResult } from 'lit'
-import '../../../src/elements/user/ui-user-avatar.js'
-
-class ComponentDemoPage extends DemoPage {
-  @reactive() accessor user1: IUser
-  @reactive() accessor user2: IUser
-
-  constructor() {
-    super()
-    this.componentName = 'User Avatar'
-    this.user1 = {
-      key: '1',
-      name: 'John Doe',
-      email: [{ email: 'john.doe  @example.com', verified: true }],
-      picture: {
-        url: 'https://i.pravatar.cc/300',
-      },
-      kind: UserKind,
-      status: 'active',
-      grantType: 'editor',
-      created: new Date('2023-01-01T00:00:00Z').getTime(),
-      updated: new Date('2023-01-02T00:00:00Z').getTime(),
-    }
-    this.user2 = {
-      key: '2',
-      name: 'John Doe',
-      email: [{ email: 'john.doe  @example.com', verified: true }],
-      kind: UserKind,
-      status: 'active',
-      grantType: 'editor',
-      created: new Date('2023-01-01T00:00:00Z').getTime(),
-      updated: new Date('2023-01-02T00:00:00Z').getTime(),
-    }
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="centered">
-        <h3>Full data</h3>
-        <ui-user-avatar .user="${this.user1}"></ui-user-avatar>
-        <h3>No image</h3>
-        <ui-user-avatar .user="${this.user2}"></ui-user-avatar>
-        <h3>No user</h3>
-        <ui-user-avatar></ui-user-avatar>
-        <h3>Custom size</h3>
-        <ui-user-avatar style="width: 128px; height: 128px" .user="${this.user1}"></ui-user-avatar>
-        <h3>Icon type</h3>
-        <ui-user-avatar .user="${this.user1}" type="icon"></ui-user-avatar>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/env.js

@@ -1,4 +0,0 @@
-export default {
-  proxyUri: '',
-  systemVariables: {},
-}

package/demo/index.html

@@ -1,34 +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 UI library for the API Client ecosystem applications</h1>
-    <nav>
-      <h2>Contents</h2>
-
-      <dl>
-        <dt><a href="/demo/elements/index.html">API Elements</a></dt>
-        <dd>The web components library.</dd>
-
-        <dt><a href="/demo/md/index.html">Material Elements</a></dt>
-        <dd>The material web components library.</dd>
-
-        <dt><a href="/demo/layout/index.html">Split layout</a></dt>
-        <dd>The Split layout library.</dd>
-      </dl>
-    </nav>
-  </main>
-</body>
-</html>

package/demo/layout/index.html

@@ -1,94 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
-    <!-- <meta http-equiv="Content-Security-Policy" content="default-src file: 'self' 'unsafe-inline'; script-src blob: web-module: 'self' 'unsafe-inline' https://apis.google.com; style-src 'self' themes: 'unsafe-inline' https://fonts.googleapis.com; font-src web-module: themes: 'self' https://fonts.gstatic.com; connect-src 'self' https: ws: wss: https://www.google-analytics.com https://app.advancedrestclient.com https://anypoint.mulesoft.com; img-src 'self' blob: data: https://exchange2-asset-manager-kprod.s3.amazonaws.com"> -->
-    <title>Split layout</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <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>
-      .demo #app {
-        height: 100vh;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-      }
-
-      main {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-      }
-
-      .demo-container {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-      }
-
-      .data-control {
-        width: 33.333%;
-        padding-right: 20px;
-        box-sizing: border-box;
-      }
-
-      .layout-view {
-        width: 66.666%;
-        display: flex;
-        flex-direction: column;
-      }
-
-      split-view {
-        flex: 1;
-        overflow: hidden;
-      }
-
-      .empty-layout {
-        border-radius: 12px;
-        padding: 12px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 1;
-      }
-
-      .draggable-items {
-        margin: 0;
-        padding: 0;
-      }
-
-      .draggable-items li {
-        display: flex;
-        align-items: center;
-        height: 56px;
-        border-radius: 12px;
-        background-color: var(--md-sys-color-primary-05a);
-        color: var(--md-sys-color-on-background);
-        border: 1px var(--md-sys-color-outline) solid;
-        margin: 8px 0;
-        box-sizing: border-box;
-        padding: 0 16px;
-      }
-
-      .draggable-items li:hover {
-        background-color: var(--md-sys-color-primary-08a);
-      }
-
-      .draggable-items li.dragged {
-        background-color: var(--md-sys-color-primary-13a);
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/.tmp/demo/layout/index.js"></script>
-  </body>
-</html>

package/demo/layout/index.ts

@@ -1,190 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { nanoid } from 'nanoid'
-import { DemoPage } from '../../src/demo/DemoPage.js'
-import { reactive } from '../../src/decorators/index.js'
-import { ISplitLayout, SplitLayout } from '../../src/elements/layout/SplitLayout.js'
-import { SplitItem } from '../../src/elements/layout/SplitItem.js'
-import '../../src/md/button/ui-button.js'
-import { SplitCloseDirection } from '../../src/elements/layout/type.js'
-
-const storeKey = 'api-client.demo.layout.state'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Split layout'
-
-  @reactive() accessor initialized = false
-
-  protected layout = new SplitLayout({
-    dragTypes: ['text/kind', 'text/key'],
-    constrain: true,
-    stateCallback: this.handlerLayoutStore.bind(this),
-  })
-
-  constructor() {
-    super()
-    this.initialize()
-  }
-
-  async initialize(): Promise<void> {
-    this.layout.addEventListener('change', this.renderHandler.bind(this))
-    this.layout.addEventListener('nameitem', this.nameLayoutItemHandler.bind(this))
-    const state = this.restoreValues()
-    this.layout.initialize(state)
-    this.initialized = true
-  }
-
-  restoreValues(): ISplitLayout | undefined {
-    const data = localStorage.getItem(storeKey)
-    if (!data) {
-      return undefined
-    }
-    try {
-      return JSON.parse(data) as ISplitLayout
-    } catch {
-      // ...
-    }
-    return undefined
-  }
-
-  protected async handlerLayoutStore(state: ISplitLayout): Promise<void> {
-    console.log('State change', state)
-    try {
-      localStorage.setItem(storeKey, JSON.stringify(state))
-    } catch {
-      // ...
-    }
-  }
-
-  protected renderHandler(): void {
-    this.render()
-  }
-
-  protected nameLayoutItemHandler(event: Event): void {
-    const item = (event as CustomEvent).detail as SplitItem
-    if (item.kind === 'data#itemA') {
-      item.label = 'Item A'
-    } else if (item.kind === 'data#itemB') {
-      item.label = 'Item B'
-    }
-    console.log('nameLayoutItemHandler', item)
-  }
-
-  protected handleDragStart(e: DragEvent): void {
-    const item = e.currentTarget as HTMLElement
-    const { key, kind } = item.dataset
-    if (!key || !kind) {
-      return
-    }
-    const dt = e.dataTransfer
-    if (!dt) {
-      return
-    }
-    dt.effectAllowed = 'copyLink'
-    dt.setData('text/kind', kind)
-    dt.setData('text/key', key)
-  }
-
-  protected handleAddItem(): void {
-    const key = nanoid()
-    const kind = 'data#item'
-    this.layout.addItem({ key, kind, label: 'Added item' })
-  }
-
-  protected handleReset(): void {
-    this.layout.items = []
-    this.layout.definitions = new Map()
-    this.layout.scheduleStore()
-    this.render()
-  }
-
-  protected handleClose2Left(): void {
-    const { layout } = this
-    const panel = layout.activePanel
-    if (!panel) {
-      return
-    }
-    if (!panel.selected) {
-      return
-    }
-    panel.removeRelative(panel.selected, SplitCloseDirection.left)
-  }
-
-  protected handleClose2Right(): void {
-    const { layout } = this
-    const panel = layout.activePanel
-    if (!panel) {
-      return
-    }
-    if (!panel.selected) {
-      return
-    }
-    panel.removeRelative(panel.selected, SplitCloseDirection.right)
-  }
-
-  contentTemplate(): TemplateResult {
-    if (!this.initialized) {
-      return html`<p>Loading demo page.</p>`
-    }
-    return html`
-      <a href="../">Back</a>
-      <div class="demo-container">
-        ${this.renderOptions()}
-        <section aria-label="demo-content" class="layout-view">${this.renderLayout()}</section>
-      </div>
-    `
-  }
-
-  protected renderLayout(): TemplateResult[] {
-    const { layout } = this
-    if (layout.isEmpty()) {
-      return [this.renderEmptyLayout()]
-    }
-    return layout.render(this.renderItem.bind(this))
-  }
-
-  protected renderEmptyLayout(): TemplateResult {
-    return html`
-      <div class="empty-layout surface1">
-        <p class="body-large">The layout is empty.</p>
-      </div>
-    `
-  }
-
-  protected renderItem(item: SplitItem, visible: boolean): TemplateResult {
-    switch (item.kind) {
-      default:
-        return html`<p ?hidden="${!visible}" data-key="${item.key}">
-          Rendering: ${item.label} ${item.kind} ${item.key}
-        </p>`
-    }
-  }
-
-  protected renderOptions(): TemplateResult {
-    return html`
-      <section aria-label="Demo control" class="data-control">
-        <h2 class="title-medium">Data control</h2>
-        <h3 class="title-small">Imperative API</h3>
-        <ui-button color="outlined" @click="${this.handleAddItem}">Add item to current</ui-button>
-        <ui-button color="outlined" @click="${this.handleReset}">Reset</ui-button>
-        <ui-button color="outlined" @click="${this.handleClose2Left}">Close to left (selected)</ui-button>
-        <ui-button color="outlined" @click="${this.handleClose2Right}">Close to right (selected)</ui-button>
-
-        <h3 class="title-small">Declarative API</h3>
-        <p>Items on the list can be dragged onto the layout.</p>
-        <nav aria-label="drag and drop items">
-          <ul class="draggable-items">
-            <li data-kind="data#itemA" data-key="item-a" draggable="true" @dragstart="${this.handleDragStart}">
-              Item A
-            </li>
-            <li data-kind="data#itemB" data-key="item-b" draggable="true" @dragstart="${this.handleDragStart}">
-              Item B
-            </li>
-          </ul>
-        </nav>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/DemoStyles.ts

@@ -1,61 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :root {
-    --dot-size: 1px;
-    --dot-space: 7px;
-  }
-
-  html,
-  body {
-    margin: 0;
-    font-family: 'Roboto', 'Noto', sans-serif;
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface);
-    background-image: radial-gradient(var(--md-sys-color-inverse-on-surface) 1px, transparent 0);
-    background-size: var(--dot-space) var(--dot-space);
-  }
-
-  .demo {
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-  }
-
-  header {
-    padding: 12px 24px;
-    background-color: var(--md-sys-color-surface-variant);
-    color: var(--md-sys-color-on-surface-variant);
-    display: flex;
-    align-items: center;
-
-    max-width: 900px;
-    margin: 20px auto;
-    padding: 0 24px;
-    border-radius: 40px;
-
-    font-family: var(--md-sys-typescale-title-large-font);
-    font-weight: var(--md-sys-typescale-title-large-weight);
-    font-size: var(--md-sys-typescale-title-large-size);
-    letter-spacing: var(--md-sys-typescale-title-large-tracking);
-    line-height: var(--md-sys-typescale-title-large-height);
-  }
-
-  #app {
-    height: 100%;
-  }
-
-  main {
-    max-width: 900px;
-    margin: 40px auto;
-    border-radius: 40px;
-    padding: 24px;
-
-    /* background-color: var(--md-sys-color-primary-container);
-  color: var(--md-sys-color-on-primary-container); */
-  }
-
-  .demo-section {
-    margin: 60px 0;
-  }
-`