@nyaruka/temba-components 0.124.3 → 0.125.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 (46) hide show
  1. package/.eslintrc.js +3 -1
  2. package/CHANGELOG.md +13 -0
  3. package/demo/data/flows/sample-flow.json +1072 -0
  4. package/demo/data/server/sample-flow.json +0 -0
  5. package/demo/flow/example.html +46 -0
  6. package/demo/index.html +155 -144
  7. package/demo/webchat/example.html +71 -0
  8. package/dist/temba-components.js +43 -33
  9. package/dist/temba-components.js.map +1 -1
  10. package/out-tsc/src/chart/TembaChart.js +111 -47
  11. package/out-tsc/src/chart/TembaChart.js.map +1 -1
  12. package/out-tsc/src/flow/EditorNode.js +2 -1
  13. package/out-tsc/src/flow/EditorNode.js.map +1 -1
  14. package/out-tsc/src/flow/config.js +70 -20
  15. package/out-tsc/src/flow/config.js.map +1 -1
  16. package/out-tsc/src/formfield/FormField.js +4 -1
  17. package/out-tsc/src/formfield/FormField.js.map +1 -1
  18. package/out-tsc/src/utils/index.js +3 -0
  19. package/out-tsc/src/utils/index.js.map +1 -1
  20. package/out-tsc/src/webchat/WebChat.js +2 -0
  21. package/out-tsc/src/webchat/WebChat.js.map +1 -1
  22. package/out-tsc/test/temba-chart.test.js +6 -18
  23. package/out-tsc/test/temba-chart.test.js.map +1 -1
  24. package/out-tsc/test/temba-formfield.test.js +94 -0
  25. package/out-tsc/test/temba-formfield.test.js.map +1 -0
  26. package/out-tsc/test/temba-integration-markdown.test.js +36 -0
  27. package/out-tsc/test/temba-integration-markdown.test.js.map +1 -0
  28. package/out-tsc/test/temba-select.test.js +14 -1
  29. package/out-tsc/test/temba-select.test.js.map +1 -1
  30. package/package.json +2 -1
  31. package/screenshots/truth/formfield/markdown-errors.png +0 -0
  32. package/screenshots/truth/formfield/no-errors.png +0 -0
  33. package/screenshots/truth/formfield/plain-text-errors.png +0 -0
  34. package/screenshots/truth/formfield/widget-only-markdown-errors.png +0 -0
  35. package/screenshots/truth/integration/checkbox-markdown-errors.png +0 -0
  36. package/src/chart/TembaChart.ts +124 -47
  37. package/src/flow/EditorNode.ts +2 -1
  38. package/src/flow/config.ts +71 -20
  39. package/src/formfield/FormField.ts +4 -1
  40. package/src/utils/index.ts +3 -0
  41. package/src/webchat/WebChat.ts +2 -0
  42. package/test/temba-chart.test.ts +7 -23
  43. package/test/temba-formfield.test.ts +121 -0
  44. package/test/temba-integration-markdown.test.ts +45 -0
  45. package/test/temba-select.test.ts +17 -0
  46. package/web-dev-server.config.mjs +18 -0
package/demo/data/server/sample-flow.json ADDED
File without changes
package/demo/flow/example.html ADDED
@@ -0,0 +1,46 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>Flow Editor</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <style>
16
+ body {
17
+ margin: 0;
18
+ padding: 0;
19
+ }
20
+ temba-store {
21
+ display: none;
22
+ }
23
+ temba-flow-editor {
24
+ width: 100%;
25
+ height: 100vh;
26
+ }
27
+ temba-store {
28
+ display: none;
29
+ }
30
+ temba-flow-editor {
31
+ display: flex;
32
+ flex-direction: column;
33
+ height: 100vh;
34
+ width: 100%;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <temba-store></temba-store>
40
+ <temba-flow-editor flow="sample-flow"></temba-flow-editor>
41
+
42
+ <script type="module">
43
+ import '../../out-tsc/temba-modules.js';
44
+ </script>
45
+ </body>
46
+ </html>
package/demo/index.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en-GB">
3
- <head>
3
+ <head>
4
4
  <meta charset="utf-8" />
5
5
  <title>Temba Components Demo</title>
6
6
  <link
@@ -12,163 +12,174 @@
12
12
  href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
13
  rel="stylesheet"
14
14
  />
15
- <link
16
- href="styles.css"
17
- rel="stylesheet"
18
- type="text/css"
19
- />
20
- </head>
21
- <body>
15
+ <link href="styles.css" rel="stylesheet" type="text/css" />
16
+ </head>
17
+ <body>
22
18
  <div class="header">temba-components</div>
23
-
19
+
24
20
  <div class="nav">
25
- <h2>Component Demos</h2>
26
- <p>Interactive demos for all Temba web components. Each component has its own dedicated demo page.</p>
21
+ <h2>Component Demos</h2>
22
+ <p>
23
+ Interactive demos for all Temba web components. Each component has its
24
+ own dedicated demo page.
25
+ </p>
27
26
  </div>
28
27
 
29
28
  <div class="component-grid">
30
- <!-- Form & Input Components -->
31
- <div class="component-section">
32
- <h2>Form & Input Components</h2>
33
-
34
- <div class="component-card">
35
- <h3>Text Input</h3>
36
- <p>Text input components including completion and date/time pickers</p>
37
- <a href="textinput/example.html">Basic Examples</a> |
38
- <a href="textinput/completion.html">Completion</a>
39
- </div>
40
-
41
- <div class="component-card">
42
- <h3>Select</h3>
43
- <p>Dropdown selection components with various configurations</p>
44
- <a href="select/example.html">Basic Examples</a> |
45
- <a href="select/drag-and-drop.html">Drag & Drop</a> |
46
- <a href="select/multi.html">Multi-Select</a>
47
- </div>
48
-
49
- <div class="component-card">
50
- <h3>Checkbox</h3>
51
- <p>Checkbox components with labels and help text</p>
52
- <a href="checkbox/example.html">Examples</a>
53
- </div>
54
-
55
- <div class="component-card">
56
- <h3>Date Picker</h3>
57
- <p>Date and time selection components</p>
58
- <a href="datepicker/example.html">Examples</a>
59
- </div>
60
-
61
- <div class="component-card">
62
- <h3>Slider</h3>
63
- <p>Range slider components</p>
64
- <a href="slider/example.html">Examples</a>
65
- </div>
66
-
67
- <div class="component-card">
68
- <h3>Compose</h3>
69
- <p>Text composition components with rich editing features</p>
70
- <a href="compose/example.html">Examples</a>
71
- </div>
72
- </div>
73
-
74
- <!-- Interactive Components -->
75
- <div class="component-section">
76
- <h2>Interactive Components</h2>
77
-
78
- <div class="component-card">
79
- <h3>Button</h3>
80
- <p>Interactive button components with various styles</p>
81
- <a href="button/example.html">Examples</a>
82
- </div>
83
-
84
- <div class="component-card">
85
- <h3>Dialog</h3>
86
- <p>Modal dialog components for user interactions</p>
87
- <a href="dialog/example.html">Examples</a>
88
- </div>
89
-
90
- <div class="component-card">
91
- <h3>Dropdown</h3>
92
- <p>Generic dropdown menu components</p>
93
- <a href="dropdown/example.html">Examples</a>
94
- </div>
95
-
96
- <div class="component-card">
97
- <h3>Tabs</h3>
98
- <p>Tab navigation components with collapsible support</p>
99
- <a href="tabs/example.html">Examples</a>
100
- </div>
101
-
102
- <div class="component-card">
103
- <h3>Sortable List</h3>
104
- <p>Drag-and-drop sortable list components</p>
105
- <a href="sortable-list/example.html">Examples</a>
106
- </div>
107
- </div>
108
-
109
- <!-- Feedback Components -->
110
- <div class="component-section">
111
- <h2>Feedback Components</h2>
112
-
113
- <div class="component-card">
114
- <h3>Alert</h3>
115
- <p>Alert and notification components with different levels</p>
116
- <a href="alert/example.html">Examples</a>
117
- </div>
118
-
119
- <div class="component-card">
120
- <h3>Progress</h3>
121
- <p>Progress bar components</p>
122
- <a href="progress/example.html">Examples</a>
123
- </div>
124
- </div>
125
-
126
- <!-- Data Visualization -->
127
- <div class="component-section">
128
- <h2>Data Visualization</h2>
129
-
130
- <div class="component-card">
131
- <h3>Chart</h3>
132
- <p>Chart and data visualization components</p>
133
- <a href="chart/example.html">Examples</a>
134
- </div>
135
- </div>
136
-
137
- <!-- Miscellaneous Components -->
138
- <div class="component-section">
139
- <h2>Miscellaneous Components</h2>
140
-
141
- <div class="component-card">
142
- <h3>Loading, Thumbnail & Tip</h3>
143
- <p>Small utility components: loading spinners, image thumbnails, and tooltips</p>
144
- <a href="misc/example.html">Examples</a>
145
- </div>
29
+ <!-- Form & Input Components -->
30
+ <div class="component-section">
31
+ <h2>Form & Input Components</h2>
32
+
33
+ <div class="component-card">
34
+ <h3>Text Input</h3>
35
+ <p>
36
+ Text input components including completion and date/time pickers
37
+ </p>
38
+ <a href="textinput/example.html">Basic Examples</a> |
39
+ <a href="textinput/completion.html">Completion</a>
40
+ </div>
41
+
42
+ <div class="component-card">
43
+ <h3>Select</h3>
44
+ <p>Dropdown selection components with various configurations</p>
45
+ <a href="select/example.html">Basic Examples</a> |
46
+ <a href="select/drag-and-drop.html">Drag & Drop</a> |
47
+ <a href="select/multi.html">Multi-Select</a>
48
+ </div>
49
+
50
+ <div class="component-card">
51
+ <h3>Checkbox</h3>
52
+ <p>Checkbox components with labels and help text</p>
53
+ <a href="checkbox/example.html">Examples</a>
54
+ </div>
55
+
56
+ <div class="component-card">
57
+ <h3>Date Picker</h3>
58
+ <p>Date and time selection components</p>
59
+ <a href="datepicker/example.html">Examples</a>
60
+ </div>
61
+
62
+ <div class="component-card">
63
+ <h3>Slider</h3>
64
+ <p>Range slider components</p>
65
+ <a href="slider/example.html">Examples</a>
146
66
  </div>
147
- </div>
148
67
 
149
- <div class="example">
150
- <h3>Quick Overview</h3>
151
- <p>Here's a quick preview of some components working together:</p>
152
-
153
- <temba-select placeholder="Select a color" clearable>
154
- <temba-option name="Red" value="0"></temba-option>
155
- <temba-option name="Green" value="1"></temba-option>
156
- <temba-option name="Blue" value="2"></temba-option>
157
- </temba-select>
68
+ <div class="component-card">
69
+ <h3>Compose</h3>
70
+ <p>Text composition components with rich editing features</p>
71
+ <a href="compose/example.html">Examples</a>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Interactive Components -->
76
+ <div class="component-section">
77
+ <h2>Interactive Components</h2>
78
+
79
+ <div class="component-card">
80
+ <h3>Button</h3>
81
+ <p>Interactive button components with various styles</p>
82
+ <a href="button/example.html">Examples</a>
83
+ </div>
158
84
 
159
- <div style="margin: 20px 0;">
160
- <temba-checkbox label="Check this out" checked></temba-checkbox>
85
+ <div class="component-card">
86
+ <h3>Dialog</h3>
87
+ <p>Modal dialog components for user interactions</p>
88
+ <a href="dialog/example.html">Examples</a>
161
89
  </div>
162
90
 
163
- <temba-textinput value="plain text" placeholder="Enter some text"></temba-textinput>
91
+ <div class="component-card">
92
+ <h3>Dropdown</h3>
93
+ <p>Generic dropdown menu components</p>
94
+ <a href="dropdown/example.html">Examples</a>
95
+ </div>
96
+
97
+ <div class="component-card">
98
+ <h3>Tabs</h3>
99
+ <p>Tab navigation components with collapsible support</p>
100
+ <a href="tabs/example.html">Examples</a>
101
+ </div>
102
+
103
+ <div class="component-card">
104
+ <h3>Sortable List</h3>
105
+ <p>Drag-and-drop sortable list components</p>
106
+ <a href="sortable-list/example.html">Examples</a>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Feedback Components -->
111
+ <div class="component-section">
112
+ <h2>Feedback Components</h2>
113
+
114
+ <div class="component-card">
115
+ <h3>Alert</h3>
116
+ <p>Alert and notification components with different levels</p>
117
+ <a href="alert/example.html">Examples</a>
118
+ </div>
119
+
120
+ <div class="component-card">
121
+ <h3>Progress</h3>
122
+ <p>Progress bar components</p>
123
+ <a href="progress/example.html">Examples</a>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Data Visualization -->
128
+ <div class="component-section">
129
+ <h2>Data Visualization</h2>
130
+
131
+ <div class="component-card">
132
+ <h3>Chart</h3>
133
+ <p>Chart and data visualization components</p>
134
+ <a href="chart/example.html">Examples</a>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Miscellaneous Components -->
139
+ <div class="component-section">
140
+ <h2>Miscellaneous Components</h2>
141
+
142
+ <div class="component-card">
143
+ <h3>Loading, Thumbnail & Tip</h3>
144
+ <p>
145
+ Small utility components: loading spinners, image thumbnails, and
146
+ tooltips
147
+ </p>
148
+ <a href="misc/example.html">Examples</a>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="component-section">
153
+ <h2>Miscellaneous Components</h2>
154
+
155
+ <div class="component-card">
156
+ <h3>Loading, Thumbnail & Tip</h3>
157
+ <p>
158
+ Small utility components: loading spinners, image thumbnails, and
159
+ tooltips
160
+ </p>
161
+ <a href="misc/example.html">Examples</a>
162
+ </div>
163
+
164
+ <div class="component-card">
165
+ <h3>Flow Editor</h3>
166
+ <p>
167
+ A work in progress editor for RapidPro flows to replace existing
168
+ react editor.
169
+ </p>
170
+ <a href="flow/example.html">Example</a>
171
+ </div>
164
172
 
165
- <div style="margin: 20px 0;">
166
- <temba-slider value="50" min="0" max="100" range></temba-slider>
173
+ <div class="component-card">
174
+ <h3>Web Chat</h3>
175
+ <p>A work in progress web chat client for RapidPro</p>
176
+ <a href="webchat/example.html">Example</a>
167
177
  </div>
178
+ </div>
168
179
  </div>
169
180
 
170
181
  <script type="module">
171
182
  import '../out-tsc/temba-modules.js';
172
183
  </script>
173
- </body>
174
- </html>
184
+ </body>
185
+ </html>
package/demo/webchat/example.html ADDED
@@ -0,0 +1,71 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-GB">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>WebChat Example</title>
6
+ <link
7
+ href="/static/css/temba-components.css"
8
+ rel="stylesheet"
9
+ type="text/css"
10
+ />
11
+ <link
12
+ href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
13
+ rel="stylesheet"
14
+ />
15
+ <link href="../styles.css" rel="stylesheet" type="text/css" />
16
+ <script>
17
+ function handleOpen() {
18
+ const webchat = document.querySelector('temba-webchat');
19
+ const input = document.querySelector('temba-textinput');
20
+
21
+ if (webchat.open) {
22
+ webchat.open = false;
23
+ }
24
+
25
+ webchat.setAttribute('channel', input.value);
26
+ webchat.open = true;
27
+ }
28
+ function handleKeyPress(event) {
29
+ const keyCode = event.keyCode || event.which;
30
+ if (keyCode !== 13) {
31
+ return; // Only handle Enter key
32
+ }
33
+
34
+ handleOpen();
35
+ }
36
+ </script>
37
+ </head>
38
+ <body>
39
+ <h1>WebChat example</h1>
40
+ <p><a href="../index.html">← Back to main demo</a></p>
41
+
42
+ <div style="margin: 0.5em">Channel UUID</div>
43
+ <div
44
+ style="
45
+ display: flex;
46
+ flex-direction: row;
47
+ width: 500px;
48
+ margin-bottom: 1em;
49
+ align-items: center;
50
+ "
51
+ >
52
+ <div style="margin-right: 0.5em; flex-grow: 1">
53
+ <temba-textinput
54
+ onkeypress="handleKeyPress(event)"
55
+ placeholder="Channel UUID"
56
+ value="3ff64eee-a584-40e0-889c-351564fc0f30"
57
+ ></temba-textinput>
58
+ </div>
59
+ <temba-button
60
+ name="Start WebChat"
61
+ onclick="handleOpen(event)"
62
+ ></temba-button>
63
+ </div>
64
+
65
+ <temba-webchat></temba-webchat>
66
+
67
+ <script type="module">
68
+ import '../../out-tsc/temba-modules.js';
69
+ </script>
70
+ </body>
71
+ </html>