From 3e39bafca61e1a527a4ffcc8de6635b1ef5c8323 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Wed, 5 Mar 2025 11:02:15 -0500
Subject: [PATCH] types: use types exposed by components

---
 static/app/components/core/badge/featureBadge.stories.tsx | 8 +++++---
 static/app/components/organizations/hybridFilter.tsx      | 6 +++---
 .../app/views/settings/dynamicSampling/percentInput.tsx   | 7 ++-----
 .../sentryApplicationDashboard/requestLog.tsx             | 4 ++--
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/static/app/components/core/badge/featureBadge.stories.tsx b/static/app/components/core/badge/featureBadge.stories.tsx
index 5267d78796101e..b09469ce0e2443 100644
--- a/static/app/components/core/badge/featureBadge.stories.tsx
+++ b/static/app/components/core/badge/featureBadge.stories.tsx
@@ -1,7 +1,9 @@
-import type {ComponentProps} from 'react';
 import {Fragment} from 'react';
 
-import {FeatureBadge} from 'sentry/components/core/badge/featureBadge';
+import {
+  FeatureBadge,
+  type FeatureBadgeProps,
+} from 'sentry/components/core/badge/featureBadge';
 import Matrix from 'sentry/components/stories/matrix';
 import SideBySide from 'sentry/components/stories/sideBySide';
 import storyBook from 'sentry/stories/storyBook';
@@ -18,7 +20,7 @@ export default storyBook('FeatureBadge', story => {
 
   story('Variants', () => (
     <Fragment>
-      <Matrix<ComponentProps<typeof FeatureBadge>>
+      <Matrix<FeatureBadgeProps>
         render={props => (
           <span>
             Feature X
diff --git a/static/app/components/organizations/hybridFilter.tsx b/static/app/components/organizations/hybridFilter.tsx
index bc9900628dbf12..538b237411f550 100644
--- a/static/app/components/organizations/hybridFilter.tsx
+++ b/static/app/components/organizations/hybridFilter.tsx
@@ -12,7 +12,7 @@ import type {
   SelectSection,
 } from 'sentry/components/compactSelect';
 import {CompactSelect} from 'sentry/components/compactSelect';
-import {Checkbox} from 'sentry/components/core/checkbox';
+import {Checkbox, type CheckboxProps} from 'sentry/components/core/checkbox';
 import {IconInfo} from 'sentry/icons/iconInfo';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -42,7 +42,7 @@ export interface HybridFilterProps<Value extends SelectKey>
   onChange: (selected: Value[]) => void;
   value: Value[];
   checkboxWrapper?: (
-    renderCheckbox: (props: React.ComponentProps<typeof Checkbox>) => React.ReactNode
+    renderCheckbox: (props: CheckboxProps) => React.ReactNode
   ) => React.ReactNode;
   /**
    * Whether to disable the commit action in multiple selection mode. When true, the
@@ -174,7 +174,7 @@ export function HybridFilter<Value extends SelectKey>({
       ...option,
       hideCheck: true,
       trailingItems: ({isFocused, isSelected, disabled}) => {
-        function TrailingCheckbox(props: React.ComponentProps<typeof Checkbox>) {
+        function TrailingCheckbox(props: CheckboxProps) {
           return (
             <CheckWrap
               visible={isFocused || isSelected || (!!multiple && modifierKeyPressed)}
diff --git a/static/app/views/settings/dynamicSampling/percentInput.tsx b/static/app/views/settings/dynamicSampling/percentInput.tsx
index c3ad74b2101a3c..438e78d6af3a3b 100644
--- a/static/app/views/settings/dynamicSampling/percentInput.tsx
+++ b/static/app/views/settings/dynamicSampling/percentInput.tsx
@@ -1,14 +1,11 @@
-import type React from 'react';
 import {forwardRef} from 'react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
-import {InputGroup} from 'sentry/components/core/input/inputGroup';
+import {InputGroup, type InputProps} from 'sentry/components/core/input/inputGroup';
 import {space} from 'sentry/styles/space';
 
-interface Props extends React.ComponentProps<typeof InputGroup.Input> {}
-
-export const PercentInput = forwardRef<HTMLInputElement, Props>(
+export const PercentInput = forwardRef<HTMLInputElement, InputProps>(
   function PercentInput(props, ref) {
     return (
       <InputGroup
diff --git a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx
index f8ad56587df602..a8ce7194a790bb 100644
--- a/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx
+++ b/static/app/views/settings/organizationDeveloperSettings/sentryApplicationDashboard/requestLog.tsx
@@ -5,7 +5,7 @@ import type moment from 'moment-timezone';
 
 import {Button, StyledButton} from 'sentry/components/button';
 import {CompactSelect} from 'sentry/components/compactSelect';
-import {Tag} from 'sentry/components/core/badge/tag';
+import {Tag, type TagProps} from 'sentry/components/core/badge/tag';
 import {Checkbox} from 'sentry/components/core/checkbox';
 import {DateTime} from 'sentry/components/dateTime';
 import EmptyMessage from 'sentry/components/emptyMessage';
@@ -85,7 +85,7 @@ const getEventTypes = memoize((app: SentryApp) => {
 });
 
 function ResponseCode({code}: {code: number}) {
-  let type: React.ComponentProps<typeof Tag>['type'] = 'error';
+  let type: TagProps['type'] = 'error';
   if (code <= 399 && code >= 300) {
     type = 'warning';
   } else if (code <= 299 && code >= 100) {