@nyaruka/temba-components 0.127.0 → 0.129.0

package/temba-modules.ts

@@ -36,7 +36,7 @@ import { TembaSlider } from './src/slider/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 { DatePicker } from './src/datepicker/DatePicker';
 import { FieldManager } from './src/fields/FieldManager';
 import { SortableList } from './src/list/SortableList';
 import { ContentMenu } from './src/list/ContentMenu';
@@ -57,6 +57,7 @@ import { Chat } from './src/chat/Chat';
 import { MediaPicker } from './src/mediapicker/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';
@@ -65,6 +66,7 @@ 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';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -77,6 +79,7 @@ addCustomElement('temba-alert', Alert);
 addCustomElement('temba-store', Store);
 addCustomElement('temba-textinput', TextInput);
 addCustomElement('temba-datepicker', DatePicker);
+addCustomElement('temba-range-picker', RangePicker);
 addCustomElement('temba-date', TembaDate);
 addCustomElement('temba-completion', Completion);
 addCustomElement('temba-checkbox', Checkbox);
@@ -132,6 +135,7 @@ addCustomElement('temba-chat', Chat);
 addCustomElement('temba-media-picker', MediaPicker);
 addCustomElement('temba-flow-editor', Editor);
 addCustomElement('temba-flow-node', EditorNode);
+addCustomElement('temba-sticky-note', StickyNote);
 addCustomElement('temba-contact-notepad', ContactNotepad);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);

package/test/temba-chart.test.ts

@@ -182,6 +182,30 @@ describe('temba-chart', () => {
     expect(chart.chart.options.scales.x.type).to.equal('category');
     expect((chart.chart.options.scales.x as any).time).to.be.undefined;
   });
+
+  it('configures scales correctly for horizontal charts', async () => {
+    const chart: TembaChart = await getChart();
+
+    // Test vertical chart (default)
+    chart.data = sampleData;
+    await chart.updateComplete;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // In vertical charts: x-axis should be for categories, y-axis for values
+    expect((chart.chart.options.scales as any).x.type).to.equal('category');
+    expect((chart.chart.options.scales as any).y.min).to.equal(0);
+    expect((chart.chart.options.scales as any).y.stacked).to.equal(true);
+
+    // Test horizontal chart
+    chart.horizontal = true;
+    await chart.updateComplete;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // In horizontal charts: x-axis should be for values, y-axis for categories
+    expect((chart.chart.options.scales as any).x.min).to.equal(0);
+    expect((chart.chart.options.scales as any).x.stacked).to.equal(true);
+    expect((chart.chart.options.scales as any).y.type).to.equal('category');
+  });
 });
 
 describe('formatDurationFromSeconds', () => {
@@ -232,4 +256,27 @@ describe('formatDurationFromSeconds', () => {
     expect(formatDurationFromSeconds(1209600)).to.equal('14d'); // 2 weeks
     expect(formatDurationFromSeconds(2678400)).to.equal('31d'); // ~1 month
   });
+
+  it('supports horizontal bar charts', async () => {
+    const chart: TembaChart = await getChart();
+
+    // Test that horizontal property defaults to false
+    expect(chart.horizontal).to.equal(false);
+
+    // Set horizontal to true
+    chart.horizontal = true;
+    chart.data = sampleData;
+    await chart.updateComplete;
+
+    // Wait for the chart to be created after data is set
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Test that the chart was created with horizontal configuration
+    expect(chart.horizontal).to.equal(true);
+    expect(chart.chart).to.exist;
+
+    // Test that the chart configuration includes indexAxis: 'y' for horizontal bars
+    const chartConfig = chart.chart.options;
+    expect(chartConfig.indexAxis).to.equal('y');
+  });
 });

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/datepicker/DatePicker';
 import { assertScreenshot, getAttributes, getClip } from './utils.test';
 
 export const getPickerHTML = (attrs: any = {}) => {

package/test/temba-flow-editor-node.test.ts

@@ -1,3 +1,4 @@
+import '../temba-modules';
 import { html, fixture, expect } from '@open-wc/testing';
 import { EditorNode } from '../src/flow/EditorNode';
 import {
@@ -8,9 +9,7 @@ import {
   Router
 } from '../src/store/flow-definition.d';
 import { stub, restore } from 'sinon';
-
-// Register the component
-customElements.define('temba-editor-node', EditorNode);
+import { CustomEventType } from '../src/interfaces';
 
 describe('EditorNode', () => {
   let editorNode: EditorNode;
@@ -55,7 +54,7 @@ describe('EditorNode', () => {
         quick_replies: []
       };
 
-      const result = (editorNode as any).renderAction(mockNode, action);
+      const result = (editorNode as any).renderAction(mockNode, action, 0);
       expect(result).to.exist;
     });
 
@@ -71,7 +70,7 @@ describe('EditorNode', () => {
         uuid: 'action-1'
       };
 
-      const result = (editorNode as any).renderAction(mockNode, action);
+      const result = (editorNode as any).renderAction(mockNode, action, 1);
       expect(result).to.exist;
     });
   });
@@ -327,7 +326,8 @@ describe('EditorNode', () => {
       // Test renderAction
       const actionResult = (editorNode as any).renderAction(
         mockNode,
-        mockNode.actions[0]
+        mockNode.actions[0],
+        0
       );
       expect(actionResult).to.exist;
 
@@ -341,4 +341,320 @@ describe('EditorNode', () => {
       expect(mockNode.exits).to.have.length(1);
     });
   });
+
+  describe('drag and drop functionality', () => {
+    let editorNode: EditorNode;
+
+    beforeEach(() => {
+      editorNode = new EditorNode();
+    });
+
+    it('renders actions with sortable class and proper IDs', async () => {
+      const mockNode: Node = {
+        uuid: 'sortable-test-node',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'World',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      // Test that renderAction includes sortable class and proper ID
+      const result1 = (editorNode as any).renderAction(
+        mockNode,
+        mockNode.actions[0],
+        0
+      );
+      const result2 = (editorNode as any).renderAction(
+        mockNode,
+        mockNode.actions[1],
+        1
+      );
+
+      expect(result1).to.exist;
+      expect(result2).to.exist;
+
+      // Render the template to check the actual DOM
+      const container1 = await fixture(html`<div>${result1}</div>`);
+      const container2 = await fixture(html`<div>${result2}</div>`);
+
+      const actionElement1 = container1.querySelector('.action');
+      const actionElement2 = container2.querySelector('.action');
+
+      expect(actionElement1).to.exist;
+      expect(actionElement1?.classList.contains('sortable')).to.be.true;
+      expect(actionElement1?.id).to.equal('action-0');
+
+      expect(actionElement2).to.exist;
+      expect(actionElement2?.classList.contains('sortable')).to.be.true;
+      expect(actionElement2?.id).to.equal('action-1');
+    });
+
+    it('includes drag handle in rendered actions', async () => {
+      const mockNode: Node = {
+        uuid: 'drag-handle-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      let editorNode: EditorNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${{ position: { left: 0, top: 0 } }}
+        ></temba-flow-node>`
+      );
+
+      // No drag handle should be present if only one action
+      let dragHandle = editorNode.querySelector('.drag-handle');
+      expect(dragHandle).to.not.exist;
+
+      // Now add a second action to verify drag handle appears
+      mockNode.actions.push({
+        type: 'send_msg',
+        uuid: 'action-2',
+        text: 'World',
+        quick_replies: []
+      } as any);
+
+      editorNode = await fixture(
+        html`<temba-flow-node
+          .node=${mockNode}
+          .ui=${{ position: { left: 0, top: 0 } }}
+        ></temba-flow-node>`
+      );
+
+      dragHandle = editorNode.querySelector('.drag-handle');
+      expect(dragHandle).to.exist;
+    });
+
+    it('renders SortableList when actions are present', async () => {
+      const mockNode: Node = {
+        uuid: 'sortable-list-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Hello',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'World',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'execute_actions'
+      };
+
+      // Set properties on the component
+      (editorNode as any).node = mockNode;
+      (editorNode as any).ui = mockUI;
+
+      const renderResult = editorNode.render();
+
+      // Render the template to check the actual DOM
+      const container = await fixture(html`<div>${renderResult}</div>`);
+
+      const sortableList = container.querySelector('temba-sortable-list');
+      expect(sortableList).to.exist;
+    });
+
+    it('does not render SortableList when no actions', async () => {
+      const mockNode: Node = {
+        uuid: 'no-actions-test',
+        actions: [],
+        exits: [{ uuid: 'exit-1' }]
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'execute_actions'
+      };
+
+      // Set properties on the component
+      (editorNode as any).node = mockNode;
+      (editorNode as any).ui = mockUI;
+
+      const renderResult = editorNode.render();
+
+      // Check that template does not include temba-sortable-list
+      expect(renderResult.strings.join('')).to.not.contain(
+        'temba-sortable-list'
+      );
+    });
+
+    it('handles order changed events correctly', async () => {
+      const mockNode: Node = {
+        uuid: 'order-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'First',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'Second',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-3',
+            text: 'Third',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      (editorNode as any).node = mockNode;
+
+      // Create a mock order changed event (swap first and last actions)
+      const orderChangedEvent = new CustomEvent(CustomEventType.OrderChanged, {
+        detail: { swap: [0, 2] }
+      });
+
+      // Call the handler directly
+      (editorNode as any).handleActionOrderChanged(orderChangedEvent);
+
+      // Verify the actions were reordered correctly
+      expect((editorNode as any).node.actions).to.have.length(3);
+      expect(((editorNode as any).node.actions[0] as any).text).to.equal(
+        'Second'
+      );
+      expect(((editorNode as any).node.actions[1] as any).text).to.equal(
+        'Third'
+      );
+      expect(((editorNode as any).node.actions[2] as any).text).to.equal(
+        'First'
+      );
+    });
+
+    it('preserves action data during reordering', () => {
+      const mockNode: Node = {
+        uuid: 'preserve-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'Message 1',
+            quick_replies: ['Yes', 'No']
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'Message 2',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      (editorNode as any).node = mockNode;
+
+      // Swap the two actions
+      const orderChangedEvent = new CustomEvent(CustomEventType.OrderChanged, {
+        detail: { swap: [0, 1] }
+      });
+
+      (editorNode as any).handleActionOrderChanged(orderChangedEvent);
+
+      // Verify all action data is preserved
+      expect((editorNode as any).node.actions).to.have.length(2);
+      expect(((editorNode as any).node.actions[0] as any).text).to.equal(
+        'Message 2'
+      );
+      expect(
+        ((editorNode as any).node.actions[0] as any).quick_replies
+      ).to.deep.equal([]);
+      expect(((editorNode as any).node.actions[1] as any).text).to.equal(
+        'Message 1'
+      );
+      expect(
+        ((editorNode as any).node.actions[1] as any).quick_replies
+      ).to.deep.equal(['Yes', 'No']);
+    });
+
+    it('integrates with SortableList for full drag functionality', async () => {
+      const mockNode: Node = {
+        uuid: 'integration-drag-test',
+        actions: [
+          {
+            type: 'send_msg',
+            uuid: 'action-1',
+            text: 'First Action',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-2',
+            text: 'Second Action',
+            quick_replies: []
+          } as any,
+          {
+            type: 'send_msg',
+            uuid: 'action-3',
+            text: 'Third Action',
+            quick_replies: []
+          } as any
+        ],
+        exits: []
+      };
+
+      const mockUI: NodeUI = {
+        position: { left: 100, top: 200 },
+        type: 'execute_actions'
+      };
+
+      // Set properties on the component
+      (editorNode as any).node = mockNode;
+      (editorNode as any).ui = mockUI;
+
+      // Render the full component
+      const renderResult = editorNode.render();
+      const container = await fixture(html`<div>${renderResult}</div>`);
+
+      // Find the sortable list
+      const sortableList = container.querySelector('temba-sortable-list');
+      expect(sortableList).to.exist;
+
+      // Verify all actions are rendered as sortable items
+      const sortableItems = container.querySelectorAll('.sortable');
+      expect(sortableItems).to.have.length(3);
+
+      // Verify each action has correct ID and structure
+      expect(sortableItems[0].id).to.equal('action-0');
+      expect(sortableItems[1].id).to.equal('action-1');
+      expect(sortableItems[2].id).to.equal('action-2');
+
+      // Verify drag handles are present
+      const dragHandles = container.querySelectorAll('.drag-handle');
+      expect(dragHandles).to.have.length(3);
+    });
+  });
 });

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

@@ -0,0 +1,193 @@
+import { fixture, expect, assert } from '@open-wc/testing';
+import { RangePicker } from '../src/datepicker/RangePicker';
+import { assertScreenshot, getAttributes, getClip } from './utils.test';
+import { DateTime } from 'luxon';
+
+export const getRangePickerHTML = (attrs: any = {}) => {
+  return `<temba-range-picker ${getAttributes(attrs)}></temba-range-picker>`;
+};
+
+export const createRangePicker = async (def: string) => {
+  const parentNode = document.createElement('div');
+  parentNode.setAttribute('style', 'width: 600px;');
+  parentNode.id = 'parent';
+  const picker: RangePicker = await fixture(def, { parentNode });
+  return picker;
+};
+
+describe('temba-range-picker', () => {
+  it('can create a range picker', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+    assert.instanceOf(picker, RangePicker);
+
+    // Should have default range (last month)
+    expect(picker.selectedRange).to.equal('M');
+    expect(picker.startDate).to.not.be.empty;
+    expect(picker.endDate).to.not.be.empty;
+
+    await assertScreenshot('datepicker/range-picker-default', getClip(picker));
+  });
+
+  it('can be initialized with start and end dates', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({ start: '2024-01-01', end: '2024-01-31' })
+    );
+
+    expect(picker.startDate).to.equal('2024-01-01');
+    expect(picker.endDate).to.equal('2024-01-31');
+    expect(picker.selectedRange).to.equal('');
+
+    await assertScreenshot(
+      'datepicker/range-picker-initial-values',
+      getClip(picker)
+    );
+  });
+
+  it('can set min and max dates', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({
+        start: '2024-06-01',
+        end: '2024-06-30',
+        min: '2024-01-01',
+        max: '2024-12-31'
+      })
+    );
+
+    expect(picker.minDate).to.equal('2024-01-01');
+    expect(picker.maxDate).to.equal('2024-12-31');
+
+    await assertScreenshot('datepicker/range-picker-min-max', getClip(picker));
+  });
+
+  it('can set range using buttons', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click Week button
+    const weekBtn = picker.shadowRoot?.querySelector(
+      '.range-btn'
+    ) as HTMLButtonElement;
+    weekBtn.click();
+    await picker.updateComplete;
+
+    expect(picker.selectedRange).to.equal('W');
+    expect(picker.startDate).to.equal(
+      DateTime.now().minus({ days: 6 }).toISODate()
+    );
+    expect(picker.endDate).to.equal(DateTime.now().toISODate());
+
+    await assertScreenshot('datepicker/range-picker-week', getClip(picker));
+  });
+
+  it('can set year range using button', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click Year button (3rd button)
+    const yearBtn = picker.shadowRoot?.querySelectorAll(
+      '.range-btn'
+    )[2] as HTMLButtonElement;
+    yearBtn.click();
+    await picker.updateComplete;
+
+    expect(picker.selectedRange).to.equal('Y');
+    expect(picker.startDate).to.equal(
+      DateTime.now().minus({ years: 1 }).plus({ days: 1 }).toISODate()
+    );
+    expect(picker.endDate).to.equal(DateTime.now().toISODate());
+
+    await assertScreenshot('datepicker/range-picker-year', getClip(picker));
+  });
+
+  it('can set all range using button', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click All button (4th button)
+    const allBtn = picker.shadowRoot?.querySelectorAll(
+      '.range-btn'
+    )[3] as HTMLButtonElement;
+    allBtn.click();
+    await picker.updateComplete;
+
+    expect(picker.selectedRange).to.equal('ALL');
+    expect(picker.startDate).to.equal('2012-01-01');
+    expect(picker.endDate).to.equal(DateTime.now().toISODate());
+
+    await assertScreenshot('datepicker/range-picker-all', getClip(picker));
+  });
+
+  it('enforces valid date ranges', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({ start: '2024-06-01', end: '2024-06-30' })
+    );
+
+    // Verify initial state is valid
+    expect(
+      DateTime.fromISO(picker.endDate) >= DateTime.fromISO(picker.startDate)
+    ).to.be.true;
+
+    // The validation logic is internal and triggered through user interaction
+    // We can verify the component has the correct min/max constraints
+    expect(picker.startDate).to.equal('2024-06-01');
+    expect(picker.endDate).to.equal('2024-06-30');
+  });
+
+  it('enforces min/max date constraints', async () => {
+    const picker: RangePicker = await createRangePicker(
+      getRangePickerHTML({ min: '2024-01-01', max: '2024-12-31' })
+    );
+
+    expect(picker.minDate).to.equal('2024-01-01');
+    expect(picker.maxDate).to.equal('2024-12-31');
+
+    // Min/max are enforced through the temba-datepicker components
+    // when user interacts with the date inputs
+  });
+
+  it('shows correct button selection states', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Initially should have M selected
+    const monthBtn = picker.shadowRoot?.querySelectorAll(
+      '.range-btn'
+    )[1] as HTMLButtonElement;
+    expect(monthBtn.classList.contains('selected')).to.be.true;
+
+    // Click week button
+    const weekBtn = picker.shadowRoot?.querySelector(
+      '.range-btn'
+    ) as HTMLButtonElement;
+    weekBtn.click();
+    await picker.updateComplete;
+
+    expect(weekBtn.classList.contains('selected')).to.be.true;
+    expect(monthBtn.classList.contains('selected')).to.be.false;
+
+    await assertScreenshot(
+      'datepicker/range-picker-button-states',
+      getClip(picker)
+    );
+  });
+
+  it('can click to edit dates', async () => {
+    const picker: RangePicker = await createRangePicker(getRangePickerHTML());
+
+    // Click on start date display
+    const startDisplay = picker.shadowRoot?.querySelector(
+      '.date-display'
+    ) as HTMLElement;
+    startDisplay.click();
+    await picker.updateComplete;
+
+    expect(picker.editingStart).to.be.true;
+
+    // Should show temba-datepicker for start
+    const startPicker = picker.shadowRoot?.querySelector(
+      'temba-datepicker.start-picker'
+    );
+    expect(startPicker).to.not.be.null;
+
+    await assertScreenshot(
+      'datepicker/range-picker-editing-start',
+      getClip(picker)
+    );
+  });
+});