Fix Storybook SB_PREVIEW_API_0002 error for DBCustomSelect stories (#6315)

* Initial plan

* fix: add explicit fn() args for event handlers to prevent SB_PREVIEW_API_0002 error

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

* fix: skip explicit fn() args generation for Angular to prevent TypeScript errors

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

* fix: exclude action event handler argTypes from Angular meta to fix TypeScript errors

Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: mfranzke <787658+mfranzke@users.noreply.github.com>

Author: Copilot

packages/components/configs/plugins/storybook/get-meta-object.cjs

@@ -15,14 +15,14 @@ const extractMetadata = (target, name, meta) => {
 			title = metadata.storybookTitle;
 		}
 		if (metadata.storybookArgTypes) {
-			// Transform argTypes for Angular (convert event handlers)
+			// For Angular, skip action-based event handler entries entirely —
+			// Angular resolves @Output() bindings automatically and these keys
+			// are not valid properties on the typed Props interface, causing
+			// TypeScript compilation errors.
 			if (target === 'angular') {
 				Object.entries(metadata.storybookArgTypes).forEach(
 					([key, value]) => {
-						if (key.startsWith('on') && value?.action) {
-							const newKey = key.slice(2).toLowerCase();
-							argTypes[newKey] = { ...value, action: newKey };
-						} else {
+						if (!(key.startsWith('on') && value?.action)) {
 							argTypes[key] = value;
 						}
 					}
@@ -36,6 +36,24 @@ const extractMetadata = (target, name, meta) => {
 	return { title, argTypes };
 };
 
+/**
+ * Generates explicit fn() args for argTypes that define an action.
+ * This replaces implicit Storybook actions (created by argTypesRegex) with
+ * explicit fn() spies, preventing SB_PREVIEW_API_0002 errors when event
+ * handlers are called during component rendering.
+ * @param {Object} argTypes - ArgTypes object
+ * @returns {string} Generated args section or empty string
+ */
+const getFnArgs = (argTypes) => {
+	const fnArgEntries = Object.entries(argTypes)
+		.filter(([, value]) => value?.action)
+		.map(([key]) => `\t"${key}": fn()`);
+
+	return fnArgEntries.length > 0
+		? `args: {\n${fnArgEntries.join(',\n')}\n\t},`
+		: '';
+};
+
 /**
  * Generates the Storybook meta object for a component
  * @param {Object} params - Parameters object
@@ -66,6 +84,11 @@ const getMetaObject = ({ target, componentName, name, meta, allImports }) => {
 	],`;
 	}
 
+	// Angular handles event actions differently via its own mechanism; adding
+	// explicit fn() args would generate properties that don't exist in the
+	// Angular component's typed Props interface, causing TypeScript errors.
+	const argsSection = target !== 'angular' ? getFnArgs(argTypes) : '';
+
 	return `
 const meta: Meta<${metaType}> = {
 	title: 'Components/${componentName}/${title}',
@@ -75,6 +98,7 @@ const meta: Meta<${metaType}> = {
 		layout: 'centered'
 	},
 	tags: ['autodocs'],
+	${argsSection}
 	argTypes: ${JSON.stringify(argTypes)}
 } satisfies Meta<${metaType}>;
 

packages/components/src/components/custom-select/examples/_custom-select.arg.types.ts

@@ -58,5 +58,9 @@ export const StorybookCustomSelectArgTypes: Record<string, InputType> = {
 	amountText: { control: 'text' },
 	mobileCloseButtonText: { control: 'text' },
 	open: { control: 'boolean' },
-	autofocus: { control: 'boolean' }
+	autofocus: { control: 'boolean' },
+	onAmountChange: { action: 'onAmountChange' },
+	onOptionSelected: { action: 'onOptionSelected' },
+	onDropdownToggle: { action: 'onDropdownToggle' },
+	onSearch: { action: 'onSearch' }
 };