@jonathantneal/storybook-helpers
Version:
Helpers designed to make integrating Web Components with Storybook easier.
50 lines (46 loc) • 1.96 kB
TypeScript
import { TemplateResult } from 'lit';
import { ArgTypes } from '@storybook/web-components';
type Categories = "attributes" | "cssParts" | "cssProps" | "cssStates" | "events" | "methods" | "properties" | "slots";
type Options = {
/** hides the `arg ref` label on each control */
hideArgRef?: boolean;
/** sets the custom type reference in the Custom Elements Manifest */
typeRef?: string;
/** Adds a <script> tag where a `component` variable will reference the story's component */
setComponentVariable?: boolean;
/** renders default values for attributes and CSS properties */
renderDefaultValues?: boolean;
/** Category order */
categoryOrder?: Array<Categories>;
};
type StoryOptions = {
/** Categories to exclude from these stories */
excludeCategories?: Array<Categories>;
/** Adds a <script> tag where a `component` variable will reference the story's component */
setComponentVariable?: boolean;
};
type StoryHelpers<T> = {
args: Partial<T> & {
[key: string]: any;
};
argTypes: ArgTypes;
reactArgs: Record<string, unknown>;
reactArgTypes: ArgTypes;
events: string[];
styleTemplate: (args?: Record<string, unknown>) => TemplateResult | "";
template: (args?: Partial<T> & {
[key: string]: any;
}, slot?: TemplateResult) => TemplateResult;
};
/**
* sets the global config for the Storybook helpers
* @param options
*/
declare function setStorybookHelpersConfig(options: Options): void;
/**
* Gets Storybook helpers for a given component
* @param tagName the tag name referenced in the Custom Elements Manifest
* @returns An object containing the argTypes, reactArgTypes, events, styleTemplate, and template
*/
declare function getStorybookHelpers<T>(tagName: string, options?: StoryOptions): StoryHelpers<T>;
export { type Categories, type Options, type StoryHelpers, type StoryOptions, getStorybookHelpers, setStorybookHelpersConfig };