@nyaruka/temba-components 0.157.1 → 0.158.1

package/src/live/ContactNotepad.ts

@@ -3,6 +3,7 @@ import { property } from 'lit/decorators.js';
 import { ContactStoreElement } from './ContactStoreElement';
 import { getDisplayName } from './ContactChat';
 import { ContactNote, CustomEventType } from '../interfaces';
+import { designTokens } from '../styles/designTokens';
 
 export class ContactNotepad extends ContactStoreElement {
   @property({ type: Object, attribute: false })
@@ -14,9 +15,12 @@ export class ContactNotepad extends ContactStoreElement {
 
   static get styles() {
     return css`
+      ${designTokens}
+
       :host {
         height: 100%;
         display: flex;
+        margin-top: var(--gap);
       }
 
       .wrapper {
@@ -24,9 +28,13 @@ export class ContactNotepad extends ContactStoreElement {
         --color-widget-bg: transparent;
         --color-widget-bg-focused: transparent;
         outline: none;
-        border-radius: var(--curvature);
         display: flex;
         flex-direction: column;
+        background: var(--surface-note);
+        border: 1px solid var(--border-note);
+        border-radius: var(--r-sm);
+        box-shadow: var(--shadow-2);
+        overflow: hidden;
       }
 
       .notepad {

package/src/live/ContactPending.ts

@@ -92,6 +92,7 @@ export class ContactPending extends EndpointMonitorElement {
         display: flex;
         flex-direction: row;
         align-items: center;
+        background: var(--surface);
         box-shadow:
           0 0 8px 1px rgba(0, 0, 0, 0.055),
           0 0 0px 1px rgba(0, 0, 0, 0.02);

package/src/styles/designTokens.ts

@@ -32,9 +32,11 @@ export const designTokens = css`
     /* neutrals */
     --bg: #f6f7f9;
     --surface: #ffffff;
+    --surface-note: #fff9c2;
     --sunken: #f1f3f5;
     --border: #e6e8ec;
     --border-strong: #d2d6dc;
+    --border-note: #ebdf6f;
     --text-1: #1a1f26;
     --text-2: #4d5664;
     --text-3: #7b8593;

package/static/api/flow-labels.json

@@ -0,0 +1,31 @@
+{
+  "next": null,
+  "previous": null,
+  "results": [
+    {
+      "uuid": "fl-001",
+      "name": "Active Campaigns",
+      "count": 12
+    },
+    {
+      "uuid": "fl-002",
+      "name": "Surveys",
+      "count": 8
+    },
+    {
+      "uuid": "fl-003",
+      "name": "Onboarding",
+      "count": 4
+    },
+    {
+      "uuid": "fl-004",
+      "name": "Internal",
+      "count": 2
+    },
+    {
+      "uuid": "fl-005",
+      "name": "Archived",
+      "count": 6
+    }
+  ]
+}

package/static/css/temba-components.css

@@ -30,9 +30,11 @@
     /* neutrals */
     --bg:            #F6F7F9;
     --surface:       #FFFFFF;
+    --surface-note:  #FFF9C2;
     --sunken:        #F1F3F5;
     --border:        #E6E8EC;
     --border-strong: #D2D6DC;
+    --border-note:   #EBDF6F;
     --text-1:        #1A1F26;
     --text-2:        #4D5664;
     --text-3:        #7B8593;

package/temba-modules.ts

@@ -47,6 +47,10 @@ 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 { ContentList } from './src/list/ContentList';
+import { MsgList } from './src/list/MsgList';
+import { ContactList } from './src/list/ContactList';
+import { FlowList } from './src/list/FlowList';
 import { WebChat } from './src/webchat/WebChat';
 import { ImagePicker } from './src/form/ImagePicker';
 import { Mask } from './src/layout/Mask';
@@ -127,6 +131,10 @@ addCustomElement('temba-contact-chat', ContactChat);
 addCustomElement('temba-contact-details', ContactDetails);
 addCustomElement('temba-ticket-list', TicketList);
 addCustomElement('temba-notification-list', NotificationList);
+addCustomElement('temba-content-list', ContentList);
+addCustomElement('temba-msg-list', MsgList);
+addCustomElement('temba-contact-list', ContactList);
+addCustomElement('temba-flow-list', FlowList);
 addCustomElement('temba-list', TembaList);
 addCustomElement('temba-sortable-list', SortableList);
 addCustomElement('temba-run-list', RunList);

package/web-dev-server.config.mjs

@@ -223,6 +223,72 @@ function generateFlowMetadata(flowDefinition) {
   return generateFlowInfo(flowDefinition);
 }
 
+// In-memory state for the content-list demo so the labeling flow
+// (label, refresh, recheck) is exercisable end-to-end. The first
+// GET / POST loads from the on-disk fixture; subsequent ops mutate
+// the in-memory copy. The on-disk fixture is never written — state
+// resets on dev-server restart, which is the right default for a
+// throwaway demo.
+const demoState = {
+  messages: null,
+  flows: null,
+  labels: null,
+  flowLabels: null
+};
+
+function loadDemoJson(stateKey, filePath) {
+  if (demoState[stateKey] === null) {
+    demoState[stateKey] = JSON.parse(
+      fs.readFileSync(path.resolve(filePath), 'utf-8')
+    );
+  }
+  return demoState[stateKey];
+}
+
+/** Filter the in-memory demo items for a content-list endpoint.
+ *
+ * Supports `?label=<uuid>` (only items carrying that label) so the
+ * demo can exercise the filtered-view → label-removed → row-drops-
+ * out → recheck-selection lifecycle. */
+function getFilteredDemoItems(data, url) {
+  const labelFilter = url.searchParams.get('label');
+  let results = data.results;
+  if (labelFilter) {
+    results = results.filter((item) =>
+      (item.labels || []).some((l) => l.uuid === labelFilter)
+    );
+  }
+  return { ...data, count: results.length, results };
+}
+
+/** Apply a label-toggle to a list of in-memory items, mirroring
+ * smartmin's BulkActionMixin behavior. Body is x-www-form-urlencoded
+ * (params: action, objects[], label, add). The `idKey` is what each
+ * item is matched against (messages use numeric `id`, flows use
+ * string `uuid`). */
+function applyDemoListAction(body, items, labels, idKey) {
+  const params = new URLSearchParams(body);
+  const action = params.get('action');
+  if (action !== 'label') return;
+  const labelUuid = params.get('label');
+  const add = params.get('add') !== 'false';
+  const objectIds = params.getAll('objects');
+  const label = (labels.results || []).find((l) => l.uuid === labelUuid);
+  if (!label) return;
+  objectIds.forEach((idStr) => {
+    const lookup = idKey === 'id' ? parseInt(idStr, 10) : idStr;
+    const item = items.results.find((i) => i[idKey] === lookup);
+    if (!item) return;
+    item.labels = item.labels || [];
+    const idx = item.labels.findIndex((l) => l.uuid === labelUuid);
+    if (add && idx < 0) {
+      item.labels.push({ uuid: label.uuid, name: label.name });
+    } else if (!add && idx >= 0) {
+      item.labels.splice(idx, 1);
+    }
+  });
+}
+
 export default {
   nodeResolve: true,
   plugins: [
@@ -244,6 +310,7 @@ export default {
           const apiMappings = {
             '/api/v2/groups.json': 'groups.json',
             '/api/v2/labels.json': 'labels.json',
+            '/api/v2/flow-labels.json': 'flow-labels.json',
             '/api/v2/fields.json': 'fields.json', 
             '/api/v2/globals.json': 'globals.json',
             '/api/v2/resthooks.json': 'resthooks.json',
@@ -363,6 +430,95 @@ export default {
           return;
         }
 
+        // Serve the content-list demo messages from in-memory state
+        // so a labeling POST is reflected on the next refresh. Honors
+        // an optional `?label=<uuid>` filter for testing the filtered-
+        // view drop-out lifecycle.
+        if (
+          context.request.method === 'GET' &&
+          context.path === '/demo/components/content-list/data/messages.json'
+        ) {
+          const reqUrl = new URL(context.request.url, 'http://localhost');
+          const data = loadDemoJson(
+            'messages',
+            './demo/components/content-list/data/messages.json'
+          );
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(getFilteredDemoItems(data, reqUrl));
+          return;
+        }
+
+        // Same lifecycle for the flows list — labels carried on
+        // each flow live in flows.json; the labels themselves come
+        // from /api/v2/flow-labels.json.
+        if (
+          context.request.method === 'GET' &&
+          context.path === '/demo/components/content-list/data/flows.json'
+        ) {
+          const reqUrl = new URL(context.request.url, 'http://localhost');
+          const data = loadDemoJson(
+            'flows',
+            './demo/components/content-list/data/flows.json'
+          );
+          context.contentType = 'application/json';
+          context.body = JSON.stringify(getFilteredDemoItems(data, reqUrl));
+          return;
+        }
+
+        // Bulk-action POSTs for the content-list demo: mutate the
+        // in-memory items so the subsequent refresh actually shows
+        // the labeling change. Body is form-urlencoded as sent by
+        // ContentList.toggleLabel().
+        if (
+          context.request.method === 'POST' &&
+          context.path === '/demo/components/content-list/list-action'
+        ) {
+          return new Promise((resolve) => {
+            let body = '';
+            context.req.on('data', (chunk) => { body += chunk.toString(); });
+            context.req.on('end', () => {
+              const messages = loadDemoJson(
+                'messages',
+                './demo/components/content-list/data/messages.json'
+              );
+              const labels = loadDemoJson(
+                'labels',
+                './static/api/labels.json'
+              );
+              applyDemoListAction(body, messages, labels, 'id');
+              context.contentType = 'application/json';
+              context.status = 200;
+              context.body = JSON.stringify({ status: 'success' });
+              resolve();
+            });
+          });
+        }
+
+        if (
+          context.request.method === 'POST' &&
+          context.path === '/demo/components/content-list/flow-list-action'
+        ) {
+          return new Promise((resolve) => {
+            let body = '';
+            context.req.on('data', (chunk) => { body += chunk.toString(); });
+            context.req.on('end', () => {
+              const flows = loadDemoJson(
+                'flows',
+                './demo/components/content-list/data/flows.json'
+              );
+              const labels = loadDemoJson(
+                'flowLabels',
+                './static/api/flow-labels.json'
+              );
+              applyDemoListAction(body, flows, labels, 'uuid');
+              context.contentType = 'application/json';
+              context.status = 200;
+              context.body = JSON.stringify({ status: 'success' });
+              resolve();
+            });
+          });
+        }
+
         // Handle contact chat POST (send message) - return a mock event
         if (context.request.method === 'POST' && context.path.match(/^\/contact\/chat\/[^/]+\/$/)) {
           return new Promise((resolve) => {