@nyaruka/temba-components 0.122.0 → 0.124.0

package/.github/copilot-instructions.md

@@ -0,0 +1,181 @@
+# Copilot Development Instructions
+
+## Package Management
+
+We use **yarn** for package management. Always use yarn commands instead of npm:
+
+```bash
+# Install dependencies
+yarn install
+
+# Add new dependencies
+yarn add <package-name>
+
+# Add dev dependencies
+yarn add -D <package-name>
+```
+
+## Testing
+
+All tests are run using:
+
+```bash
+yarn test
+```
+
+To check for coverage, use:
+
+```bash
+yarn test --coverage
+```
+
+
+### Isolating Tests for Quicker Development ###
+You also can run an idividual test file to speed up development:
+
+```bash
+yarn test test/temba-textinput.test.ts
+```
+
+You can isolate a specific test within a file you are working to speed things up by updating the method in the file from it(...) to it.only(...)
+
+For example:
+```typescript
+it('can select a single option', async () => {...});
+```
+becomes..
+```typescript
+it.only('can select a single option', async () => {...});
+```
+
+By doing this and only running the individual test file, you can drastically speed up iteration while running tests.
+
+### Validation ###
+
+Before a PR is ready it must pass validation checks for linting, formatting, and tests. This will also report coverage and you need to manually verify coverage does not drop.
+
+```bash
+yarn validate
+```
+
+### Making commits
+
+Before committing always run `yarn precommit` and include any changes it makes.
+
+### Test Coverage Requirements
+
+- **100% code coverage** is expected for all code we touch
+- The aim is to maintain complete test coverage across the codebase
+- When modifying existing code, ensure all changed lines are covered by tests
+- When adding new features, write comprehensive tests that cover all reachable code paths
+- Never add tests to try to test unreachable or dead code, instead make a comment in the dead scope that it is unreachable
+
+### Test Structure
+
+Tests live under the `/test` directory and follow these patterns:
+
+1. **Import required testing utilities:**
+
+   ```typescript
+   import { fixture, assert } from '@open-wc/testing';
+   import { assertScreenshot, getClip, getComponent } from './utils.test';
+   ```
+
+2. **Test file naming:** Use the pattern `temba-{component}.test.ts`
+
+3. **Test organization:** Use `describe()` blocks for component grouping and `it()` for individual test cases
+
+4. **Test methodology:** These are ui based tests, so whenever possbile, the test should be written from the user's perspective. In other words, you should instrument a click in the browser to test behavior as a user would instead of calling instance methods on components. Instance method calling can be appropriate at times but should be used sparingly. For example, use the mouseClickElement() test method or the methods in src/untyped.d.ts for pressing keys, typing, using the mouse, etc.
+
+5. **Example Test:** A good example test to model after is `temba-textinput.test.ts`
+
+### Screenshot Testing
+
+This project includes visual regression testing through screenshot comparison:
+
+#### How Screenshot Tests Work
+
+- Screenshots are captured during test execution using Puppeteer/Chromium
+- "Truth" images are stored in `/screenshots/truth/` directory
+- Test screenshots are compared pixel-by-pixel against truth images
+- Failed comparisons generate diff images showing visual changes
+
+#### Screenshot Test Implementation
+
+```typescript
+// Take a screenshot of a component
+await assertScreenshot('component/state-name', clipRegion);
+
+// Get clipping region for a component
+const clip = getClip(element);
+
+// Custom clip adjustments if needed
+const customClip = getClip(element);
+customClip.width += 20;
+customClip.height += 10;
+```
+
+#### Critical Test Ordering
+
+**Tests must validate expected values FIRST, then screenshots:**
+
+```typescript
+it('validates component behavior', async () => {
+  const component = await getComponent('temba-example', { prop: 'value' });
+
+  // 1. FIRST: Test expected values and behavior
+  assert.instanceOf(component, ExampleComponent);
+  expect(component.prop).to.equal('value');
+  expect(component.textContent).to.contain('expected text');
+
+  // 2. SECOND: Take screenshot for visual verification
+  await assertScreenshot('example/state', getClip(component));
+});
+```
+
+This ordering ensures:
+
+- Functional correctness is verified before visual verification
+- Failed functional tests provide clearer debugging information
+- Screenshot tests serve as additional visual regression protection
+
+#### Screenshot Test Best Practices
+
+- Use descriptive names: `'component/specific-state'` not `'test1'`
+- Include sufficient context in clip regions to show component state
+- Adjust clip regions when components have dynamic sizing
+- Group related screenshots in subdirectories (e.g., `tip/left`, `tip/right`)
+
+## Development Workflow
+
+1. **Install dependencies:** `yarn install`
+2. **Start development server:** `yarn start`
+3. **Run tests during development:** `yarn test`
+4. **Pre-commit checks before committing:** `yarn pre-commit`
+5. **Validate changes:** `yarn validate`
+6. **Check Coverage:** Once validated, check for 100% coverage
+
+## Code Quality
+
+- Follow existing TypeScript patterns in the codebase
+- Use ESLint and Prettier configurations (automatically enforced)
+- Write descriptive test names and clear assertions
+- Ensure all modified code paths have corresponding test coverage
+
+## Formatting
+
+- We use prettier for formatting, review the settings in .prettierrc
+- When commmenting, if it is more than one sentence use standard case and punctuation, however for short comments, all lowercase is preferred
+
+## Component Development
+
+When creating or modifying components:
+
+1. Create/update the component implementation
+2. Write comprehensive unit tests covering all functionality
+3. Add screenshot tests for visual states
+4. Verify 100% coverage of modified code
+5. Run full test suite to ensure no regressions
+6. Make sure building for production yields no errors
+
+Remember: The goal is robust, well-tested components with both functional and visual verification.

package/.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: 'build' 
+name: 'build'
 
 on: [push]
 
@@ -9,14 +9,14 @@ jobs:
       - name: Set Timezone
         uses: szenius/set-timezone@v2.0
         with:
-          timezoneLinux: "UTC"
+          timezoneLinux: 'UTC'
       - name: Checkout (GitHub)
         uses: actions/checkout@v4
       - run: docker network create --driver bridge textit_default
       - name: Build and run dev container task
         uses: devcontainers/ci@v0.3
         with:
-          runCmd: yarn test
+          runCmd: yarn validate
           push: never
           env: |
             CI=true

package/.github/workflows/cla.yml

@@ -1,25 +1,25 @@
-name: "CLA Assistant"
+name: 'CLA Assistant'
 on:
   issue_comment:
     types: [created]
   pull_request_target:
-    types: [opened,closed,synchronize]
+    types: [opened, closed, synchronize]
 
 jobs:
   CLAssistant:
     runs-on: ubuntu-latest
     steps:
-      - name: "CLA Assistant"
+      - name: 'CLA Assistant'
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
-        uses: contributor-assistant/github-action@v2.2.0
+        uses: contributor-assistant/github-action@v2.6.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_TOKEN }}
         with:
           path-to-signatures: 'signatures/version1/cla.json'
           path-to-document: 'https://github.com/nyaruka/license/blob/main/TextIt_CLA.md'
           branch: 'main'
-          allowlist: bot*
+          allowlist: bot*,*copilot*,*github*
           remote-organization-name: 'nyaruka'
           remote-repository-name: 'legal'

package/.github/workflows/copilot-setup-steps.yml

@@ -0,0 +1,86 @@
+name: 'Copilot Setup Steps'
+
+# Triggers: Run on pull requests and pushes to prepare environment for agent tasks
+on:
+  pull_request:
+  push:
+
+jobs:
+  copilot-setup-steps:
+    # Only run when push is initiated by the Copilot agent (GitHub Actions bot)
+    # This avoids unnecessary runs on regular developer pushes
+    if: github.actor == 'github-actions[bot]'
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository code
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Setup Node.js environment with version matching the project (Node.js 20)
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # Setup Chrome browser for Puppeteer tests to avoid firewall issues
+      # This uses the official Chrome setup that handles firewall restrictions
+      - name: Setup Chrome
+        uses: browser-actions/setup-chrome@latest
+        with:
+          chrome-version: stable
+
+      # Cache yarn dependencies to speed up future runs
+      # Uses yarn.lock as the cache key for dependency consistency
+      - name: Cache yarn dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.yarn
+            node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      # Cache Puppeteer browsers to avoid repeated downloads
+      - name: Cache Puppeteer browsers
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.cache/puppeteer
+            node_modules/.cache/puppeteer
+          key: ${{ runner.os }}-puppeteer-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-puppeteer-
+
+      # Install project dependencies including Puppeteer with Chromium
+      # Now allows Puppeteer to download Chromium since we handle firewall issues
+      - name: Install dependencies
+        run: yarn install
+        env:
+          # Set Puppeteer to use system Chrome if available to avoid downloads
+          PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome-stable
+
+      # Pre-build the project to warm up the environment
+      # This compiles TypeScript, processes SVG icons, and creates distribution files
+      # - name: Build project
+      #  run: yarn build
+
+      # Run tests to ensure Puppeteer setup works correctly
+      # This validates that the browser dependencies are properly configured
+      # - name: Validate Puppeteer setup
+      #  run: yarn test --reporter=summary
+      #  env:
+      #    PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome-stable
+
+      # Cache the built output to speed up subsequent operations
+      # - name: Cache build output
+      #  uses: actions/cache@v4
+      #  with:
+      #    path: |
+      #      dist
+      #      out-tsc
+      #      static/svg/index.svg
+      #    key: ${{ runner.os }}-build-${{ github.sha }}
+      #    restore-keys: |
+      #      ${{ runner.os }}-build-

package/CHANGELOG.md

@@ -4,8 +4,52 @@ 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.124.0](https://github.com/nyaruka/temba-components/compare/v0.123.0...v0.124.0)
+
+- Add drag and drop reordering to multi-select components [`#546`](https://github.com/nyaruka/temba-components/pull/546)
+- Add comprehensive test coverage for flow components [`#548`](https://github.com/nyaruka/temba-components/pull/548)
+- Not sure this addresses the intermittent WebChat test failure, but I fundamentally agree with the changes anyways. [`#544`](https://github.com/nyaruka/temba-components/pull/544)
+- Add comprehensive tests for flow components achieving 93.97% coverage [`3261100`](https://github.com/nyaruka/temba-components/commit/32611005a53f5ccac36b88cd50d88ed507605b6b)
+- Implement new drag and drop behavior as requested - hide dragged items and fire events on drop only [`f7daecf`](https://github.com/nyaruka/temba-components/commit/f7daecf0c6737ddbecf85a4f3f726d94ffee08b8)
+- Refactor SortableList to fix drag and drop reordering logic [`4b0a901`](https://github.com/nyaruka/temba-components/commit/4b0a901c7223dcefbed9eec888493b8e322c561f)
+
+#### [v0.123.0](https://github.com/nyaruka/temba-components/compare/v0.122.0...v0.123.0)
+
+> 4 June 2025
+
+- Update commands for test and validate [`#543`](https://github.com/nyaruka/temba-components/pull/543)
+- Add comprehensive test coverage for RunList component [`#531`](https://github.com/nyaruka/temba-components/pull/531)
+- Fix screenshot tests for Copilot environment with adaptive threshold [`#538`](https://github.com/nyaruka/temba-components/pull/538)
+- Fix language setting persistence when opening new flows [`#541`](https://github.com/nyaruka/temba-components/pull/541)
+- Fix ESLint TypeScript version compatibility warning [`#536`](https://github.com/nyaruka/temba-components/pull/536)
+- Switch format command [`#534`](https://github.com/nyaruka/temba-components/pull/534)
+- Fix typescript errors, enforce build and linting for tests [`#532`](https://github.com/nyaruka/temba-components/pull/532)
+- Update copilot-instructions.md [`#533`](https://github.com/nyaruka/temba-components/pull/533)
+- Add comprehensive test coverage for utils/index.ts - achieve 100% function coverage [`#525`](https://github.com/nyaruka/temba-components/pull/525)
+- Update copilot-instructions.md [`#529`](https://github.com/nyaruka/temba-components/pull/529)
+- Update copilot-instructions.md [`#528`](https://github.com/nyaruka/temba-components/pull/528)
+- Add comprehensive test suite for Dropdown component to achieve 100% coverage [`#523`](https://github.com/nyaruka/temba-components/pull/523)
+- Remove OutboxMonitor component [`#522`](https://github.com/nyaruka/temba-components/pull/522)
+- Bump image-size from 1.1.1 to 1.2.1 [`#483`](https://github.com/nyaruka/temba-components/pull/483)
+- Bump koa from 2.15.4 to 2.16.1 [`#485`](https://github.com/nyaruka/temba-components/pull/485)
+- Add comprehensive test coverage for Toast component [`#521`](https://github.com/nyaruka/temba-components/pull/521)
+- Show "No options" message when opening select with empty options [`#505`](https://github.com/nyaruka/temba-components/pull/505)
+- Fix GitHub Actions job name: rename 'setup' to 'copilot-setup-steps' [`#520`](https://github.com/nyaruka/temba-components/pull/520)
+- Add duration formatting option to TembaChart for y-axis and tooltips [`#513`](https://github.com/nyaruka/temba-components/pull/513)
+- Add chart options for color index start and legend [`#503`](https://github.com/nyaruka/temba-components/pull/503)
+- Exclude github-copilot[bot] from CLA Assistant workflow [`#515`](https://github.com/nyaruka/temba-components/pull/515)
+- Restrict copilot-setup-steps workflow to run only on GitHub Actions bot pushes [`#514`](https://github.com/nyaruka/temba-components/pull/514)
+- Add copilot-instructions.md with comprehensive development guidelines [`#512`](https://github.com/nyaruka/temba-components/pull/512)
+- Add Copilot to CLA allowlist to ignore GitHub Copilot PRs [`#509`](https://github.com/nyaruka/temba-components/pull/509)
+- Add GitHub Actions workflow for Copilot environment setup [`#508`](https://github.com/nyaruka/temba-components/pull/508)
+- Add pre-commit [`a4d2c29`](https://github.com/nyaruka/temba-components/commit/a4d2c295bbd113a9310421547a35af553971b8c6)
+- merge [`76161ae`](https://github.com/nyaruka/temba-components/commit/76161ae9aeaa2dcc28f09ed127661395fea87e28)
+- Add comprehensive test coverage for utils/index.ts functions [`389a84b`](https://github.com/nyaruka/temba-components/commit/389a84ba68785b783fff2a1bdc276443f6b3f12c)
+
 #### [v0.122.0](https://github.com/nyaruka/temba-components/compare/v0.121.7...v0.122.0)
 
+> 28 May 2025
+
 - Basic chart with auto-summing of unsplit data [`#501`](https://github.com/nyaruka/temba-components/pull/501)
 - Add temba-chart [`fe311df`](https://github.com/nyaruka/temba-components/commit/fe311df264ad5c57f58c87c5a67e2d0b4e3edd37)
 - Fix bad merge [`f10e475`](https://github.com/nyaruka/temba-components/commit/f10e475fcc3dc316708340686b0d7f235cf918e7)

package/demo/drag-drop-demo.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Multi-Select Drag and Drop Demo</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <style>
+        body { 
+            font-family: sans-serif; 
+            padding: 20px; 
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .example { 
+            margin: 30px 0; 
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+        }
+        .example h3 {
+            margin-top: 0;
+            color: #333;
+        }
+        .example p {
+            color: #666;
+            margin-bottom: 15px;
+        }
+        .expected {
+            background-color: #f0f8ff;
+            padding: 10px;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+        .expected strong {
+            color: #006400;
+        }
+    </style>
+</head>
+<body>
+    <h1>Multi-Select Drag and Drop Demo</h1>
+    <p>This demo shows the drag and drop reordering functionality for multi-select components.</p>
+    
+    <div class="example">
+        <h3>With 3 items (drag and drop enabled)</h3>
+        <p>This multi-select has 3 pre-selected items. You should be able to drag and drop to reorder them.</p>
+        <temba-select multi searchable id="test3" placeholder="Select colors">
+            <temba-option name="Red" value="0" selected></temba-option>
+            <temba-option name="Green" value="1" selected></temba-option>
+            <temba-option name="Blue" value="2" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>Items should be wrapped in a sortable container</li>
+                <li>Drag an item to see a ghost element following the mouse</li>
+                <li>Drop on another item to swap their positions</li>
+                <li>Drop outside to cancel the operation</li>
+                <li>Items should maintain cursor style when hovering</li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="example">
+        <h3>With 2 items (drag and drop enabled)</h3>
+        <p>This multi-select has 2 pre-selected items. You should be able to drag and drop to reorder them.</p>
+        <temba-select multi id="test2" placeholder="Select fruits">
+            <temba-option name="Apple" value="apple" selected></temba-option>
+            <temba-option name="Banana" value="banana" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>Same drag and drop functionality as above</li>
+                <li>Swapping the two items should work</li>
+            </ul>
+        </div>
+    </div>
+    
+    <div class="example">
+        <h3>With 1 item (no drag and drop)</h3>
+        <p>This multi-select has only 1 pre-selected item. Drag and drop should not be enabled.</p>
+        <temba-select multi id="test1" placeholder="Select an item">
+            <temba-option name="Solo" value="solo" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>No sortable container should be present</li>
+                <li>Normal multi-select appearance and behavior</li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="example">
+        <h3>Regular single select (no drag and drop)</h3>
+        <p>This is a regular single-select. Drag and drop should not be enabled.</p>
+        <temba-select id="single">
+            <temba-option name="Option 1" value="1" selected></temba-option>
+        </temba-select>
+        <div class="expected">
+            <strong>Expected behavior:</strong>
+            <ul>
+                <li>Normal single-select appearance and behavior</li>
+                <li>No sortable functionality</li>
+            </ul>
+        </div>
+    </div>
+    
+    <script>
+        // Add event listeners to monitor changes
+        document.querySelectorAll('temba-select[multi]').forEach(select => {
+            select.addEventListener('change', () => {
+                 console.log(`${select.id} values changed:`, select.values);
+            });
+        });
+        
+        // Log initial state after components load
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                console.log('=== Initial State ===');
+                document.querySelectorAll('temba-select').forEach(select => {
+                    const sortableList = select.shadowRoot?.querySelector('temba-sortable-list');
+                    console.log(`${select.id}:`, {
+                        values: select.values,
+                        hasSortableList: !!sortableList,
+                        isMulti: select.hasAttribute('multi')
+                    });
+                });
+            }, 500);
+        });
+    </script>
+
+    <script type="module">
+      import '../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/index.html

@@ -138,6 +138,23 @@
   </head>
 
   <body>
+    <script>
+      // Initialize duration chart when DOM is loaded
+      document.addEventListener('DOMContentLoaded', function() {
+        const durationChart = document.getElementById('duration-chart');
+        if (durationChart) {
+          // Sample data with durations in seconds from the issue examples
+          durationChart.data = {
+            labels: ['Process A', 'Process B', 'Process C', 'Process D', 'Process E'],
+            datasets: [{
+              label: 'Processing Time',
+              data: [68787, 958000, 3661, 120, 86400] // seconds: 19h6m, 11d2h, 1h1m, 2m, 1d
+            }]
+          };
+          console.log('Duration chart initialized with formatDuration:', durationChart.formatDuration);
+        }
+      });
+    </script>
     <temba-webchat
       channel="967cd415-8616-4b11-b38f-60f70e0999f4"
     ></temba-webchat>
@@ -177,6 +194,13 @@
   <temba-tabs collapses index="0">
     <temba-tab name="Overview" icon="default">
       <temba-chart style="margin-bottom:8px"></temba-chart>
+      
+      <!-- Chart with duration formatting -->
+      <div style="margin: 20px 0;">
+        <h3>Duration Formatted Chart</h3>
+        <temba-chart id="duration-chart" style="margin-bottom:8px" format-duration header="Process Times"></temba-chart>
+      </div>
+      
       <temba-progress style="margin-bottom:8px" total="100" current="25" eta="2030-09-17T07:00:00.000Z"></temba-progress>
         <temba-checkbox label="Check this out" checked></temba-checkbox>
         <temba-select placeholder="Select a color" clearable>
@@ -348,6 +372,21 @@
           </temba-select>
         </div>
 
+        <div class="example">
+          <h3>Multi-select with 3 items (Drag and Drop Test)</h3>
+          <temba-select
+            placeholder="Select colors"
+            values='[{"name":"Red","value":"0"},{"name":"Green","value":"1"},{"name":"Blue","value":"2"}]'
+            multi
+          >
+            <temba-option name="Red" value="0"></temba-option>
+            <temba-option name="Green" value="1"></temba-option>
+            <temba-option name="Blue" value="2"></temba-option>
+            <temba-option name="Yellow" value="3"></temba-option>
+            <temba-option name="Purple" value="4"></temba-option>
+          </temba-select>
+        </div>
+
         <div class="example">
           <script>
             function toggleSelect(evt) {
@@ -372,6 +411,24 @@
             </temba-select>
           </div>
         </div>
+
+        <div class="example">
+          <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Select (No Options)</label>
+          <temba-select placeholder="Click to see empty state">
+          </temba-select>
+        </div>
+
+        <div class="example">
+          <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Searchable Select</label>
+          <temba-select placeholder="Search for options" searchable>
+          </temba-select>
+        </div>
+
+        <div class="example">
+          <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Multi Select</label>
+          <temba-select placeholder="Select multiple options" multi>
+          </temba-select>
+        </div>
       </temba-tab>
 
       <temba-tab name="textinput" icon="edit-05">