Add a stub search UI (#1370)

Author: justinfagnani

package-lock.json

@@ -8,6 +8,7 @@ import {readFile} from 'fs/promises';
 import {fileURLToPath} from 'url';
 
 import Koa from 'koa';
+import cors from '@koa/cors';
 import Router from '@koa/router';
 import {
   getGraphQLParameters,
@@ -163,6 +164,7 @@ export const makeServer = async () => {
     `;
   });
 
+  app.use(cors());
   app.use(router.routes());
   app.use(router.allowedMethods());
   return app;

packages/catalog-server/src/lib/server.ts

@@ -23,7 +23,7 @@
       ]
     },
     "build:dev": {
-      "command": "find src -name \"*.ts\" | xargs esbuild --format=esm --target=es2022 --color --outdir=lib",
+      "command": "find src -name \"*.ts\" | xargs esbuild --color --outdir=lib",
       "files": [
         "src/**/*.ts"
       ],
@@ -33,7 +33,7 @@
       "clean": "if-file-deleted"
     },
     "build:prod": {
-      "command": "esbuild --format=esm --target=es2022 --color --outdir=bundled --bundle --splitting --minify src/entrypoints/*.ts",
+      "command": "esbuild --color --outdir=bundled --bundle --splitting --minify src/entrypoints/*.ts",
       "files": [
         "src/**/*.ts"
       ],
@@ -66,6 +66,9 @@
     }
   },
   "dependencies": {
+    "@urql/core": "^3.0.4",
+    "@webcomponents/catalog-api": "^0.0.0",
+    "graphql": "^16.6.0",
     "lit": "^2.3.1",
     "lit-analyzer": "^1.2.1"
   }

packages/site-client/package.json

@@ -4,28 +4,87 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
- import {html, css, LitElement} from 'lit';
- import {customElement} from 'lit/decorators.js';
- 
- @customElement('wco-catalog-search')
- export class WCOCatalogSearch extends LitElement {
-   static styles = css`
-     :host {
-       display: flex;
-       align-items: center;
-     }
-   `;
- 
-   render() {
-     return html`
-       Search: <input>
-     `;
-   }
- }
- 
- declare global {
-   interface HTMLElementTagNameMap {
-     'wco-catalog-search': WCOCatalogSearch;
-   }
- }
- 
+import {html, css, LitElement} from 'lit';
+import {customElement, query, state} from 'lit/decorators.js';
+import {gql, createClient, defaultExchanges} from '@urql/core';
+import type {CustomElement} from '@webcomponents/catalog-api/lib/schema.js';
+
+import './wco-element-card.js';
+
+const client = createClient({
+  // TODO (justinfagnani): get this URL from server
+  url: 'http://localhost:6451/graphql',
+  exchanges: defaultExchanges,
+});
+
+const elementsQuery = gql`
+  query Elements($query: String) {
+    elements(query: $query, limit: 16) {
+      tagName
+      package
+      version
+      className
+    }
+  }
+`;
+
+@customElement('wco-catalog-search')
+export class WCOCatalogSearch extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    div {
+      display: grid;
+      grid-template-columns: repeat(4, 200px);
+      grid-template-rows: auto;
+      grid-auto-columns: 200px;
+      grid-auto-rows: 200px;
+      gap: 8px;
+    }
+  `;
+
+  @query('input')
+  private _search!: HTMLInputElement;
+
+  @state()
+  private _elements: Array<CustomElement> | undefined;
+
+  render() {
+    return html`
+      <p>Search: <input id="search" @change=${this._onChange} /></p>
+      <div>
+        ${this._elements?.map(
+          (e) => html`<wco-element-card .element=${e}></wco-element-card>`
+        )}
+      </div>
+    `;
+  }
+
+  protected firstUpdated() {
+    // TODO (justinfagnani): we may want to use a router (and write the search
+    // to the URL) but this is easy for now.
+    const urlQuery = new URLSearchParams(window.location.search).get('query');
+    if (urlQuery) {
+      this._search.value = urlQuery;
+      this._onChange();
+    }
+  }
+
+  async _onChange() {
+    const searchText = this._search.value;
+    const result = await client
+      .query(elementsQuery, {query: searchText})
+      .toPromise();
+    this._elements = result.data?.elements;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wco-catalog-search': WCOCatalogSearch;
+  }
+}