Remove duplicate API_ arg related types

And clean up some code that used them

code/addons/controls/src/ControlsPanel.tsx

@@ -14,7 +14,7 @@ import {
   type SortType,
 } from '@storybook/blocks';
 
-import type { API_ArgTypes } from '@storybook/types';
+import type { ArgTypes } from '@storybook/types';
 import { PARAM_KEY } from './constants';
 
 interface ControlsParameters {
@@ -44,7 +44,7 @@ export const ControlsPanel: FC = () => {
     if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;
     else acc[key] = { ...arg, control: { ...arg.control, presetColors } };
     return acc;
-  }, {} as API_ArgTypes);
+  }, {} as ArgTypes);
 
   return (
     <>

code/addons/toolbars/src/types.ts

@@ -1,5 +1,5 @@
 import type { IconsProps } from '@storybook/components';
-import type { API_ArgType } from '@storybook/types';
+import type { InputType } from '@storybook/types';
 
 export type ToolbarShortcutType = 'next' | 'previous' | 'reset';
 
@@ -37,7 +37,7 @@ export interface NormalizedToolbarConfig {
   dynamicTitle?: boolean;
 }
 
-export type NormalizedToolbarArgType = API_ArgType & {
+export type NormalizedToolbarArgType = InputType & {
   toolbar: NormalizedToolbarConfig;
 };
 
@@ -45,7 +45,7 @@ export type ToolbarConfig = NormalizedToolbarConfig & {
   items: string[] | ToolbarItem[];
 };
 
-export type ToolbarArgType = API_ArgType & {
+export type ToolbarArgType = InputType & {
   toolbar: ToolbarConfig;
 };
 

code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.test.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { API_ArgTypes } from '@storybook/types';
+import { ArgTypes } from '@storybook/types';
 import { computesTemplateSourceFromComponent } from './ComputesTemplateFromComponent';
 import { ISomeInterface, ButtonAccent, InputComponent } from './__testfixtures__/input.component';
 
@@ -7,7 +7,7 @@ describe('angular source decorator', () => {
   it('With no props should generate simple tag', () => {
     const component = InputComponent;
     const props = {};
-    const argTypes: API_ArgTypes = {};
+    const argTypes: ArgTypes = {};
     const source = computesTemplateSourceFromComponent(component, props, argTypes);
     expect(source).toEqual('<doc-button></doc-button>');
   });
@@ -21,7 +21,7 @@ describe('angular source decorator', () => {
     it('should add component ng-container', async () => {
       const component = WithoutSelectorComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(
         `<ng-container *ngComponentOutlet="WithoutSelectorComponent"></ng-container>`
@@ -39,7 +39,7 @@ describe('angular source decorator', () => {
     it('should add attribute to template', async () => {
       const component = WithAttributeComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button foo></doc-button>`);
     });
@@ -55,7 +55,7 @@ describe('angular source decorator', () => {
     it('should add attribute to template', async () => {
       const component = WithAttributeValueComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
     });
@@ -71,7 +71,7 @@ describe('angular source decorator', () => {
     it('should create a div and add attribute to template', async () => {
       const component = WithAttributeOnlyComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<div foo></div>`);
     });
@@ -87,7 +87,7 @@ describe('angular source decorator', () => {
     it('should create without separate closing tag', async () => {
       const component = VoidElementWithAttributeComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<input foo />`);
     });
@@ -103,7 +103,7 @@ describe('angular source decorator', () => {
     it('should create a div and add attribute to template', async () => {
       const component = WithAttributeOnlyComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<div foo="bar"></div>`);
     });
@@ -119,7 +119,7 @@ describe('angular source decorator', () => {
     it('should create and add attribute to template without separate closing tag', async () => {
       const component = VoidElementWithAttributeComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<input foo="bar" />`);
     });
@@ -135,7 +135,7 @@ describe('angular source decorator', () => {
     it('should add class to template', async () => {
       const component = WithClassComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button class="foo"></doc-button>`);
     });
@@ -151,7 +151,7 @@ describe('angular source decorator', () => {
     it('should create a div and add attribute to template', async () => {
       const component = WithClassComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<div class="foo"></div>`);
     });
@@ -167,7 +167,7 @@ describe('angular source decorator', () => {
     it('should use the first selector', async () => {
       const component = WithMultipleSelectorsComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button></doc-button>`);
     });
@@ -183,7 +183,7 @@ describe('angular source decorator', () => {
     it('should use the first selector', async () => {
       const component = WithMultipleSelectorsComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button foo></doc-button>`);
     });
@@ -199,7 +199,7 @@ describe('angular source decorator', () => {
     it('should use the first selector', async () => {
       const component = WithMultipleSelectorsComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button foo="bar"></doc-button>`);
     });
@@ -215,7 +215,7 @@ describe('angular source decorator', () => {
     it('should use the first selector', async () => {
       const component = WithMultipleSelectorsComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button></doc-button>`);
     });
@@ -232,7 +232,7 @@ describe('angular source decorator', () => {
     it('should use the first selector', async () => {
       const component = WithMultipleSelectorsComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button></doc-button>`);
     });
@@ -249,7 +249,7 @@ describe('angular source decorator', () => {
     it('should use the first selector', async () => {
       const component = WithMultipleSelectorsComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<div foo></div>`);
     });
@@ -259,7 +259,7 @@ describe('angular source decorator', () => {
     it('should generate tag-only template with no props', () => {
       const component = InputComponent;
       const props = {};
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button></doc-button>`);
     });
@@ -271,7 +271,7 @@ describe('angular source decorator', () => {
         accent: ButtonAccent.High,
         counter: 4,
       };
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(
         `<doc-button [counter]="4" accent="High" [isDisabled]="true" label="Hello world"></doc-button>`
@@ -285,7 +285,7 @@ describe('angular source decorator', () => {
         label: 'Hello world',
         onClick: ($event: any) => {},
       };
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(
         `<doc-button [isDisabled]="true" label="Hello world" (onClick)="onClick($event)"></doc-button>`
@@ -297,7 +297,7 @@ describe('angular source decorator', () => {
       const props = {
         color: '#ffffff',
       };
-      const argTypes: API_ArgTypes = {};
+      const argTypes: ArgTypes = {};
       const source = computesTemplateSourceFromComponent(component, props, argTypes);
       expect(source).toEqual(`<doc-button color="#ffffff"></doc-button>`);
     });
@@ -311,7 +311,7 @@ describe('angular source decorator', () => {
         label: 'Hello world',
         accent: ButtonAccent.High,
       };
-      const argTypes: API_ArgTypes = {
+      const argTypes: ArgTypes = {
         accent: {
           control: {
             options: ['Normal', 'High'],
@@ -324,7 +324,9 @@ describe('angular source decorator', () => {
           type: {
             name: 'enum',
             required: true,
-            summary: 'ButtonAccent',
+            value: [],
+            // Not allowed on the type
+            // summary: 'ButtonAccent',
           },
         },
       };
@@ -341,7 +343,7 @@ describe('angular source decorator', () => {
         label: 'Hello world',
         accent: ButtonAccent.High,
       };
-      const argTypes: API_ArgTypes = {
+      const argTypes: ArgTypes = {
         accent: {
           control: {
             options: ['Normal', 'High'],
@@ -354,6 +356,7 @@ describe('angular source decorator', () => {
           type: {
             name: 'object',
             required: true,
+            value: {},
           },
         },
       };

code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.ts

@@ -1,5 +1,5 @@
 import { Type } from '@angular/core';
-import { API_ArgType, API_ArgTypes } from '@storybook/types';
+import { ArgTypes } from '@storybook/types';
 import { ICollection } from '../types';
 import {
   ComponentInputsOutputs,
@@ -71,9 +71,11 @@ const createAngularInputProperty = ({
 }: {
   propertyName: string;
   value: any;
-  argType?: API_ArgType;
+  argType?: ArgTypes[string];
 }) => {
-  const { name: type = null, summary = null } = argType?.type || {};
+  // @ts-expect-error summary is not on the type, but it may be there in practice, need to find out
+  const { name: type = null, summary = null } =
+    (typeof argType?.type === 'object' && argType?.type) || {};
   let templateValue = type === 'enum' && !!summary ? `${summary}.${value}` : value;
 
   const actualType = type === 'enum' && summary ? 'enum' : typeof value;
@@ -97,7 +99,7 @@ const createAngularInputProperty = ({
 export const computesTemplateSourceFromComponent = (
   component: Type<unknown>,
   initialProps?: ICollection,
-  argTypes?: API_ArgTypes
+  argTypes?: ArgTypes
 ) => {
   const ngComponentMetadata = getComponentDecoratorMetadata(component);
   if (!ngComponentMetadata) {

code/frameworks/angular/src/client/docs/compodoc.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 /* global window */
 
-import { API_ArgType, API_ArgTypes } from '@storybook/types';
+import { InputType, ArgTypes, SBType } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
 import {
   Argument,
@@ -137,7 +137,7 @@ const extractEnumValues = (compodocType: any) => {
   }
 };
 
-export const extractType = (property: Property, defaultValue: any) => {
+export const extractType = (property: Property, defaultValue: any): SBType => {
   const compodocType = property.type || extractTypeFromValue(defaultValue);
   switch (compodocType) {
     case 'string':
@@ -146,11 +146,13 @@ export const extractType = (property: Property, defaultValue: any) => {
       return { name: compodocType };
     case undefined:
     case null:
-      return { name: 'void' };
+      return { name: 'other', value: 'void' };
     default: {
       const resolvedType = resolveTypealias(compodocType);
       const enumValues = extractEnumValues(resolvedType);
-      return enumValues ? { name: 'enum', value: enumValues } : { name: 'object' };
+      return enumValues
+        ? { name: 'enum', value: enumValues }
+        : { name: 'other', value: 'empty-enum' };
     }
   }
 };
@@ -221,7 +223,7 @@ const resolveTypealias = (compodocType: string): string => {
 };
 
 export const extractArgTypesFromData = (componentData: Class | Directive | Injectable | Pipe) => {
-  const sectionToItems: Record<string, API_ArgType[]> = {};
+  const sectionToItems: Record<string, InputType[]> = {};
   const compodocClasses = ['component', 'directive'].includes(componentData.type)
     ? ['propertiesClass', 'methodsClass', 'inputsClass', 'outputsClass']
     : ['properties', 'methods'];
@@ -240,9 +242,9 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
       const section = mapItemToSection(key, item);
       const defaultValue = isMethod(item) ? undefined : extractDefaultValue(item as Property);
 
-      const type =
+      const type: SBType =
         isMethod(item) || (section !== 'inputs' && section !== 'properties')
-          ? { name: 'void' }
+          ? { name: 'other', value: 'void' }
           : extractType(item as Property, defaultValue);
       const action = section === 'outputs' ? { action: item.name } : {};
 
@@ -279,7 +281,7 @@ export const extractArgTypesFromData = (componentData: Class | Directive | Injec
     'content child',
     'content children',
   ];
-  const argTypes: API_ArgTypes = {};
+  const argTypes: ArgTypes = {};
   SECTIONS.forEach((section) => {
     const items = sectionToItems[section];
     if (items) {

code/lib/manager-api/src/index.tsx

@@ -11,8 +11,8 @@ import React, {
 } from 'react';
 import mergeWith from 'lodash/mergeWith';
 import type {
-  API_Args,
-  API_ArgTypes,
+  Args,
+  ArgTypes,
   API_ComponentEntry,
   API_ComposedRef,
   API_DocsEntry,
@@ -445,13 +445,13 @@ export function useAddonState<S>(addonId: string, defaultState?: S) {
   return useSharedState<S>(addonId, defaultState);
 }
 
-export function useArgs(): [API_Args, (newArgs: API_Args) => void, (argNames?: string[]) => void] {
+export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: string[]) => void] {
   const { getCurrentStoryData, updateStoryArgs, resetStoryArgs } = useStorybookApi();
 
   const data = getCurrentStoryData();
   const args = data.type === 'story' ? data.args : {};
   const updateArgs = useCallback(
-    (newArgs: API_Args) => updateStoryArgs(data as API_StoryEntry, newArgs),
+    (newArgs: Args) => updateStoryArgs(data as API_StoryEntry, newArgs),
     [data, updateStoryArgs]
   );
   const resetArgs = useCallback(
@@ -462,12 +462,12 @@ export function useArgs(): [API_Args, (newArgs: API_Args) => void, (argNames?: s
   return [args, updateArgs, resetArgs];
 }
 
-export function useGlobals(): [API_Args, (newGlobals: API_Args) => void] {
+export function useGlobals(): [Args, (newGlobals: Args) => void] {
   const api = useStorybookApi();
   return [api.getGlobals(), api.updateGlobals];
 }
 
-export function useGlobalTypes(): API_ArgTypes {
+export function useGlobalTypes(): ArgTypes {
   return useStorybookApi().getGlobalTypes();
 }
 
@@ -477,7 +477,7 @@ function useCurrentStory(): API_StoryEntry | API_DocsEntry {
   return getCurrentStoryData();
 }
 
-export function useArgTypes(): API_ArgTypes {
+export function useArgTypes(): ArgTypes {
   const current = useCurrentStory();
   return (current?.type === 'story' && current.argTypes) || {};
 }

code/lib/manager-api/src/modules/stories.ts

@@ -18,7 +18,7 @@ import { logger } from '@storybook/client-logger';
 
 import type {
   StoryId,
-  API_Args,
+  Args,
   API_ComposedRef,
   API_HashEntry,
   API_LeafEntry,
@@ -78,7 +78,7 @@ export interface SubAPI {
     parameterName?: ParameterName
   ) => API_StoryEntry['parameters'] | any;
   getCurrentParameter<S>(parameterName?: ParameterName): S;
-  updateStoryArgs(story: API_StoryEntry, newArgs: API_Args): void;
+  updateStoryArgs(story: API_StoryEntry, newArgs: Args): void;
   resetStoryArgs: (story: API_StoryEntry, argNames?: string[]) => void;
   findLeafEntry(StoriesHash: API_StoriesHash, storyId: StoryId): API_LeafEntry;
   findLeafStoryId(StoriesHash: API_StoriesHash, storyId: StoryId): StoryId;
@@ -493,7 +493,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
 
     fullAPI.on(
       STORY_ARGS_UPDATED,
-      function handleStoryArgsUpdated({ storyId, args }: { storyId: StoryId; args: API_Args }) {
+      function handleStoryArgsUpdated({ storyId, args }: { storyId: StoryId; args: Args }) {
         const { ref } = getEventMetadata(this, fullAPI);
         fullAPI.updateStory(storyId, { args }, ref);
       }

code/lib/types/src/modules/api-stories.ts

@@ -10,7 +10,6 @@ import type {
   StoryId,
   StoryKind,
   StoryName,
-  Conditional,
   Globals,
   GlobalTypes,
   Path,
@@ -237,22 +236,6 @@ export type API_OptionsData = {
   docsOptions: DocsOptions;
 };
 
-export interface API_Args {
-  [key: string]: any;
-}
-
-export interface API_ArgType {
-  name?: string;
-  description?: string;
-  defaultValue?: any;
-  if?: Conditional;
-  [key: string]: any;
-}
-
-export interface API_ArgTypes {
-  [key: string]: API_ArgType;
-}
-
 export interface API_ReleaseNotes {
   success?: boolean;
   currentVersion?: string;

code/renderers/svelte/src/docs/sourceDecorator.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from '@jest/globals';
-import type { API_Args } from '@storybook/types';
+import type { Args } from '@storybook/types';
 import { generateSvelteSource } from './sourceDecorator';
 
 expect.addSnapshotSerializer({
@@ -7,7 +7,7 @@ expect.addSnapshotSerializer({
   test: (val: unknown) => typeof val === 'string',
 });
 
-function generateForArgs(args: API_Args, slotProperty: string | null = null) {
+function generateForArgs(args: Args, slotProperty: string | null = null) {
   return generateSvelteSource({ name: 'Component' }, args, {}, slotProperty);
 }
 

code/renderers/web-components/src/docs/custom-elements.ts

@@ -1,4 +1,4 @@
-import type { API_ArgType, API_ArgTypes } from '@storybook/types';
+import type { InputType, ArgTypes } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
 import { getCustomElements, isValidComponent, isValidMetaData } from '..';
 
@@ -46,7 +46,7 @@ interface Sections {
   cssShadowParts?: any;
 }
 
-function mapItem(item: TagItem, category: string): API_ArgType {
+function mapItem(item: TagItem, category: string): InputType {
   const type =
     category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
 
@@ -65,7 +65,7 @@ function mapItem(item: TagItem, category: string): API_ArgType {
   };
 }
 
-function mapEvent(item: TagItem): API_ArgType[] {
+function mapEvent(item: TagItem): InputType[] {
   let name = item.name
     .replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr: string) => {
       return chr ? chr.toUpperCase() : '';
@@ -97,7 +97,7 @@ function mapData(data: TagItem[], category: string) {
         }
 
         return acc;
-      }, {} as API_ArgTypes)
+      }, {} as ArgTypes)
   );
 }