argtypes

12 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Automatic argType inference frameworks

When using the Storybook docs addon, Storybook infers argTypes based on the component specified in the meta (default export) of the CSF file. Different frameworks use different static analysis tools: React uses react-docgen (default) or react-docgen-typescript; Vue uses vue-docgen-api; Angular uses compodoc; WebComponents use custom-element.json; Ember uses YUI doc.

Manual argTypes specification levels

ArgTypes can be specified at three levels: at the component level in the meta (default export) of the CSF file to apply to all stories of that component; at the project (global) level in the preview.* configuration file to apply to all stories; or at the individual story level to apply only to a specific story.

ArgTypes object structure

ArgTypes are configured using an object with keys matching the name of args. Each key's value is an object with properties: control, description, if, mapping, name, options, table, type, and deprecated defaultValue.

description property

The description property is a string that describes the arg. It is inferred automatically but can be overridden. If you intend to describe the type of the arg, use table.type instead.

if property for conditional rendering

The if property conditionally renders an argType based on the value of another arg or global. Its type signature is: { [predicateType: 'arg' | 'global']: string; eq?: any; exists?: boolean; neq?: any; truthy?: boolean; }

mapping property for non-primitive values

The mapping property is an object with type { [key: string]: { [option: string]: any } } that maps options to values. It is used when dealing with non-primitive values that cannot be represented as URL parameters. Mapping does not have to be exhaustive; if the currently selected option is not listed, it is used verbatim. Can be used with control.labels.

name property for argType display

The name property is a string that overrides the displayed name of the argType in Storybook. By default, the argTypes object key is used as the display name. Be careful renaming args this way, as users will not be able to use the documented name as a component property and the actual name will not be displayed. The name property is best used for argTypes only used for documentation purposes, not actual component properties.

options property for finite value sets

The options property is a string array specifying a finite set of values that an arg accepts. If those values are complex like JSX elements, use mapping to map them to string values. Use control.labels to provide custom labels for options.

type property for semantic typing

The type property specifies the semantic type of the argType. It can be a scalar type ('boolean', 'string', 'number', 'function', 'symbol') or an SBType. When an argType is inferred, information is summarized in this property and used to infer other properties like control and table.type.

SBType definition

SBType is a union type representing complex type information for argTypes. It includes: SBScalarType (name: 'boolean' | 'string' | 'number' | 'function' | 'symbol'); SBEnumType (name: 'enum', value: array of string or number); SBArrayType (name: 'array', value: SBType); SBObjectType (name: 'object', value: Record of string to SBType); SBIntersectionType (name: 'intersection', value: array of SBType); SBUnionType (name: 'union', value: array of SBType); SBOtherType (name: 'other', value: string). All have optional required and raw properties.

defaultValue property deprecated

The defaultValue property is deprecated. Type is any. It was used to define the default value of an argType but is deprecated in favor of defining the arg value directly.

ArgTypes purpose

ArgTypes specify the behavior of args. By specifying the type of an arg, you constrain the values that it can accept and provide information about args that are not explicitly set.

Give your agent this brain