react-linear-feedback 0.1.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.
- package/LICENSE +21 -0
- package/README.md +131 -0
- package/dist/react/index.cjs +627 -0
- package/dist/react/index.d.cts +109 -0
- package/dist/react/index.d.ts +109 -0
- package/dist/react/index.js +622 -0
- package/dist/server/index.cjs +170 -0
- package/dist/server/index.d.cts +85 -0
- package/dist/server/index.d.ts +85 -0
- package/dist/server/index.js +165 -0
- package/package.json +76 -0
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
/** Rectangle in PAGE coordinates: clientX + window.scrollX, clientY + window.scrollY. */
|
|
4
|
+
type FeedbackRect = {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
};
|
|
10
|
+
/** Built-in inline icon keys usable on a type option. */
|
|
11
|
+
type FeedbackIconName = "bug" | "improvement" | "dot";
|
|
12
|
+
/** A selectable issue type shown in the composer's segmented control. */
|
|
13
|
+
type FeedbackTypeOption = {
|
|
14
|
+
/** Stable id sent to the server and mapped to a Linear label name. */
|
|
15
|
+
id: string;
|
|
16
|
+
/** Human label shown in the UI and used in the issue title (e.g. "Bug"). */
|
|
17
|
+
label: string;
|
|
18
|
+
/** Swatch background color, any CSS color. */
|
|
19
|
+
color: string;
|
|
20
|
+
/** Optional built-in icon for the swatch. */
|
|
21
|
+
icon?: FeedbackIconName;
|
|
22
|
+
};
|
|
23
|
+
type FeedbackAnnotation = {
|
|
24
|
+
rect: FeedbackRect;
|
|
25
|
+
/** The note the user typed. */
|
|
26
|
+
note: string;
|
|
27
|
+
/** Selected type id (e.g. "bug" | "improvement"). */
|
|
28
|
+
type: string;
|
|
29
|
+
/** Human label for the selected type (e.g. "Bug") — used in the issue title. */
|
|
30
|
+
typeLabel?: string;
|
|
31
|
+
/** Optional reporter name (persisted in localStorage). */
|
|
32
|
+
name?: string;
|
|
33
|
+
};
|
|
34
|
+
type FeedbackContext = {
|
|
35
|
+
url: string;
|
|
36
|
+
pathname: string;
|
|
37
|
+
title: string;
|
|
38
|
+
viewport: {
|
|
39
|
+
width: number;
|
|
40
|
+
height: number;
|
|
41
|
+
dpr: number;
|
|
42
|
+
};
|
|
43
|
+
scroll: {
|
|
44
|
+
x: number;
|
|
45
|
+
y: number;
|
|
46
|
+
};
|
|
47
|
+
userAgent: string;
|
|
48
|
+
referrer: string;
|
|
49
|
+
/** Short CSS-ish path to the element under the annotation — a hint for triage/agents. */
|
|
50
|
+
elementHint: string | null;
|
|
51
|
+
timestamp: string;
|
|
52
|
+
};
|
|
53
|
+
/** Body POSTed to the feedback endpoint. */
|
|
54
|
+
type FeedbackPayload = {
|
|
55
|
+
annotation: FeedbackAnnotation;
|
|
56
|
+
context: FeedbackContext;
|
|
57
|
+
/** data:image/jpeg;base64,… or null if capture failed (submission still proceeds). */
|
|
58
|
+
screenshot: string | null;
|
|
59
|
+
};
|
|
60
|
+
/** Successful response from the feedback endpoint. */
|
|
61
|
+
type FeedbackResult = {
|
|
62
|
+
ok: true;
|
|
63
|
+
issueId?: string;
|
|
64
|
+
identifier?: string;
|
|
65
|
+
url?: string;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
declare const DEFAULT_TYPES: FeedbackTypeOption[];
|
|
69
|
+
type FeedbackPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
70
|
+
type FeedbackWidgetProps = {
|
|
71
|
+
/** Endpoint that runs the server handler (default "/api/feedback"). */
|
|
72
|
+
endpoint?: string;
|
|
73
|
+
/** Brand color for the FAB, active states and focus rings (any CSS color). */
|
|
74
|
+
brandColor?: string;
|
|
75
|
+
/** Corner for the floating button (default "bottom-right"). */
|
|
76
|
+
position?: FeedbackPosition;
|
|
77
|
+
/** Selectable issue types (default Bug / Improvement). */
|
|
78
|
+
types?: FeedbackTypeOption[];
|
|
79
|
+
/** Ask for a reporter name before the first submission (default true). */
|
|
80
|
+
nameRequired?: boolean;
|
|
81
|
+
/** localStorage key for the remembered name. */
|
|
82
|
+
nameStorageKey?: string;
|
|
83
|
+
/** Label on the floating button (default "Give feedback"). */
|
|
84
|
+
fabLabel?: string;
|
|
85
|
+
};
|
|
86
|
+
declare function FeedbackWidget({ endpoint, brandColor, position, types, nameRequired, nameStorageKey, fabLabel, }: FeedbackWidgetProps): react.JSX.Element;
|
|
87
|
+
|
|
88
|
+
type FeedbackGateProps = FeedbackWidgetProps & {
|
|
89
|
+
/** URL param that toggles the tool: `?feedback` / `?feedback=1` on, `?feedback=0` off. */
|
|
90
|
+
urlParam?: string;
|
|
91
|
+
/** Cookie that remembers the tool is enabled. */
|
|
92
|
+
cookieName?: string;
|
|
93
|
+
cookieValue?: string;
|
|
94
|
+
cookieMaxAgeSeconds?: number;
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* Gate that enables the widget when the page is loaded with `?feedback` (any value except `0`),
|
|
98
|
+
* remembers it via a cookie, and renders nothing otherwise. Framework-agnostic — works in any
|
|
99
|
+
* React app (Next.js, Vite, Remix, CRA…).
|
|
100
|
+
*/
|
|
101
|
+
declare function FeedbackGate({ urlParam, cookieName, cookieValue, cookieMaxAgeSeconds, ...widgetProps }: FeedbackGateProps): react.JSX.Element | null;
|
|
102
|
+
|
|
103
|
+
type SubmitOptions = {
|
|
104
|
+
/** Endpoint that runs the server handler (default "/api/feedback"). */
|
|
105
|
+
endpoint?: string;
|
|
106
|
+
};
|
|
107
|
+
declare function submitFeedback(annotation: FeedbackAnnotation, opts?: SubmitOptions): Promise<FeedbackResult | null>;
|
|
108
|
+
|
|
109
|
+
export { DEFAULT_TYPES, type FeedbackAnnotation, type FeedbackContext, FeedbackGate, type FeedbackGateProps, type FeedbackIconName, type FeedbackPayload, type FeedbackPosition, type FeedbackRect, type FeedbackResult, type FeedbackTypeOption, FeedbackWidget, type FeedbackWidgetProps, type SubmitOptions, submitFeedback };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
|
|
3
|
+
/** Rectangle in PAGE coordinates: clientX + window.scrollX, clientY + window.scrollY. */
|
|
4
|
+
type FeedbackRect = {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
width: number;
|
|
8
|
+
height: number;
|
|
9
|
+
};
|
|
10
|
+
/** Built-in inline icon keys usable on a type option. */
|
|
11
|
+
type FeedbackIconName = "bug" | "improvement" | "dot";
|
|
12
|
+
/** A selectable issue type shown in the composer's segmented control. */
|
|
13
|
+
type FeedbackTypeOption = {
|
|
14
|
+
/** Stable id sent to the server and mapped to a Linear label name. */
|
|
15
|
+
id: string;
|
|
16
|
+
/** Human label shown in the UI and used in the issue title (e.g. "Bug"). */
|
|
17
|
+
label: string;
|
|
18
|
+
/** Swatch background color, any CSS color. */
|
|
19
|
+
color: string;
|
|
20
|
+
/** Optional built-in icon for the swatch. */
|
|
21
|
+
icon?: FeedbackIconName;
|
|
22
|
+
};
|
|
23
|
+
type FeedbackAnnotation = {
|
|
24
|
+
rect: FeedbackRect;
|
|
25
|
+
/** The note the user typed. */
|
|
26
|
+
note: string;
|
|
27
|
+
/** Selected type id (e.g. "bug" | "improvement"). */
|
|
28
|
+
type: string;
|
|
29
|
+
/** Human label for the selected type (e.g. "Bug") — used in the issue title. */
|
|
30
|
+
typeLabel?: string;
|
|
31
|
+
/** Optional reporter name (persisted in localStorage). */
|
|
32
|
+
name?: string;
|
|
33
|
+
};
|
|
34
|
+
type FeedbackContext = {
|
|
35
|
+
url: string;
|
|
36
|
+
pathname: string;
|
|
37
|
+
title: string;
|
|
38
|
+
viewport: {
|
|
39
|
+
width: number;
|
|
40
|
+
height: number;
|
|
41
|
+
dpr: number;
|
|
42
|
+
};
|
|
43
|
+
scroll: {
|
|
44
|
+
x: number;
|
|
45
|
+
y: number;
|
|
46
|
+
};
|
|
47
|
+
userAgent: string;
|
|
48
|
+
referrer: string;
|
|
49
|
+
/** Short CSS-ish path to the element under the annotation — a hint for triage/agents. */
|
|
50
|
+
elementHint: string | null;
|
|
51
|
+
timestamp: string;
|
|
52
|
+
};
|
|
53
|
+
/** Body POSTed to the feedback endpoint. */
|
|
54
|
+
type FeedbackPayload = {
|
|
55
|
+
annotation: FeedbackAnnotation;
|
|
56
|
+
context: FeedbackContext;
|
|
57
|
+
/** data:image/jpeg;base64,… or null if capture failed (submission still proceeds). */
|
|
58
|
+
screenshot: string | null;
|
|
59
|
+
};
|
|
60
|
+
/** Successful response from the feedback endpoint. */
|
|
61
|
+
type FeedbackResult = {
|
|
62
|
+
ok: true;
|
|
63
|
+
issueId?: string;
|
|
64
|
+
identifier?: string;
|
|
65
|
+
url?: string;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
declare const DEFAULT_TYPES: FeedbackTypeOption[];
|
|
69
|
+
type FeedbackPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
70
|
+
type FeedbackWidgetProps = {
|
|
71
|
+
/** Endpoint that runs the server handler (default "/api/feedback"). */
|
|
72
|
+
endpoint?: string;
|
|
73
|
+
/** Brand color for the FAB, active states and focus rings (any CSS color). */
|
|
74
|
+
brandColor?: string;
|
|
75
|
+
/** Corner for the floating button (default "bottom-right"). */
|
|
76
|
+
position?: FeedbackPosition;
|
|
77
|
+
/** Selectable issue types (default Bug / Improvement). */
|
|
78
|
+
types?: FeedbackTypeOption[];
|
|
79
|
+
/** Ask for a reporter name before the first submission (default true). */
|
|
80
|
+
nameRequired?: boolean;
|
|
81
|
+
/** localStorage key for the remembered name. */
|
|
82
|
+
nameStorageKey?: string;
|
|
83
|
+
/** Label on the floating button (default "Give feedback"). */
|
|
84
|
+
fabLabel?: string;
|
|
85
|
+
};
|
|
86
|
+
declare function FeedbackWidget({ endpoint, brandColor, position, types, nameRequired, nameStorageKey, fabLabel, }: FeedbackWidgetProps): react.JSX.Element;
|
|
87
|
+
|
|
88
|
+
type FeedbackGateProps = FeedbackWidgetProps & {
|
|
89
|
+
/** URL param that toggles the tool: `?feedback` / `?feedback=1` on, `?feedback=0` off. */
|
|
90
|
+
urlParam?: string;
|
|
91
|
+
/** Cookie that remembers the tool is enabled. */
|
|
92
|
+
cookieName?: string;
|
|
93
|
+
cookieValue?: string;
|
|
94
|
+
cookieMaxAgeSeconds?: number;
|
|
95
|
+
};
|
|
96
|
+
/**
|
|
97
|
+
* Gate that enables the widget when the page is loaded with `?feedback` (any value except `0`),
|
|
98
|
+
* remembers it via a cookie, and renders nothing otherwise. Framework-agnostic — works in any
|
|
99
|
+
* React app (Next.js, Vite, Remix, CRA…).
|
|
100
|
+
*/
|
|
101
|
+
declare function FeedbackGate({ urlParam, cookieName, cookieValue, cookieMaxAgeSeconds, ...widgetProps }: FeedbackGateProps): react.JSX.Element | null;
|
|
102
|
+
|
|
103
|
+
type SubmitOptions = {
|
|
104
|
+
/** Endpoint that runs the server handler (default "/api/feedback"). */
|
|
105
|
+
endpoint?: string;
|
|
106
|
+
};
|
|
107
|
+
declare function submitFeedback(annotation: FeedbackAnnotation, opts?: SubmitOptions): Promise<FeedbackResult | null>;
|
|
108
|
+
|
|
109
|
+
export { DEFAULT_TYPES, type FeedbackAnnotation, type FeedbackContext, FeedbackGate, type FeedbackGateProps, type FeedbackIconName, type FeedbackPayload, type FeedbackPosition, type FeedbackRect, type FeedbackResult, type FeedbackTypeOption, FeedbackWidget, type FeedbackWidgetProps, type SubmitOptions, submitFeedback };
|