chore(feedback): Use Widget instead of Form (#4547)

* chore(feedback): Use `Widget` instead of `Form`

* fix

* fix lint

---------

Co-authored-by: Antonis Lilis <[email protected]>

Author: krystofwoldrich

CHANGELOG.md

@@ -10,14 +10,14 @@
 
 ### Features
 
-- User Feedback Form Component Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435))
+- User Feedback Widget Beta ([#4435](https://github.com/getsentry/sentry-react-native/pull/4435))
 
-  To collect user feedback from inside your application call `Sentry.showFeedbackForm()` or add the `FeedbackForm` component.
+  To collect user feedback from inside your application call `Sentry.showFeedbackWidget()` or add the `FeedbackWidget` component.
 
   ```jsx
-  import { FeedbackForm } from "@sentry/react-native";
+  import { FeedbackWidget } from "@sentry/react-native";
   ...
-  <FeedbackForm/>
+  <FeedbackWidget/>
   ```
 
 ### Fixes

packages/core/src/js/feedback/FeedbackForm.styles.ts renamed to packages/core/src/js/feedback/FeedbackWidget.styles.ts

@@ -1,13 +1,13 @@
 import type { ViewStyle } from 'react-native';
 
-import type { FeedbackFormStyles } from './FeedbackForm.types';
+import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 
 const PURPLE = 'rgba(88, 74, 192, 1)';
 const FORGROUND_COLOR = '#2b2233';
 const BACKROUND_COLOR = '#ffffff';
 const BORDER_COLOR = 'rgba(41, 35, 47, 0.13)';
 
-const defaultStyles: FeedbackFormStyles = {
+const defaultStyles: FeedbackWidgetStyles = {
   container: {
     flex: 1,
     padding: 20,

packages/core/src/js/feedback/FeedbackForm.tsx renamed to packages/core/src/js/feedback/FeedbackWidget.tsx

@@ -17,23 +17,23 @@ import {
   View
 } from 'react-native';
 
-import { NATIVE } from './../wrapper';
+import { NATIVE } from '../wrapper';
 import { sentryLogo } from './branding';
 import { defaultConfiguration } from './defaults';
-import defaultStyles from './FeedbackForm.styles';
-import type { FeedbackFormProps, FeedbackFormState, FeedbackFormStyles, FeedbackGeneralConfiguration, FeedbackTextConfiguration, ImagePickerConfiguration } from './FeedbackForm.types';
+import defaultStyles from './FeedbackWidget.styles';
+import type { FeedbackGeneralConfiguration, FeedbackTextConfiguration, FeedbackWidgetProps, FeedbackWidgetState, FeedbackWidgetStyles, ImagePickerConfiguration } from './FeedbackWidget.types';
 import { isValidEmail } from './utils';
 
 /**
  * @beta
  * Implements a feedback form screen that sends feedback to Sentry using Sentry.captureFeedback.
  */
-export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFormState> {
-  public static defaultProps: Partial<FeedbackFormProps> = {
+export class FeedbackWidget extends React.Component<FeedbackWidgetProps, FeedbackWidgetState> {
+  public static defaultProps: Partial<FeedbackWidgetProps> = {
     ...defaultConfiguration
   }
 
-  public constructor(props: FeedbackFormProps) {
+  public constructor(props: FeedbackWidgetProps) {
     super(props);
 
     const currentUser = {
@@ -159,7 +159,7 @@ export class FeedbackForm extends React.Component<FeedbackFormProps, FeedbackFor
     const config: FeedbackGeneralConfiguration = this.props;
     const imagePickerConfiguration: ImagePickerConfiguration = this.props;
     const text: FeedbackTextConfiguration = this.props;
-    const styles: FeedbackFormStyles = { ...defaultStyles, ...this.props.styles };
+    const styles: FeedbackWidgetStyles = { ...defaultStyles, ...this.props.styles };
     const onCancel = (): void => {
       onFormClose();
       this.setState({ isVisible: false });

packages/core/src/js/feedback/FeedbackForm.types.ts renamed to packages/core/src/js/feedback/FeedbackWidget.types.ts

@@ -4,12 +4,12 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 /**
  * The props for the feedback form
  */
-export interface FeedbackFormProps
+export interface FeedbackWidgetProps
   extends FeedbackGeneralConfiguration,
     FeedbackTextConfiguration,
     FeedbackCallbacks,
     ImagePickerConfiguration {
-  styles?: FeedbackFormStyles;
+  styles?: FeedbackWidgetStyles;
 }
 
 /**
@@ -226,7 +226,7 @@ export interface ImagePicker {
 /**
  * The styles for the feedback form
  */
-export interface FeedbackFormStyles {
+export interface FeedbackWidgetStyles {
   container?: ViewStyle;
   title?: TextStyle;
   label?: TextStyle;
@@ -245,7 +245,7 @@ export interface FeedbackFormStyles {
 /**
  * The state of the feedback form
  */
-export interface FeedbackFormState {
+export interface FeedbackWidgetState {
   isVisible: boolean;
   name: string;
   email: string;

packages/core/src/js/feedback/FeedbackFormManager.tsx renamed to packages/core/src/js/feedback/FeedbackWidgetManager.tsx

@@ -2,16 +2,16 @@ import { logger } from '@sentry/core';
 import * as React from 'react';
 import { Animated, KeyboardAvoidingView, Modal, PanResponder, Platform } from 'react-native';
 
-import { FeedbackForm } from './FeedbackForm';
-import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackForm.styles';
-import type { FeedbackFormStyles } from './FeedbackForm.types';
+import { FeedbackWidget } from './FeedbackWidget';
+import { modalBackground, modalSheetContainer, modalWrapper } from './FeedbackWidget.styles';
+import type { FeedbackWidgetStyles } from './FeedbackWidget.types';
 import { getFeedbackOptions } from './integration';
 import { isModalSupported } from './utils';
 
 const PULL_DOWN_CLOSE_THREESHOLD = 200;
 const PULL_DOWN_ANDROID_ACTIVATION_HEIGHT = 150;
 
-class FeedbackFormManager {
+class FeedbackWidgetManager {
   private static _isVisible = false;
   private static _setVisibility: (visible: boolean) => void;
 
@@ -38,25 +38,24 @@ class FeedbackFormManager {
   }
 }
 
-interface FeedbackFormProviderProps {
+interface FeedbackWidgetProviderProps {
   children: React.ReactNode;
-  styles?: FeedbackFormStyles;
+  styles?: FeedbackWidgetStyles;
 }
 
-interface FeedbackFormProviderState {
+interface FeedbackWidgetProviderState {
   isVisible: boolean;
   backgroundOpacity: Animated.Value;
   panY: Animated.Value;
 }
 
-class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
-  public state: FeedbackFormProviderState = {
+class FeedbackWidgetProvider extends React.Component<FeedbackWidgetProviderProps> {
+  public state: FeedbackWidgetProviderState = {
     isVisible: false,
     backgroundOpacity: new Animated.Value(0),
     panY: new Animated.Value(0),
   };
 
-
   private _panResponder = PanResponder.create({
     onStartShouldSetPanResponder: (evt, _gestureState) => {
       // On Android allow pulling down only from the top to avoid breaking native gestures
@@ -88,15 +87,15 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
     },
   });
 
-  public constructor(props: FeedbackFormProviderProps) {
+  public constructor(props: FeedbackWidgetProviderProps) {
     super(props);
-    FeedbackFormManager.initialize(this._setVisibilityFunction);
+    FeedbackWidgetManager.initialize(this._setVisibilityFunction);
   }
 
   /**
    * Animates the background opacity when the modal is shown.
    */
-  public componentDidUpdate(_prevProps: any, prevState: FeedbackFormProviderState): void {
+  public componentDidUpdate(_prevProps: any, prevState: FeedbackWidgetProviderState): void {
     if (!prevState.isVisible && this.state.isVisible) {
       Animated.timing(this.state.backgroundOpacity, {
         toValue: 1,
@@ -113,7 +112,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
    */
   public render(): React.ReactNode {
     if (!isModalSupported()) {
-      logger.error('FeedbackForm Modal is not supported in React Native < 0.71 with Fabric renderer.');
+      logger.error('FeedbackWidget Modal is not supported in React Native < 0.71 with Fabric renderer.');
       return <>{this.props.children}</>;
     }
 
@@ -140,7 +139,7 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
                   style={[modalSheetContainer, { transform: [{ translateY: this.state.panY }] }]}
                   {...this._panResponder.panHandlers}
                 >
-                  <FeedbackForm {...getFeedbackOptions()}
+                  <FeedbackWidget {...getFeedbackOptions()}
                     onFormClose={this._handleClose}
                     onFormSubmitted={this._handleClose}
                     />
@@ -161,13 +160,13 @@ class FeedbackFormProvider extends React.Component<FeedbackFormProviderProps> {
   };
 
   private _handleClose = (): void => {
-    FeedbackFormManager.hide();
+    FeedbackWidgetManager.hide();
     this.setState({ isVisible: false });
   };
 }
 
-const showFeedbackForm = (): void => {
-  FeedbackFormManager.show();
+const showFeedbackWidget = (): void => {
+  FeedbackWidgetManager.show();
 };
 
-export { showFeedbackForm, FeedbackFormProvider };
+export { showFeedbackWidget, FeedbackWidgetProvider };

packages/core/src/js/feedback/defaults.ts

@@ -1,6 +1,6 @@
 import { Alert } from 'react-native';
 
-import type { FeedbackFormProps } from './FeedbackForm.types';
+import type { FeedbackWidgetProps } from './FeedbackWidget.types';
 
 const FORM_TITLE = 'Report a Bug';
 const NAME_PLACEHOLDER = 'Your Name';
@@ -20,7 +20,7 @@ const ADD_SCREENSHOT_LABEL = 'Add a screenshot';
 const REMOVE_SCREENSHOT_LABEL = 'Remove screenshot';
 const GENERIC_ERROR_TEXT = 'Unable to send feedback due to an unexpected error.';
 
-export const defaultConfiguration: Partial<FeedbackFormProps> = {
+export const defaultConfiguration: Partial<FeedbackWidgetProps> = {
   // FeedbackCallbacks
   onFormOpen: () => {
     // Does nothing by default

packages/core/src/js/feedback/integration.ts

@@ -1,16 +1,16 @@
 import type { Integration } from '@sentry/core';
 
-import type { FeedbackFormProps } from './FeedbackForm.types';
+import type { FeedbackWidgetProps } from './FeedbackWidget.types';
 
 export const FEEDBACK_FORM_INTEGRATION_NAME = 'MobileFeedback';
 
 type FeedbackIntegration = Integration & {
-  options: Partial<FeedbackFormProps>;
+  options: Partial<FeedbackWidgetProps>;
 };
 
-let savedOptions: Partial<FeedbackFormProps> = {};
+let savedOptions: Partial<FeedbackWidgetProps> = {};
 
-export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): FeedbackIntegration => {
+export const feedbackIntegration = (initOptions: FeedbackWidgetProps = {}): FeedbackIntegration => {
   savedOptions = initOptions;
 
   return {
@@ -19,4 +19,4 @@ export const feedbackIntegration = (initOptions: FeedbackFormProps = {}): Feedba
   };
 };
 
-export const getFeedbackOptions = (): Partial<FeedbackFormProps> => savedOptions;
+export const getFeedbackOptions = (): Partial<FeedbackWidgetProps> => savedOptions;

packages/core/src/js/index.ts

@@ -85,5 +85,5 @@ export type { TimeToDisplayProps } from './tracing';
 
 export { Mask, Unmask } from './replay/CustomMask';
 
-export { FeedbackForm } from './feedback/FeedbackForm';
-export { showFeedbackForm } from './feedback/FeedbackFormManager';
+export { FeedbackWidget } from './feedback/FeedbackWidget';
+export { showFeedbackWidget } from './feedback/FeedbackWidgetManager';

packages/core/src/js/sdk.tsx

@@ -8,7 +8,7 @@ import {
 import * as React from 'react';
 
 import { ReactNativeClient } from './client';
-import { FeedbackFormProvider } from './feedback/FeedbackFormManager';
+import { FeedbackWidgetProvider } from './feedback/FeedbackWidgetManager';
 import { getDevServer } from './integrations/debugsymbolicatorutils';
 import { getDefaultIntegrations } from './integrations/default';
 import type { ReactNativeClientOptions, ReactNativeOptions, ReactNativeWrapperOptions } from './options';
@@ -164,9 +164,9 @@ export function wrap<P extends Record<string, unknown>>(
     return (
       <TouchEventBoundary {...(options?.touchEventBoundaryProps ?? {})}>
         <ReactNativeProfiler {...profilerProps}>
-          <FeedbackFormProvider>
+          <FeedbackWidgetProvider>
             <RootComponent {...appProps} />
-          </FeedbackFormProvider>
+          </FeedbackWidgetProvider>
         </ReactNativeProfiler>
       </TouchEventBoundary>
     );