Add better types to Stories and SVGs.

tofumatt · tofumatt · commit 17d9ca1f4afd · 2026-05-05T22:19:48.000+01:00
diff --git a/assets/js/components/BannerModal/index.stories.tsx b/assets/js/components/BannerModal/index.stories.tsx
@@ -25,16 +25,16 @@ import { ComponentProps } from 'react';
  * Internal dependencies
  */
 import BannerModal from './index';
-// @ts-expect-error - We need to add types for imported SVGs.
 import WelcomeModalGraphic from '@/svg/graphics/welcome-modal-graphic.svg';
+import { Story } from '@/js/types/Story';
 
 type BannerModalStoryProps = ComponentProps< typeof BannerModal >;
 
 function Template( args: BannerModalStoryProps ) {
 	return <BannerModal { ...args } />;
 }
 
-export const Default = Template.bind( {} );
+export const Default = Template.bind( {} ) as Story< BannerModalStoryProps >;
 Default.storyName = 'Default';
 Default.args = {
 	Graphic: WelcomeModalGraphic,
diff --git a/assets/js/components/BannerModal/index.tsx b/assets/js/components/BannerModal/index.tsx
@@ -35,7 +35,6 @@ import { Dialog, DialogContent, DialogFooter } from '@/js/material-components';
 import P from '@/js/components/Typography/P';
 import Typography from '@/js/components/Typography';
 import { GraphicContainerWithIntersectionObserver } from './GraphicContainer';
-// @ts-expect-error - We need to add types for imported SVGs.
 import CloseIcon from '@/svg/icons/close.svg';
 
 export interface BannerModalProps {
diff --git a/assets/js/components/WelcomeModal.tsx b/assets/js/components/WelcomeModal.tsx
@@ -46,9 +46,7 @@ import { MODULES_SEARCH_CONSOLE } from '@/js/modules/search-console/datastore/co
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import BannerModal from '@/js/components/BannerModal/index';
 import { useShowTooltip } from '@/js/components/AdminScreenTooltip';
-// @ts-expect-error - We need to add types for imported SVGs.
 import WelcomeModalGraphic from '@/svg/graphics/welcome-modal-graphic.svg';
-// @ts-expect-error - We need to add types for imported SVGs.
 import WelcomeModalDataGatheringCompleteGraphic from '@/svg/graphics/welcome-modal-data-gathering-complete-graphic.svg';
 import useQueryArg from '@/js/hooks/useQueryArg';
 import { trackEvent } from '@/js/util';
diff --git a/assets/js/components/notifications/ActivateAnalyticsNotification.tsx b/assets/js/components/notifications/ActivateAnalyticsNotification.tsx
@@ -40,7 +40,6 @@ import BannerNotification from '@/js/googlesitekit/notifications/components/layo
 import { useShowTooltip } from '@/js/components/AdminScreenTooltip';
 import useActivateModuleCallback from '@/js/hooks/useActivateModuleCallback';
 import useViewContext from '@/js/hooks/useViewContext';
-// @ts-expect-error - We need to add types for imported SVGs.
 import ActivateAnalyticsSVG from '@/svg/graphics/activate-analytics-graphic.svg?url';
 import useRetriableNotificationDismissButtonLabel from '@/js/components/notifications/useRetriableNotificationDismissButtonLabel';
 import { GATrackingEventArgs } from '@/js/types/GATrackingEventArgs';
diff --git a/assets/js/components/notifications/ConnectMoreServicesNotification.tsx b/assets/js/components/notifications/ConnectMoreServicesNotification.tsx
@@ -34,7 +34,6 @@ import BannerNotification from '@/js/googlesitekit/notifications/components/layo
 import { useShowTooltip } from '@/js/components/AdminScreenTooltip';
 import { CORE_LOCATION } from '@/js/googlesitekit/datastore/location/constants';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
-// @ts-expect-error - We need to add types for imported SVGs.
 import ConnectMoreServicesSVG from '@/svg/graphics/connect-more-services-graphic.svg?url';
 import useViewContext from '@/js/hooks/useViewContext';
 
diff --git a/assets/js/components/pdf-export/PDFReportErrorSnackbar.tsx b/assets/js/components/pdf-export/PDFReportErrorSnackbar.tsx
@@ -35,7 +35,6 @@ import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import Notice from '@/js/components/Notice';
 import { NOTICE_TYPES } from '@/js/components/Notice/constants';
 import Link from '@/js/components/Link';
-// @ts-expect-error SVG module type is not currently declared.
 import CloseIcon from '@/svg/icons/close.svg';
 
 interface PDFReportErrorSnackbarProps {
diff --git a/assets/js/components/settings/SettingsActiveModule/DefaultSettingsStatus.tsx b/assets/js/components/settings/SettingsActiveModule/DefaultSettingsStatus.tsx
@@ -36,9 +36,7 @@ import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
 import { SIZE_MEDIUM } from '@/js/components/Typography/constants';
 import { Button } from '@/js/googlesitekit-components';
 import P from '@/js/components/Typography/P';
-// @ts-expect-error - We need to add types for imported SVGs.
 import ConnectedIcon from '@/svg/icons/connected.svg';
-// @ts-expect-error - We need to add types for imported SVGs.
 import WarningIcon from '@/svg/icons/warning-v2.svg';
 
 export default function DefaultSettingsStatus( { slug }: { slug: string } ) {
diff --git a/assets/js/modules/analytics-4/components/site-goals/components/Tile.stories.tsx b/assets/js/modules/analytics-4/components/site-goals/components/Tile.stories.tsx
@@ -25,14 +25,7 @@ import { WPDataRegistry } from '@wordpress/data/build-types/registry';
 import { Tile, type TileProps } from './Tile';
 import WithRegistrySetup from '../../../../../../../tests/js/WithRegistrySetup';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
-
-// Type for Storybook story exports with custom properties
-type Story = {
-	( props: TileProps ): JSX.Element;
-	storyName?: string;
-	args?: TileProps & { setupRegistry?: ( registry: WPDataRegistry ) => void };
-	scenario?: Record< string, unknown >;
-};
+import { Story } from '@/js/types/Story';
 
 function Template( {
 	setupRegistry = () => {},
@@ -55,7 +48,7 @@ function Template( {
 	);
 }
 
-export const DefaultTile = Template.bind( {} ) as Story;
+export const DefaultTile = Template.bind( {} ) as Story< TileProps >;
 DefaultTile.storyName = 'Default Tile';
 DefaultTile.args = {
 	title: 'Form Submissions',
@@ -65,7 +58,7 @@ DefaultTile.args = {
 	format: { style: 'decimal' },
 };
 
-export const PrimaryPositiveTile = Template.bind( {} ) as Story;
+export const PrimaryPositiveTile = Template.bind( {} ) as Story< TileProps >;
 PrimaryPositiveTile.storyName = 'Primary Tile - Positive';
 PrimaryPositiveTile.args = {
 	title: 'Revenue',
@@ -77,7 +70,7 @@ PrimaryPositiveTile.args = {
 };
 PrimaryPositiveTile.scenario = {};
 
-export const PrimaryNegativeTile = Template.bind( {} ) as Story;
+export const PrimaryNegativeTile = Template.bind( {} ) as Story< TileProps >;
 PrimaryNegativeTile.storyName = 'Primary Tile - Negative';
 PrimaryNegativeTile.args = {
 	title: 'Revenue',
@@ -89,7 +82,7 @@ PrimaryNegativeTile.args = {
 };
 PrimaryNegativeTile.scenario = {};
 
-export const PrimaryNeutralTile = Template.bind( {} ) as Story;
+export const PrimaryNeutralTile = Template.bind( {} ) as Story< TileProps >;
 PrimaryNeutralTile.storyName = 'Primary Tile - Neutral';
 PrimaryNeutralTile.args = {
 	title: 'Revenue',
@@ -101,7 +94,7 @@ PrimaryNeutralTile.args = {
 };
 PrimaryNeutralTile.scenario = {};
 
-export const PercentFormat = Template.bind( {} ) as Story;
+export const PercentFormat = Template.bind( {} ) as Story< TileProps >;
 PercentFormat.storyName = 'Percent Format';
 PercentFormat.args = {
 	title: 'Conversion Rate',
@@ -111,7 +104,7 @@ PercentFormat.args = {
 	format: { style: 'percent', maximumFractionDigits: 1 },
 };
 
-export const WithInfoTooltip = Template.bind( {} ) as Story;
+export const WithInfoTooltip = Template.bind( {} ) as Story< TileProps >;
 WithInfoTooltip.storyName = 'With Info Tooltip';
 WithInfoTooltip.args = {
 	title: 'Add to Cart',
@@ -123,7 +116,7 @@ WithInfoTooltip.args = {
 };
 WithInfoTooltip.scenario = {};
 
-export const NegativeChange = Template.bind( {} ) as Story;
+export const NegativeChange = Template.bind( {} ) as Story< TileProps >;
 NegativeChange.storyName = 'Negative Change';
 NegativeChange.args = {
 	title: 'Form Submissions',
@@ -133,7 +126,7 @@ NegativeChange.args = {
 	format: { style: 'decimal' },
 };
 
-export const ZeroDataPreviousRange = Template.bind( {} ) as Story;
+export const ZeroDataPreviousRange = Template.bind( {} ) as Story< TileProps >;
 ZeroDataPreviousRange.storyName = 'Zero Data (Previous Range)';
 ZeroDataPreviousRange.args = {
 	title: 'Form Submissions',
@@ -143,7 +136,7 @@ ZeroDataPreviousRange.args = {
 	format: { style: 'decimal' },
 };
 
-export const CustomDateRange = Template.bind( {} ) as Story;
+export const CustomDateRange = Template.bind( {} ) as Story< TileProps >;
 CustomDateRange.storyName = 'Custom Date Range (90 days)';
 CustomDateRange.args = {
 	title: 'Form Submissions',
diff --git a/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalEcommerce.tsx b/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalEcommerce.tsx
@@ -31,7 +31,6 @@ import { createInterpolateElement } from '@wordpress/element';
  * Internal dependencies
  */
 import BannerModal from '@/js/components/BannerModal/index';
-// @ts-expect-error - We need to add types for imported SVGs.
 import SiteGoalsIntroModalEcommerceGraphic from '@/svg/graphics/site-goals-intro-modal-ecommerce.svg';
 import Link from '@/js/components/Link';
 import type { IntroModalVariantProps } from './types';
diff --git a/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalEcommerceAndLead.tsx b/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalEcommerceAndLead.tsx
@@ -31,7 +31,6 @@ import { createInterpolateElement } from '@wordpress/element';
  * Internal dependencies
  */
 import BannerModal from '@/js/components/BannerModal/index';
-// @ts-expect-error - We need to add types for imported SVGs.
 import SiteGoalsIntroModalGraphic from '@/svg/graphics/site-goals-intro-modal.svg';
 import Link from '@/js/components/Link';
 import type { IntroModalVariantProps } from './types';
diff --git a/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalLead.tsx b/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/IntroModalLead.tsx
@@ -31,7 +31,6 @@ import { createInterpolateElement } from '@wordpress/element';
  * Internal dependencies
  */
 import BannerModal from '@/js/components/BannerModal/index';
-// @ts-expect-error - We need to add types for imported SVGs.
 import SiteGoalsIntroModalLeadGraphic from '@/svg/graphics/site-goals-intro-modal-lead.svg';
 import Link from '@/js/components/Link';
 import type { IntroModalVariantProps } from './types';
diff --git a/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/index.stories.tsx b/assets/js/modules/analytics-4/components/site-goals/notifications/IntroModalBanner/index.stories.tsx
@@ -16,11 +16,6 @@
  * limitations under the License.
  */
 
-/**
- * External dependencies
- */
-import { ComponentProps } from 'react';
-
 /**
  * Internal dependencies
  */
@@ -30,52 +25,45 @@ import {
 	ENUM_CONVERSION_EVENTS,
 	MODULES_ANALYTICS_4,
 } from '@/js/modules/analytics-4/datastore/constants';
+import { WPDataRegistry } from '@wordpress/data/build-types/registry';
+import { Story } from '@/js/types/Story';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Registry types are not available for Storybook setup callbacks.
-type Registry = any;
-
-interface TemplateArgs {
-	setupRegistry: ( registry: Registry ) => void;
-}
-
-function Template( { setupRegistry }: TemplateArgs ) {
+function Template( {
+	setupRegistry,
+}: {
+	setupRegistry?: ( registry: WPDataRegistry ) => void;
+} ) {
 	return (
 		<WithRegistrySetup func={ setupRegistry }>
 			<IntroModal />
 		</WithRegistrySetup>
 	);
 }
 
-type StoryWithMetadata = typeof Template & {
-	storyName?: string;
-	scenario?: Record< string, never >;
-	args?: ComponentProps< typeof Template >;
-};
-
-export const Ecommerce = Template.bind( {} ) as StoryWithMetadata;
+export const Ecommerce = Template.bind( {} ) as Story;
 Ecommerce.storyName = 'Ecommerce Only';
 Ecommerce.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
 			.setDetectedEvents( [ ENUM_CONVERSION_EVENTS.PURCHASE ] );
 	},
 };
 
-export const Lead = Template.bind( {} ) as StoryWithMetadata;
+export const Lead = Template.bind( {} ) as Story;
 Lead.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
 			.setDetectedEvents( [ ENUM_CONVERSION_EVENTS.CONTACT ] );
 	},
 };
 
-export const EcommerceAndLead = Template.bind( {} ) as StoryWithMetadata;
+export const EcommerceAndLead = Template.bind( {} ) as Story;
 EcommerceAndLead.storyName = 'Ecommerce And Lead';
 EcommerceAndLead.scenario = {};
 EcommerceAndLead.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
 			.setDetectedEvents( [
diff --git a/assets/js/modules/analytics-4/components/site-goals/widgets/LeadGenerationPerformanceWidget.stories.tsx b/assets/js/modules/analytics-4/components/site-goals/widgets/LeadGenerationPerformanceWidget.stories.tsx
@@ -37,17 +37,8 @@ import { replaceValuesInAnalytics4ReportWithZeroData } from '@/js/util/zero-repo
 import WithRegistrySetup from '../../../../../../../tests/js/WithRegistrySetup';
 import LeadGenerationPerformanceWidget from './LeadGenerationPerformanceWidget';
 import { ERROR_REASON_INSUFFICIENT_PERMISSIONS } from '@/js/util/errors';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- `@wordpress/data` is not typed yet.
-type Registry = any;
-
-// Type for Storybook story exports with custom properties
-type Story = {
-	( props: never ): JSX.Element;
-	storyName?: string;
-	args?: { setupRegistry?: ( registry: Registry ) => void };
-	scenario?: Record< string, unknown >;
-};
+import { Story } from '@/js/types/Story';
+import { WPDataRegistry } from '@wordpress/data/build-types/registry';
 
 // Reference date: 2020-09-07, offsetDays: 0, 28-day range with comparison.
 const dates = {
@@ -92,7 +83,7 @@ const WidgetWithComponentProps = withWidgetComponentProps(
 	'analyticsLeadGenerationPerformance'
 )( LeadGenerationPerformanceWidget );
 
-function commonSetup( registry: Registry ) {
+function commonSetup( registry: WPDataRegistry ) {
 	provideModules( registry, [
 		{
 			slug: MODULE_SLUG_ANALYTICS_4,
@@ -118,7 +109,7 @@ function commonSetup( registry: Registry ) {
 function Template( {
 	setupRegistry,
 }: {
-	setupRegistry: ( registry: Registry ) => void;
+	setupRegistry: ( registry: WPDataRegistry ) => void;
 } ) {
 	return (
 		<WithRegistrySetup func={ setupRegistry }>
@@ -130,7 +121,7 @@ function Template( {
 export const Ready = Template.bind( {} ) as Story;
 Ready.storyName = 'Ready';
 Ready.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		commonSetup( registry );
 		provideAnalytics4MockReport( registry, singleEventReportOptions );
 		provideAnalytics4MockReport( registry, engagementReportOptions );
@@ -140,7 +131,7 @@ Ready.args = {
 export const ReadyMultipleEvents = Template.bind( {} ) as Story;
 ReadyMultipleEvents.storyName = 'Ready (Multiple Events)';
 ReadyMultipleEvents.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		commonSetup( registry );
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
@@ -156,7 +147,7 @@ ReadyMultipleEvents.args = {
 export const Loading = Template.bind( {} ) as Story;
 Loading.storyName = 'Loading';
 Loading.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		commonSetup( registry );
 		registry
 			.dispatch( MODULES_ANALYTICS_4 )
@@ -167,7 +158,7 @@ Loading.args = {
 export const ZeroData = Template.bind( {} ) as Story;
 ZeroData.storyName = 'Zero Data';
 ZeroData.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		commonSetup( registry );
 
 		const report = getAnalytics4MockResponse( singleEventReportOptions );
@@ -195,7 +186,7 @@ ZeroData.args = {
 export const Error = Template.bind( {} ) as Story;
 Error.storyName = 'Error';
 Error.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		commonSetup( registry );
 
 		const errorObject = {
@@ -222,7 +213,7 @@ Error.args = {
 export const InsufficientPermissions = Template.bind( {} ) as Story;
 InsufficientPermissions.storyName = 'Insufficient Permissions';
 InsufficientPermissions.args = {
-	setupRegistry: ( registry: Registry ) => {
+	setupRegistry: ( registry ) => {
 		commonSetup( registry );
 
 		const errorObject = {
diff --git a/assets/js/modules/analytics-4/components/site-goals/widgets/OnlineStorePerformanceWidget.stories.tsx b/assets/js/modules/analytics-4/components/site-goals/widgets/OnlineStorePerformanceWidget.stories.tsx
diff --git a/assets/js/types/Story.ts b/assets/js/types/Story.ts
diff --git a/assets/js/types/svg.d.ts b/assets/js/types/svg.d.ts
