@storybook/web-components

Functions

• getCustomElements()
• isValidComponent()
• isValidMetaData()
• setCustomElements()
• setCustomElementsManifest()
• setProjectAnnotations()

Interfaces

• WebComponentsRenderer

  • component
  • storyResult

Type Aliases

• Decorator
• Loader
• Meta
• Preview
• StoryContext
• StoryFn
• StoryObj

function getCustomElements

getCustomElements: () => any;

function isValidComponent

isValidComponent: (tagName: string) => boolean;

function isValidMetaData

isValidMetaData: (customElements: any) => boolean;

function setCustomElements

setCustomElements: (customElements: any) => void;

• Parameter customElements

  any for now as spec is not super stable yet

function setCustomElementsManifest

setCustomElementsManifest: (customElements: any) => void;

function setProjectAnnotations

setProjectAnnotations: (
    projectAnnotations:
        | NamedOrDefaultProjectAnnotations<any>
        | NamedOrDefaultProjectAnnotations<any>[]
) => NormalizedProjectAnnotations<WebComponentsRenderer>;

• Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.

  It should be run a single time, so that your global config (e.g. decorators) is applied to your stories when using composeStories or composeStory.

  Example:

  // setup-file.js
  import { setProjectAnnotations } from '@storybook/web-components';
  import projectAnnotations from './.storybook/preview';
  
  setProjectAnnotations(projectAnnotations);

  Parameter projectAnnotations

  E.g. (import projectAnnotations from '../.storybook/preview')

type Decorator

type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;

type Loader

type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;

type Meta

type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, TArgs>;

• Metadata to configure the stories for a component.

  See Also

  • [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)

type Preview

type Preview = ProjectAnnotations<WebComponentsRenderer>;

type StoryContext

type StoryContext<TArgs = StrictArgs> = StoryContext$1<WebComponentsRenderer, TArgs>;

type StoryFn

type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArgs>;

• Story function that represents a CSFv2 component example.

  See Also

  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)

type StoryObj

type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;

• Story object that represents a CSFv3 component example.

  See Also

  • [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)