@nyaruka/temba-components 0.129.1 → 0.129.3

package/src/{utils/index.ts → utils.ts}

@@ -1,16 +1,11 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { html, TemplateResult } from 'lit-html';
-import { Button } from '../button/Button';
-import { Dialog } from '../dialog/Dialog';
-import {
-  Attachment,
-  ContactField,
-  Shortcut,
-  Ticket,
-  User
-} from '../interfaces';
+import { Button } from './display/Button';
+import { Dialog } from './layout/Dialog';
+import { Attachment, ContactField, Shortcut, Ticket, User } from './interfaces';
 import ColorHash from 'color-hash';
-import { Toast } from '../toast/Toast';
+import { Toast } from './display/Toast';
+import { v4 as generateUUID } from 'uuid';
 
 export const DEFAULT_MEDIA_ENDPOINT = '/api/v2/media.json';
 
@@ -582,6 +577,7 @@ export const isDate = (value: any): boolean => {
   if (toString.call(value) === '[object Date]') {
     return true;
   }
+  /* c8 ignore next 3 */
   if (typeof value.replace === 'function') {
     value.replace(/^\s+|\s+$/gm, '');
   }
@@ -916,3 +912,23 @@ export const hashCode = (s) => {
 export const showModax = (title: string, endpoint: string) => {
   (window as any).showModax(title, endpoint);
 };
+export const sanitizeUnintendedUnicode = (text: string): string => {
+  if (text) {
+    return text
+      .replace(/[\u2018\u2019]/g, "'") // Smart single quotes
+      .replace(/[\u201C\u201D]/g, '"') // Smart double quotes
+      .replace(/[\u2013\u2014]/g, '-') // En/em dash
+      .replace(/\u2026/g, '...') // Horizontal ellipsis
+      .replace(/\u2002/g, ' '); // En space
+  }
+  return text;
+};
+export const getCenter = (a: DOMRect, b: DOMRect) => {
+  return a.left + a.width / 2 - b.width / 2;
+};
+export const getMiddle = (a: DOMRect, b: DOMRect) => {
+  return a.top + a.height / 2 - b.height / 2;
+};
+
+// Export the UUID function from the uuid package
+export { generateUUID };

package/src/webchat/WebChat.ts

@@ -3,7 +3,7 @@ import { LitElement, TemplateResult, html, css, PropertyValueMap } from 'lit';
 import { property } from 'lit/decorators.js';
 import { getCookie, setCookie } from '../utils';
 import { DEFAULT_AVATAR } from './assets';
-import { Chat, ChatEvent, Message, MessageType } from '../chat/Chat';
+import { Chat, ChatEvent, Message, MessageType } from '../display/Chat';
 
 interface User {
   avatar?: string;

package/static/css/temba-components.css

@@ -33,6 +33,7 @@
     /* primary colors, should be dark */
     --color-selection: #f0f6ff;
 
+    --color-success: #3ca96a;
 
     --widget-box-shadow: rgba(-1, -1, 0, .15) 0px 1px 7px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
     --widget-box-shadow-focused: 0 0 0 3px rgba(164, 202, 254, .45);

package/svg.js

@@ -90,11 +90,8 @@ 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 USAGE_FILE = argv.usage || './src/vectoricon/index.ts';
+  const USAGE_FILE = argv.usage || './src/Icons.ts';
 
   let packs = sh.ls(PACK_DIR);
   packs.sort();

package/temba-components.ts

@@ -3,8 +3,8 @@ import { addCustomElement } from './temba-modules';
 
 // we import and declare the alias editor seperately since
 // leaflet-map doesn't work in dev mode
-import { AliasEditor } from './src/aliaseditor/AliasEditor';
-import { LeafletMap } from './src/leafletmap/LeafletMap';
+import { AliasEditor } from './src/live/AliasEditor';
+import { LeafletMap } from './src/display/LeafletMap';
 
 addCustomElement('leaflet-map', LeafletMap);
 addCustomElement('alias-editor', AliasEditor);

package/temba-modules.ts

@@ -1,72 +1,72 @@
-import { Checkbox } from './src/checkbox/Checkbox';
-import { TextInput } from './src/textinput/TextInput';
+import { Checkbox } from './src/form/Checkbox';
+import { TextInput } from './src/form/TextInput';
 import { Store } from './src/store/Store';
-import { Select } from './src/select/Select';
-import { Completion } from './src/completion/Completion';
-import { Modax } from './src/dialog/Modax';
-import { Dialog } from './src/dialog/Dialog';
-import { Button } from './src/button/Button';
-import { FormField } from './src/formfield/FormField';
-import { Loading } from './src/loading/Loading';
-import { CharCount } from './src/charcount/CharCount';
-import { Options } from './src/options/Options';
-import { ContactChat } from './src/contacts/ContactChat';
+import { Select } from './src/form/select/Select';
+import { Completion } from './src/form/Completion';
+import { Modax } from './src/layout/Modax';
+import { Dialog } from './src/layout/Dialog';
+import { Button } from './src/display/Button';
+import { FormField } from './src/form/FormField';
+import { Loading } from './src/display/Loading';
+import { CharCount } from './src/display/CharCount';
+import { Options } from './src/display/Options';
+import { ContactChat } from './src/live/ContactChat';
 import { TicketList } from './src/list/TicketList';
-import { ContactDetails } from './src/contacts/ContactDetails';
+import { ContactDetails } from './src/live/ContactDetails';
 import { TembaList } from './src/list/TembaList';
-import { ContactSearch } from './src/contactsearch/ContactSearch';
-import { VectorIcon } from './src/vectoricon/VectorIcon';
-import { Alert } from './src/alert/Alert';
-import { Omnibox } from './src/omnibox/Omnibox';
-import { Tip } from './src/tip/Tip';
+import { ContactSearch } from './src/form/ContactSearch';
+import { VectorIcon } from './src/display/Icon';
+import { Alert } from './src/display/Alert';
+import { Omnibox } from './src/form/select/Omnibox';
+import { Tip } from './src/display/Tip';
 import { TembaMenu } from './src/list/TembaMenu';
-import { Anchor } from './src/anchor/Anchor';
-import { Dropdown } from './src/dropdown/Dropdown';
-import { TabPane } from './src/tabpane/TabPane';
-import { Tab } from './src/tabpane/Tab';
-import Label from './src/label/Label';
-import { ContactName } from './src/contacts/ContactName';
-import { ContactUrn } from './src/contacts/ContactUrn';
-import { ContactFields } from './src/contacts/ContactFields';
-import { ContactFieldEditor } from './src/contacts/ContactFieldEditor';
+import { Anchor } from './src/display/Anchor';
+import { Dropdown } from './src/display/Dropdown';
+import { TabPane } from './src/layout/TabPane';
+import { Tab } from './src/layout/Tab';
+import Label from './src/display/Label';
+import { ContactName } from './src/display/ContactName';
+import { ContactUrn } from './src/display/ContactUrn';
+import { ContactFields } from './src/live/ContactFields';
+import { ContactFieldEditor } from './src/live/ContactFieldEditor';
 
-import { ContactBadges } from './src/contacts/ContactBadges';
-import { ContactPending } from './src/contacts/ContactPending';
-import { TembaSlider } from './src/slider/TembaSlider';
+import { ContactBadges } from './src/live/ContactBadges';
+import { ContactPending } from './src/live/ContactPending';
+import { TembaSlider } from './src/form/TembaSlider';
 import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/store/FlowStoreElement';
-import { ContactNameFetch } from './src/contacts/ContactNameFetch';
-import { DatePicker } from './src/datepicker/DatePicker';
-import { FieldManager } from './src/fields/FieldManager';
+import { ContactNameFetch } from './src/live/ContactNameFetch';
+import { DatePicker } from './src/form/DatePicker';
+import { FieldManager } from './src/live/FieldManager';
 import { SortableList } from './src/list/SortableList';
 import { ContentMenu } from './src/list/ContentMenu';
-import { TembaDate } from './src/date/TembaDate';
-import { Compose } from './src/compose/Compose';
-import { Lightbox } from './src/lightbox/Lightbox';
-import { ColorPicker } from './src/colorpicker/ColorPicker';
-import { Resizer } from './src/resizer/Resizer';
-import { Thumbnail } from './src/thumbnail/Thumbnail';
+import { TembaDate } from './src/display/TembaDate';
+import { Compose } from './src/form/Compose';
+import { Lightbox } from './src/display/Lightbox';
+import { ColorPicker } from './src/form/ColorPicker';
+import { Resizer } from './src/layout/Resizer';
+import { Thumbnail } from './src/display/Thumbnail';
 import { NotificationList } from './src/list/NotificationList';
 import { WebChat } from './src/webchat/WebChat';
-import { ImagePicker } from './src/imagepicker/ImagePicker';
-import { Mask } from './src/mask/Mask';
-import { TembaUser } from './src/user/TembaUser';
-import { TemplateEditor } from './src/templates/TemplateEditor';
-import { Toast } from './src/toast/Toast';
-import { Chat } from './src/chat/Chat';
-import { MediaPicker } from './src/mediapicker/MediaPicker';
+import { ImagePicker } from './src/form/ImagePicker';
+import { Mask } from './src/layout/Mask';
+import { TembaUser } from './src/display/TembaUser';
+import { TemplateEditor } from './src/form/TemplateEditor';
+import { Toast } from './src/display/Toast';
+import { Chat } from './src/display/Chat';
+import { MediaPicker } from './src/form/MediaPicker';
 import { Editor } from './src/flow/Editor';
 import { EditorNode } from './src/flow/EditorNode';
 import { StickyNote } from './src/flow/StickyNote';
-import { ContactNotepad } from './src/contacts/ContactNotepad';
-import { ProgressBar } from './src/progress/ProgressBar';
-import { StartProgress } from './src/progress/StartProgress';
+import { ContactNotepad } from './src/live/ContactNotepad';
+import { ProgressBar } from './src/display/ProgressBar';
+import { StartProgress } from './src/live/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
-import { PopupSelect } from './src/select/PopupSelect';
-import { UserSelect } from './src/select/UserSelect';
-import { WorkspaceSelect } from './src/select/WorkspaceSelect';
-import { TembaChart } from './src/chart/TembaChart';
-import { RangePicker } from './src/datepicker/RangePicker';
+import { PopupSelect } from './src/form/select/PopupSelect';
+import { UserSelect } from './src/form/select/UserSelect';
+import { WorkspaceSelect } from './src/form/select/WorkspaceSelect';
+import { TembaChart } from './src/live/TembaChart';
+import { RangePicker } from './src/form/RangePicker';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {

package/temba-webchat.ts

@@ -1,5 +1,5 @@
-import { Chat } from './src/chat/Chat';
-import { VectorIcon } from './src/vectoricon/VectorIcon';
+import { Chat } from './src/display/Chat';
+import { VectorIcon } from './src/display/Icon';
 import { WebChat } from './src/webchat/WebChat';
 
 export function addCustomElement(name: string, comp: any) {

package/test/temba-alert.test.ts

@@ -1,5 +1,5 @@
 import { fixture, assert } from '@open-wc/testing';
-import { Alert } from '../src/alert/Alert';
+import { Alert } from '../src/display/Alert';
 
 import { assertScreenshot, getClip } from './utils.test';
 

package/test/temba-appstate-language.test.ts

@@ -216,3 +216,111 @@ describe('AppState Language Reset', () => {
     assert.equal(zustand.getState().isTranslating, false);
   });
 });
+
+describe('AppState Sticky Note Creation', () => {
+  beforeEach(() => {
+    // Reset the store state before each test
+    const state = zustand.getState();
+    zustand.setState({
+      ...state,
+      languageCode: '',
+      isTranslating: false,
+      flowDefinition: {
+        language: 'en',
+        localization: {},
+        name: 'Test Flow',
+        nodes: [],
+        uuid: 'test-uuid',
+        type: 'messaging' as const,
+        revision: 1,
+        spec_version: '14.3',
+        _ui: {
+          nodes: {},
+          stickies: {},
+          languages: []
+        }
+      },
+      flowInfo: {
+        results: [],
+        dependencies: [],
+        counts: { nodes: 0, languages: 1 },
+        locals: []
+      },
+      dirtyDate: null
+    });
+  });
+
+  it('should create a new sticky note with correct defaults', () => {
+    const state = zustand.getState();
+
+    const position = { left: 100, top: 200 };
+    const stickyUuid = state.createStickyNote(position);
+
+    // Verify UUID was returned
+    assert.isString(stickyUuid);
+    assert.isTrue(stickyUuid.length > 0);
+
+    // Verify sticky was added to the flow definition
+    const currentState = zustand.getState();
+    const stickies = currentState.flowDefinition._ui.stickies;
+
+    assert.property(stickies, stickyUuid);
+
+    const createdSticky = stickies[stickyUuid];
+    assert.deepEqual(createdSticky.position, position);
+    assert.equal(createdSticky.title, '');
+    assert.equal(createdSticky.body, '');
+    assert.equal(createdSticky.color, 'yellow');
+
+    // Verify dirty date was set
+    assert.isNotNull(currentState.dirtyDate);
+    assert.instanceOf(currentState.dirtyDate, Date);
+  });
+
+  it('should create multiple unique sticky notes', () => {
+    const state = zustand.getState();
+
+    const position1 = { left: 100, top: 200 };
+    const position2 = { left: 300, top: 400 };
+
+    const uuid1 = state.createStickyNote(position1);
+    const uuid2 = state.createStickyNote(position2);
+
+    // UUIDs should be different
+    assert.notEqual(uuid1, uuid2);
+
+    // Both stickies should exist
+    const currentState = zustand.getState();
+    const stickies = currentState.flowDefinition._ui.stickies;
+
+    assert.property(stickies, uuid1);
+    assert.property(stickies, uuid2);
+
+    // Positions should be correct
+    assert.deepEqual(stickies[uuid1].position, position1);
+    assert.deepEqual(stickies[uuid2].position, position2);
+  });
+
+  it('should initialize stickies object if it does not exist', () => {
+    // Set up state without stickies
+    const state = zustand.getState();
+    zustand.setState({
+      ...state,
+      flowDefinition: {
+        ...state.flowDefinition,
+        _ui: {
+          ...state.flowDefinition._ui,
+          stickies: undefined
+        }
+      }
+    });
+
+    const position = { left: 50, top: 75 };
+    const stickyUuid = state.createStickyNote(position);
+
+    // Verify stickies object was created
+    const currentState = zustand.getState();
+    assert.isObject(currentState.flowDefinition._ui.stickies);
+    assert.property(currentState.flowDefinition._ui.stickies, stickyUuid);
+  });
+});

package/test/temba-charcount.test.ts

@@ -1,5 +1,5 @@
 import { fixture } from '@open-wc/testing';
-import { CharCount } from '../src/charcount/CharCount';
+import { CharCount } from '../src/display/CharCount';
 import { assertScreenshot, getClip } from './utils.test';
 
 const parentNode = document.createElement('div');

package/test/temba-chart.test.ts

@@ -3,7 +3,7 @@ import {
   RapidChartData,
   TembaChart,
   formatDurationFromSeconds
-} from '../src/chart/TembaChart';
+} from '../src/live/TembaChart';
 import { getComponent } from './utils.test';
 
 const sampleData: RapidChartData = {

package/test/temba-checkbox.test.ts

@@ -1,5 +1,5 @@
 import { html, fixture, expect } from '@open-wc/testing';
-import { Checkbox } from '../src/checkbox/Checkbox';
+import { Checkbox } from '../src/form/Checkbox';
 import { assertScreenshot, getClip } from './utils.test';
 
 describe('temba-checkbox', () => {

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

@@ -1,5 +1,5 @@
 import { assert } from '@open-wc/testing';
-import { ColorPicker } from '../src/colorpicker/ColorPicker';
+import { ColorPicker } from '../src/form/ColorPicker';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 
 const TAG = 'temba-color-picker';

package/test/temba-completion.test.ts

@@ -1,5 +1,5 @@
 import { fixture, assert } from '@open-wc/testing';
-import { Completion } from '../src/completion/Completion';
+import { Completion } from '../src/form/Completion';
 import './utils.test';
 
 export const getHTML = () => {

package/test/temba-compose.test.ts

@@ -1,5 +1,5 @@
 import { assert, expect } from '@open-wc/testing';
-import { Compose } from '../src/compose/Compose';
+import { Compose } from '../src/form/Compose';
 import {
   assertScreenshot,
   getClip,

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

@@ -1,5 +1,5 @@
 import { assert } from '@open-wc/testing';
-import { ContactBadges } from '../src/contacts/ContactBadges';
+import { ContactBadges } from '../src/live/ContactBadges';
 import {
   assertScreenshot,
   delay,

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

@@ -1,6 +1,6 @@
-import { useFakeTimers } from 'sinon';
-import { Compose } from '../src/compose/Compose';
-import { ContactChat } from '../src/contacts/ContactChat';
+import { SinonStub, useFakeTimers } from 'sinon';
+import { Compose } from '../src/form/Compose';
+import { ContactChat } from '../src/live/ContactChat';
 import { Attachment, CustomEventType } from '../src/interfaces';
 import {
   assertScreenshot,
@@ -20,7 +20,6 @@ import {
 import { expect, oneEvent } from '@open-wc/testing';
 
 let clock: any;
-mockNow('2021-03-31T00:31:00.000-00:00');
 
 const TAG = 'temba-contact-chat';
 const getContactChat = async (attrs: any = {}) => {
@@ -49,9 +48,11 @@ const getResponseSuccessFiles = (attachments: Attachment[]) => {
 };
 
 describe('temba-contact-chat', () => {
+  let mockedNow: SinonStub;
   // map requests for contact history to our static files
   // we'll just us the same historylist for everybody for now
   beforeEach(() => {
+    mockedNow = mockNow('2021-03-31T00:31:00.000-00:00');
     clearMockPosts();
     mockGET(
       /\/contact\/history\/contact-.*/,
@@ -69,6 +70,7 @@ describe('temba-contact-chat', () => {
 
   afterEach(function () {
     clock.restore();
+    mockedNow.restore();
   });
 
   it('show history and show chatbox if contact is active', async () => {

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

@@ -1,5 +1,5 @@
 import { assert, waitUntil } from '@open-wc/testing';
-import { ContactDetails } from '../src/contacts/ContactDetails';
+import { ContactDetails } from '../src/live/ContactDetails';
 import { getComponent, loadStore, mockGET } from './utils.test';
 
 const TAG = 'temba-contact-details';

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

@@ -1,5 +1,5 @@
 import { assert, expect } from '@open-wc/testing';
-import { ContactFields } from '../src/contacts/ContactFields';
+import { ContactFields } from '../src/live/ContactFields';
 import { delay, getComponent, loadStore, mockPOST } from './utils.test';
 
 const TAG = 'temba-contact-fields';

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

@@ -1,9 +1,9 @@
 import { fixture, assert, expect } from '@open-wc/testing';
-import { ContactSearch } from '../src/contactsearch/ContactSearch';
+import { ContactSearch } from '../src/form/ContactSearch';
 import { assertScreenshot, getClip, getHTML, mockPOST } from './utils.test';
 import { useFakeTimers } from 'sinon';
 import { CustomEventType } from '../src/interfaces';
-import { Omnibox } from '../src/omnibox/Omnibox';
+import { Omnibox } from '../src/form/select/Omnibox';
 
 let clock: any;
 

package/test/temba-date.test.ts

@@ -1,5 +1,5 @@
 import { html, fixture, expect } from '@open-wc/testing';
-import { TembaDate } from '../src/date/TembaDate';
+import { TembaDate } from '../src/display/TembaDate';
 import {
   assertScreenshot,
   getClip,
@@ -7,6 +7,7 @@ import {
   loadStore,
   mockNow
 } from './utils.test';
+import { SinonStub } from 'sinon';
 
 const TAG = 'temba-date';
 
@@ -15,13 +16,17 @@ export const getDate = async (attrs: any = {}) => {
   return (await getComponent(TAG, attrs)) as TembaDate;
 };
 
-mockNow('2022-12-02T21:00:00.000000');
-
 describe('temba-date', () => {
+  let mockedNow: SinonStub;
   beforeEach(() => {
+    mockedNow = mockNow('2022-12-02T21:00:00.000000');
     loadStore();
   });
 
+  afterEach(() => {
+    mockedNow.restore();
+  });
+
   it('renders default', async () => {
     const date = await getDate({ value: '1978-11-18T02:22:00.000000' });
     const dateString = (

package/test/temba-datepicker.test.ts

@@ -1,5 +1,5 @@
 import { fixture, expect, assert } from '@open-wc/testing';
-import { DatePicker } from '../src/datepicker/DatePicker';
+import { DatePicker } from '../src/form/DatePicker';
 import { assertScreenshot, getAttributes, getClip } from './utils.test';
 
 export const getPickerHTML = (attrs: any = {}) => {

package/test/temba-dialog.test.ts

@@ -1,6 +1,6 @@
 import { assert, expect, fixture } from '@open-wc/testing';
 import * as sinon from 'sinon';
-import { Dialog } from '../src/dialog/Dialog';
+import { Dialog } from '../src/layout/Dialog';
 import { assertScreenshot, getClip } from './utils.test';
 
 const getDialogClip = (dialog: Dialog) => {

package/test/temba-dropdown.test.ts

@@ -1,5 +1,5 @@
 import { assert, expect } from '@open-wc/testing';
-import { Dropdown } from '../src/dropdown/Dropdown';
+import { Dropdown } from '../src/display/Dropdown';
 import { assertScreenshot, getClip, getComponent } from './utils.test';
 
 const TAG = 'temba-dropdown';