GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove duplicate API_ arg related types

Browse Source 
And clean up some code that used them
This commit is contained in:
Tom Coleman 2022-11-21 17:46:00 +11:00
parent efc73d3432
commit 6fea833174
10 changed files with 64 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
code/addons/controls/src/ControlsPanel.tsx
View File

@ -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 (
<>

6
code/addons/toolbars/src/types.ts
View File

@ -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;
};

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

@ -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: {},
},
},
};

10
code/frameworks/angular/src/client/angular-beta/ComputesTemplateFromComponent.ts
View File

@ -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) {

18
code/frameworks/angular/src/client/docs/compodoc.ts
View File

@ -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) {

14
code/lib/manager-api/src/index.tsx
View File

@ -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) || {};
}

6
code/lib/manager-api/src/modules/stories.ts
View File

@ -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);
}

17
code/lib/types/src/modules/api-stories.ts
View File

@ -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;

4
code/renderers/svelte/src/docs/sourceDecorator.test.ts
View File

@ -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);
}

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

@ -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)
);
}