@nyaruka/temba-components 0.122.0 → 0.123.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (224) hide show
  1. package/.github/copilot-instructions.md +163 -0
  2. package/.github/workflows/build.yml +3 -3
  3. package/.github/workflows/cla.yml +6 -6
  4. package/.github/workflows/copilot-setup-steps.yml +86 -0
  5. package/CHANGELOG.md +33 -0
  6. package/demo/index.html +42 -0
  7. package/dist/locales/es.js +1 -0
  8. package/dist/locales/es.js.map +1 -1
  9. package/dist/locales/fr.js +1 -0
  10. package/dist/locales/fr.js.map +1 -1
  11. package/dist/locales/pt.js +1 -0
  12. package/dist/locales/pt.js.map +1 -1
  13. package/dist/temba-components.js +59 -72
  14. package/dist/temba-components.js.map +1 -1
  15. package/out-tsc/src/chart/TembaChart.js +81 -14
  16. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  17. package/out-tsc/src/list/RunList.js +13 -8
  18. package/out-tsc/src/list/RunList.js.map +1 -1
  19. package/out-tsc/src/locales/es.js +1 -0
  20. package/out-tsc/src/locales/es.js.map +1 -1
  21. package/out-tsc/src/locales/fr.js +1 -0
  22. package/out-tsc/src/locales/fr.js.map +1 -1
  23. package/out-tsc/src/locales/pt.js +1 -0
  24. package/out-tsc/src/locales/pt.js.map +1 -1
  25. package/out-tsc/src/options/Options.js +36 -13
  26. package/out-tsc/src/options/Options.js.map +1 -1
  27. package/out-tsc/src/select/Select.js +28 -5
  28. package/out-tsc/src/select/Select.js.map +1 -1
  29. package/out-tsc/src/store/AppState.js +3 -3
  30. package/out-tsc/src/store/AppState.js.map +1 -1
  31. package/out-tsc/src/utils/index.js +6 -1
  32. package/out-tsc/src/utils/index.js.map +1 -1
  33. package/out-tsc/src/vectoricon/VectorIcon.js +2 -1
  34. package/out-tsc/src/vectoricon/VectorIcon.js.map +1 -1
  35. package/out-tsc/temba-modules.js +0 -2
  36. package/out-tsc/temba-modules.js.map +1 -1
  37. package/out-tsc/test/temba-appstate-language.test.js +176 -0
  38. package/out-tsc/test/temba-appstate-language.test.js.map +1 -0
  39. package/out-tsc/test/temba-chart.test.js +125 -0
  40. package/out-tsc/test/temba-chart.test.js.map +1 -1
  41. package/out-tsc/test/temba-dropdown.test.js +317 -0
  42. package/out-tsc/test/temba-dropdown.test.js.map +1 -0
  43. package/out-tsc/test/temba-run-list.test.js +588 -0
  44. package/out-tsc/test/temba-run-list.test.js.map +1 -0
  45. package/out-tsc/test/temba-select.test.js +16 -0
  46. package/out-tsc/test/temba-select.test.js.map +1 -1
  47. package/out-tsc/test/temba-toast.test.js +299 -0
  48. package/out-tsc/test/temba-toast.test.js.map +1 -0
  49. package/out-tsc/test/temba-utils-index.test.js +1178 -0
  50. package/out-tsc/test/temba-utils-index.test.js.map +1 -0
  51. package/out-tsc/test/temba-webchat.test.js +816 -0
  52. package/out-tsc/test/temba-webchat.test.js.map +1 -0
  53. package/out-tsc/test/utils.test.js +3 -1
  54. package/out-tsc/test/utils.test.js.map +1 -1
  55. package/package.json +6 -8
  56. package/screenshots/truth/alert/error.png +0 -0
  57. package/screenshots/truth/alert/info.png +0 -0
  58. package/screenshots/truth/alert/warning.png +0 -0
  59. package/screenshots/truth/checkbox/checkbox-label-background-hover.png +0 -0
  60. package/screenshots/truth/checkbox/checked.png +0 -0
  61. package/screenshots/truth/checkbox/default.png +0 -0
  62. package/screenshots/truth/colorpicker/default.png +0 -0
  63. package/screenshots/truth/colorpicker/focused.png +0 -0
  64. package/screenshots/truth/colorpicker/initialized.png +0 -0
  65. package/screenshots/truth/colorpicker/selected.png +0 -0
  66. package/screenshots/truth/compose/attachments-tab.png +0 -0
  67. package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
  68. package/screenshots/truth/compose/attachments-with-files.png +0 -0
  69. package/screenshots/truth/compose/intial-text.png +0 -0
  70. package/screenshots/truth/compose/no-counter.png +0 -0
  71. package/screenshots/truth/compose/wraps-text-and-spaces.png +0 -0
  72. package/screenshots/truth/compose/wraps-text-and-url.png +0 -0
  73. package/screenshots/truth/compose/wraps-text-no-spaces.png +0 -0
  74. package/screenshots/truth/contacts/badges.png +0 -0
  75. package/screenshots/truth/contacts/chat-failure.png +0 -0
  76. package/screenshots/truth/contacts/chat-for-active-contact.png +0 -0
  77. package/screenshots/truth/contacts/chat-for-archived-contact.png +0 -0
  78. package/screenshots/truth/contacts/chat-for-blocked-contact.png +0 -0
  79. package/screenshots/truth/contacts/chat-for-stopped-contact.png +0 -0
  80. package/screenshots/truth/contacts/chat-sends-attachments-only.png +0 -0
  81. package/screenshots/truth/contacts/chat-sends-text-and-attachments.png +0 -0
  82. package/screenshots/truth/contacts/chat-sends-text-only.png +0 -0
  83. package/screenshots/truth/content-menu/button-no-items.png +0 -0
  84. package/screenshots/truth/content-menu/items-and-buttons.png +0 -0
  85. package/screenshots/truth/counter/summary.png +0 -0
  86. package/screenshots/truth/counter/text.png +0 -0
  87. package/screenshots/truth/counter/unicode-variables.png +0 -0
  88. package/screenshots/truth/counter/unicode.png +0 -0
  89. package/screenshots/truth/counter/variable.png +0 -0
  90. package/screenshots/truth/date/date-inline.png +0 -0
  91. package/screenshots/truth/date/date.png +0 -0
  92. package/screenshots/truth/date/datetime.png +0 -0
  93. package/screenshots/truth/date/duration.png +0 -0
  94. package/screenshots/truth/date/timedate.png +0 -0
  95. package/screenshots/truth/datepicker/date-truncated-time.png +0 -0
  96. package/screenshots/truth/datepicker/date.png +0 -0
  97. package/screenshots/truth/datepicker/initial-timezone.png +0 -0
  98. package/screenshots/truth/datepicker/updated-keyboard-date.png +0 -0
  99. package/screenshots/truth/dialog/focused.png +0 -0
  100. package/screenshots/truth/dropdown/after-blur.png +0 -0
  101. package/screenshots/truth/dropdown/bottom-edge-collision.png +0 -0
  102. package/screenshots/truth/dropdown/custom-arrow-size.png +0 -0
  103. package/screenshots/truth/dropdown/default.png +0 -0
  104. package/screenshots/truth/dropdown/narrow-toggle.png +0 -0
  105. package/screenshots/truth/dropdown/no-mask.png +0 -0
  106. package/screenshots/truth/dropdown/opened.png +0 -0
  107. package/screenshots/truth/dropdown/positioned.png +0 -0
  108. package/screenshots/truth/dropdown/right-edge-collision.png +0 -0
  109. package/screenshots/truth/dropdown/with-mask.png +0 -0
  110. package/screenshots/truth/label/custom.png +0 -0
  111. package/screenshots/truth/label/danger.png +0 -0
  112. package/screenshots/truth/label/dark.png +0 -0
  113. package/screenshots/truth/label/default-icon.png +0 -0
  114. package/screenshots/truth/label/no-icon.png +0 -0
  115. package/screenshots/truth/label/primary.png +0 -0
  116. package/screenshots/truth/label/secondary.png +0 -0
  117. package/screenshots/truth/label/shadow.png +0 -0
  118. package/screenshots/truth/label/tertiary.png +0 -0
  119. package/screenshots/truth/lightbox/img-zoomed.png +0 -0
  120. package/screenshots/truth/list/fields-dragging.png +0 -0
  121. package/screenshots/truth/list/fields-filtered.png +0 -0
  122. package/screenshots/truth/list/fields-hovered.png +0 -0
  123. package/screenshots/truth/list/fields.png +0 -0
  124. package/screenshots/truth/list/items-selected.png +0 -0
  125. package/screenshots/truth/list/items-updated.png +0 -0
  126. package/screenshots/truth/list/items.png +0 -0
  127. package/screenshots/truth/list/sortable-dragging.png +0 -0
  128. package/screenshots/truth/list/sortable-dropped.png +0 -0
  129. package/screenshots/truth/list/sortable.png +0 -0
  130. package/screenshots/truth/menu/menu-focused-with items.png +0 -0
  131. package/screenshots/truth/menu/menu-refresh-1.png +0 -0
  132. package/screenshots/truth/menu/menu-refresh-2.png +0 -0
  133. package/screenshots/truth/menu/menu-root.png +0 -0
  134. package/screenshots/truth/menu/menu-submenu.png +0 -0
  135. package/screenshots/truth/menu/menu-tasks-nextup.png +0 -0
  136. package/screenshots/truth/menu/menu-tasks.png +0 -0
  137. package/screenshots/truth/modax/form.png +0 -0
  138. package/screenshots/truth/modax/simple.png +0 -0
  139. package/screenshots/truth/omnibox/selected.png +0 -0
  140. package/screenshots/truth/options/block.png +0 -0
  141. package/screenshots/truth/run-list/basic.png +0 -0
  142. package/screenshots/truth/select/disabled-multi-selection.png +0 -0
  143. package/screenshots/truth/select/disabled-selection.png +0 -0
  144. package/screenshots/truth/select/disabled.png +0 -0
  145. package/screenshots/truth/select/embedded.png +0 -0
  146. package/screenshots/truth/select/empty-options.png +0 -0
  147. package/screenshots/truth/select/expression-selected.png +0 -0
  148. package/screenshots/truth/select/expressions.png +0 -0
  149. package/screenshots/truth/select/functions.png +0 -0
  150. package/screenshots/truth/select/local-options.png +0 -0
  151. package/screenshots/truth/select/multi-with-endpoint.png +0 -0
  152. package/screenshots/truth/select/multiple-initial-values.png +0 -0
  153. package/screenshots/truth/select/remote-options.png +0 -0
  154. package/screenshots/truth/select/search-enabled.png +0 -0
  155. package/screenshots/truth/select/search-multi-no-matches.png +0 -0
  156. package/screenshots/truth/select/search-selected-focus.png +0 -0
  157. package/screenshots/truth/select/search-selected.png +0 -0
  158. package/screenshots/truth/select/search-with-selected.png +0 -0
  159. package/screenshots/truth/select/searching.png +0 -0
  160. package/screenshots/truth/select/selected-multi-maxitems-reached.png +0 -0
  161. package/screenshots/truth/select/selected-multi.png +0 -0
  162. package/screenshots/truth/select/selected-single.png +0 -0
  163. package/screenshots/truth/select/selection-clearable.png +0 -0
  164. package/screenshots/truth/select/static-initial-value.png +0 -0
  165. package/screenshots/truth/select/static-initial-via-selected.png +0 -0
  166. package/screenshots/truth/select/truncated-selection.png +0 -0
  167. package/screenshots/truth/select/with-placeholder.png +0 -0
  168. package/screenshots/truth/select/without-placeholder.png +0 -0
  169. package/screenshots/truth/slider/custom-min-custom-max-valid-value.png +0 -0
  170. package/screenshots/truth/slider/custom-min-default-max-no-value.png +0 -0
  171. package/screenshots/truth/slider/default-min-custom-max-no-value.png +0 -0
  172. package/screenshots/truth/slider/default-min-default-max-invalid-value.png +0 -0
  173. package/screenshots/truth/slider/default-min-default-max-valid-value.png +0 -0
  174. package/screenshots/truth/slider/update-slider-on-value-change.png +0 -0
  175. package/screenshots/truth/templates/default.png +0 -0
  176. package/screenshots/truth/templates/unapproved.png +0 -0
  177. package/screenshots/truth/textinput/input-disabled.png +0 -0
  178. package/screenshots/truth/textinput/input-focused.png +0 -0
  179. package/screenshots/truth/textinput/input-form.png +0 -0
  180. package/screenshots/truth/textinput/input-inserted.png +0 -0
  181. package/screenshots/truth/textinput/input-placeholder.png +0 -0
  182. package/screenshots/truth/textinput/input-updated.png +0 -0
  183. package/screenshots/truth/textinput/input.png +0 -0
  184. package/screenshots/truth/textinput/textarea-focused.png +0 -0
  185. package/screenshots/truth/textinput/textarea.png +0 -0
  186. package/screenshots/truth/tip/bottom.png +0 -0
  187. package/screenshots/truth/tip/left.png +0 -0
  188. package/screenshots/truth/tip/right.png +0 -0
  189. package/screenshots/truth/tip/top.png +0 -0
  190. package/screenshots/truth/webchat/closed-widget.png +0 -0
  191. package/screenshots/truth/webchat/connected-state.png +0 -0
  192. package/screenshots/truth/webchat/connecting-state.png +0 -0
  193. package/screenshots/truth/webchat/disconnected-state.png +0 -0
  194. package/screenshots/truth/webchat/opened-widget.png +0 -0
  195. package/src/chart/TembaChart.ts +86 -15
  196. package/src/list/RunList.ts +11 -8
  197. package/src/locales/es.ts +1 -0
  198. package/src/locales/fr.ts +1 -0
  199. package/src/locales/pt.ts +1 -0
  200. package/src/options/Options.ts +38 -13
  201. package/src/select/Select.ts +32 -5
  202. package/src/store/AppState.ts +3 -3
  203. package/src/utils/index.ts +17 -5
  204. package/src/vectoricon/VectorIcon.ts +2 -1
  205. package/temba-modules.ts +0 -2
  206. package/test/temba-appstate-language.test.ts +218 -0
  207. package/test/temba-chart.test.ts +161 -1
  208. package/test/temba-dropdown.test.ts +444 -0
  209. package/test/temba-run-list.test.ts +774 -0
  210. package/test/temba-select.test.ts +27 -0
  211. package/test/temba-toast.test.ts +386 -0
  212. package/test/temba-utils-index.test.ts +1547 -0
  213. package/test/temba-webchat.test.ts +1095 -0
  214. package/test/utils.test.ts +4 -2
  215. package/test-assets/list/flow-results.json +17 -0
  216. package/test-assets/list/runs.json +126 -0
  217. package/test-assets/style.css +23 -0
  218. package/web-test-runner.config.mjs +33 -7
  219. package/xliff/es.xlf +3 -0
  220. package/xliff/fr.xlf +3 -0
  221. package/xliff/pt.xlf +3 -0
  222. package/out-tsc/src/outboxmonitor/OutboxMonitor.js +0 -136
  223. package/out-tsc/src/outboxmonitor/OutboxMonitor.js.map +0 -1
  224. package/src/outboxmonitor/OutboxMonitor.ts +0 -148
@@ -0,0 +1,163 @@
1
+ # Copilot Development Instructions
2
+
3
+ ## Package Management
4
+
5
+ We use **yarn** for package management. Always use yarn commands instead of npm:
6
+
7
+ ```bash
8
+ # Install dependencies
9
+ yarn install
10
+
11
+ # Add new dependencies
12
+ yarn add <package-name>
13
+
14
+ # Add dev dependencies
15
+ yarn add -D <package-name>
16
+ ```
17
+
18
+ ## Testing
19
+
20
+ All tests are run using:
21
+
22
+ ```bash
23
+ yarn test
24
+ ```
25
+
26
+ To check for coverage, use:
27
+
28
+ ```bash
29
+ yarn test --coverage
30
+ ```
31
+
32
+ You also can run an idividual test to speed up development
33
+
34
+ ```bash
35
+ yarn test test/temba-textinput.test.ts
36
+ ```
37
+
38
+ 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.
39
+
40
+ ```bash
41
+ yarn validate
42
+ ```
43
+
44
+ ### Making commits
45
+
46
+ Before committing always run `yarn precommit` and include any changes it makes.
47
+
48
+ ### Test Coverage Requirements
49
+
50
+ - **100% code coverage** is expected for all code we touch
51
+ - The aim is to maintain complete test coverage across the codebase
52
+ - When modifying existing code, ensure all changed lines are covered by tests
53
+ - When adding new features, write comprehensive tests that cover all reachable code paths
54
+ - Never add tests to try to test unreachable or dead code, instead make a comment in the dead scope that it is unreachable
55
+
56
+ ### Test Structure
57
+
58
+ Tests live under the `/test` directory and follow these patterns:
59
+
60
+ 1. **Import required testing utilities:**
61
+
62
+ ```typescript
63
+ import { fixture, assert } from '@open-wc/testing';
64
+ import { assertScreenshot, getClip, getComponent } from './utils.test';
65
+ ```
66
+
67
+ 2. **Test file naming:** Use the pattern `temba-{component}.test.ts`
68
+
69
+ 3. **Test organization:** Use `describe()` blocks for component grouping and `it()` for individual test cases
70
+
71
+ 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.
72
+
73
+ 5. **Example Test:** A good example test to model after is `temba-textinput.test.ts`
74
+
75
+ ### Screenshot Testing
76
+
77
+ This project includes visual regression testing through screenshot comparison:
78
+
79
+ #### How Screenshot Tests Work
80
+
81
+ - Screenshots are captured during test execution using Puppeteer/Chromium
82
+ - "Truth" images are stored in `/screenshots/truth/` directory
83
+ - Test screenshots are compared pixel-by-pixel against truth images
84
+ - Failed comparisons generate diff images showing visual changes
85
+
86
+ #### Screenshot Test Implementation
87
+
88
+ ```typescript
89
+ // Take a screenshot of a component
90
+ await assertScreenshot('component/state-name', clipRegion);
91
+
92
+ // Get clipping region for a component
93
+ const clip = getClip(element);
94
+
95
+ // Custom clip adjustments if needed
96
+ const customClip = getClip(element);
97
+ customClip.width += 20;
98
+ customClip.height += 10;
99
+ ```
100
+
101
+ #### Critical Test Ordering
102
+
103
+ **Tests must validate expected values FIRST, then screenshots:**
104
+
105
+ ```typescript
106
+ it('validates component behavior', async () => {
107
+ const component = await getComponent('temba-example', { prop: 'value' });
108
+
109
+ // 1. FIRST: Test expected values and behavior
110
+ assert.instanceOf(component, ExampleComponent);
111
+ expect(component.prop).to.equal('value');
112
+ expect(component.textContent).to.contain('expected text');
113
+
114
+ // 2. SECOND: Take screenshot for visual verification
115
+ await assertScreenshot('example/state', getClip(component));
116
+ });
117
+ ```
118
+
119
+ This ordering ensures:
120
+
121
+ - Functional correctness is verified before visual verification
122
+ - Failed functional tests provide clearer debugging information
123
+ - Screenshot tests serve as additional visual regression protection
124
+
125
+ #### Screenshot Test Best Practices
126
+
127
+ - Use descriptive names: `'component/specific-state'` not `'test1'`
128
+ - Include sufficient context in clip regions to show component state
129
+ - Adjust clip regions when components have dynamic sizing
130
+ - Group related screenshots in subdirectories (e.g., `tip/left`, `tip/right`)
131
+
132
+ ## Development Workflow
133
+
134
+ 1. **Install dependencies:** `yarn install`
135
+ 2. **Start development server:** `yarn start`
136
+ 3. **Run tests during development:** `yarn test:watch`
137
+ 4. **Lint code:** `yarn lint`
138
+ 5. **Build for production:** `yarn build`
139
+
140
+ ## Code Quality
141
+
142
+ - Follow existing TypeScript patterns in the codebase
143
+ - Use ESLint and Prettier configurations (automatically enforced)
144
+ - Write descriptive test names and clear assertions
145
+ - Ensure all modified code paths have corresponding test coverage
146
+
147
+ ## Formatting
148
+
149
+ - We use prettier for formatting, review the settings in .prettierrc
150
+ - When commmenting, if it is more than one sentence use standard case and punctuation, however for short comments, all lowercase is preferred
151
+
152
+ ## Component Development
153
+
154
+ When creating or modifying components:
155
+
156
+ 1. Create/update the component implementation
157
+ 2. Write comprehensive unit tests covering all functionality
158
+ 3. Add screenshot tests for visual states
159
+ 4. Verify 100% coverage of modified code
160
+ 5. Run full test suite to ensure no regressions
161
+ 6. Make sure building for production yields no errors
162
+
163
+ Remember: The goal is robust, well-tested components with both functional and visual verification.
@@ -1,4 +1,4 @@
1
- name: 'build'
1
+ name: 'build'
2
2
 
3
3
  on: [push]
4
4
 
@@ -9,14 +9,14 @@ jobs:
9
9
  - name: Set Timezone
10
10
  uses: szenius/set-timezone@v2.0
11
11
  with:
12
- timezoneLinux: "UTC"
12
+ timezoneLinux: 'UTC'
13
13
  - name: Checkout (GitHub)
14
14
  uses: actions/checkout@v4
15
15
  - run: docker network create --driver bridge textit_default
16
16
  - name: Build and run dev container task
17
17
  uses: devcontainers/ci@v0.3
18
18
  with:
19
- runCmd: yarn test
19
+ runCmd: yarn validate
20
20
  push: never
21
21
  env: |
22
22
  CI=true
@@ -1,25 +1,25 @@
1
- name: "CLA Assistant"
1
+ name: 'CLA Assistant'
2
2
  on:
3
3
  issue_comment:
4
4
  types: [created]
5
5
  pull_request_target:
6
- types: [opened,closed,synchronize]
6
+ types: [opened, closed, synchronize]
7
7
 
8
8
  jobs:
9
9
  CLAssistant:
10
10
  runs-on: ubuntu-latest
11
11
  steps:
12
- - name: "CLA Assistant"
12
+ - name: 'CLA Assistant'
13
13
  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'
14
14
  # Beta Release
15
- uses: contributor-assistant/github-action@v2.2.0
15
+ uses: contributor-assistant/github-action@v2.6.1
16
16
  env:
17
17
  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
18
- PERSONAL_ACCESS_TOKEN : ${{ secrets.CLA_TOKEN }}
18
+ PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_TOKEN }}
19
19
  with:
20
20
  path-to-signatures: 'signatures/version1/cla.json'
21
21
  path-to-document: 'https://github.com/nyaruka/license/blob/main/TextIt_CLA.md'
22
22
  branch: 'main'
23
- allowlist: bot*
23
+ allowlist: bot*,*copilot*,*github*
24
24
  remote-organization-name: 'nyaruka'
25
25
  remote-repository-name: 'legal'
@@ -0,0 +1,86 @@
1
+ name: 'Copilot Setup Steps'
2
+
3
+ # Triggers: Run on pull requests and pushes to prepare environment for agent tasks
4
+ on:
5
+ pull_request:
6
+ push:
7
+
8
+ jobs:
9
+ copilot-setup-steps:
10
+ # Only run when push is initiated by the Copilot agent (GitHub Actions bot)
11
+ # This avoids unnecessary runs on regular developer pushes
12
+ if: github.actor == 'github-actions[bot]'
13
+ runs-on: ubuntu-latest
14
+
15
+ steps:
16
+ # Checkout the repository code
17
+ - name: Checkout code
18
+ uses: actions/checkout@v4
19
+
20
+ # Setup Node.js environment with version matching the project (Node.js 20)
21
+ - name: Setup Node.js
22
+ uses: actions/setup-node@v4
23
+ with:
24
+ node-version: '20'
25
+
26
+ # Setup Chrome browser for Puppeteer tests to avoid firewall issues
27
+ # This uses the official Chrome setup that handles firewall restrictions
28
+ - name: Setup Chrome
29
+ uses: browser-actions/setup-chrome@latest
30
+ with:
31
+ chrome-version: stable
32
+
33
+ # Cache yarn dependencies to speed up future runs
34
+ # Uses yarn.lock as the cache key for dependency consistency
35
+ - name: Cache yarn dependencies
36
+ uses: actions/cache@v4
37
+ with:
38
+ path: |
39
+ ~/.yarn
40
+ node_modules
41
+ key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
42
+ restore-keys: |
43
+ ${{ runner.os }}-yarn-
44
+
45
+ # Cache Puppeteer browsers to avoid repeated downloads
46
+ - name: Cache Puppeteer browsers
47
+ uses: actions/cache@v4
48
+ with:
49
+ path: |
50
+ ~/.cache/puppeteer
51
+ node_modules/.cache/puppeteer
52
+ key: ${{ runner.os }}-puppeteer-${{ hashFiles('**/yarn.lock') }}
53
+ restore-keys: |
54
+ ${{ runner.os }}-puppeteer-
55
+
56
+ # Install project dependencies including Puppeteer with Chromium
57
+ # Now allows Puppeteer to download Chromium since we handle firewall issues
58
+ - name: Install dependencies
59
+ run: yarn install
60
+ env:
61
+ # Set Puppeteer to use system Chrome if available to avoid downloads
62
+ PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome-stable
63
+
64
+ # Pre-build the project to warm up the environment
65
+ # This compiles TypeScript, processes SVG icons, and creates distribution files
66
+ # - name: Build project
67
+ # run: yarn build
68
+
69
+ # Run tests to ensure Puppeteer setup works correctly
70
+ # This validates that the browser dependencies are properly configured
71
+ # - name: Validate Puppeteer setup
72
+ # run: yarn test --reporter=summary
73
+ # env:
74
+ # PUPPETEER_EXECUTABLE_PATH: /usr/bin/google-chrome-stable
75
+
76
+ # Cache the built output to speed up subsequent operations
77
+ # - name: Cache build output
78
+ # uses: actions/cache@v4
79
+ # with:
80
+ # path: |
81
+ # dist
82
+ # out-tsc
83
+ # static/svg/index.svg
84
+ # key: ${{ runner.os }}-build-${{ github.sha }}
85
+ # restore-keys: |
86
+ # ${{ runner.os }}-build-
package/CHANGELOG.md CHANGED
@@ -4,8 +4,41 @@ All notable changes to this project will be documented in this file. Dates are d
4
4
 
5
5
  Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
6
6
 
7
+ #### [v0.123.0](https://github.com/nyaruka/temba-components/compare/v0.122.0...v0.123.0)
8
+
9
+ - Update commands for test and validate [`#543`](https://github.com/nyaruka/temba-components/pull/543)
10
+ - Add comprehensive test coverage for RunList component [`#531`](https://github.com/nyaruka/temba-components/pull/531)
11
+ - Fix screenshot tests for Copilot environment with adaptive threshold [`#538`](https://github.com/nyaruka/temba-components/pull/538)
12
+ - Fix language setting persistence when opening new flows [`#541`](https://github.com/nyaruka/temba-components/pull/541)
13
+ - Fix ESLint TypeScript version compatibility warning [`#536`](https://github.com/nyaruka/temba-components/pull/536)
14
+ - Switch format command [`#534`](https://github.com/nyaruka/temba-components/pull/534)
15
+ - Fix typescript errors, enforce build and linting for tests [`#532`](https://github.com/nyaruka/temba-components/pull/532)
16
+ - Update copilot-instructions.md [`#533`](https://github.com/nyaruka/temba-components/pull/533)
17
+ - Add comprehensive test coverage for utils/index.ts - achieve 100% function coverage [`#525`](https://github.com/nyaruka/temba-components/pull/525)
18
+ - Update copilot-instructions.md [`#529`](https://github.com/nyaruka/temba-components/pull/529)
19
+ - Update copilot-instructions.md [`#528`](https://github.com/nyaruka/temba-components/pull/528)
20
+ - Add comprehensive test suite for Dropdown component to achieve 100% coverage [`#523`](https://github.com/nyaruka/temba-components/pull/523)
21
+ - Remove OutboxMonitor component [`#522`](https://github.com/nyaruka/temba-components/pull/522)
22
+ - Bump image-size from 1.1.1 to 1.2.1 [`#483`](https://github.com/nyaruka/temba-components/pull/483)
23
+ - Bump koa from 2.15.4 to 2.16.1 [`#485`](https://github.com/nyaruka/temba-components/pull/485)
24
+ - Add comprehensive test coverage for Toast component [`#521`](https://github.com/nyaruka/temba-components/pull/521)
25
+ - Show "No options" message when opening select with empty options [`#505`](https://github.com/nyaruka/temba-components/pull/505)
26
+ - Fix GitHub Actions job name: rename 'setup' to 'copilot-setup-steps' [`#520`](https://github.com/nyaruka/temba-components/pull/520)
27
+ - Add duration formatting option to TembaChart for y-axis and tooltips [`#513`](https://github.com/nyaruka/temba-components/pull/513)
28
+ - Add chart options for color index start and legend [`#503`](https://github.com/nyaruka/temba-components/pull/503)
29
+ - Exclude github-copilot[bot] from CLA Assistant workflow [`#515`](https://github.com/nyaruka/temba-components/pull/515)
30
+ - Restrict copilot-setup-steps workflow to run only on GitHub Actions bot pushes [`#514`](https://github.com/nyaruka/temba-components/pull/514)
31
+ - Add copilot-instructions.md with comprehensive development guidelines [`#512`](https://github.com/nyaruka/temba-components/pull/512)
32
+ - Add Copilot to CLA allowlist to ignore GitHub Copilot PRs [`#509`](https://github.com/nyaruka/temba-components/pull/509)
33
+ - Add GitHub Actions workflow for Copilot environment setup [`#508`](https://github.com/nyaruka/temba-components/pull/508)
34
+ - Add pre-commit [`a4d2c29`](https://github.com/nyaruka/temba-components/commit/a4d2c295bbd113a9310421547a35af553971b8c6)
35
+ - merge [`76161ae`](https://github.com/nyaruka/temba-components/commit/76161ae9aeaa2dcc28f09ed127661395fea87e28)
36
+ - Add comprehensive test coverage for utils/index.ts functions [`389a84b`](https://github.com/nyaruka/temba-components/commit/389a84ba68785b783fff2a1bdc276443f6b3f12c)
37
+
7
38
  #### [v0.122.0](https://github.com/nyaruka/temba-components/compare/v0.121.7...v0.122.0)
8
39
 
40
+ > 28 May 2025
41
+
9
42
  - Basic chart with auto-summing of unsplit data [`#501`](https://github.com/nyaruka/temba-components/pull/501)
10
43
  - Add temba-chart [`fe311df`](https://github.com/nyaruka/temba-components/commit/fe311df264ad5c57f58c87c5a67e2d0b4e3edd37)
11
44
  - Fix bad merge [`f10e475`](https://github.com/nyaruka/temba-components/commit/f10e475fcc3dc316708340686b0d7f235cf918e7)
package/demo/index.html CHANGED
@@ -138,6 +138,23 @@
138
138
  </head>
139
139
 
140
140
  <body>
141
+ <script>
142
+ // Initialize duration chart when DOM is loaded
143
+ document.addEventListener('DOMContentLoaded', function() {
144
+ const durationChart = document.getElementById('duration-chart');
145
+ if (durationChart) {
146
+ // Sample data with durations in seconds from the issue examples
147
+ durationChart.data = {
148
+ labels: ['Process A', 'Process B', 'Process C', 'Process D', 'Process E'],
149
+ datasets: [{
150
+ label: 'Processing Time',
151
+ data: [68787, 958000, 3661, 120, 86400] // seconds: 19h6m, 11d2h, 1h1m, 2m, 1d
152
+ }]
153
+ };
154
+ console.log('Duration chart initialized with formatDuration:', durationChart.formatDuration);
155
+ }
156
+ });
157
+ </script>
141
158
  <temba-webchat
142
159
  channel="967cd415-8616-4b11-b38f-60f70e0999f4"
143
160
  ></temba-webchat>
@@ -177,6 +194,13 @@
177
194
  <temba-tabs collapses index="0">
178
195
  <temba-tab name="Overview" icon="default">
179
196
  <temba-chart style="margin-bottom:8px"></temba-chart>
197
+
198
+ <!-- Chart with duration formatting -->
199
+ <div style="margin: 20px 0;">
200
+ <h3>Duration Formatted Chart</h3>
201
+ <temba-chart id="duration-chart" style="margin-bottom:8px" format-duration header="Process Times"></temba-chart>
202
+ </div>
203
+
180
204
  <temba-progress style="margin-bottom:8px" total="100" current="25" eta="2030-09-17T07:00:00.000Z"></temba-progress>
181
205
  <temba-checkbox label="Check this out" checked></temba-checkbox>
182
206
  <temba-select placeholder="Select a color" clearable>
@@ -372,6 +396,24 @@
372
396
  </temba-select>
373
397
  </div>
374
398
  </div>
399
+
400
+ <div class="example">
401
+ <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Select (No Options)</label>
402
+ <temba-select placeholder="Click to see empty state">
403
+ </temba-select>
404
+ </div>
405
+
406
+ <div class="example">
407
+ <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Searchable Select</label>
408
+ <temba-select placeholder="Search for options" searchable>
409
+ </temba-select>
410
+ </div>
411
+
412
+ <div class="example">
413
+ <label style="display: block; margin-bottom: 5px; font-weight: bold;">Empty Multi Select</label>
414
+ <temba-select placeholder="Select multiple options" multi>
415
+ </temba-select>
416
+ </div>
375
417
  </temba-tab>
376
418
 
377
419
  <temba-tab name="textinput" icon="edit-05">
@@ -4,6 +4,7 @@
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
6
  scf1453991c986b25: `Tab para completar, enter para seleccionar`,
7
+ s73b4d70c02f4b4e0: `No options`,
7
8
  s8f02e3a18ffc083a: `Are not currently in a flow`,
8
9
  s638236250662c6b3: `Have sent a message in the last`,
9
10
  s4788ee206c4570c7: `Have not started this flow in the last 90 days`
@@ -1 +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,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 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"]}
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"]}
@@ -3,6 +3,7 @@
3
3
  /* eslint-disable no-irregular-whitespace */
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
+ s73b4d70c02f4b4e0: `No options`,
6
7
  scf1453991c986b25: `Tab to complete, enter to select`,
7
8
  s8f02e3a18ffc083a: `Are not currently in a flow`,
8
9
  s638236250662c6b3: `Have sent a message in the last`,
@@ -1 +1 @@
1
- {"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,kCAAkC;IACrD,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 to complete, enter to select`,\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"]}
1
+ {"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,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 s73b4d70c02f4b4e0: `No options`,\n scf1453991c986b25: `Tab to complete, enter to select`,\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"]}
@@ -3,6 +3,7 @@
3
3
  /* eslint-disable no-irregular-whitespace */
4
4
  /* eslint-disable @typescript-eslint/no-explicit-any */
5
5
  export const templates = {
6
+ s73b4d70c02f4b4e0: `No options`,
6
7
  scf1453991c986b25: `Tab to complete, enter to select`,
7
8
  s8f02e3a18ffc083a: `Are not currently in a flow`,
8
9
  s638236250662c6b3: `Have sent a message in the last`,
@@ -1 +1 @@
1
- {"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,kCAAkC;IACrD,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 to complete, enter to select`,\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"]}
1
+ {"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,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 s73b4d70c02f4b4e0: `No options`,\n scf1453991c986b25: `Tab to complete, enter to select`,\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"]}