feat(feedback): Implement new user feedback embeddable widget (#9217)

Implements the new user feedback widget. Please view README for instructions and configuration options.

Author: billyvg

.github/workflows/build.yml

@@ -98,6 +98,7 @@ jobs:
               - *shared
               - 'packages/browser/**'
               - 'packages/replay/**'
+              - 'packages/feedback/**'
             browser_integration:
               - *shared
               - *browser

.size-limit.js

@@ -121,4 +121,11 @@ module.exports = [
     gzip: true,
     limit: '57 KB',
   },
+  {
+    name: '@sentry-internal/feedback - Webpack (gzipped)',
+    path: 'packages/feedback/build/npm/esm/index.js',
+    import: '{ Feedback }',
+    gzip: true,
+    limit: '35 KB',
+  },
 ];

packages/feedback/README.md

@@ -55,6 +55,7 @@ The following options can be configured as options to the integration, in `new F
 | key       | type    | default | description |
 | --------- | ------- | ------- | ----------- |
 | `autoInject`       | `boolean` | `true`  | Injects the Feedback widget into the application when the integration is added. This is useful to turn off if you bring your own button, or only want to show the widget on certain views. |
+| `showBranding` | `boolean` | `true` | Displays the Sentry logo inside of the dialog |
 | `colorScheme` | `"system" \| "light" \| "dark"` | `"system"` | The color theme to use. `"system"` will follow your OS colorscheme. |
 
 ### User/form Related Configuration
@@ -93,7 +94,7 @@ Most text that you see in the default Feedback widget can be customized.
 | `formTitle` | `Report a Bug` | The title at the top of the feedback form dialog. |
 | `nameLabel` | `Name` | The label of the name input field. |
 | `namePlaceholder` | `Your Name` | The placeholder for the name input field. |
-| `emailLabel` | `Email` | The label of the email input field. ||
+| `emailLabel` | `Email` | The label of the email input field. |
 | `emailPlaceholder` | `[email protected]` | The placeholder for the email input field. |
 | `messageLabel` | `Description` | The label for the feedback description input field. |
 | `messagePlaceholder` | `What's the bug? What did you expect?` | The placeholder for the feedback description input field. |

packages/feedback/jest.config.js

@@ -1 +1,6 @@
-module.exports = require('../../jest/jest.config.js');
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};

packages/feedback/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/feedback",
-  "version": "7.77.0",
+  "version": "0.0.1-alpha.9",
   "description": "Sentry SDK integration for user feedback",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
@@ -23,9 +23,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/core": "7.70.0",
-    "@sentry/types": "7.70.0",
-    "@sentry/utils": "7.70.0"
+    "@sentry/browser": "7.77.0",
+    "@sentry/core": "7.77.0",
+    "@sentry/types": "7.77.0",
+    "@sentry/utils": "7.77.0"
   },
   "scripts": {
     "build": "run-p build:transpile build:types build:bundle",
@@ -51,7 +52,7 @@
     "lint:prettier": "prettier --check \"{src,test,scripts}/**/*.ts\"",
     "test": "jest",
     "test:watch": "jest --watch",
-    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push"
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
   },
   "volta": {
     "extends": "../../package.json"

packages/feedback/src/constants.ts

@@ -0,0 +1,57 @@
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const LIGHT_THEME = {
+  fontFamily: "'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: 'rgba(108, 95, 199, 1)',
+  submitBorder: 'rgba(108, 95, 199, 1)',
+  submitForeground: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelForeground: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputBorderFocus: 'rgba(108, 95, 199, 1)',
+};
+
+export const DEFAULT_THEME = {
+  light: LIGHT_THEME,
+  dark: {
+    ...LIGHT_THEME,
+
+    background: '#29232f',
+    backgroundHover: '#352f3b',
+    foreground: '#ebe6ef',
+    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+
+    success: '#2da98c',
+    error: '#f55459',
+  },
+};
+
+export const ACTOR_LABEL = 'Report a Bug';
+export const CANCEL_BUTTON_LABEL = 'Cancel';
+export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+export const FORM_TITLE = 'Report a Bug';
+export const EMAIL_PLACEHOLDER = '[email protected]';
+export const EMAIL_LABEL = 'Email';
+export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+export const MESSAGE_LABEL = 'Description';
+export const NAME_PLACEHOLDER = 'Your Name';
+export const NAME_LABEL = 'Name';
+export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';

packages/feedback/src/index.ts

@@ -1 +1,2 @@
 export { sendFeedbackRequest } from './util/sendFeedbackRequest';
+export { Feedback } from './integration';