@nyaruka/temba-components 0.129.2 → 0.129.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.129.2",
+  "version": "0.129.3",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -16,15 +16,17 @@
     "build-wc": "rollup -c rollup.webchat.mjs",
     "dev": "yarn build && cp -R ./dist/* ../temba/rapidpro/node_modules/@nyaruka/temba-components/dist/ && cp -R ./dist/* ../floweditor/node_modules/@nyaruka/temba-components/dist/",
     "postversion": "git push --tags && git push origin main",
-    "pre-commit": "yarn locale:extract && yarn locale:build && yarn svg && git add ./src/vectoricon ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
+    "pre-commit": "yarn locale:extract && yarn locale:build && yarn svg && git add ./src/Icons.ts ./static/svg/index.svg ./xliff ./src/locales && lint-staged",
     "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore",
     "format:prettier": "prettier \"**/*.js\" \"**/*.ts\" --config .prettierrc --write --ignore-path .gitignore",
     "format": "yarn format:eslint && yarn format:prettier",
     "test": "wtr --node-resolve",
     "test:fast": "wtr --node-resolve --fast",
-    "validate": "yarn format && yarn build && yarn test --coverage",
+    "test:coverage": "wtr --node-resolve --coverage",
+    "check-coverage": "node check-coverage.js",
+    "validate": "yarn format && yarn build && (yarn test:coverage; yarn check-coverage)",
     "test:watch": "wtr --node-resolve --watch",
-    "svg": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/index.svg' --usage='./src/vectoricon/index.ts'",
+    "svg": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/index.svg' --usage='./src/Icons.ts'",
     "svg-wc": "rimraf static/svg/work && node svg.js --resolution=150 --output='./static/svg/webchat.svg' --usage='./src/webchat/index.ts'",
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md",
     "locale:extract": "lit-localize extract --config localize.config.json",
@@ -49,9 +51,11 @@
     "remarkable": "^2.0.1",
     "serialize-javascript": "^6.0.2",
     "tiny-lru": "^11.2.5",
+    "uuid": "^11.1.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.0",
     "@lit/localize-tools": "^0.7.2",
     "@open-wc/building-rollup": "3.0.2",
     "@open-wc/eslint-config": "12.0.3",
@@ -64,6 +68,7 @@
     "@types/leaflet": "1.4.4",
     "@types/node": "20.12.4",
     "@types/remarkable": "^2.0.1",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^7.5.0",
     "@typescript-eslint/parser": "^7.5.0",
     "@web/dev-server-esbuild": "^0.3.3",
@@ -73,6 +78,12 @@
     "concurrently": "^7.6.0",
     "dynamicpixelmatch": "^0.0.2",
     "eslint": "^8.29.0",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-lit": "^1.10.1",
+    "eslint-plugin-lit-a11y": "^4.1.1",
+    "eslint-plugin-no-only-tests": "^3.1.0",
+    "eslint-plugin-wc": "^1.2.0",
     "fprint": "^2.0.1",
     "htmlclean": "^3.0.8",
     "husky": "^1.0.0",
@@ -81,13 +92,12 @@
     "pixelmatch": "^5.2.1",
     "prettier": "^2.0.4",
     "rimraf": "^2.6.3",
-    "rollup": "^4.14.0",
+    "rollup": "^3.21.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-svg-import": "^3.0.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-url": "^3.0.1",
     "shelljs": "^0.8.5",
-    "sinon": "15",
+    "sinon": "^21.0.0",
     "svgstore": "^3.0.1",
     "tslib": "2.6.2",
     "typescript": "5.4.4"
@@ -106,8 +116,7 @@
   "resolutions": {
     "trim": "^0.0.3",
     "prismjs": "^1.23.0",
-    "wrap-ansi": "7.0.0",
-    "string-width": "4.1.0"
+    "rollup-plugin-terser/**/rollup": "^3.0.0"
   },
   "packageManager": "yarn@1.22.1"
 }

package/rollup.components.mjs

@@ -2,7 +2,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace'
 import typescript from '@rollup/plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
+import terser from '@rollup/plugin-terser';
 import svg from 'rollup-plugin-svg-import';
 import copy from 'rollup-plugin-copy';
 

package/src/{charcount → display}/CharCount.ts

@@ -1,9 +1,171 @@
 import { css, html, TemplateResult } from 'lit';
 import { RapidElement } from '../RapidElement';
-import { splitSMS } from '../sms';
-import { getExtendedCharacters } from './helpers';
+import { splitSMS } from './sms';
 import { property } from 'lit/decorators.js';
 
+export const MAX_GSM_SINGLE = 160;
+export const MAX_GSM_MULTI = 153;
+export const MAX_UNICODE_SINGLE = 70;
+export const MAX_UNICODE_MULTI = 67;
+
+export const COMPLETION_HELP = 'Tab to complete, enter to select';
+
+export const GSM: { [key: string]: number } = {
+  // char: charCode
+  0: 48,
+  1: 49,
+  2: 50,
+  3: 51,
+  4: 52,
+  5: 53,
+  6: 54,
+  7: 55,
+  8: 56,
+  9: 57,
+  '\n': 10,
+  '\f': 12,
+  '\r': 13,
+  ' ': 32,
+  '!': 33,
+  '"': 34,
+  '#': 35,
+  $: 36,
+  '%': 37,
+  '&': 38,
+  "'": 39,
+  '(': 40,
+  ')': 41,
+  '*': 42,
+  '+': 43,
+  ',': 44,
+  '-': 45,
+  '.': 46,
+  '/': 47,
+  ':': 58,
+  ';': 59,
+  '<': 60,
+  '=': 61,
+  '>': 62,
+  '?': 63,
+  '@': 64,
+  A: 65,
+  B: 66,
+  C: 67,
+  D: 68,
+  E: 69,
+  F: 70,
+  G: 71,
+  H: 72,
+  I: 73,
+  J: 74,
+  K: 75,
+  L: 76,
+  M: 77,
+  N: 78,
+  O: 79,
+  P: 80,
+  Q: 81,
+  R: 82,
+  S: 83,
+  T: 84,
+  U: 85,
+  V: 86,
+  W: 87,
+  X: 88,
+  Y: 89,
+  Z: 90,
+  '[': 91,
+  '\\': 92,
+  ']': 93,
+  '^': 94,
+  _: 95,
+  a: 97,
+  b: 98,
+  c: 99,
+  d: 100,
+  e: 101,
+  f: 102,
+  g: 103,
+  h: 104,
+  i: 105,
+  j: 106,
+  k: 107,
+  l: 108,
+  m: 109,
+  n: 110,
+  o: 111,
+  p: 112,
+  q: 113,
+  r: 114,
+  s: 115,
+  t: 116,
+  u: 117,
+  v: 118,
+  w: 119,
+  x: 120,
+  y: 121,
+  z: 122,
+  '{': 123,
+  '|': 124,
+  '}': 125,
+  '~': 126,
+  '¡': 161,
+  '£': 163,
+  '¤': 164,
+  '¥': 165,
+  '§': 167,
+  '¿': 191,
+  Ä: 196,
+  Å: 197,
+  Æ: 198,
+  Ç: 199,
+  É: 201,
+  Ñ: 209,
+  Ö: 214,
+  Ø: 216,
+  Ü: 220,
+  ß: 223,
+  à: 224,
+  ä: 228,
+  å: 229,
+  æ: 230,
+  è: 232,
+  é: 233,
+  ì: 236,
+  ñ: 241,
+  ò: 242,
+  ö: 246,
+  ø: 248,
+  ù: 249,
+  ü: 252,
+  Γ: 915,
+  Δ: 916,
+  Θ: 920,
+  Λ: 923,
+  Ξ: 926,
+  Π: 928,
+  Σ: 931,
+  Φ: 934,
+  Ψ: 936,
+  Ω: 937,
+  '€': 8364
+};
+
+export const isGSM = (char: string): boolean => {
+  // eslint-disable-next-line no-prototype-builtins
+  return GSM.hasOwnProperty(char);
+};
+
+export const getExtendedCharacters = (text: string): string[] => {
+  const extended: { [ch: string]: boolean } = {};
+  for (const ch of text) {
+    if (!isGSM(ch)) {
+      extended[ch] = true;
+    }
+  }
+  return Object.keys(extended);
+};
+
 export class CharCount extends RapidElement {
   static get styles() {
     return css`

package/src/{vectoricon/VectorIcon.ts → display/Icon.ts}

@@ -1,6 +1,6 @@
 import { LitElement, TemplateResult, html, css } from 'lit';
 import { property } from 'lit/decorators.js';
-import { Icon, SVG_FINGERPRINT } from '.';
+import { Icon, SVG_FINGERPRINT } from '../Icons';
 import { getClasses } from '../utils';
 
 export class VectorIcon extends LitElement {

package/src/{leafletmap → display}/LeafletMap.ts

@@ -13,7 +13,25 @@ import { property } from 'lit/decorators.js';
 
 import { FeatureProperties } from '../interfaces';
 import { getUrl, WebResponse } from '../utils';
-import { highlightedFeature, normalFeature, visibleStyle } from './helpers';
+
+const normalFeature = {
+  weight: 1,
+  opacity: 1,
+  color: 'white',
+  fillOpacity: 0.7,
+  fillColor: '#2387ca'
+};
+
+const highlightedFeature = {
+  weight: 3,
+  color: 'white',
+  fillOpacity: 1,
+  fillColor: '#2387ca'
+};
+
+const visibleStyle = () => {
+  return normalFeature;
+};
 
 export class LeafletMap extends LitElement {
   static get styles() {

package/src/{thumbnail → display}/Thumbnail.ts

@@ -2,7 +2,7 @@ import { PropertyValueMap, css, html } from 'lit';
 import { RapidElement } from '../RapidElement';
 import { property } from 'lit/decorators.js';
 import { getClasses } from '../utils';
-import { Lightbox } from '../lightbox/Lightbox';
+import { Lightbox } from './Lightbox';
 import { WebChatIcon } from '../webchat';
 
 enum ThumbnailContentType {

package/src/{tip → display}/Tip.ts

@@ -2,8 +2,7 @@ import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 import { RapidElement } from '../RapidElement';
-import { getClasses } from '../utils';
-import { getCenter, getMiddle } from './helpers';
+import { getClasses, getMiddle, getCenter } from '../utils';
 
 export class Tip extends RapidElement {
   static get styles() {

package/src/{contacts/events.ts → events.ts}

@@ -1,6 +1,4 @@
-import { html, TemplateResult } from 'lit';
-import { Msg, ObjectReference, User } from '../interfaces';
-import { Icon } from '../vectoricon';
+import { Msg, ObjectReference, User } from './interfaces';
 
 export interface EventGroup {
   type: string;
@@ -147,64 +145,3 @@ export interface ContactHistoryPage {
   start_date: Date;
   events: ContactEvent[];
 }
-
-export const renderAttachment = (attachment: string): TemplateResult => {
-  const idx = attachment.indexOf(':');
-  const attType = attachment.substr(0, idx);
-  const url = attachment.substr(idx + 1);
-  const [mediaType, ext] = attType.split('/', 2);
-
-  let inner = null;
-  if (mediaType === 'image') {
-    inner = html`
-      <img src="${url}" style="height:auto;width:100%;display:block;" />
-    `;
-  } else if (ext === 'pdf') {
-    return html`<div
-      style="width:100%;height:300px;border-radius:calc(var(--curvature) * 2.5);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);overflow:hidden"
-    ><embed src="${url}#view=Fit" type="application/pdf" frameBorder="0" scrolling="auto" height="100%" width="100%"></embed></div>`;
-  } else if (mediaType === 'video') {
-    return html`<video
-      style="border-radius:var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);max-width:400px"
-      height="auto"
-      controls
-    >
-      <source src="${url}" type="video/mp4" />
-    </video> `;
-  } else if (mediaType === 'audio') {
-    return html`<audio
-      style="border-radius: 99px; box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
-      src="${url}"
-      type="${attType}"
-      controls
-    >
-      <a target="_" href="${url}">${url}</a>
-    </audio>`;
-  } else if (attType === 'geo') {
-    const [lat, long] = url.split(',');
-    const latFloat = parseFloat(lat);
-    const longFloat = parseFloat(long);
-    const geo = `${lat}000000%2C${long}000000`;
-
-    return html` <iframe
-      style="border-radius: var(--curvature);box-shadow:0px 0px 12px 0px rgba(0,0,0,.1), 0px 0px 2px 0px rgba(0,0,0,.15);"
-      width="300"
-      height="300"
-      frameborder="0"
-      scrolling="no"
-      marginheight="0"
-      marginwidth="0"
-      src="https://www.openstreetmap.org/export/embed.html?bbox=${longFloat -
-      0.005}000000%2C${latFloat - 0.005}%2C${longFloat +
-      0.005}000000%2C${latFloat +
-      0.005}000000&amp;layer=mapnik&amp;marker=${geo}"
-    ></iframe>`;
-  } else {
-    return html`<div style="display:flex">
-      <temba-icon name="${Icon.download}"></temba-icon>
-      <div>Attachment ${ext}</div>
-    </div>`;
-  }
-
-  return html`<div style="">${inner}</div>`;
-};