Skip to content

Commit ea96f76

Browse files
ryan953ryan953
authored
Ryan953/feedback async (#10683)
This is building off a version of #10590, specifically working towards async loading of the Dialog component, and rewriting it in preact in order to host and interact with the screenshot feature in an easier way. Setup in my test app is (gives screenshots): ``` import { feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration } from "@sentry-internal/feedback2"; integrations: [ feedback2Integration({ colorScheme: 'light', isNameRequired: false, isEmailRequired: false, }), feedback2ModalIntegration(), feedback2ScreenshotIntegration(), ] ```
1 parent a1771bd commit ea96f76

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+2564
-10
lines changed

‎.size-limit.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,27 @@ module.exports = [
6161
gzip: true,
6262
limit: '50 KB',
6363
},
64+
{
65+
name: '@sentry/browser (incl. feedback2Integration) - Webpack (gzipped)',
66+
path: 'packages/browser/build/npm/esm/index.js',
67+
import: '{ init, feedback2Integration }',
68+
gzip: true,
69+
limit: '50 KB',
70+
},
71+
{
72+
name: '@sentry/browser (incl. feedback2ModalIntegration) - Webpack (gzipped)',
73+
path: 'packages/browser/build/npm/esm/index.js',
74+
import: '{ init, feedback2Integration, feedback2ModalIntegration }',
75+
gzip: true,
76+
limit: '50 KB',
77+
},
78+
{
79+
name: '@sentry/browser (incl. feedback2ScreenshotIntegration) - Webpack (gzipped)',
80+
path: 'packages/browser/build/npm/esm/index.js',
81+
import: '{ init, feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration }',
82+
gzip: true,
83+
limit: '50 KB',
84+
},
6485
{
6586
name: '@sentry/browser (incl. sendFeedback) - Webpack (gzipped)',
6687
path: 'packages/browser/build/npm/esm/index.js',

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"packages/eslint-plugin-sdk",
5858
"packages/feedback",
5959
"packages/feedback-screenshot",
60+
"packages/feedback2",
6061
"packages/gatsby",
6162
"packages/hub",
6263
"packages/integrations",

‎packages/feedback2/.eslintignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules/
2+
build/

‎packages/feedback2/.eslintrc.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
2+
// lives
3+
4+
// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
5+
6+
module.exports = {
7+
extends: ['../../.eslintrc.js'],
8+
overrides: [
9+
{
10+
files: ['src/**/*.ts', 'src/**/*.tsx'],
11+
rules: {
12+
'@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
13+
},
14+
},
15+
{
16+
files: ['jest.setup.ts', 'jest.config.ts'],
17+
parserOptions: {
18+
project: ['tsconfig.test.json'],
19+
},
20+
rules: {
21+
'no-console': 'off',
22+
},
23+
},
24+
],
25+
};

‎packages/feedback2/.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
node_modules
2+
/*.tgz
3+
.eslintcache
4+
build

‎packages/feedback2/LICENSE

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

‎packages/feedback2/README.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<p align="center">
2+
<a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
3+
<img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
4+
</a>
5+
</p>
6+
7+
# Sentry Integration for Feedback
8+
9+
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
10+
[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
11+
12+
To view Feedback in Sentry, your [Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
13+
14+
## Installation
15+
16+
Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for installation instructions.
17+
18+
## Configuration
19+
20+
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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const baseConfig = require('../../jest/jest.config.js');
2+
3+
module.exports = {
4+
...baseConfig,
5+
testEnvironment: 'jsdom',
6+
};

‎packages/feedback2/package.json

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{
2+
"name": "@sentry-internal/feedback2",
3+
"version": "7.100.0",
4+
"description": "Sentry SDK integration for user feedback",
5+
"repository": "git://github.com/getsentry/sentry-javascript.git",
6+
"homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
7+
"author": "Sentry",
8+
"license": "MIT",
9+
"engines": {
10+
"node": ">=12"
11+
},
12+
"files": [
13+
"cjs",
14+
"esm",
15+
"types",
16+
"types-ts3.8"
17+
],
18+
"main": "build/npm/cjs/index.js",
19+
"module": "build/npm/esm/index.js",
20+
"types": "build/npm/types/index.d.ts",
21+
"typesVersions": {
22+
"<4.9": {
23+
"build/npm/types/index.d.ts": [
24+
"build/npm/types-ts3.8/index.d.ts"
25+
]
26+
}
27+
},
28+
"publishConfig": {
29+
"access": "public"
30+
},
31+
"dependencies": {
32+
"@sentry/core": "7.100.0",
33+
"@sentry/types": "7.100.0",
34+
"@sentry/utils": "7.100.0",
35+
"preact": "^10.19.4",
36+
"preact-compat": "^3.19.0"
37+
},
38+
"scripts": {
39+
"build": "run-p build:transpile build:types build:bundle",
40+
"build:transpile": "rollup -c rollup.npm.config.mjs",
41+
"build:bundle": "rollup -c rollup.bundle.config.mjs",
42+
"build:dev": "run-p build:transpile build:types",
43+
"build:types": "run-s build:types:core build:types:downlevel",
44+
"build:types:core": "tsc -p tsconfig.types.json",
45+
"build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
46+
"build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
47+
"build:dev:watch": "run-p build:transpile:watch build:types:watch",
48+
"build:transpile:watch": "yarn build:transpile --watch",
49+
"build:bundle:watch": "yarn build:bundle --watch",
50+
"build:types:watch": "tsc -p tsconfig.types.json --watch",
51+
"build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
52+
"circularDepCheck": "madge --circular src/index.ts",
53+
"clean": "rimraf build sentry-feedback-*.tgz",
54+
"fix": "eslint . --format stylish --fix",
55+
"lint": "eslint . --format stylish",
56+
"test": "jest",
57+
"test:watch": "jest --watch",
58+
"yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
59+
},
60+
"volta": {
61+
"extends": "../../package.json"
62+
},
63+
"sideEffects": false
64+
}

‎packages/feedback2/rollup.bundle.config.mjs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
2+
3+
export default makeBundleConfigVariants(
4+
makeBaseBundleConfig({
5+
bundleType: 'addon',
6+
entrypoints: ['src/index.ts'],
7+
jsVersion: 'es6',
8+
licenseTitle: '@sentry-internal/feedback2',
9+
outputFileBase: () => 'bundles/feedback2',
10+
sucrase: {
11+
jsxPragma: 'h',
12+
jsxFragmentPragma: 'Fragment',
13+
},
14+
}),
15+
);

‎packages/feedback2/rollup.npm.config.mjs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
2+
3+
export default makeNPMConfigVariants(
4+
makeBaseNPMConfig({
5+
hasBundles: true,
6+
packageSpecificConfig: {
7+
output: {
8+
// set exports to 'named' or 'auto' so that rollup doesn't warn
9+
exports: 'named',
10+
// set preserveModules to false because for Feedback we actually want
11+
// to bundle everything into one file.
12+
preserveModules: false,
13+
},
14+
},
15+
sucrase: {
16+
jsxPragma: 'h',
17+
jsxFragmentPragma: 'Fragment',
18+
},
19+
}),
20+
);

‎packages/feedback2/src/constants/index.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { GLOBAL_OBJ } from '@sentry/utils';
2+
3+
export { DEFAULT_THEME } from './theme';
4+
5+
// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
6+
// prevents the browser package from being bundled in the CDN bundle, and avoids a
7+
// circular dependency between the browser and feedback packages
8+
export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
9+
export const DOCUMENT = WINDOW.document;
10+
export const NAVIGATOR = WINDOW.navigator;
11+
12+
export const ACTOR_LABEL = 'Report a Bug';
13+
export const CANCEL_BUTTON_LABEL = 'Cancel';
14+
export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
15+
export const FORM_TITLE = 'Report a Bug';
16+
export const EMAIL_PLACEHOLDER = '[email protected]';
17+
export const EMAIL_LABEL = 'Email';
18+
export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
19+
export const MESSAGE_LABEL = 'Description';
20+
export const NAME_PLACEHOLDER = 'Your Name';
21+
export const NAME_LABEL = 'Name';
22+
export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
23+
24+
export const FEEDBACK_WIDGET_SOURCE = 'widget';
25+
export const FEEDBACK_API_SOURCE = 'api';
26+
27+
export const SUCCESS_MESSAGE_TIMEOUT = 5000;

‎packages/feedback2/src/constants/theme.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const LIGHT_BACKGROUND = '#ffffff';
2+
const INHERIT = 'inherit';
3+
const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
4+
5+
export const LIGHT_THEME = {
6+
fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
7+
fontSize: '14px',
8+
9+
background: LIGHT_BACKGROUND,
10+
backgroundHover: '#f6f6f7',
11+
foreground: '#2b2233',
12+
border: '1.5px solid rgba(41, 35, 47, 0.13)',
13+
borderRadius: '12px',
14+
boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
15+
16+
success: '#268d75',
17+
error: '#df3338',
18+
19+
submitBackground: 'rgba(88, 74, 192, 1)',
20+
submitBackgroundHover: SUBMIT_COLOR,
21+
submitBorder: SUBMIT_COLOR,
22+
submitOutlineFocus: '#29232f',
23+
submitForeground: LIGHT_BACKGROUND,
24+
submitForegroundHover: LIGHT_BACKGROUND,
25+
26+
cancelBackground: 'transparent',
27+
cancelBackgroundHover: 'var(--background-hover)',
28+
cancelBorder: 'var(--border)',
29+
cancelOutlineFocus: 'var(--input-outline-focus)',
30+
cancelForeground: 'var(--foreground)',
31+
cancelForegroundHover: 'var(--foreground)',
32+
33+
inputBackground: INHERIT,
34+
inputForeground: INHERIT,
35+
inputBorder: 'var(--border)',
36+
inputOutlineFocus: SUBMIT_COLOR,
37+
38+
formBorderRadius: '20px',
39+
formContentBorderRadius: '6px',
40+
};
41+
42+
export const DEFAULT_THEME = {
43+
light: LIGHT_THEME,
44+
dark: {
45+
...LIGHT_THEME,
46+
47+
background: '#29232f',
48+
backgroundHover: '#352f3b',
49+
foreground: '#ebe6ef',
50+
border: '1.5px solid rgba(235, 230, 239, 0.15)',
51+
52+
success: '#2da98c',
53+
error: '#f55459',
54+
},
55+
};

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { DOCUMENT } from '../../constants';
2+
3+
/**
4+
* Creates <style> element for widget actor (button that opens the dialog)
5+
*/
6+
export function createActorStyles(): HTMLStyleElement {
7+
const style = DOCUMENT.createElement('style');
8+
style.textContent = `
9+
.widget__actor {
10+
position: fixed;
11+
left: var(--left);
12+
right: var(--right);
13+
bottom: var(--bottom);
14+
top: var(--top);
15+
z-index: var(--z-index);
16+
17+
line-height: 25px;
18+
19+
display: flex;
20+
align-items: center;
21+
gap: 8px;
22+
z-index: 9000;
23+
24+
border-radius: var(--border-radius);
25+
cursor: pointer;
26+
font-size: 14px;
27+
font-weight: 600;
28+
padding: 12px 16px;
29+
text-decoration: none;
30+
31+
color: var(--foreground);
32+
background-color: var(--background);
33+
border: var(--border);
34+
box-shadow: var(--box-shadow);
35+
opacity: 1;
36+
transition: opacity 0.1s ease-in-out;
37+
}
38+
39+
.widget__actor:hover {
40+
background-color: var(--background-hover);
41+
}
42+
43+
.widget__actor svg {
44+
width: 16px;
45+
height: 16px;
46+
}
47+
48+
.widget__actor--hidden {
49+
opacity: 0;
50+
pointer-events: none;
51+
visibility: hidden;
52+
}
53+
54+
.widget__actor__text {
55+
}
56+
57+
.feedback-icon path {
58+
fill: var(--foreground);
59+
}
60+
`;
61+
62+
return style;
63+
}

0 commit comments

Comments
 (0)