@nyaruka/temba-components 0.86.1 → 0.87.0

package/svg.js

@@ -1,8 +1,6 @@
 #!/usr/bin/env node
 
-const argv = require('yargs')
-  .usage('Usage: $0 [options]')
-  .argv
+const argv = require('yargs').usage('Usage: $0 [options]').argv;
 
 const svgstore = require('svgstore');
 const htmlclean = require('htmlclean');
@@ -14,14 +12,12 @@ const { digestSync } = require('fprint');
 
 const cwd = process.cwd();
 
-const PACK_DIR = cwd + "/static/svg/packs";
-const USED_DIR = cwd + "/static/svg/work/used";
-const TRACED_DIR = cwd + "/static/svg/work/traced";
+const PACK_DIR = cwd + '/static/svg/packs';
+const USED_DIR = cwd + '/static/svg/work/used';
+const TRACED_DIR = cwd + '/static/svg/work/traced';
 const USAGE_REGEX = /'(.*)'/;
 
-
-
-const sprites = svgstore()
+const sprites = svgstore();
 
 function processFileWithRegex(filePath, regexPattern) {
   try {
@@ -30,7 +26,7 @@ function processFileWithRegex(filePath, regexPattern) {
     const regex = new RegExp(regexPattern, 'g');
     let matches = [];
 
-    lines.forEach(line => {
+    lines.forEach((line) => {
       let match;
       while ((match = regex.exec(line)) !== null) {
         matches.push(match[1]);
@@ -46,7 +42,7 @@ function processFileWithRegex(filePath, regexPattern) {
 // Convert matches array to an object with keys being the matches and values being true
 function matchesToObject(matches) {
   const result = {};
-  matches.forEach(match => {
+  matches.forEach((match) => {
     result[match] = true;
   });
   return result;
@@ -55,7 +51,7 @@ function matchesToObject(matches) {
 function copyFilesInDict(sourceDir, targetDir, matchDict) {
   try {
     const files = fs.readdirSync(sourceDir);
-    files.forEach(file => {
+    files.forEach((file) => {
       const fileNameWithoutExtension = path.parse(file).name;
       if (matchDict[fileNameWithoutExtension]) {
         const sourcePath = path.join(sourceDir, file);
@@ -94,18 +90,17 @@ function modifyFileContent(filePath, regexPattern, groupNumber, replacement) {
 }
 
 async function main() {
-
   // const OUTPUT_FILE_NAME = cwd + "/static/svg/index.svg";
   //const USAGE_FILE = './src/vectoricon/index.ts';
 
-  const OUTPUT_FILE_NAME = argv.output || cwd + "/static/svg/index.svg";
+  const OUTPUT_FILE_NAME = argv.output || cwd + '/static/svg/index.svg';
   const USAGE_FILE = argv.usage || './src/vectoricon/index.ts';
 
   let packs = sh.ls(PACK_DIR);
   packs.sort();
 
   // create our work directory
-  [USED_DIR, TRACED_DIR].forEach(dir => {
+  [USED_DIR, TRACED_DIR].forEach((dir) => {
     if (!fs.existsSync(dir)) {
       fs.mkdirSync(dir, { recursive: true });
     }
@@ -115,40 +110,44 @@ async function main() {
   const ids = matchesToObject(matches);
 
   // copy any icons from our packs that are used
-  packs.forEach(pack => {
-    copyFilesInDict(`${PACK_DIR}/${pack}`, USED_DIR, ids)
+  packs.forEach((pack) => {
+    copyFilesInDict(`${PACK_DIR}/${pack}`, USED_DIR, ids);
   });
 
   // trace our strokes so we can rely on consistent fills
   var options = {
     showProgressBar: true,
     throwIfDestinationDoesNotExist: false,
-    traceResolution: argv.resolution || 600,
+    traceResolution: argv.resolution || 600
   };
 
   await SVGFixer(USED_DIR, TRACED_DIR, options).fix();
 
-  const files = sh.find(TRACED_DIR)
-    .filter(file => file.match(/\.svg$/));
+  const files = sh.find(TRACED_DIR).filter((file) => file.match(/\.svg$/));
 
-  files.forEach(file => {
-    const id = path.basename(file, '.svg')
-    const contents = fs.readFileSync(file, 'utf8')
+  files.forEach((file) => {
+    const id = path.basename(file, '.svg');
+    const contents = fs.readFileSync(file, 'utf8');
     sprites.add(id, contents);
   });
 
-  let output = htmlclean(sprites.toString({ cleanDefs: true, cleanSymbols: true, renameDefs: true }))
+  let output = htmlclean(
+    sprites.toString({ cleanDefs: true, cleanSymbols: true, renameDefs: true })
+  );
   output = output.replaceAll(/fill="black"/g, `fill="currentColor"`);
 
-  fs.writeFileSync(OUTPUT_FILE_NAME, output)
+  fs.writeFileSync(OUTPUT_FILE_NAME, output);
   console.info('Merged %s files into %s', files.length, OUTPUT_FILE_NAME);
 
   const stream = fs.createReadStream(OUTPUT_FILE_NAME);
   const file = fs.readFileSync(OUTPUT_FILE_NAME);
   const md5 = digestSync(file, 'md5');
-  modifyFileContent(USAGE_FILE, "export const SVG_FINGERPRINT = '(.*)';", 1, md5);
-
+  modifyFileContent(
+    USAGE_FILE,
+    "export const SVG_FINGERPRINT = '(.*)';",
+    1,
+    md5
+  );
 }
 
-
-main();
+main();

package/test/temba-alert.test.ts

@@ -7,7 +7,7 @@ export const createAlert = async (level: string, body: string) => {
   const parentNode = document.createElement('div');
   parentNode.setAttribute('style', 'width: 250px;');
   return (await fixture(`<temba-alert level="${level}">${body}</temba-alert>`, {
-    parentNode,
+    parentNode
   })) as Alert;
 };
 

package/test/temba-checkbox.test.ts

@@ -27,7 +27,7 @@ describe('temba-checkbox', () => {
 
   it('fires change event on click', async () => {
     // eslint-disable-next-line no-async-promise-executor
-    return new Promise<void>(async resolve => {
+    return new Promise<void>(async (resolve) => {
       const checkbox: Checkbox = await fixture(html`
         <temba-checkbox label="My Checkbox"></temba-checkbox>
       `);

package/test/temba-color-picker.test.ts

@@ -12,7 +12,7 @@ describe('temba-color-picker', () => {
   it('renders default', async () => {
     const picker: ColorPicker = await getPicker({
       name: 'primary',
-      label: 'Primary Color',
+      label: 'Primary Color'
     });
     assert.instanceOf(picker, ColorPicker);
     await assertScreenshot('colorpicker/default', getClip(picker));
@@ -22,7 +22,7 @@ describe('temba-color-picker', () => {
     const picker: ColorPicker = await getPicker({
       name: 'primary',
       label: 'Primary Color',
-      value: '#2387ca',
+      value: '#2387ca'
     });
     await assertScreenshot('colorpicker/initialized', getClip(picker));
   });
@@ -31,7 +31,7 @@ describe('temba-color-picker', () => {
     const picker: ColorPicker = await getPicker({
       name: 'primary',
       label: 'Primary Color',
-      value: '#2387ca',
+      value: '#2387ca'
     });
     (picker.shadowRoot.querySelector('.preview') as HTMLElement).click();
 
@@ -42,7 +42,7 @@ describe('temba-color-picker', () => {
     const picker: ColorPicker = await getPicker({
       name: 'primary',
       label: 'Primary Color',
-      value: '#2387ca',
+      value: '#2387ca'
     });
     (picker.shadowRoot.querySelector('.preview') as HTMLElement).click();
 

package/test/temba-compose.test.ts

@@ -41,17 +41,14 @@ const getInitialValue = (
       text: text ? text : '',
       attachments: attachments ? attachments : [],
       quick_replies: quick_replies ? quick_replies : [],
-      optin: null,
-    },
+      optin: null
+    }
   };
   return composeValue;
 };
 const getComposeValue = (value: any): string => {
   return JSON.stringify(value);
 };
-const getComposeValues = (value: any): any[] => {
-  return [value];
-};
 
 export const getValidText = () => {
   return 'sà-wàd-dee!';
@@ -74,7 +71,7 @@ export const getValidAttachments = (numFiles = 2): Attachment[] => {
       filename: 'name_' + s,
       url: 'url_' + s,
       size: 1024,
-      error: null,
+      error: null
     } as Attachment;
     attachments.push(attachment);
     index++;
@@ -91,7 +88,7 @@ export const getInvalidAttachments = (): Attachment[] => {
     filename: 'name_' + f1,
     url: 'url_' + f1,
     size: 26624,
-    error: 'Limit for file uploads is 25.0 MB',
+    error: 'Limit for file uploads is 25.0 MB'
   } as Attachment;
   const f2 = 'f2';
   const fail2 = {
@@ -101,7 +98,7 @@ export const getInvalidAttachments = (): Attachment[] => {
     filename: 'name_' + f2,
     url: 'url_' + f2,
     size: 1024,
-    error: 'Unsupported file type',
+    error: 'Unsupported file type'
   } as Attachment;
 
   return [fail1, fail2];
@@ -128,7 +125,7 @@ describe('temba-compose chatbox', () => {
 
   it('cannot be created with a different endpoint', async () => {
     const compose: Compose = await getCompose({
-      endpoint: '/schmsgmedia/schmupload/',
+      endpoint: '/schmsgmedia/schmupload/'
     });
     assert.instanceOf(compose, Compose);
     expect(compose.endpoint).equals(DEFAULT_MEDIA_ENDPOINT);
@@ -136,7 +133,7 @@ describe('temba-compose chatbox', () => {
 
   it('chatbox no counter no send button', async () => {
     const compose: Compose = await getCompose({
-      chatbox: true,
+      chatbox: true
     });
     await assertScreenshot(
       'compose/chatbox-no-counter-no-send-button',
@@ -147,7 +144,7 @@ describe('temba-compose chatbox', () => {
   it('chatbox no counter and send button', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
-      button: true,
+      button: true
     });
     await assertScreenshot(
       'compose/chatbox-no-counter-and-send-button',
@@ -158,7 +155,7 @@ describe('temba-compose chatbox', () => {
   it('chatbox counter no send button', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
-      counter: true,
+      counter: true
     });
     await assertScreenshot(
       'compose/chatbox-counter-no-send-button',
@@ -170,7 +167,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await assertScreenshot(
       'compose/chatbox-counter-and-send-button',
@@ -186,7 +183,7 @@ describe('temba-compose chatbox', () => {
       chatbox: true,
       counter: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal('');
@@ -199,7 +196,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText());
     await assertScreenshot('compose/chatbox-with-text', getClip(compose));
@@ -213,7 +210,7 @@ describe('temba-compose chatbox', () => {
       chatbox: true,
       counter: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal(getValidText());
@@ -226,7 +223,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText_Long_WithSpaces());
     await assertScreenshot(
@@ -239,7 +236,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText_Long_WithNoSpaces());
     await assertScreenshot(
@@ -252,7 +249,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText_Long_WithUrl());
     await assertScreenshot(
@@ -265,7 +262,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText());
     const send = compose.shadowRoot.querySelector(
@@ -282,7 +279,7 @@ describe('temba-compose chatbox', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText());
     const chatbox = compose.shadowRoot.querySelector('.chatbox') as Completion;
@@ -297,7 +294,7 @@ describe('temba-compose chatbox', () => {
 describe('temba-compose attachments', () => {
   it('attachments no send button', async () => {
     const compose: Compose = await getCompose({
-      attachments: true,
+      attachments: true
     });
     await assertScreenshot(
       'compose/attachments-no-send-button',
@@ -308,7 +305,7 @@ describe('temba-compose attachments', () => {
   it('attachments and send button', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true,
+      button: true
     });
     await assertScreenshot(
       'compose/attachments-and-send-button',
@@ -323,7 +320,7 @@ describe('temba-compose attachments', () => {
     const compose: Compose = await getCompose({
       attachments: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal('');
@@ -335,7 +332,7 @@ describe('temba-compose attachments', () => {
   it('attachments with success uploaded files', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, null, getValidAttachments());
     await assertScreenshot(
@@ -347,12 +344,10 @@ describe('temba-compose attachments', () => {
   it('attachments with success uploaded files deserialize and serialize', async () => {
     const initialValue = getInitialValue(null, getValidAttachments());
     const composeValue = getComposeValue(initialValue);
-    const composeValues = getComposeValues(initialValue);
-
     const compose: Compose = await getCompose({
       attachments: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal('');
@@ -364,7 +359,7 @@ describe('temba-compose attachments', () => {
   it('attachments with failure uploaded files', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, null, null, getInvalidAttachments());
     await assertScreenshot(
@@ -376,7 +371,7 @@ describe('temba-compose attachments', () => {
   it('attachments with success and failure uploaded files', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -393,7 +388,7 @@ describe('temba-compose attachments', () => {
   it('attachments with success uploaded files and click send', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, null, getValidAttachments());
     const send = compose.shadowRoot.querySelector(
@@ -409,7 +404,7 @@ describe('temba-compose attachments', () => {
   it('attachments with success and failure uploaded files and click send', async () => {
     const compose: Compose = await getCompose({
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -432,7 +427,7 @@ describe('temba-compose chatbox and attachments', () => {
   it('chatbox and attachments no counter no send button', async () => {
     const compose: Compose = await getCompose({
       chatbox: true,
-      attachments: true,
+      attachments: true
     });
     await assertScreenshot(
       'compose/chatbox-attachments-no-counter-no-send-button',
@@ -444,7 +439,7 @@ describe('temba-compose chatbox and attachments', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await assertScreenshot(
       'compose/chatbox-attachments-no-counter-and-send-button',
@@ -456,7 +451,7 @@ describe('temba-compose chatbox and attachments', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      counter: true,
+      counter: true
     });
     await assertScreenshot(
       'compose/chatbox-attachments-counter-no-send-button',
@@ -469,7 +464,7 @@ describe('temba-compose chatbox and attachments', () => {
       chatbox: true,
       attachments: true,
       counter: true,
-      button: true,
+      button: true
     });
     await assertScreenshot(
       'compose/chatbox-attachments-counter-and-send-button',
@@ -486,7 +481,7 @@ describe('temba-compose chatbox and attachments', () => {
       attachments: true,
       counter: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal('');
@@ -502,7 +497,7 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       chatbox: true,
       attachments: true,
       counter: true,
-      button: true,
+      button: true
     });
     updateComponent(compose, getValidText());
     await assertScreenshot(
@@ -520,7 +515,7 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       attachments: true,
       counter: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal(getValidText());
@@ -534,7 +529,7 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       chatbox: true,
       attachments: true,
       counter: true,
-      button: true,
+      button: true
     });
     updateComponent(compose, getValidText());
     const send = compose.shadowRoot.querySelector(
@@ -552,7 +547,7 @@ describe('temba-compose chatbox with text and attachments no files', () => {
       chatbox: true,
       attachments: true,
       counter: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText());
     const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;
@@ -569,7 +564,7 @@ describe('temba-compose chatbox no text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, null, getValidAttachments());
     await assertScreenshot(
@@ -586,7 +581,7 @@ describe('temba-compose chatbox no text and attachments with files', () => {
       chatbox: true,
       attachments: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal('');
@@ -599,7 +594,7 @@ describe('temba-compose chatbox no text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, null, null, getInvalidAttachments());
     await assertScreenshot(
@@ -612,7 +607,7 @@ describe('temba-compose chatbox no text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -630,7 +625,7 @@ describe('temba-compose chatbox no text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, null, getValidAttachments());
     const send = compose.shadowRoot.querySelector(
@@ -647,7 +642,7 @@ describe('temba-compose chatbox no text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -671,7 +666,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText(), getValidAttachments());
     await assertScreenshot(
@@ -688,7 +683,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
       chatbox: true,
       attachments: true,
       button: true,
-      value: composeValue,
+      value: composeValue
     });
     // deserialize
     expect(compose.currentText).to.equal(getValidText());
@@ -701,7 +696,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -719,7 +714,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -737,7 +732,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText(), getValidAttachments());
     const send = compose.shadowRoot.querySelector(
@@ -754,7 +749,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,
@@ -776,7 +771,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(compose, getValidText(), getValidAttachments());
     const chatbox = compose.shadowRoot.querySelector('.chatbox') as HTMLElement;
@@ -791,7 +786,7 @@ describe('temba-compose chatbox with text and attachments with files', () => {
     const compose: Compose = await getCompose({
       chatbox: true,
       attachments: true,
-      button: true,
+      button: true
     });
     await updateComponent(
       compose,

package/test/temba-contact-badges.test.ts

@@ -5,7 +5,7 @@ import {
   delay,
   getClip,
   getComponent,
-  loadStore,
+  loadStore
 } from './utils.test';
 
 const TAG = 'temba-contact-badges';
@@ -25,7 +25,7 @@ describe('temba-contact-badges', () => {
     await loadStore();
 
     const badges: ContactBadges = await getBadges({
-      contact: 'contact-dave-active',
+      contact: 'contact-dave-active'
     });
     assert.instanceOf(badges, ContactBadges);
     await assertScreenshot('contacts/badges', getClip(badges));