Merge pull request #19919 from storybookjs/tom/sb-878-cleanup-de-dupl…

…icate-storybooktypes Types: Rationalize story-based types and de-prefix
storybookjs · Nov 28, 2022 · fd1db96 · fd1db96
2 parents 27ce3d4 + 0889eee
commit fd1db96
Show file tree

Hide file tree

Showing 105 changed files with 939 additions and 1,164 deletions.
diff --git a/code/addons/controls/src/ControlsPanel.tsx b/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 (
     <>

diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
@@ -3,12 +3,7 @@ import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
 import { dedent } from 'ts-dedent';
 
-import type {
-  CoreCommon_IndexerOptions,
-  CoreCommon_StoryIndexer,
-  DocsOptions,
-  Options,
-} from '@storybook/types';
+import type { IndexerOptions, StoryIndexer, DocsOptions, Options } from '@storybook/types';
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 import { loadCsf } from '@storybook/csf-tools';
 
@@ -157,8 +152,8 @@ async function webpack(
   return result;
 }
 
-const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
-  const mdxIndexer = async (fileName: string, opts: CoreCommon_IndexerOptions) => {
+const storyIndexers = (indexers: StoryIndexer[] | null) => {
+  const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
     let code = (await fs.readFile(fileName, 'utf-8')).toString();
     const { compile } = await import('@storybook/mdx2-csf');
     code = await compile(code, {});

diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
@@ -4,8 +4,8 @@ import type {
   Renderer,
   ArgsEnhancer,
   ArgTypesEnhancer,
-  CoreCommon_NormalizedStoriesSpecifier,
-  CoreCommon_StoriesEntry,
+  NormalizedStoriesSpecifier,
+  StoriesEntry,
   DecoratorFunction,
 } from '@storybook/types';
 import { toRequireContext } from '@storybook/core-webpack';
@@ -29,7 +29,7 @@ const isFile = (file: string): boolean => {
 interface Output {
   features?: Record<string, boolean>;
   preview?: string;
-  stories?: CoreCommon_NormalizedStoriesSpecifier[];
+  stories?: NormalizedStoriesSpecifier[];
   requireContexts?: string[];
 }
 
@@ -65,7 +65,7 @@ function getConfigPathParts(input: string): Output {
       output.features = features;
 
       const workingDir = process.cwd();
-      output.stories = stories.map((entry: CoreCommon_StoriesEntry) => {
+      output.stories = stories.map((entry: StoriesEntry) => {
         const specifier = normalizeStoriesEntry(entry, {
           configDir,
           workingDir,

diff --git a/code/addons/toolbars/src/types.ts b/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,15 +37,15 @@ export interface NormalizedToolbarConfig {
   dynamicTitle?: boolean;
 }
 
-export type NormalizedToolbarArgType = API_ArgType & {
+export type NormalizedToolbarArgType = InputType & {
   toolbar: NormalizedToolbarConfig;
 };
 
 export type ToolbarConfig = NormalizedToolbarConfig & {
   items: string[] | ToolbarItem[];
 };
 
-export type ToolbarArgType = API_ArgType & {
+export type ToolbarArgType = InputType & {
   toolbar: ToolbarConfig;
 };
 

diff --git a/code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.test.ts b/code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.test.ts
@@ -1,13 +1,13 @@
 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';
 
 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,7 @@ describe('angular source decorator', () => {
           type: {
             name: 'enum',
             required: true,
-            summary: 'ButtonAccent',
+            value: [],
           },
         },
       };
@@ -341,7 +341,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 +354,7 @@ describe('angular source decorator', () => {
           type: {
             name: 'object',
             required: true,
+            value: {},
           },
         },
       };

diff --git a/code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.ts b/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,12 +71,12 @@ const createAngularInputProperty = ({
 }: {
   propertyName: string;
   value: any;
-  argType?: API_ArgType;
+  argType?: ArgTypes[string];
 }) => {
-  const { name: type = null, summary = null } = argType?.type || {};
-  let templateValue = type === 'enum' && !!summary ? `${summary}.${value}` : value;
+  const { name: type = null } = (typeof argType?.type === 'object' && argType?.type) || {};
+  let templateValue = type === 'enum' && value;
 
-  const actualType = type === 'enum' && summary ? 'enum' : typeof value;
+  const actualType = type === 'enum' && typeof value;
   const requiresBrackets = ['object', 'any', 'boolean', 'enum', 'number'].includes(actualType);
 
   if (typeof value === 'object') {
@@ -97,7 +97,7 @@ const createAngularInputProperty = ({
 export const computesTemplateSourceFromComponent = (
   component: Type<unknown>,
   initialProps?: ICollection,
-  argTypes?: API_ArgTypes
+  argTypes?: ArgTypes
 ) => {
   const ngComponentMetadata = getComponentDecoratorMetadata(component);
   if (!ngComponentMetadata) {