@storybook/addons#ArgTypes TypeScript Examples

The following examples show how to use @storybook/addons#ArgTypes. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: StoryUtils.ts    From wvui with GNU General Public License v2.0 6 votes vote down vote up 
/**
 * Transform an array like [ 'click', 'focus' ] to an object for use in argTypes.
 * For usage see makeActionListeners().
 *
 * Returns an object that looks like:
 * {
 *     click: {
 *         action: 'click',
 *         table: { category: 'Events' }
 *     },
 *     focus: {
 *         action: 'focus',
 *         table: { category: 'Events' }
 *     }
 * }
 *
 * @param eventNames Array of event names
 * @return An object describing event args
 */
export function makeActionArgTypes( eventNames: string[] ) : ArgTypes {
	const result = {} as ArgTypes;
	for ( const eventName of eventNames ) {
		result[ eventName ] = {
			action: eventName,
			table: {
				category: 'Events'
			}
		};
	}
	return result;
}
Example #2
Source File: StoryUtils.ts    From wvui with GNU General Public License v2.0 5 votes vote down vote up 
/**
 * Map event names to action listeners.
 *
 * Finds entries in argTypes that have the 'action' property set, and returns an object mapping
 * those event names to the listeners for those actions.
 *
 * To use this for e.g. the 'click' and 'mouseover' events, add the following to argTypes in either
 * the file's export default or to an individual story:
 *     argTypes: {
 *         // other stuff
 *         ...makeActionArgTypes( [ 'click', 'mouseover' ] )
 *     }
 *
 * Then in your story component, add a computed property:
 *     computed: {
 *         actionListeners() {
 *             return makeActionListeners( args, argTypes );
 *         }
 *     }
 *
 * and pass this computed property to the component's v-on in the template:
 *
 *     template: `
 *         <wvui-button
 *             v-bind="$props"
 *             v-on="actionListeners"
 *         />
 *     `
 *
 * @param args The args parameter passed to the story
 * @param argTypes The argTypes parameter passed to the story
 * @return Object for use in v-on=""
 */
export function makeActionListeners( args: Args, argTypes: ArgTypes ) : Record<string, () => void> {
	const listeners = {} as Record<string, () => void>;
	for ( const argName in argTypes ) {
		const argType = argTypes[ argName ];
		if ( argType.action ) {
			listeners[ argName ] = args[ argName ] as () => void;
		}
	}
	return listeners;
}