Merge pull request #19633 from storybookjs/tech/types-improvments

Tech/types-improvements

code/lib/addons/src/main.ts

@@ -21,8 +21,6 @@ export function isSupportedType(type: Addon_Types): boolean {
   return !!Object.values(Addon_TypesEnum).find((typeVal) => typeVal === type);
 }
 
-export type Types = Addon_TypesEnum | string;
-
 export class AddonStore {
   constructor() {
     this.promise = new Promise((res) => {
@@ -76,7 +74,7 @@ export class AddonStore {
     this.serverChannel = channel;
   };
 
-  getElements = (type: Types): Addon_Collection => {
+  getElements = (type: Addon_Types): Addon_Collection => {
     if (!this.elements[type]) {
       this.elements[type] = {};
     }

code/lib/api/src/modules/addons.ts

@@ -1,23 +1,15 @@
-import type { API_Collection, API_Panels, API_StateMerger, API_Types } from '@storybook/types';
+import type { Addon_Types, API_Collection, API_Panels, API_StateMerger } from '@storybook/types';
+import { Addon_TypesEnum } from '@storybook/types';
 import type { ModuleFn } from '../index';
 import { Options } from '../store';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-enum types {
-  TAB = 'tab',
-  PANEL = 'panel',
-  TOOL = 'tool',
-  PREVIEW = 'preview',
-  NOTES_ELEMENT = 'notes-element',
-}
-
 export interface SubState {
   selectedPanel: string;
   addons: Record<string, never>;
 }
 
 export interface SubAPI {
-  getElements: <T>(type: API_Types) => API_Collection<T>;
+  getElements: <T>(type: Addon_Types) => API_Collection<T>;
   getPanels: () => API_Panels;
   getStoryPanels: () => API_Panels;
   getSelectedPanel: () => string;
@@ -46,7 +38,7 @@ export function ensurePanel(panels: API_Panels, selectedPanel?: string, currentP
 export const init: ModuleFn<SubAPI, SubState> = ({ provider, store, fullAPI }) => {
   const api: SubAPI = {
     getElements: (type) => provider.getElements(type),
-    getPanels: () => api.getElements(types.PANEL),
+    getPanels: () => api.getElements(Addon_TypesEnum.PANEL),
     getStoryPanels: () => {
       const allPanels = api.getPanels();
       const { storyId } = store.getState();

code/lib/core-client/src/manager/provider.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 import { Provider } from '@storybook/ui';
 import { Channel } from '@storybook/channels';
-import { addons, AddonStore, type Types } from '@storybook/addons';
-import type { Addon_Config } from '@storybook/types';
+import type { Addon_Types, Addon_Config } from '@storybook/types';
+import { addons, AddonStore } from '@storybook/addons';
 import * as postMessage from '@storybook/channel-postmessage';
 import * as webSocket from '@storybook/channel-websocket';
 import { CHANNEL_CREATED } from '@storybook/core-events';
@@ -34,7 +34,7 @@ export default class ReactProvider extends Provider {
     }
   }
 
-  getElements(type: Types) {
+  getElements(type: Addon_Types) {
     return this.addons.getElements(type);
   }
 

code/lib/types/src/modules/addons.ts

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type { RenderData as RouterData } from '../../../router/src/router';
 import type { ThemeVars } from '../../../theming/src/types';
-import {
+import type {
   AnyFramework,
   Args,
   ArgsStoryFn as ArgsStoryFnForFramework,
@@ -173,18 +173,18 @@ export type Addon_BaseDecorators<StoryFnReturnType> = Array<
   (story: () => StoryFnReturnType, context: Addon_StoryContext) => StoryFnReturnType
 >;
 
-export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
+export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
   /**
    * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
    * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
    */
-  args?: Partial<Args>;
+  args?: Partial<TArgs>;
 
   /**
    * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
    * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
    */
-  argTypes?: Addons_ArgTypes<Args>;
+  argTypes?: Addons_ArgTypes<TArgs>;
 
   /**
    * Custom metadata for a story.
@@ -203,16 +203,16 @@ export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
   /**
    * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
    */
-  render?: (args: Args, context: Addon_StoryContext) => StoryFnReturnType;
+  render?: (args: TArgs, context: Addon_StoryContext) => StoryFnReturnType;
 
   /**
    * Function that is executed after the story is rendered.
    */
   play?: (context: Addon_StoryContext) => Promise<void> | void;
 }
 
-export interface Addon_Annotations<Args, StoryFnReturnType>
-  extends Addon_BaseAnnotations<Args, StoryFnReturnType> {
+export interface Addon_Annotations<TArgs, StoryFnReturnType>
+  extends Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
   /**
    * Used to only include certain named exports as stories. Useful when you want to have non-story exports such as mock data or ignore a few stories.
    * @example
@@ -286,20 +286,20 @@ export interface Addon_BaseMeta<ComponentType> {
   subcomponents?: Record<string, ComponentType>;
 }
 
-export type Addon_BaseStoryObject<Args, StoryFnReturnType> = {
+export type Addon_BaseStoryObject<TArgs, StoryFnReturnType> = {
   /**
    * Override the display name in the UI
    */
   storyName?: string;
 };
 
-export type Addon_BaseStoryFn<Args, StoryFnReturnType> = {
-  (args: Args, context: Addon_StoryContext): StoryFnReturnType;
-} & Addon_BaseStoryObject<Args, StoryFnReturnType>;
+export type Addon_BaseStoryFn<TArgs, StoryFnReturnType> = {
+  (args: TArgs, context: Addon_StoryContext): StoryFnReturnType;
+} & Addon_BaseStoryObject<TArgs, StoryFnReturnType>;
 
-export type BaseStory<Args, StoryFnReturnType> =
-  | Addon_BaseStoryFn<Args, StoryFnReturnType>
-  | Addon_BaseStoryObject<Args, StoryFnReturnType>;
+export type BaseStory<TArgs, StoryFnReturnType> =
+  | Addon_BaseStoryFn<TArgs, StoryFnReturnType>
+  | Addon_BaseStoryObject<TArgs, StoryFnReturnType>;
 
 export interface Addon_RenderOptions {
   active?: boolean;

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

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
-import { API_ViewMode } from './api';
-import { DocsOptions } from './core-common';
-import {
+
+import type { API_ViewMode } from './api';
+import type { DocsOptions } from './core-common';
+import type {
   Args,
   ArgTypes,
   ComponentId,

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

@@ -1,29 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type { RenderData } from '../../../router/src/router';
 import type { Channel } from '../../../channels/src';
 import type { ThemeVars } from '../../../theming/src/types';
 import type { ViewMode } from './csf';
 import type { DocsOptions } from './core-common';
-import {
+import type {
   API_HashEntry,
   API_SetStoriesStory,
   API_SetStoriesStoryData,
   API_StoriesHash,
   API_StoryIndex,
 } from './api-stories';
+import type { Addon_Types } from './addons';
 
 export type API_ViewMode = 'story' | 'info' | 'settings' | 'page' | undefined | string;
 
-enum types {
-  TAB = 'tab',
-  PANEL = 'panel',
-  TOOL = 'tool',
-  PREVIEW = 'preview',
-  NOTES_ELEMENT = 'notes-element',
-}
-
-export type API_Types = types | string;
 export interface API_RenderOptions {
   active: boolean;
   key: string;
@@ -44,7 +36,7 @@ export interface API_MatchOptions {
 
 export interface API_Addon {
   title: string;
-  type?: API_Types;
+  type?: Addon_Types;
   id?: string;
   route?: (routeOptions: API_RouteOptions) => string;
   match?: (matchOptions: API_MatchOptions) => boolean;

code/lib/types/src/modules/core-client.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { Store_RenderContext } from './store';
+import type { Store_RenderContext } from './store';
 // import { Store_RenderContext, Store_WebProjectAnnotations } from './store';
 // import { ArgsStoryFn } from './csf';
 

code/lib/types/src/modules/csf.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type {
   AnnotatedStoryFn,
   AnyFramework,
@@ -59,7 +59,7 @@ import type {
 } from '@storybook/csf';
 import { Addon_OptionsParameter } from './addons';
 
-export {
+export type {
   AnnotatedStoryFn,
   AnyFramework,
   Args,

code/ui/manager/src/provider.ts

@@ -1,7 +1,7 @@
-import type { Types } from '@storybook/addons';
+import type { Addon_Types } from '@storybook/types';
 
 export default class Provider {
-  getElements(_type: Types) {
+  getElements(_type: Addon_Types) {
     throw new Error('Provider.getElements() is not implemented!');
   }
 

code/ui/manager/src/runtime.ts

@@ -1,8 +1,8 @@
 import global from 'global';
 
 import type { Channel } from '@storybook/channels';
-import { addons, AddonStore, type Types } from '@storybook/addons';
-import type { Addon_Config } from '@storybook/types';
+import { addons, AddonStore } from '@storybook/addons';
+import type { Addon_Types, Addon_Config } from '@storybook/types';
 import * as postMessage from '@storybook/channel-postmessage';
 import * as webSocket from '@storybook/channel-websocket';
 import { CHANNEL_CREATED } from '@storybook/core-events';
@@ -39,7 +39,7 @@ class ReactProvider extends Provider {
     }
   }
 
-  getElements(type: Types) {
+  getElements(type: Addon_Types) {
     return this.addons.getElements(type);
   }