refactor: Add Override type (#14248)

Co-authored-by: andreastanderen <71079896+standeren@users.noreply.github.com>

frontend/libs/studio-components/src/components/StudioButton/StudioButton.tsx

@@ -8,12 +8,16 @@ import type { OverridableComponent } from '../../types/OverridableComponent';
 import type { IconPlacement } from '../../types/IconPlacement';
 import type { OverridableComponentRef } from '../../types/OverridableComponentRef';
 import type { OverridableComponentProps } from '../../types/OverridableComponentProps';
+import type { Override } from '../../types/Override';
 
-export type StudioButtonProps = Omit<ButtonProps, 'icon' | 'color' | 'asChild'> & {
-  icon?: ReactNode;
-  iconPlacement?: IconPlacement;
-  color?: ButtonProps['color'] | 'inverted';
-};
+export type StudioButtonProps = Override<
+  {
+    icon?: ReactNode;
+    iconPlacement?: IconPlacement;
+    color?: ButtonProps['color'] | 'inverted';
+  },
+  Omit<ButtonProps, 'asChild'>
+>;
 
 const StudioButton: OverridableComponent<StudioButtonProps, HTMLButtonElement> = forwardRef(
   <As extends ElementType = 'button'>(

frontend/libs/studio-components/src/components/StudioDecimalInput/StudioDecimalInput.tsx

@@ -8,13 +8,17 @@ import React, {
 } from 'react';
 import { convertNumberToString, convertStringToNumber, isStringValidDecimalNumber } from './utils';
 import { type StudioTextfieldProps, StudioTextfield } from '../StudioTextfield';
+import type { Override } from '../../types/Override';
 
-export interface StudioDecimalInputProps extends Omit<StudioTextfieldProps, 'onChange'> {
-  description?: string;
-  onChange: (value: number) => void;
-  value?: number;
-  validationErrorMessage: string;
-}
+export type StudioDecimalInputProps = Override<
+  {
+    description?: string;
+    onChange: (value: number) => void;
+    value?: number;
+    validationErrorMessage: string;
+  },
+  StudioTextfieldProps
+>;
 
 export const StudioDecimalInput = forwardRef(
   (

frontend/libs/studio-components/src/components/StudioTextResourcePicker/StudioTextResourcePicker.tsx

@@ -3,20 +3,17 @@ import React, { forwardRef, useCallback } from 'react';
 import type { TextResource } from '../../types/TextResource';
 import type { StudioComboboxProps } from '../StudioCombobox';
 import { StudioCombobox } from '../StudioCombobox';
-
-export type StudioTextResourcePickerProps = Omit<StudioComboboxProps, keyof OverriddenProps> &
-  OverriddenProps &
-  AdditionalProps;
-
-type OverriddenProps = {
-  onValueChange: (id: string) => void;
-  value?: string;
-};
-
-type AdditionalProps = {
-  emptyListText: string;
-  textResources: TextResource[];
-};
+import type { Override } from '../../types/Override';
+
+export type StudioTextResourcePickerProps = Override<
+  {
+    emptyListText: string;
+    onValueChange: (id: string) => void;
+    textResources: TextResource[];
+    value?: string;
+  },
+  StudioComboboxProps
+>;
 
 export const StudioTextResourcePicker = forwardRef<HTMLInputElement, StudioTextResourcePickerProps>(
   ({ textResources, onSelect, onValueChange, emptyListText, value, ...rest }, ref) => {

frontend/libs/studio-components/src/types/Override.ts

@@ -0,0 +1 @@
+export type Override<Primary, Secondary> = Primary & Omit<Secondary, keyof Primary>;