tfoxy
commented
1 year ago I created a custom extractArgTypes for the SB docs module that improves many of the types for my project, specially with TS. One of the improvements is setting events to the prop on{EventName}.
// docsParameters.ts
import {
DocgenPropType,
hasDocgen,
extractComponentProps,
convert,
} from '@storybook/docs-tools'
import type { InputType, SBType } from '@storybook/types'
import type { Prop } from 'vue'
type DocgenExtendedPropType = DocgenPropType & {
elements?: DocgenExtendedPropType[]
names?: [string]
}
const SECTIONS = ['props', 'events', 'slots', 'methods'] as const
function toEventName(name: string) {
return `on${name.charAt(0).toUpperCase()}${name.slice(1)}`
}
function getUnionTypes(
docgenType: DocgenExtendedPropType | undefined,
): string[] {
if (docgenType?.name === 'Array')
return [`${docgenType.elements?.map((v) => v.name).join('|')}[]`]
return (
docgenType?.elements?.flatMap((v) =>
v.elements ? getUnionTypes(v) : [v.name],
) ?? []
)
}
function isStringType(unionTypes: string[]) {
return (
unionTypes.length > 0 &&
unionTypes.every(
(t) => t === 'string' || (t.startsWith('"') && t.endsWith('"')),
)
)
}
/**
* Same as Storybook `extractArgTypes` with the following changes:
* - Remove control from events and methods.
* - Add `on` prefix to events, so that `actions: { argTypesRegex: '^on[A-Z].*' }` can be used.
* - Get event types from TS `defineEmits`. docgen info has it in `names` prop.
* - Set types on `update:[prop]` events based on [prop] type
* - Add all props not defined by docgen info in a group called "other props"
* - Expand union type and use radio/select control when values are strings
* - Expand array types
* @see https://github.com/storybookjs/storybook/blob/d5ca2f42838c9f5a3e556a5e819e58f0deff522e/code/renderers/vue3/src/docs/extractArgTypes.ts
*/
export function extractArgTypes(component: any) {
if (!hasDocgen(component)) return null
const results: Record<string, InputType> = {}
SECTIONS.forEach((section) => {
extractComponentProps(component, section).forEach(
({ propDef, docgenInfo, jsDocTags }) => {
const { name, type, description, defaultValue, required } = propDef,
sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' }
const docgenType: DocgenExtendedPropType | undefined = docgenInfo.type
const unionTypes = getUnionTypes(docgenType)
const summary =
unionTypes.join(' | ') || type?.summary || docgenType?.names?.[0]
const inputType: InputType = {
name,
description,
type: isStringType(unionTypes)
? { required, name: 'string' }
: { required, ...sbType },
table: {
type: {
...type,
summary,
},
jsDocTags,
defaultValue,
category: section,
},
}
if (section === 'events') {
inputType.control = null
inputType.type = 'function'
const propName = /^update:(.+)$/.exec(name)?.[1]
const result = results[propName!]
if (result) {
inputType.table.type = result.table.type
}
} else if (isStringType(unionTypes)) {
const options: (string | undefined)[] = unionTypes
.map((t) => /^"(.+)"$/.exec(t)?.[1])
.filter(Boolean)
if (!required) options.unshift(undefined)
inputType.options = options
inputType.control = {
type: options.length <= 5 ? 'radio' : 'select',
labels: { undefined: 'πΆπ―π₯π¦π§πͺπ―π¦π₯' },
}
}
const argName = section === 'events' ? toEventName(name) : name
results[argName] = inputType
},
)
})
Object.entries(component.props as Prop<any>[]).forEach(([name, prop]) => {
if (name in results) return
const {
default: defaultValue,
required,
type,
} = typeof prop === 'function' || Array.isArray(prop)
? ({ type: prop } satisfies Prop<any>)
: prop
const sbType: SBType =
type === String
? { name: 'string' }
: type === Number
? { name: 'number' }
: type === Boolean
? { name: 'boolean' }
: type === Function
? { name: 'function' }
: type === Object
? { name: 'object', value: {} }
: type === Array
? {
name: 'array',
value: { name: 'other', value: 'Unknown' },
}
: { name: 'other', value: 'Unknown' }
results[name] = {
name,
type: { required, ...sbType },
table: {
type: {
summary: sbType.name === 'other' ? 'unknown' : sbType.name,
},
defaultValue,
category: 'other props',
},
}
})
return results
}// preview.ts
import { extractArgTypes } from './docsParameters'
export default {
parameters: {
docs: { extractArgTypes }
}
}Many of the changes here are going to be present/improved if https://github.com/storybookjs/storybook/pull/22285 is merged, but I believe this issue will not be resolved. Checking the extractArgTypes function:
It still has the same name.
If you want to create PR to fix this, the change would be in
const argName = section === 'events' ? `on${name.charAt(0).toUpperCase()}${name.slice(1)}` : name;
results[argName] = {
shengslogar
kasperpeulen
larsrickert
rdnsr
Describe the bug
I'm using latest storybook whose verison is 7.0.20. I'm using vite+vue preset. I have a Component, and I wrote stories for it, but the automatic inferenced argTypes don't work well:
There are events, but I can't see any log in
ActionsPanel. In order to see logs, I need to manually write:Now, there are logs, however, the
Controlspanel looks no ok:I think, the auto inferenced argTypes are like this:
Maybe, we can improve it to:
so the
parameters.actions.argTypesRegex: "^on[A-Z].*"can automatically catch all events.To Reproduce
No response
System
No response
Additional context
No response