@contember/echo 0.0.20 → 0.0.22

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. package/LICENSE +185 -0
  2. package/README.md +55 -70
  3. package/dist/components/Echo.d.ts +2 -2
  4. package/dist/components/atoms/Button.d.ts +0 -2
  5. package/dist/components/icons/index.d.ts +0 -1
  6. package/dist/components/molecules/LauncherButton.d.ts +2 -0
  7. package/dist/components/molecules/StoredFeedback.d.ts +2 -0
  8. package/dist/{features/feedback/components → components/organisms}/FeedbackForm.d.ts +1 -1
  9. package/dist/config/drawingConfig.d.ts +5 -10
  10. package/dist/contexts/EchoContext.d.ts +5 -8
  11. package/dist/echo.es.js +5082 -6230
  12. package/dist/echo.umd.js +11 -1095
  13. package/dist/index.d.ts +4 -3
  14. package/dist/stores/drawingStore.d.ts +6 -7
  15. package/dist/stores/echoStore.d.ts +4 -11
  16. package/dist/stores/feedbackStore.d.ts +6 -6
  17. package/dist/stores/widgetStore.d.ts +9 -8
  18. package/dist/style.css +1 -0
  19. package/dist/types.d.ts +24 -30
  20. package/dist/utils/common.d.ts +1 -0
  21. package/dist/utils/format.d.ts +1 -0
  22. package/dist/utils/index.d.ts +10 -1
  23. package/dist/utils/listeners.d.ts +22 -0
  24. package/dist/utils/screenshot.d.ts +2 -6
  25. package/dist/utils/storage.d.ts +2 -2
  26. package/dist/utils/validators.d.ts +2 -0
  27. package/package.json +4 -6
  28. package/dist/components/EchoLayout.d.ts +0 -7
  29. package/dist/components/Launcher.d.ts +0 -6
  30. package/dist/components/Overlay.d.ts +0 -4
  31. package/dist/components/icons/MessageIcon.d.ts +0 -3
  32. package/dist/features/drawing/components/index.d.ts +0 -5
  33. package/dist/features/drawing/index.d.ts +0 -2
  34. package/dist/features/drawing/styles/ColorSelector.styles.d.ts +0 -2
  35. package/dist/features/drawing/styles/DrawingLayer.styles.d.ts +0 -2
  36. package/dist/features/drawing/styles/DrawingToolbar.styles.d.ts +0 -2
  37. package/dist/features/drawing/styles/DrawingTooltip.styles.d.ts +0 -2
  38. package/dist/features/drawing/styles/ShapeActions.styles.d.ts +0 -2
  39. package/dist/features/drawing/styles/index.d.ts +0 -6
  40. package/dist/features/feedback/components/index.d.ts +0 -1
  41. package/dist/features/feedback/index.d.ts +0 -2
  42. package/dist/features/feedback/styles/FeedbackForm.styles.d.ts +0 -2
  43. package/dist/features/feedback/styles/index.d.ts +0 -1
  44. package/dist/features/launcher/components/EchoLauncherButton.d.ts +0 -2
  45. package/dist/features/launcher/components/SavedPagesDropdown.d.ts +0 -2
  46. package/dist/features/launcher/styles/EchoLauncherButton.styles.d.ts +0 -2
  47. package/dist/features/launcher/styles/Notification.styles.d.ts +0 -2
  48. package/dist/features/launcher/styles/SavedPagesDropdown.styles.d.ts +0 -2
  49. package/dist/features/launcher/styles/WelcomeMessage.styles.d.ts +0 -2
  50. package/dist/features/launcher/styles/index.d.ts +0 -4
  51. package/dist/styles/Echo.styles.d.ts +0 -2
  52. package/dist/styles/index.d.ts +0 -2
  53. package/dist/styles/zIndex.d.ts +0 -13
  54. /package/dist/{features/drawing/components → components/atoms}/Shape.d.ts +0 -0
  55. /package/dist/{features/drawing/components → components/molecules}/ColorSelector.d.ts +0 -0
  56. /package/dist/{features/drawing/components → components/molecules}/DrawingToolbar.d.ts +0 -0
  57. /package/dist/{features/drawing/components → components/molecules}/DrawingTooltip.d.ts +0 -0
  58. /package/dist/{features/launcher/components → components/molecules}/Notification.d.ts +0 -0
  59. /package/dist/{features/drawing/components → components/molecules}/ShapeActions.d.ts +0 -0
  60. /package/dist/{features/launcher/components → components/molecules}/WelcomeMessage.d.ts +0 -0
  61. /package/dist/{features/drawing/components → components/organisms}/DrawingLayer.d.ts +0 -0
package/LICENSE ADDED
@@ -0,0 +1,185 @@
1
+ Copyright (c) 2024 Contember Limited
2
+
3
+ Portions of this software are licensed as follows:
4
+
5
+ * All third party components incorporated into the software are licensed under the original license provided by the owner of the applicable component.
6
+ * Content outside of the above mentioned restrictions is available under the Apache License, Version 2.0 (the "License") as defined below.
7
+
8
+ -------------------------------------------------------------------------
9
+ Apache License
10
+ Version 2.0, January 2004
11
+ http://www.apache.org/licenses/
12
+
13
+
14
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
15
+
16
+ 1. Definitions.
17
+
18
+ "License" shall mean the terms and conditions for use, reproduction,
19
+ and distribution as defined by Sections 1 through 9 of this document.
20
+
21
+ "Licensor" shall mean the copyright owner or entity authorized by
22
+ the copyright owner that is granting the License.
23
+
24
+ "Legal Entity" shall mean the union of the acting entity and all
25
+ other entities that control, are controlled by, or are under common
26
+ control with that entity. For the purposes of this definition,
27
+ "control" means (i) the power, direct or indirect, to cause the
28
+ direction or management of such entity, whether by contract or
29
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
30
+ outstanding shares, or (iii) beneficial ownership of such entity.
31
+
32
+ "You" (or "Your") shall mean an individual or Legal Entity
33
+ exercising permissions granted by this License.
34
+
35
+ "Source" form shall mean the preferred form for making modifications,
36
+ including but not limited to software source code, documentation
37
+ source, and configuration files.
38
+
39
+ "Object" form shall mean any form resulting from mechanical
40
+ transformation or translation of a Source form, including but
41
+ not limited to compiled object code, generated documentation,
42
+ and conversions to other media types.
43
+
44
+ "Work" shall mean the work of authorship, whether in Source or
45
+ Object form, made available under the License, as indicated by a
46
+ copyright notice that is included in or attached to the work
47
+ (an example is provided in the Appendix below).
48
+
49
+ "Derivative Works" shall mean any work, whether in Source or Object
50
+ form, that is based on (or derived from) the Work and for which the
51
+ editorial revisions, annotations, elaborations, or other modifications
52
+ represent, as a whole, an original work of authorship. For the purposes
53
+ of this License, Derivative Works shall not include works that remain
54
+ separable from, or merely link (or bind by name) to the interfaces of,
55
+ the Work and Derivative Works thereof.
56
+
57
+ "Contribution" shall mean any work of authorship, including
58
+ the original version of the Work and any modifications or additions
59
+ to that Work or Derivative Works thereof, that is intentionally
60
+ submitted to Licensor for inclusion in the Work by the copyright owner
61
+ or by an individual or Legal Entity authorized to submit on behalf of
62
+ the copyright owner. For the purposes of this definition, "submitted"
63
+ means any form of electronic, verbal, or written communication sent
64
+ to the Licensor or its representatives, including but not limited to
65
+ communication on electronic mailing lists, source code control systems,
66
+ and issue tracking systems that are managed by, or on behalf of, the
67
+ Licensor for the purpose of discussing and improving the Work, but
68
+ excluding communication that is conspicuously marked or otherwise
69
+ designated in writing by the copyright owner as "Not a Contribution."
70
+
71
+ "Contributor" shall mean Licensor and any individual or Legal Entity
72
+ on behalf of whom a Contribution has been received by Licensor and
73
+ subsequently incorporated within the Work.
74
+
75
+ 2. Grant of Copyright License. Subject to the terms and conditions of
76
+ this License, each Contributor hereby grants to You a perpetual,
77
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
78
+ copyright license to reproduce, prepare Derivative Works of,
79
+ publicly display, publicly perform, sublicense, and distribute the
80
+ Work and such Derivative Works in Source or Object form.
81
+
82
+ 3. Grant of Patent License. Subject to the terms and conditions of
83
+ this License, each Contributor hereby grants to You a perpetual,
84
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
85
+ (except as stated in this section) patent license to make, have made,
86
+ use, offer to sell, sell, import, and otherwise transfer the Work,
87
+ where such license applies only to those patent claims licensable
88
+ by such Contributor that are necessarily infringed by their
89
+ Contribution(s) alone or by combination of their Contribution(s)
90
+ with the Work to which such Contribution(s) was submitted. If You
91
+ institute patent litigation against any entity (including a
92
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
93
+ or a Contribution incorporated within the Work constitutes direct
94
+ or contributory patent infringement, then any patent licenses
95
+ granted to You under this License for that Work shall terminate
96
+ as of the date such litigation is filed.
97
+
98
+ 4. Redistribution. You may reproduce and distribute copies of the
99
+ Work or Derivative Works thereof in any medium, with or without
100
+ modifications, and in Source or Object form, provided that You
101
+ meet the following conditions:
102
+
103
+ (a) You must give any other recipients of the Work or
104
+ Derivative Works a copy of this License; and
105
+
106
+ (b) You must cause any modified files to carry prominent notices
107
+ stating that You changed the files; and
108
+
109
+ (c) You must retain, in the Source form of any Derivative Works
110
+ that You distribute, all copyright, patent, trademark, and
111
+ attribution notices from the Source form of the Work,
112
+ excluding those notices that do not pertain to any part of
113
+ the Derivative Works; and
114
+
115
+ (d) If the Work includes a "NOTICE" text file as part of its
116
+ distribution, then any Derivative Works that You distribute must
117
+ include a readable copy of the attribution notices contained
118
+ within such NOTICE file, excluding those notices that do not
119
+ pertain to any part of the Derivative Works, in at least one
120
+ of the following places: within a NOTICE text file distributed
121
+ as part of the Derivative Works; within the Source form or
122
+ documentation, if provided along with the Derivative Works; or,
123
+ within a display generated by the Derivative Works, if and
124
+ wherever such third-party notices normally appear. The contents
125
+ of the NOTICE file are for informational purposes only and
126
+ do not modify the License. You may add Your own attribution
127
+ notices within Derivative Works that You distribute, alongside
128
+ or as an addendum to the NOTICE text from the Work, provided
129
+ that such additional attribution notices cannot be construed
130
+ as modifying the License.
131
+
132
+ You may add Your own copyright statement to Your modifications and
133
+ may provide additional or different license terms and conditions
134
+ for use, reproduction, or distribution of Your modifications, or
135
+ for any such Derivative Works as a whole, provided Your use,
136
+ reproduction, and distribution of the Work otherwise complies with
137
+ the conditions stated in this License.
138
+
139
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
140
+ any Contribution intentionally submitted for inclusion in the Work
141
+ by You to the Licensor shall be under the terms and conditions of
142
+ this License, without any additional terms or conditions.
143
+ Notwithstanding the above, nothing herein shall supersede or modify
144
+ the terms of any separate license agreement you may have executed
145
+ with Licensor regarding such Contributions.
146
+
147
+ 6. Trademarks. This License does not grant permission to use the trade
148
+ names, trademarks, service marks, or product names of the Licensor,
149
+ except as required for reasonable and customary use in describing the
150
+ origin of the Work and reproducing the content of the NOTICE file.
151
+
152
+ 7. Disclaimer of Warranty. Unless required by applicable law or
153
+ agreed to in writing, Licensor provides the Work (and each
154
+ Contributor provides its Contributions) on an "AS IS" BASIS,
155
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
156
+ implied, including, without limitation, any warranties or conditions
157
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
158
+ PARTICULAR PURPOSE. You are solely responsible for determining the
159
+ appropriateness of using or redistributing the Work and assume any
160
+ risks associated with Your exercise of permissions under this License.
161
+
162
+ 8. Limitation of Liability. In no event and under no legal theory,
163
+ whether in tort (including negligence), contract, or otherwise,
164
+ unless required by applicable law (such as deliberate and grossly
165
+ negligent acts) or agreed to in writing, shall any Contributor be
166
+ liable to You for damages, including any direct, indirect, special,
167
+ incidental, or consequential damages of any character arising as a
168
+ result of this License or out of the use or inability to use the
169
+ Work (including but not limited to damages for loss of goodwill,
170
+ work stoppage, computer failure or malfunction, or any and all
171
+ other commercial damages or losses), even if such Contributor
172
+ has been advised of the possibility of such damages.
173
+
174
+ 9. Accepting Warranty or Additional Liability. While redistributing
175
+ the Work or Derivative Works thereof, You may choose to offer,
176
+ and charge a fee for, acceptance of support, warranty, indemnity,
177
+ or other liability obligations and/or rights consistent with this
178
+ License. However, in accepting such obligations, You may act only
179
+ on Your own behalf and on Your sole responsibility, not on behalf
180
+ of any other Contributor, and only if You agree to indemnify,
181
+ defend, and hold each Contributor harmless for any liability
182
+ incurred by, or claims asserted against, such Contributor by reason
183
+ of your accepting any such warranty or additional liability.
184
+
185
+ END OF TERMS AND CONDITIONS
package/README.md CHANGED
@@ -1,6 +1,19 @@
1
- # Echo Widget
1
+ # Echo
2
2
 
3
- A lightweight feedback widget built with Solid.js that allows users to capture screenshots, annotate them, and submit feedback.
3
+ A lightweight tool for capturing user feedback with screenshots, annotations, and debug information. Built with Solid.js and designed to seamlessly integrate into any web application.
4
+
5
+ ## Features
6
+
7
+ - 📸 **Screenshot Capture**: Automatically capture the current page state
8
+ - ✏️ **Drawing Tools**: Annotate screenshots with various drawing tools
9
+ - 🎨 **Customizable UI**: Configurable colors, position and text
10
+ - 🌐 **Framework Agnostic**: Works with any web application
11
+ - 🎯 **Easy Integration**: Simple setup with NPM or direct script inclusion
12
+ - 🎨 **Drawing Features**:
13
+ - Multiple colors for annotations
14
+ - WIP: Different shapes and tools
15
+ - 📱 **Responsive Design**: WIP: Works seamlessly on desktop and mobile devices
16
+ - 🔍 **Console tracking**: Captures last 1000 console entries
4
17
 
5
18
  ## Usage
6
19
 
@@ -10,40 +23,6 @@ A lightweight feedback widget built with Solid.js that allows users to capture s
10
23
  import { initEcho } from '@contember/echo';
11
24
 
12
25
  initEcho({
13
- // Optional: widget position (default: 'bottom-right')
14
- position: 'bottom-right',
15
-
16
- // Optional: primary color for buttons and UI elements
17
- primaryColor: '#007AFF',
18
-
19
- // Optional: customize all text elements in the widget
20
- textConfig: {
21
- welcomeMessage: {
22
- text: 'Click here to leave feedback',
23
- closeAriaLabel: 'Close welcome message',
24
- },
25
- feedbackForm: {
26
- title: 'Send Feedback',
27
- placeholder: "What's on your mind? We'd love to hear your feedback...",
28
- screenshotAlt: 'Screenshot Preview',
29
- submitButton: 'Send Feedback',
30
- minimizeTitle: 'Minimize',
31
- expandTitle: 'Expand',
32
- closeTitle: 'Close',
33
- showFormTitle: 'Show Feedback Form',
34
- },
35
- notification: {
36
- successTitle: 'Thank you for your feedback!',
37
- errorTitle: 'Something went wrong.',
38
- errorMessage: 'Failed to send feedback. Please try again.',
39
- hideTitle: 'Hide notification',
40
- },
41
- drawingTooltip: {
42
- text: 'Click & drag to draw',
43
- },
44
- },
45
-
46
- // Required: callback function when feedback is submitted
47
26
  onSubmit: async (data) => {
48
27
  console.log('Feedback submitted:', data);
49
28
  // Handle the feedback data (send to server, etc.)
@@ -58,40 +37,6 @@ initEcho({
58
37
  import { initEcho } from "https://esm.sh/@contember/echo";
59
38
 
60
39
  initEcho({
61
- // Optional: widget position (default: 'bottom-right')
62
- position: 'bottom-right',
63
-
64
- // Optional: primary color for buttons and UI elements
65
- primaryColor: '#007AFF',
66
-
67
- // Optional: customize all text elements in the widget
68
- textConfig: {
69
- welcomeMessage: {
70
- text: 'Click here to leave feedback',
71
- closeAriaLabel: 'Close welcome message',
72
- },
73
- feedbackForm: {
74
- title: 'Send Feedback',
75
- placeholder: "What's on your mind? We'd love to hear your feedback...",
76
- screenshotAlt: 'Screenshot Preview',
77
- submitButton: 'Send Feedback',
78
- minimizeTitle: 'Minimize',
79
- expandTitle: 'Expand',
80
- closeTitle: 'Close',
81
- showFormTitle: 'Show Feedback Form',
82
- },
83
- notification: {
84
- successTitle: 'Thank you for your feedback!',
85
- errorTitle: 'Something went wrong.',
86
- errorMessage: 'Failed to send feedback. Please try again.',
87
- hideTitle: 'Hide notification',
88
- },
89
- drawingTooltip: {
90
- text: 'Click & drag to draw',
91
- },
92
- },
93
-
94
- // Required: callback function when feedback is submitted
95
40
  onSubmit: async (data) => {
96
41
  console.log('Feedback submitted:', data);
97
42
  // Handle the feedback data (send to server, etc.)
@@ -99,3 +44,43 @@ initEcho({
99
44
  });
100
45
  </script>
101
46
  ```
47
+
48
+ ## Configuration Options
49
+
50
+ | Option | Type | Required | Default | Description |
51
+ |--------|------|----------|---------|-------------|
52
+ | `position` | string | No | 'bottom-right' | WIP: Position on the page. Available positions: 'top-left', 'top-center', 'top-right', 'middle-left', 'middle-right', 'bottom-left', 'bottom-center', 'bottom-right' |
53
+ | `primaryColor` | string | No | '#6227dc' | Primary color for UI elements |
54
+ | `textConfig` | object | No | english | Customize all text elements in the interface |
55
+ | `onSubmit` | function | Yes | - | Callback function when feedback is submitted |
56
+
57
+ ## Feedback Payload Structure
58
+
59
+ The `onSubmit` callback receives a data object with the following structure:
60
+
61
+ ```typescript
62
+ interface FeedbackPayload {
63
+ comment: string; // User's written feedback
64
+ screenshot: string; // Base64 encoded screenshot
65
+ metadata: {
66
+ url: string; // Current page URL
67
+ userAgent: string; // Browser user agent
68
+ timestamp: number; // Submission timestamp
69
+ browserInfo: {
70
+ width: number; // Width of viewport
71
+ height: number; // Height of viewport
72
+ screenWidth: number; // Width of device
73
+ screenHeight: number; // Height of device
74
+ };
75
+ };
76
+ console: Array<{ // Last 1000 console entries (logs, warnings, errors, uncaught errors, unhandled promise rejections)
77
+ type: 'log' | 'warn' | 'error'; // Type of console entry
78
+ message: string; // Content of the console message
79
+ timestamp: string; // When the message was logged
80
+ }>;
81
+ }
82
+ ```
83
+
84
+ ## License
85
+
86
+ Apache-2.0 - see [LICENSE](LICENSE) for details.
@@ -1,3 +1,3 @@
1
1
  import { type Component } from 'solid-js';
2
- import type { EchoOptions } from '~/types';
3
- export declare const Echo: Component<EchoOptions>;
2
+ import type { FullEchoConfig } from '~/types';
3
+ export declare const Echo: Component<FullEchoConfig>;
@@ -1,9 +1,7 @@
1
1
  import type { Component, JSX } from 'solid-js';
2
- import type { EnrichedStylesConfig } from '~/types';
3
2
  type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
4
3
  variant?: 'primary' | 'secondary';
5
4
  size?: 'xs' | 'sm' | 'md' | 'lg';
6
5
  };
7
6
  export declare const Button: Component<ButtonProps>;
8
- export declare const buttonStyles: (config: EnrichedStylesConfig) => string;
9
7
  export {};
@@ -1,4 +1,3 @@
1
- export * from './MessageIcon';
2
1
  export * from './ChevronRightIcon';
3
2
  export * from './ContemberIcon';
4
3
  export * from './HighlightIcon';
@@ -0,0 +1,2 @@
1
+ import type { Component } from 'solid-js';
2
+ export declare const LauncherButton: Component;
@@ -0,0 +1,2 @@
1
+ import { type Component } from 'solid-js';
2
+ export declare const StoredFeedback: Component;
@@ -1,2 +1,2 @@
1
- import type { Component } from 'solid-js';
1
+ import { type Component } from 'solid-js';
2
2
  export declare const FeedbackForm: Component;
@@ -1,18 +1,13 @@
1
1
  import type { DrawingTool } from '~/types';
2
- interface ToolConfig {
2
+ type ToolConfig = {
3
3
  id: DrawingTool;
4
4
  label: string;
5
5
  getCursor: (color: string) => string;
6
- strokeWidth: {
7
- active: number;
8
- normal: number;
9
- selected: number;
10
- };
6
+ strokeWidth: number;
11
7
  opacity: {
12
- active: number;
13
- normal: number;
8
+ selected: number;
9
+ default: number;
14
10
  };
15
- hysteresis?: number;
16
- }
11
+ };
17
12
  export declare const toolConfig: Record<DrawingTool, ToolConfig>;
18
13
  export {};
@@ -1,12 +1,9 @@
1
- import { type Component } from 'solid-js';
1
+ import { type Component, JSXElement } from 'solid-js';
2
2
  import { type EchoStore } from '~/stores';
3
- import type { FeedbackData, TextConfig } from '~/types';
4
- interface EchoProviderProps {
5
- primaryColor: string;
6
- onSubmit: (data: FeedbackData) => Promise<void>;
7
- textConfig?: Partial<TextConfig>;
8
- children: any;
9
- }
3
+ import type { FullEchoConfig } from '~/types';
4
+ type EchoProviderProps = FullEchoConfig & {
5
+ children: JSXElement;
6
+ };
10
7
  export declare const EchoProvider: Component<EchoProviderProps>;
11
8
  export declare const useEchoStore: () => EchoStore;
12
9
  export {};