fix(types): Fix optional types for theme

Author: billyvg

packages/feedback/src/integration.ts

@@ -17,19 +17,17 @@ import {
   SUCCESS_MESSAGE_TEXT,
 } from './constants';
 import type {
-  CreateWidgetOptionOverrides,
-  FeedbackConfigurationWithDefaults,
+  OptionalFeedbackConfiguration,
   FeedbackInternalOptions,
   Widget,
 } from './types';
+import { mergeOptions } from './util/mergeOptions';
 import { createActorStyles } from './widget/Actor.css';
 import { createShadowHost } from './widget/createShadowHost';
 import { createWidget } from './widget/createWidget';
 
 const doc = WINDOW.document;
 
-type FeedbackConfiguration = Partial<FeedbackConfigurationWithDefaults>;
-
 /**
  * Feedback integration. When added as an integration to the SDK, it will
  * inject a button in the bottom-right corner of the window that opens a
@@ -110,7 +108,7 @@ export class Feedback implements Integration {
     onDialogOpen,
     onSubmitError,
     onSubmitSuccess,
-  }: FeedbackConfiguration = {}) {
+  }: OptionalFeedbackConfiguration = {}) {
     // Initializations
     this.name = Feedback.id;
 
@@ -132,8 +130,14 @@ export class Feedback implements Integration {
       useSentryUser,
 
       colorScheme,
-      themeDark: Object.assign({}, DEFAULT_THEME.dark, themeDark),
-      themeLight: Object.assign({}, DEFAULT_THEME.light, themeLight),
+      themeDark: {
+        ...DEFAULT_THEME.dark,
+        ...themeDark
+      },
+      themeLight: {
+        ...DEFAULT_THEME.light,
+        ...themeLight
+      },
 
       buttonLabel,
       cancelButtonLabel,
@@ -190,12 +194,9 @@ export class Feedback implements Integration {
   /**
    * Adds click listener to attached element to open a feedback dialog
    */
-  public attachTo(el: Element | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null {
+  public attachTo(el: Element | string, optionOverrides: OptionalFeedbackConfiguration): Widget | null {
     try {
-      const options = {
-        ...this.options,
-        ...optionOverrides,
-      };
+      const options = mergeOptions(this.options, optionOverrides);
 
       return this._ensureShadowHost<Widget | null>(options, ({ shadow }) => {
         const targetEl =
@@ -219,12 +220,9 @@ export class Feedback implements Integration {
   /**
    * Creates a new widget. Accepts partial options to override any options passed to constructor.
    */
-  public createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null {
+  public createWidget(optionOverrides: OptionalFeedbackConfiguration): Widget | null {
     try {
-      return this._createWidget({
-        ...this.options,
-        ...optionOverrides,
-      });
+      return this._createWidget(mergeOptions(this.options, optionOverrides));
     } catch (err) {
       logger.error(err);
       return null;

packages/feedback/src/types/index.ts

@@ -196,16 +196,22 @@ export interface FeedbackCallbacks {
   onSubmitError?: () => void;
 }
 
-export interface FeedbackConfigurationWithDefaults
+/**
+ * The integration's internal `options` member where every value should be set
+ */
+export interface FeedbackInternalOptions
   extends FeedbackGeneralConfiguration,
     FeedbackThemeConfiguration,
     FeedbackTextConfiguration,
     FeedbackCallbacks {}
 
 /**
- * The integration's internal `options` member
+ * Partial configuration that overrides default configuration values
  */
-export type FeedbackInternalOptions = FeedbackConfigurationWithDefaults;
+export interface OptionalFeedbackConfiguration extends Omit<Partial<FeedbackInternalOptions>, 'themeLight'|'themeDark'> {
+  themeLight?: Partial<FeedbackTheme>;
+  themeDark?: Partial<FeedbackTheme>;
+}
 
 export interface FeedbackTheme {
   /**
@@ -246,8 +252,6 @@ export interface FeedbackTheme {
   error: string;
 }
 
-export type CreateWidgetOptionOverrides = Partial<FeedbackConfigurationWithDefaults>;
-
 export interface FeedbackThemes {
   dark: FeedbackTheme;
   light: FeedbackTheme;

packages/feedback/src/util/mergeOptions.ts

@@ -0,0 +1,17 @@
+import { FeedbackInternalOptions, OptionalFeedbackConfiguration } from "../types";
+
+export function mergeOptions(defaultOptions: FeedbackInternalOptions, optionOverrides: OptionalFeedbackConfiguration) {
+  return {
+    ...defaultOptions,
+    ...optionOverrides,
+    themeDark: {
+      ...defaultOptions.themeDark,
+      ...optionOverrides.themeDark,
+    },
+    themeLight: {
+      ...defaultOptions.themeLight,
+      ...optionOverrides.themeLight,
+    }
+  };
+
+}

packages/feedback/src/widget/Actor.ts

@@ -1,8 +1,8 @@
-import type { FeedbackComponent, FeedbackConfigurationWithDefaults } from '../types';
+import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
 import { Icon } from './Icon';
 import { createElement } from './util/createElement';
 
-export interface ActorProps extends Pick<FeedbackConfigurationWithDefaults, 'buttonLabel'> {
+export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
   onClick?: (e: MouseEvent) => void;
 }