@digital-realty/ix-search-bar 2.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 ix-search-bar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# \<ix-search-bar>
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @digital-realty/ix-search-bar
+```
+
+## Usage
+
+```html
+<script type="module">
+  import '@digital-realty/ix-search-bar';
+</script>
+
+<ix-search-bar></ix-search-bar>
+```
+### In React
+```html
+<script type="module">
+  import { IxSearchBar } from '@digital-realty/ix-search-bar/IxSearchBar'
+</script>
+```
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { IxSearchBar } from './IxSearchBar.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@digital-realty/ix-search-bar",
+  "description": "Webcomponent ix-search-bar following open-wc recommendations",
+  "license": "MIT",
+  "author": "Digital realty",
+  "version": "2.0.4",
+  "type": "module",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "exports": {
+    ".": "./dist/src/index.js",
+    "./ix-search-bar.js": "./dist/src/ix-search-bar.js",
+    "./IxSearchBar": "./dist/src/react/IxSearchBar.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
+  },
+  "dependencies": {
+    "@digital-realty/ix-textbox": "^2.0.5",
+    "@lit-labs/react": "^2.0.3",
+    "lit": "^2.0.2",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.4.17",
+    "@open-wc/building-rollup": "^3.0.2",
+    "@open-wc/eslint-config": "^9.2.1",
+    "@open-wc/testing": "^3.1.6",
+    "@types/react": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@web/dev-server": "^0.1.34",
+    "@web/test-runner": "^0.14.0",
+    "concurrently": "^5.3.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
+  },
+  "customElements": "custom-elements.json",
+  "eslintConfig": {
+    "parser": "@typescript-eslint/parser",
+    "root": true,
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier",
+      "plugin:json/recommended"
+    ],
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "class-methods-use-this": "off",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error"
+      ],
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "always",
+        {
+          "ignorePackages": true
+        }
+      ]
+    }
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  }
+}

package/src/IxSearchBar.ts

@@ -0,0 +1,94 @@
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@digital-realty/ix-textbox';
+import { IxSearchBarStyle } from './ix-search-bar-styles.js';
+import { Item, TextChangeEvent } from './types/index.js';
+
+export class IxSearchBar extends LitElement {
+  @property({ type: String }) value = '';
+
+  @property({ type: Array }) items: Item[] = [];
+
+  @property({ type: Array }) searchFields: string[] = [];
+
+  @property({ type: Array }) foundItems: Item[] = [];
+
+  static get styles() {
+    return [IxSearchBarStyle];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resetResults();
+  }
+
+  resetResults() {
+    this.foundItems = this.items;
+  }
+
+  get itemsCount() {
+    if (Array.isArray(this.foundItems) && this.foundItems.length) {
+      return this.foundItems.length;
+    }
+    return 0;
+  }
+
+  get itemsLabel() {
+    return this.itemsCount === 1 ? 'item' : 'items';
+  }
+
+  _dispatchEvent(items: Item[]): void {
+    const resultsEvent = new CustomEvent('onResultsFound', {
+      detail: { items },
+      composed: true,
+    });
+    this.dispatchEvent(resultsEvent);
+  }
+
+  filterItems(value: string) {
+    this.value = value;
+    if (value === '') {
+      this.resetResults();
+      this._dispatchEvent(this.items);
+      return;
+    }
+
+    const results: Item[] = [];
+
+    for (const item of this.items) {
+      for (const field of this.searchFields) {
+        if (field in item) {
+          if (
+            item[field]
+              .toLocaleLowerCase()
+              .includes(this.value.toLocaleLowerCase())
+          ) {
+            results.push(item);
+            break;
+          }
+        }
+      }
+    }
+
+    this.foundItems = results;
+    this._dispatchEvent(results);
+  }
+
+  render() {
+    return html`
+      <ix-textbox
+        type="search"
+        @textChange="${(e: TextChangeEvent) =>
+          this.filterItems(e.detail.value)}"
+      ></ix-textbox>
+
+      <div class="items-count">${this.itemsCount} ${this.itemsLabel}</div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ix-search-bar': IxSearchBar;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { IxSearchBar } from './IxSearchBar.js';

package/src/ix-search-bar-styles.ts

@@ -0,0 +1,29 @@
+import { css } from 'lit';
+
+export const IxSearchBarStyle = css`
+  :host {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid lightgrey;
+    border-width: 1px 0;
+    padding: 1rem 0;
+    flex-wrap: wrap;
+    margin-bottom: 1.5rem;
+  }
+
+  html {
+    color: #333;
+  }
+
+  ix-textbox {
+    color: #333;
+    flex: 1 0 min(280px, 100%);
+  }
+
+  .items-count {
+    flex: 1000 0 7em;
+    text-align: right;
+    padding: 0.5em 0;
+  }
+`;

package/src/ix-search-bar.ts

@@ -0,0 +1,3 @@
+import { IxSearchBar } from './IxSearchBar.js';
+
+window.customElements.define('ix-search-bar', IxSearchBar);

package/src/react/IxSearchBar.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { IxSearchBar as LitComp } from '../IxSearchBar.js';
+
+window.customElements.define('ix-search-bar', LitComp);
+
+export const IxSearchBar = createComponent({
+  tagName: 'ix-search-bar',
+  elementClass: LitComp,
+  react: React,
+});

package/src/types/index.ts

@@ -0,0 +1,12 @@
+/**
+ * The item being searched for.
+ */
+export type Item = {
+  [key: string]: string;
+};
+
+/**
+ * An event which is fired when the textfield's value changes.
+ * It passes the value of the textfield.
+ */
+export type TextChangeEvent = CustomEvent<{ value: string }>;