Ryan953/feedback async

.size-limit.js

@@ -61,6 +61,27 @@ module.exports = [
     gzip: true,
     limit: '50 KB',
   },
+  {
+    name: '@sentry/browser (incl. feedback2Integration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedback2ModalIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration, feedback2ModalIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedback2ScreenshotIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
   {
     name: '@sentry/browser (incl. sendFeedback) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',

package.json

@@ -57,6 +57,7 @@
     "packages/eslint-plugin-sdk",
     "packages/feedback",
     "packages/feedback-screenshot",
+    "packages/feedback2",
     "packages/gatsby",
     "packages/hub",
     "packages/integrations",

packages/feedback2/.eslintignore

@@ -0,0 +1,2 @@
+node_modules/
+build/

packages/feedback2/.eslintrc.js

@@ -0,0 +1,25 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts', 'src/**/*.tsx'],
+      rules: {
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};

packages/feedback2/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+/*.tgz
+.eslintcache
+build

packages/feedback2/LICENSE

@@ -0,0 +1,14 @@
+Copyright (c) 2023 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/feedback2/README.md

@@ -0,0 +1,20 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration for Feedback
+
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
+[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
+
+To view Feedback in Sentry, your [Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
+## Installation
+
+Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for installation instructions.
+
+## Configuration
+
+The Feedback integration is highly customizable, please read the [official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the most up-to-date configuration options.

packages/feedback2/jest.config.js

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

packages/feedback2/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@sentry-internal/feedback2",
+  "version": "7.100.0",
+  "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",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types",
+    "types-ts3.8"
+  ],
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/core": "7.100.0",
+    "@sentry/types": "7.100.0",
+    "@sentry/utils": "7.100.0",
+    "preact": "^10.19.4",
+    "preact-compat": "^3.19.0"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types build:bundle",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:bundle": "rollup -c rollup.bundle.config.mjs",
+    "build:dev": "run-p build:transpile build:types",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
+    "build:transpile:watch": "yarn build:transpile --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build sentry-feedback-*.tgz",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": false
+}

packages/feedback2/rollup.bundle.config.mjs

@@ -0,0 +1,15 @@
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeBundleConfigVariants(
+  makeBaseBundleConfig({
+    bundleType: 'addon',
+    entrypoints: ['src/index.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry-internal/feedback2',
+    outputFileBase: () => 'bundles/feedback2',
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);

packages/feedback2/rollup.npm.config.mjs

@@ -0,0 +1,20 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn
+        exports: 'named',
+        // set preserveModules to false because for Feedback we actually want
+        // to bundle everything into one file.
+        preserveModules: false,
+      },
+    },
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);

packages/feedback2/src/constants/index.ts

@@ -0,0 +1,27 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+export { DEFAULT_THEME } from './theme';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+export const DOCUMENT = WINDOW.document;
+export const NAVIGATOR = WINDOW.navigator;
+
+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!';
+
+export const FEEDBACK_WIDGET_SOURCE = 'widget';
+export const FEEDBACK_API_SOURCE = 'api';
+
+export const SUCCESS_MESSAGE_TIMEOUT = 5000;

packages/feedback2/src/constants/theme.ts

@@ -0,0 +1,55 @@
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
+
+export const LIGHT_THEME = {
+  fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  borderRadius: '12px',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: SUBMIT_COLOR,
+  submitBorder: SUBMIT_COLOR,
+  submitOutlineFocus: '#29232f',
+  submitForeground: LIGHT_BACKGROUND,
+  submitForegroundHover: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelOutlineFocus: 'var(--input-outline-focus)',
+  cancelForeground: 'var(--foreground)',
+  cancelForegroundHover: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputOutlineFocus: SUBMIT_COLOR,
+
+  formBorderRadius: '20px',
+  formContentBorderRadius: '6px',
+};
+
+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',
+  },
+};

packages/feedback2/src/core/components/Actor.css.ts

@@ -0,0 +1,63 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget actor (button that opens the dialog)
+ */
+export function createActorStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+  style.textContent = `
+.widget__actor {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
+  line-height: 25px;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 9000;
+
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 16px;
+  text-decoration: none;
+
+  color: var(--foreground);
+  background-color: var(--background);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
+  opacity: 1;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.widget__actor:hover {
+  background-color: var(--background-hover);
+}
+
+.widget__actor svg {
+  width: 16px;
+  height: 16px;
+}
+
+.widget__actor--hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.widget__actor__text {
+}
+
+.feedback-icon path {
+  fill: var(--foreground);
+}
+`;
+
+  return style;
+}