@nyaruka/temba-components 0.126.0 → 0.128.0

package/CHANGELOG.md

@@ -4,8 +4,31 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.128.0](https://github.com/nyaruka/temba-components/compare/v0.127.0...v0.128.0)
+
+- Clamp chart height [`#585`](https://github.com/nyaruka/temba-components/pull/585)
+- Add vertical drag and drop sorting for actions in EditorNode [`#584`](https://github.com/nyaruka/temba-components/pull/584)
+- Cleanup styles [`#582`](https://github.com/nyaruka/temba-components/pull/582)
+- Add StickyNote component with drag/drop functionality to Flow Editor [`#578`](https://github.com/nyaruka/temba-components/pull/578)
+- Fix intermittent build failures by improving async test handling and re-enabling disabled tests [`#581`](https://github.com/nyaruka/temba-components/pull/581)
+- Add move handles for sticky notes [`c7bcc70`](https://github.com/nyaruka/temba-components/commit/c7bcc707323692eeb6e149a792813fe2a2ad1182)
+- Make actions sortable [`f2a0c9a`](https://github.com/nyaruka/temba-components/commit/f2a0c9af32d34c2d1a26b58c32326eb43933f6b5)
+- Remove drag mixin [`7724b30`](https://github.com/nyaruka/temba-components/commit/7724b30f77463d16fb0c738e6b3a00dcd0308738)
+
+#### [v0.127.0](https://github.com/nyaruka/temba-components/compare/v0.126.0...v0.127.0)
+
+> 19 June 2025
+
+- Configure max ticks, add auto date format option [`#579`](https://github.com/nyaruka/temba-components/pull/579)
+- Only snap on drop [`#576`](https://github.com/nyaruka/temba-components/pull/576)
+- Configure max x ticks, some formatting [`af6ffe4`](https://github.com/nyaruka/temba-components/commit/af6ffe463cc3ef1c6b09e18eb5e515ccb8b66d95)
+- Remove problematic test [`b42421a`](https://github.com/nyaruka/temba-components/commit/b42421ab4b04fd62b71efc772594079f4e55271b)
+- Disable flaky test [`b86ac02`](https://github.com/nyaruka/temba-components/commit/b86ac02202c22c931952a57310639943f0f23431)
+
 #### [v0.126.0](https://github.com/nyaruka/temba-components/compare/v0.125.0...v0.126.0)
 
+> 19 June 2025
+
 - Add xtype and xformat to TembaChart [`#575`](https://github.com/nyaruka/temba-components/pull/575)
 - Add snap to grid for node movement [`#574`](https://github.com/nyaruka/temba-components/pull/574)
 - Add flow saving for dev server [`#573`](https://github.com/nyaruka/temba-components/pull/573)

package/demo/chart/example.html

@@ -50,7 +50,19 @@
     <div class="example">
       <h3>Summation Chart</h3>
       <p>A basic chart, summing all datasets</p>
-      <temba-chart url="../data/server/opened-tickets.json"></temba-chart>
+      <temba-chart
+        url="../data/server/opened-tickets.json"
+        xtype="time"
+      ></temba-chart>
+    </div>
+
+    <div class="example">
+      <h3>Summation Chart</h3>
+      <p>Auto date format, spanning year</p>
+      <temba-chart
+        url="../data/server/opened-tickets-long.json"
+        xtype="time"
+      ></temba-chart>
     </div>
 
     <div class="example">
@@ -61,6 +73,7 @@
         dataname="Tickets"
         config
         legend
+        xtype="time"
       ></temba-chart>
     </div>
 
@@ -73,6 +86,7 @@
         splits="Tracking,Orders"
         hideother
         legend
+        xtype="time"
       ></temba-chart>
     </div>
     <div class="example">
@@ -83,6 +97,7 @@
         dataname="Tickets"
         showall
         legend
+        xtype="time"
       ></temba-chart>
     </div>
 
@@ -97,6 +112,7 @@
         dataname="Average Response"
         formatDuration
         header="Response Time"
+        xtype="time"
         url="../data/server/response-time.json"
       ></temba-chart>
       <p>Here is the same duration chart, but as a line chart</p>
@@ -106,6 +122,7 @@
         single
         dataName="Average Response"
         formatDuration
+        xtype="time"
         url="../data/server/response-time.json"
       ></temba-chart>
     </div>

package/demo/data/flows/sample-flow.json

@@ -180,28 +180,11 @@
         "uuid": "4efc49e0-ebfe-454d-a1a0-900a911dd5ef",
         "actions": [
           {
-            "attachments": [],
-            "text": "Excellent choice!",
-            "type": "send_msg",
-            "quick_replies": [],
-            "uuid": "9963160a-a007-4c7b-8c9e-7325e1b69ed8"
-          },
-          {
-            "type": "add_input_labels",
-            "labels": [
-              {
-                "uuid": "61cae99b-56e1-4f3e-a2b9-07fb5cf2be9e",
-                "name": "Spam",
-                "count": 0
-              }
-            ],
-            "uuid": "d0d1571c-bf9e-4156-ac7c-984789c71472"
-          },
-          {
-            "type": "add_contact_urn",
-            "uuid": "9ddb2da4-03da-40a9-9cec-06c9d05b6e72",
-            "scheme": "tel",
-            "path": "12065551212"
+            "type": "set_run_result",
+            "name": "Color",
+            "value": "Black",
+            "category": "",
+            "uuid": "b32fe165-e0cc-475c-a7c4-7f484fcce2f4"
           },
           {
             "uuid": "28c288f3-fb46-4c32-8a47-563132a2e8db",
@@ -212,40 +195,20 @@
             }
           },
           {
-            "uuid": "730ae625-6535-467b-98af-ea83e9d27884",
-            "type": "set_contact_language",
-            "language": "eng"
-          },
-          {
-            "uuid": "a0b17ce5-f0f2-4c07-b399-facecbb403ae",
-            "type": "set_contact_field",
-            "field": {
-              "name": "Color",
-              "key": "color"
-            },
-            "value": "@results.color.category"
+            "attachments": [],
+            "text": "Excellent choice!",
+            "type": "send_msg",
+            "quick_replies": [],
+            "uuid": "9963160a-a007-4c7b-8c9e-7325e1b69ed8"
           },
           {
-            "type": "add_contact_groups",
-            "groups": [
-              {
-                "uuid": "269e8abf-e81b-404c-82ce-45ff42d13769",
-                "name": "Empty",
-                "query": null,
-                "status": "ready",
-                "system": false,
-                "count": 0
-              },
-              {
-                "uuid": "58a6a3cd-20c0-4791-82da-ce9f319ab91b",
-                "name": "Farmers",
-                "query": null,
-                "status": "ready",
-                "system": false,
-                "count": 2414
-              }
+            "addresses": [
+              "name@domain.com"
             ],
-            "uuid": "d1ca86da-f321-4e09-8bb2-981de03f5a90"
+            "subject": "Did you get this?",
+            "body": "I hope it arrived!",
+            "type": "send_email",
+            "uuid": "a0f3f1f2-1869-4ad6-9fb0-e610a3e00ae7"
           },
           {
             "type": "remove_contact_groups",
@@ -283,20 +246,57 @@
             "uuid": "6ec87721-6ec2-43fa-b7d2-930bf1f0574d"
           },
           {
-            "addresses": [
-              "name@domain.com"
+            "uuid": "730ae625-6535-467b-98af-ea83e9d27884",
+            "type": "set_contact_language",
+            "language": "eng"
+          },
+          {
+            "type": "add_contact_groups",
+            "groups": [
+              {
+                "uuid": "269e8abf-e81b-404c-82ce-45ff42d13769",
+                "name": "Empty",
+                "query": null,
+                "status": "ready",
+                "system": false,
+                "count": 0
+              },
+              {
+                "uuid": "58a6a3cd-20c0-4791-82da-ce9f319ab91b",
+                "name": "Farmers",
+                "query": null,
+                "status": "ready",
+                "system": false,
+                "count": 2414
+              }
             ],
-            "subject": "Did you get this?",
-            "body": "I hope it arrived!",
-            "type": "send_email",
-            "uuid": "a0f3f1f2-1869-4ad6-9fb0-e610a3e00ae7"
+            "uuid": "d1ca86da-f321-4e09-8bb2-981de03f5a90"
           },
           {
-            "type": "set_run_result",
-            "name": "Color",
-            "value": "Black",
-            "category": "",
-            "uuid": "b32fe165-e0cc-475c-a7c4-7f484fcce2f4"
+            "type": "add_input_labels",
+            "labels": [
+              {
+                "uuid": "61cae99b-56e1-4f3e-a2b9-07fb5cf2be9e",
+                "name": "Spam",
+                "count": 0
+              }
+            ],
+            "uuid": "d0d1571c-bf9e-4156-ac7c-984789c71472"
+          },
+          {
+            "type": "add_contact_urn",
+            "uuid": "9ddb2da4-03da-40a9-9cec-06c9d05b6e72",
+            "scheme": "tel",
+            "path": "12065551212"
+          },
+          {
+            "uuid": "a0b17ce5-f0f2-4c07-b399-facecbb403ae",
+            "type": "set_contact_field",
+            "field": {
+              "name": "Color",
+              "key": "color"
+            },
+            "value": "@results.color.category"
           }
         ],
         "exits": [
@@ -768,16 +768,16 @@
       "nodes": {
         "a229fa3c-16bb-440b-9ae8-b7ee7a723f44": {
           "position": {
-            "left": 0,
-            "top": 0
+            "left": 980,
+            "top": 20
           },
           "type": "execute_actions"
         },
         "ef1a5b06-1331-4c0d-9f46-58b1e5baf671": {
           "type": "wait_for_response",
           "position": {
-            "left": 0,
-            "top": 140
+            "left": 780,
+            "top": 180
           },
           "config": {
             "cases": {}
@@ -786,31 +786,31 @@
         "e1f22e97-a170-44b4-a79b-98ab916f4c34": {
           "type": "split_by_webhook",
           "position": {
-            "left": 340,
-            "top": 20
+            "left": 760,
+            "top": 440
           },
           "config": {}
         },
         "4efc49e0-ebfe-454d-a1a0-900a911dd5ef": {
           "position": {
-            "left": 0,
-            "top": 300
+            "left": 240,
+            "top": 0
           },
           "type": "execute_actions"
         },
         "2c60c381-487d-42cd-80be-a31f44c36fd9": {
           "type": "split_by_subflow",
           "position": {
-            "left": 300,
-            "top": 300
+            "left": 840,
+            "top": 600
           },
           "config": {}
         },
         "f115fdb0-d92d-47a2-96f3-e03e36767b14": {
           "type": "split_by_contact_field",
           "position": {
-            "left": 340,
-            "top": 180
+            "left": 480,
+            "top": 40
           },
           "config": {
             "operand": {
@@ -824,8 +824,8 @@
         "b85000c4-1990-4d86-807a-1318ea512708": {
           "type": "split_by_expression",
           "position": {
-            "left": 640,
-            "top": 560
+            "left": 480,
+            "top": 440
           },
           "config": {
             "cases": {}
@@ -834,16 +834,16 @@
         "8ecec688-f154-4b80-a0b3-3cbff0fac892": {
           "type": "split_by_random",
           "position": {
-            "left": 640,
-            "top": 60
+            "left": 780,
+            "top": 300
           },
           "config": null
         },
         "66171418-2368-44b9-95db-fdf7cd5cf4fe": {
           "type": "split_by_run_result",
           "position": {
-            "left": 640,
-            "top": 180
+            "left": 480,
+            "top": 140
           },
           "config": {
             "operand": {
@@ -857,8 +857,8 @@
         "5f1394c1-4b8c-4357-8863-db24817b2aa3": {
           "type": "split_by_groups",
           "position": {
-            "left": 640,
-            "top": 320
+            "left": 480,
+            "top": 240
           },
           "config": {
             "cases": {}
@@ -867,8 +867,8 @@
         "e780a7ef-9dad-45a3-abda-11200a9afbf4": {
           "type": "split_by_scheme",
           "position": {
-            "left": 640,
-            "top": 440
+            "left": 480,
+            "top": 340
           },
           "config": {
             "cases": {}
@@ -877,23 +877,23 @@
         "3dfe9cf2-72d1-496f-8d20-d5743af0f9c8": {
           "type": "split_by_llm",
           "position": {
-            "left": 300,
-            "top": 480
+            "left": 480,
+            "top": 560
           },
           "config": {}
         },
         "425c4757-bead-440f-92aa-a1cc3fcd7d35": {
           "position": {
-            "left": 300,
-            "top": 660
+            "left": 480,
+            "top": 760
           },
           "type": "execute_actions"
         },
         "21ff86c2-5276-4448-afb6-54d1f832ba0c": {
           "type": "split_by_ticket",
           "position": {
-            "left": 300,
-            "top": 800
+            "left": 500,
+            "top": 1000
           },
           "config": {}
         }
@@ -901,21 +901,48 @@
       "stickies": {
         "1a32aff1-36b9-48e3-a51e-382efdcb9a83": {
           "position": {
-            "left": 400,
-            "top": 1300
+            "left": 0,
+            "top": 0
           },
-          "title": "What the heck?",
-          "body": "This flow makes no sense. That's because it's just for general testing.",
+          "title": "Yellow Note",
+          "body": "This flow makes no sense. That's because it's just for general testing. We can keep typing in this div though and it is interesting how it just keeps expanding even if it isn't a textarea.",
           "color": "yellow"
         },
         "598a87e4-f20b-48ba-aac5-bb365d8f1509": {
           "position": {
-            "left": 360,
-            "top": 1480
+            "left": 0,
+            "top": 340
           },
-          "title": "Colors",
-          "body": "Did you know stickies can have different colors?",
+          "title": "Blue Note",
+          "body": "Did you know stickies can have different colors? I just realized that and I'm pretty happy to report that this expands really nicely. It seems to be working okay I think. This.",
           "color": "blue"
+        },
+        "598a87e4-f20b-48ba-aac5-bb365d8f1501": {
+          "position": {
+            "left": 0,
+            "top": 200
+          },
+          "title": "Green Note",
+          "body": "They also come in green, do I like them better? Maybe I do. There is a standard height, they will have to get used to it.",
+          "color": "green"
+        },
+        "598a87e4-f20b-48ba-aac5-bb365d8f1502": {
+          "position": {
+            "left": 0,
+            "top": 520
+          },
+          "title": "Pinky Note",
+          "body": "This is a test. How much do I like writing in pink? Seems pretty nice honestly! I think Imma go with it",
+          "color": "pink"
+        },
+        "598a87e4-f20b-48ba-aac5-bb365d8f1503": {
+          "position": {
+            "left": 0,
+            "top": 660
+          },
+          "title": "Gray Day",
+          "body": "Or grey even, toots!",
+          "color": "gray"
         }
       }
     },

package/demo/data/server/opened-tickets-long.json

@@ -0,0 +1,53 @@
+{
+  "period": ["2023-12-31", "2025-06-07"],
+  "data": {
+    "labels": [
+      "2023-12-31",
+      "2025-05-27",
+      "2025-05-28",
+      "2025-05-29",
+      "2025-05-30",
+      "2025-05-31",
+      "2025-06-01",
+      "2025-06-02",
+      "2025-06-03",
+      "2025-06-04",
+      "2025-06-05",
+      "2025-06-06"
+    ],
+    "datasets": [
+      {
+        "label": "General",
+        "data": [31, 141, 60, 20, 49, 92, 109, 140, 214, 60, 70]
+      },
+      {
+        "label": "VIPs",
+        "data": [9, 97, 95, 55, 32, 61, 78, 115, 20, 91, 83]
+      },
+      {
+        "label": "Orders",
+        "data": [51, 84, 71, 78, 44, 45, 106, 114, 138, 125, 83]
+      },
+      {
+        "label": "Survey",
+        "data": [57, 31, 42, 63, 32, 11, 52, 35, 14, 160, 15]
+      },
+      {
+        "label": "Tracking",
+        "data": [10, 26, 28, 43, 16, 10, 36, 24, 18, 26, 9]
+      },
+      {
+        "label": "Birds",
+        "data": [31, 141, 60, 20, 49, 92, 109, 140, 214, 60, 70]
+      },
+      {
+        "label": "Dogs",
+        "data": [9, 97, 95, 55, 32, 61, 78, 115, 20, 91, 83]
+      },
+      {
+        "label": "Cats",
+        "data": [51, 84, 71, 78, 44, 45, 106, 114, 138, 125, 83]
+      }
+    ]
+  }
+}

package/demo/sticky-note-demo.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>StickyNote Drag vs Edit Demo</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          sans-serif;
+        padding: 20px;
+        max-width: 1200px;
+        margin: 0 auto;
+        background-color: #f5f5f5;
+      }
+
+      .instructions {
+        background: #e3f2fd;
+        padding: 20px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+        border-left: 4px solid #1976d2;
+      }
+
+      .instructions h2 {
+        margin-top: 0;
+        color: #1976d2;
+      }
+
+      .instructions ul {
+        margin-bottom: 0;
+      }
+
+      .instructions li {
+        margin-bottom: 8px;
+      }
+
+      .demo-container {
+        position: relative;
+        background-color: #f9f9f9;
+        height: 600px;
+        border: 1px solid #ddd;
+        margin: 20px 0;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      .demo-title {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 10px;
+      }
+      .instructions {
+        background-color: #e6f3ff;
+        padding: 15px;
+        border-radius: 8px;
+        margin-bottom: 20px;
+      }
+      .instructions ul {
+        margin: 10px 0;
+        padding-left: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>StickyNote Component Demo</h1>
+
+    <div class="instructions">
+      <strong>How to use StickyNotes:</strong>
+      <ul>
+        <li>Click and drag the sticky notes to move them around</li>
+        <li>Click on the title or body text to edit it inline</li>
+        <li>Press Enter or Escape to finish editing</li>
+        <li>Notes snap to a 20px grid when you finish dragging</li>
+        <li>Each color has its own visual theme</li>
+      </ul>
+    </div>
+
+    <div class="demo-title">Interactive StickyNotes:</div>
+    <div class="demo-container">
+      <!-- Yellow sticky note -->
+      <temba-sticky-note id="yellow-note"></temba-sticky-note>
+
+      <!-- Blue sticky note -->
+      <temba-sticky-note id="blue-note"></temba-sticky-note>
+
+      <!-- Pink sticky note -->
+      <temba-sticky-note id="pink-note"></temba-sticky-note>
+
+      <!-- Green sticky note -->
+      <temba-sticky-note id="green-note"></temba-sticky-note>
+
+      <!-- Gray sticky note -->
+      <temba-sticky-note id="gray-note"></temba-sticky-note>
+    </div>
+
+    <script type="module">
+      import '/out-tsc/temba-modules.js';
+
+      // Configure the sticky notes with sample data
+      document.addEventListener('DOMContentLoaded', () => {
+        const yellowNote = document.getElementById('yellow-note');
+        yellowNote.uuid = 'yellow-uuid';
+        yellowNote.data = {
+          position: { left: 50, top: 50 },
+          title: 'Yellow Note',
+          body: 'This is a yellow sticky note! Click to edit me.',
+          color: 'yellow'
+        };
+
+        const blueNote = document.getElementById('blue-note');
+        blueNote.uuid = 'blue-uuid';
+        blueNote.data = {
+          position: { left: 300, top: 120 },
+          title: 'Blue Note',
+          body: 'Blue notes are cool and calm. Drag me around!',
+          color: 'blue'
+        };
+
+        const pinkNote = document.getElementById('pink-note');
+        pinkNote.uuid = 'pink-uuid';
+        pinkNote.data = {
+          position: { left: 550, top: 80 },
+          title: 'Pink Note',
+          body: 'Pink is vibrant and fun. Try editing my text!',
+          color: 'pink'
+        };
+
+        const greenNote = document.getElementById('green-note');
+        greenNote.uuid = 'green-uuid';
+        greenNote.data = {
+          position: { left: 100, top: 250 },
+          title: 'Green Note',
+          body: 'Green represents nature and growth. I can grow in height as you type more content in my body!',
+          color: 'green'
+        };
+
+        const grayNote = document.getElementById('gray-note');
+        grayNote.uuid = 'gray-uuid';
+        grayNote.data = {
+          position: { left: 400, top: 300 },
+          title: 'Gray Note',
+          body: 'Gray is neutral and professional.',
+          color: 'gray'
+        };
+      });
+    </script>
+  </body>
+</html>

package/dist/locales/es.js

@@ -3,10 +3,10 @@
 /* eslint-disable no-irregular-whitespace */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export const templates = {
-    scf1453991c986b25: `Tab para completar, enter para seleccionar`,
-    s73b4d70c02f4b4e0: `No options`,
-    s8f02e3a18ffc083a: `Are not currently in a flow`,
-    s638236250662c6b3: `Have sent a message in the last`,
-    s4788ee206c4570c7: `Have not started this flow in the last 90 days`
+    'scf1453991c986b25': `Tab para completar, enter para seleccionar`,
+    's73b4d70c02f4b4e0': `No options`,
+    's8f02e3a18ffc083a': `Are not currently in a flow`,
+    's638236250662c6b3': `Have sent a message in the last`,
+    's4788ee206c4570c7': `Have not started this flow in the last 90 days`,
 };
 //# sourceMappingURL=es.js.map

package/dist/locales/es.js.map

@@ -1 +1 @@
-{"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,4CAA4C;IAC/D,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n  scf1453991c986b25: `Tab para completar, enter para seleccionar`,\n  s73b4d70c02f4b4e0: `No options`,\n  s8f02e3a18ffc083a: `Are not currently in a flow`,\n  s638236250662c6b3: `Have sent a message in the last`,\n  s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
+{"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AACI,mCAAmC;AACnC,gDAAgD;AAKhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,mBAAmB,EAAE,4CAA4C;IACvE,mBAAmB,EAAE,YAAY;IACjC,mBAAmB,EAAE,6BAA6B;IAClD,mBAAmB,EAAE,iCAAiC;IACtD,mBAAmB,EAAE,gDAAgD;CAChE,CAAC","sourcesContent":["\n    // Do not modify this file by hand!\n    // Re-generate this file by running lit-localize\n\n    \n    \n\n    /* eslint-disable no-irregular-whitespace */\n    /* eslint-disable @typescript-eslint/no-explicit-any */\n\n    export const templates = {\n      'scf1453991c986b25': `Tab para completar, enter para seleccionar`,\n's73b4d70c02f4b4e0': `No options`,\n's8f02e3a18ffc083a': `Are not currently in a flow`,\n's638236250662c6b3': `Have sent a message in the last`,\n's4788ee206c4570c7': `Have not started this flow in the last 90 days`,\n    };\n  "]}