@nyaruka/temba-components 0.123.0 → 0.124.1

package/.github/copilot-instructions.md

@@ -29,12 +29,29 @@ To check for coverage, use:
 yarn test --coverage
 ```
 
-You also can run an idividual test to speed up development
+
+### 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
@@ -133,9 +150,10 @@ This ordering ensures:
 
 1. **Install dependencies:** `yarn install`
 2. **Start development server:** `yarn start`
-3. **Run tests during development:** `yarn test:watch`
-4. **Lint code:** `yarn lint`
-5. **Build for production:** `yarn build`
+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
 

package/CHANGELOG.md

@@ -4,8 +4,29 @@ 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.1](https://github.com/nyaruka/temba-components/compare/v0.124.0...v0.124.1)
+
+- Fix display issue with Select using tags - preserve selected item text in multi-select mode [`#557`](https://github.com/nyaruka/temba-components/pull/557)
+- Break out component demos into separate pages and remove storybook [`#551`](https://github.com/nyaruka/temba-components/pull/551)
+- Final validation completed - Select tags display issue resolved [`e8fbccd`](https://github.com/nyaruka/temba-components/commit/e8fbccd28f317d6a3658fb105db8beb7915a6891)
+- Initial plan for issue [`7ea25d1`](https://github.com/nyaruka/temba-components/commit/7ea25d126f3048efeb47181ff428f2e142f79f07)
+- Merge pull request #553 from nyaruka/copilot/fix-bb017bcf-1d98-4d9d-bb9c-4d985d422ad6 [`79bd1c5`](https://github.com/nyaruka/temba-components/commit/79bd1c594eade8028bef3415851eaa8754718238)
+
+#### [v0.124.0](https://github.com/nyaruka/temba-components/compare/v0.123.0...v0.124.0)
+
+> 6 June 2025
+
+- 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)

package/TEST_OPTIMIZATION.md

@@ -0,0 +1,158 @@
+# Test Suite Optimization Guide
+
+This document outlines strategies for running tests efficiently and optimizing developer feedback cycles.
+
+## Quick Test Commands
+
+### Fast Test Execution
+```bash
+# Run tests in fast mode (skips network idle waits)
+yarn test:fast
+
+# Run only unit tests (excludes visual regression tests)
+yarn test:unit
+
+# Watch mode for iterative development
+yarn test:watch
+```
+
+### Coverage and Validation
+```bash
+# Full test suite with coverage
+yarn test --coverage
+
+# Complete validation (formatting, build, tests)
+yarn validate
+```
+
+## Test Categories
+
+### Unit Tests
+- Fast execution (< 1s per test)
+- No visual screenshots
+- Focus on component logic and behavior
+
+### Visual Regression Tests
+- Screenshot comparisons
+- Slower execution due to image processing
+- Use `assertScreenshot()` helper
+
+## Performance Optimizations
+
+### 1. Timeout Configurations
+- Default test timeout: 5s (reduced from 10s)
+- Concurrency: 4 parallel browsers
+- Network idle wait: 100ms + 1s timeout (when enabled)
+
+### 2. Fast Mode Features
+- Pass `--fast` flag to skip network idle waits
+- Reduced screenshot comparison timeouts
+- Optimized clock tick intervals in fake timer tests
+
+### 3. Helper Function Optimizations
+- `openSelect()`: 25ms wait (reduced from 100ms)
+- `openAndClick()`: 25ms clock tick (reduced from 50ms)
+- Toast test timeouts: 75ms (reduced from 150ms)
+
+### 4. Development Best Practices
+
+#### Use Minimal Waits
+```typescript
+// Good: Use updateComplete when possible
+await component.updateComplete;
+
+// Acceptable: Short timeouts when necessary
+await new Promise(resolve => setTimeout(resolve, 25));
+
+// Avoid: Long arbitrary waits
+await new Promise(resolve => setTimeout(resolve, 500));
+```
+
+#### Optimize Clock Usage
+```typescript
+// Good: Run all pending timers
+clock.runAll();
+
+// Good: Minimal specific ticks
+clock.tick(25);
+
+// Avoid: Large clock advances
+clock.tick(1000);
+```
+
+#### Efficient Screenshot Testing
+```typescript
+// Good: Test behavior first, then screenshot
+expect(component.property).to.equal(expectedValue);
+await assertScreenshot('component/state', getClip(component));
+
+// Good: Group related visual states
+await assertScreenshot('select/open', getClipWithOptions(select));
+```
+
+## Running Subsets of Tests
+
+### Individual Test Files
+```bash
+# Run specific test file
+yarn test test/temba-select.test.ts
+
+# Run multiple specific files
+yarn test test/temba-select.test.ts test/temba-list.test.ts
+```
+
+### Isolating Tests During Development
+Use `it.only()` to focus on specific tests:
+
+```typescript
+// Run only this test
+it.only('should handle specific case', async () => {
+  // test implementation
+});
+
+// Skip this test
+it.skip('should handle edge case', async () => {
+  // test implementation
+});
+```
+
+## Environment-Specific Behavior
+
+### Copilot Environment
+- Higher screenshot comparison thresholds (1.0 vs 0.1)
+- Automatic detection via environment variables
+- Adaptive timeout handling
+
+### CI Environment
+- Standard screenshot comparison
+- Full network idle waits
+- Complete test suite execution
+
+## Performance Monitoring
+
+### Timing Analysis
+Monitor test execution times to identify slow tests:
+
+```bash
+# Time full test suite
+time yarn test
+
+# Profile individual test files
+time yarn test test/specific-file.test.ts
+```
+
+### Common Performance Issues
+1. **Excessive timeouts**: Replace with `updateComplete` where possible
+2. **Redundant screenshots**: Group similar visual states
+3. **Network waits**: Use fast mode for unit-focused testing
+4. **Large clock advances**: Use minimal tick values
+
+## Best Practices Summary
+
+1. **Start with fast mode** during development
+2. **Use unit tests** for rapid iteration
+3. **Reserve full suite** for final validation
+4. **Group visual tests** by component/feature
+5. **Minimize wait times** in test helpers
+6. **Leverage concurrency** with parallel execution
+7. **Monitor and profile** slow tests regularly

package/demo/alert/example.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Alert Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Alert Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    
+    <div class="example">
+        <h3>Basic Alert</h3>
+        <p>A simple alert component</p>
+        <temba-alert>This is a basic alert message.</temba-alert>
+    </div>
+
+    <div class="example">
+        <h3>Success Alert</h3>
+        <p>An alert for successful actions</p>
+        <temba-alert level="success">Your changes have been saved successfully!</temba-alert>
+    </div>
+
+    <div class="example">
+        <h3>Warning Alert</h3>
+        <p>An alert for warning messages</p>
+        <temba-alert level="warning">Please review your input before proceeding.</temba-alert>
+    </div>
+
+    <div class="example">
+        <h3>Error Alert</h3>
+        <p>An alert for error messages</p>
+        <temba-alert level="error">An error occurred while processing your request.</temba-alert>
+    </div>
+
+    <div class="example">
+        <h3>Info Alert</h3>
+        <p>An alert for informational messages</p>
+        <temba-alert level="info">This feature is currently in beta testing.</temba-alert>
+    </div>
+
+    <div class="example">
+        <h3>Dismissible Alert</h3>
+        <p>An alert that can be closed</p>
+        <temba-alert dismissible>This alert can be dismissed by clicking the X button.</temba-alert>
+    </div>
+
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/button/example.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <title>Button Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link href="../styles.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <h1>Button Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+
+    <div class="example">
+      <h3>Basic Button</h3>
+      <p>A simple button component</p>
+      <temba-button name="Click Me"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Primary Button</h3>
+      <p>A primary styled button</p>
+      <temba-button primary name="Primary Action"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Secondary Button</h3>
+      <p>A secondary styled button</p>
+      <temba-button secondary name="Secondary Action"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Small Button</h3>
+      <p>A smaller button variant</p>
+      <temba-button small name="Small Button"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Disabled Button</h3>
+      <p>A button that cannot be clicked</p>
+      <temba-button disabled name="Disabled Button"></temba-button>
+    </div>
+
+    <div class="example">
+      <h3>Multiple Buttons</h3>
+      <p>Several buttons in a row with proper constraints</p>
+      <div style="display: flex; gap: 10px; flex-wrap: wrap; max-width: 400px">
+        <div style="flex: 0 0 auto; max-width: 100px">
+          <temba-button name="Save"></temba-button>
+        </div>
+        <div style="flex: 0 0 auto; max-width: 100px">
+          <temba-button secondary name="Cancel"></temba-button>
+        </div>
+        <div style="flex: 0 0 auto; max-width: 100px">
+          <temba-button primary name="Submit"></temba-button>
+        </div>
+      </div>
+    </div>
+
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+  </body>
+</html>

package/demo/chart/example.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Chart Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <temba-store></temba-store>
+    <h1>Chart Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    
+    <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>
+    </div>
+
+    <div class="example">
+        <h3>Summation with Splits</h3>
+        <p>Normal summation, but with optional splits in the config options </p>
+        <temba-chart url="../data/server/opened-tickets.json" dataname="Tickets" config legend></temba-chart>
+    </div>
+
+    <div class="example">
+        <h3>Summation with Configured Splits</h3>
+        <p>Normal summation, but with configured splits</p>
+        <temba-chart url="../data/server/opened-tickets.json" dataname="Tickets" splits="Tracking,Orders" hideother legend></temba-chart>
+    </div>
+
+    <div class="example">
+        <h3>Duration Formatted Chart</h3>
+        <p>This chart expects series data in seconds and displays them as durations on the y axis and in tooltips.</p>
+        <temba-chart single dataname="Average Response" formatDuration header="Response Time" url="../data/server/response-time.json"></temba-chart>
+        <p>Here is the same duration chart, but as a line chart</p>
+        <temba-chart style="margin:2em" chartType="line" single dataName="Average Response" formatDuration url="../data/server/response-time.json"></temba-chart>
+    </div>  
+
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/checkbox/example.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Checkbox Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Checkbox Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    
+    <div class="example">
+        <h3>Basic Checkbox</h3>
+        <p>A simple checkbox component</p>
+        <temba-checkbox label="Check this out" checked></temba-checkbox>
+    </div>
+
+    <div class="example">
+        <h3>Unchecked Checkbox</h3>
+        <p>A checkbox that starts unchecked</p>
+        <temba-checkbox label="This is not checked"></temba-checkbox>
+    </div>
+
+    <div class="example">
+        <h3>Checkbox with Help Text</h3>
+        <p>A checkbox with additional help text</p>
+        <temba-checkbox
+            name="schedule"
+            label="Schedule for later delivery"
+            help_text="This is something you should think long and hard about"
+        ></temba-checkbox>
+    </div>
+
+    <div class="example">
+        <h3>Disabled Checkbox</h3>
+        <p>A checkbox that cannot be changed</p>
+        <temba-checkbox
+            name="disabled"
+            label="You can't check this one"
+            help_text="It is disabled, don't click it"
+            disabled
+        ></temba-checkbox>
+    </div>
+
+    <div class="example">
+        <h3>Multiple Checkboxes</h3>
+        <p>Several checkboxes in a row</p>
+        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
+            <temba-checkbox label="Option 1" checked></temba-checkbox>
+            <temba-checkbox label="Option 2"></temba-checkbox>
+            <temba-checkbox label="Option 3" checked></temba-checkbox>
+        </div>
+    </div>
+
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

package/demo/compose/example.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+<head>
+    <meta charset="utf-8" />
+    <title>Compose Examples</title>
+    <link
+      href="/static/css/temba-components.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
+      rel="stylesheet"
+    />
+    <link
+      href="../styles.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+</head>
+<body>
+    <h1>Compose Examples</h1>
+    <p><a href="../index.html">← Back to main demo</a></p>
+    
+    <div class="example">
+        <h3>Basic Compose</h3>
+        <p>A simple compose component for text input</p>
+        <temba-compose placeholder="Type your message here..."></temba-compose>
+    </div>
+
+    <div class="example">
+        <h3>Compose with Counter</h3>
+        <p>A compose component with character counting</p>
+        <temba-compose 
+            placeholder="Enter your message (max 160 characters)..."
+            counter
+            maxlength="160">
+        </temba-compose>
+    </div>
+
+    <div class="example">
+        <h3>Compose with Attachments</h3>
+        <p>A compose component that supports file attachments</p>
+        <temba-compose 
+            placeholder="Write your message and attach files..."
+            attachments>
+        </temba-compose>
+    </div>
+
+    <div class="example">
+        <h3>Rich Text Compose</h3>
+        <p>A compose component with rich text formatting</p>
+        <temba-compose 
+            placeholder="Format your text with rich editing..."
+            rich-text>
+        </temba-compose>
+    </div>
+
+    <div class="example">
+        <h3>Multi-line Compose</h3>
+        <p>A compose component with multiple lines</p>
+        <temba-compose 
+            placeholder="Enter a longer message..."
+            rows="4">
+        </temba-compose>
+    </div>
+
+    <script type="module">
+      import '../../out-tsc/temba-modules.js';
+    </script>
+</body>
+</html>

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

@@ -0,0 +1,40 @@
+{
+  "period": ["2025-03-08", "2025-06-07"],
+  "data": {
+    "labels": [
+      "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": [1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+      },
+      {
+        "label": "VIPs",
+        "data": [2, 7, 5, 5, 2, 1, 8, 5, 0, 1, 3]
+      },
+      {
+        "label": "Orders",
+        "data": [51, 84, 71, 78, 44, 45, 106, 114, 138, 125, 83]
+      },
+      {
+        "label": "Survey",
+        "data": [7, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+      },
+      {
+        "label": "Tracking",
+        "data": [10, 26, 28, 43, 16, 10, 36, 24, 18, 26, 9]
+      }
+    ]
+  }
+}

package/demo/data/server/response-time.json

@@ -0,0 +1,27 @@
+{
+  "period": ["2025-03-08", "2025-06-07"],
+  "data": {
+    "labels": [
+      "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": "Response Time",
+        "data": [
+          101257, 109886, 93681, 78496, 106132, 84003, 74701, 71462, 61138,
+          31112, 7231
+        ]
+      }
+    ]
+  }
+}