Storybook boilerplate for WVUI

MyComponent.stories.ts

import Vue from 'vue';
import { Args, StoryContext } from '@storybook/addons';
import WvuiMyComponent from './MyComponent.vue';
import { filterKeys, makeActionArgTypes, makeActionListeners } from '../../utils/StoryUtils';
import './MyComponent.stories.less'; // Optional, use if your story requires additional styles

export default {
	title: 'Components/MyComponent',
	component: WvuiMyComponent,
	argTypes: {
		// Always include this if the component emits events. List all the event names in the
		// array below
		...makeActionArgTypes( [ 'click', 'focus', 'blur' ] ),

		// Other than events, keep this empty at first, then add overrides for props that don't work
		// right. Common cases include:

		// Setting a default value for a prop for story purposes (if the real default is unhelpful)
		propWithUnhelpfulDefault: {
			defaultValue: 'foo'
		},

		// A prop that is an enum
		propThatTakesEnum: {
			// eslint-disable-next-line es/no-object-values
			options: Object.values( EnumType ),
			control: 'inline-radio', // or 'select' if there are a lot of possible values
			defaultValue: EnumType.Foo
		},

		// An HTML attribute that is not a prop
		htmlAttributeThatIsNotAProp: {
			control: 'text', // or 'boolean', 'number', 'inline-radio', 'select', etc
			defaultValue: 'Foo', // optional
			table: {
				category: 'Attributes'
			}
		}
	},
	parameters: {
		layout: 'centered'
	}
};

// This is the main story for every component. It's a simple rendering of the component where
// every prop is configurable
export const Configurable = ( args : Args, { argTypes } : StoryContext ): Vue.Component =>
	Vue.extend( {
		components: { WvuiMyComponent },
		props: Object.keys( argTypes ),
		computed: {
			actionListeners() {
				// This method can be omitted if the component emits no events
				// If this results in a warning about args being unused, rename args to _args
				return makeActionListeners( args, argTypes );
			},
			filteredProps() {
				// Use this to remove argTypes that aren't props from the source code display
				// You'll only encounter this if you've added custom argTypes that aren't props
				// or attributes (that you use internally in the story to compute the value of
				// another prop, like with icons), or if your component has a slot.
				return filterKeys( this.$props, [ 'argtypes that are not props' ] );
			}
		},
		// You can remove v-on="actionListeners" if the component emits no events
		// You can drop filteredProps and use v-bind="$props" instead, if there are no non-prop
		// argTypes that need to be filtered out
		template: `
			<wvui-my-component v-bind="filteredProps" v-on="actionListeners" />
		`
	} );