@storybook/svelte

  • Version 8.2.5
  • Published
  • 72.8 kB
  • 8 dependencies
  • MIT license

Install

npm i @storybook/svelte
yarn add @storybook/svelte
pnpm add @storybook/svelte

Overview

Storybook Svelte renderer

Index

Variables

variable INTERNAL_DEFAULT_PROJECT_ANNOTATIONS

const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<
SvelteRenderer<SvelteComponent>
>;

    Functions

    function composeStories

    composeStories: <
    TModule extends Store_CSFExports<SvelteRenderer<SvelteComponent>, any>
    >(
    csfExports: TModule,
    projectAnnotations?: ProjectAnnotations<SvelteRenderer<SvelteComponent>>
    ) => Omit<
    MapToComposed<
    StoriesWithPartialProps<
    SvelteRenderer<PreviewRender<any, any, any>>,
    TModule
    >
    >,
    keyof Store_CSFExports
    >;
    • Function that will receive a stories import (e.g. import * as stories from './Button.stories') and optionally projectAnnotations (e.g. import * from '../.storybook/preview) and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.

      It's very useful for reusing stories in scenarios outside of Storybook like unit testing.

      Example:

      import { render } from '@testing-library/svelte';
      import { composeStories } from '@storybook/svelte';
      import * as stories from './Button.stories';
      const { Primary, Secondary } = composeStories(stories);
      test('renders primary button with Hello World', () => {
      const { getByText } = render(Primary, { label: 'Hello world' });
      expect(getByText(/Hello world/i)).not.toBeNull();
      });

      Parameter csfExports

      e.g. (import * as stories from './Button.stories')

      Parameter projectAnnotations

      e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

    function composeStory

    composeStory: <TArgs extends Args = Args>(
    story: StoryAnnotationsOrFn<SvelteRenderer<SvelteComponent>, TArgs>,
    componentAnnotations: ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>,
    projectAnnotations?: ProjectAnnotations<SvelteRenderer<SvelteComponent>>,
    exportsName?: string
    ) => ComposedStory<TArgs>;
    • Function that will receive a story along with meta (e.g. a default export from a .stories file) and optionally projectAnnotations e.g. (import * from '../.storybook/preview) and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.

      It's very useful for reusing a story in scenarios outside of Storybook like unit testing.

      Example:

      import { render } from '@testing-library/svelte';
      import { composeStory } from '@storybook/svelte';
      import Meta, { Primary as PrimaryStory } from './Button.stories';
      const Primary = composeStory(PrimaryStory, Meta);
      test('renders primary button with Hello World', () => {
      const { getByText } = render(Primary, { label: 'Hello world' });
      expect(getByText(/Hello world/i)).not.toBeNull();
      });

      Parameter story

      Parameter componentAnnotations

      e.g. (import Meta from './Button.stories')

      Parameter projectAnnotations

      e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use setProjectAnnotations in your setup files.

      Parameter exportsName

      in case your story does not contain a name and you want it to have a name.

    function setProjectAnnotations

    setProjectAnnotations: (
    projectAnnotations:
    | NamedOrDefaultProjectAnnotations<SvelteRenderer>
    | NamedOrDefaultProjectAnnotations<SvelteRenderer>[]
    ) => ProjectAnnotations<SvelteRenderer<SvelteComponent>>;
    • 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.js (for jest)
      import { setProjectAnnotations } from '@storybook/svelte';
      import projectAnnotations from './.storybook/preview';
      setProjectAnnotations(projectAnnotations);

      Parameter projectAnnotations

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

    Interfaces

    interface SvelteRenderer

    interface SvelteRenderer<C extends SvelteComponent = SvelteComponent>
    extends WebRenderer {}

      property component

      component: ComponentType<
      this['T'] extends Record<string, any> ? this['T'] : any
      >;

        property mount

        mount: (
        Component?: ComponentType,
        options?: Record<string, any> & {
        props: Record<string, any>;
        }
        ) => Promise<Canvas>;

          property storyResult

          storyResult: this['T'] extends Record<string, any>
          ? SvelteStoryResult<this['T'], ComponentEvents<C>>
          : SvelteStoryResult;

            Type Aliases

            type Decorator

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

              type Loader

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

                type Meta

                type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponent<infer Props>
                ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>
                : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
                • 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<SvelteRenderer>;

                  type StoryContext

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

                    type StoryFn

                    type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponent<infer Props>
                    ? AnnotatedStoryFn<SvelteRenderer, Props>
                    : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
                    • 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<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
                    render?: ArgsStoryFn<SvelteRenderer, any>;
                    component?: ComponentType<infer Component>;
                    args?: infer DefaultArgs;
                    }
                    ? Simplify<
                    ComponentProps<Component> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>
                    > extends infer TArgs
                    ? StoryAnnotations<
                    SvelteRenderer<Component>,
                    TArgs,
                    SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
                    >
                    : never
                    : MetaOrCmpOrArgs extends SvelteComponent
                    ? StoryAnnotations<
                    SvelteRenderer<MetaOrCmpOrArgs>,
                    ComponentProps<MetaOrCmpOrArgs>
                    >
                    : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
                    • 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)

                    Package Files (2)

                    Dependencies (8)

                    Dev Dependencies (8)

                    Peer Dependencies (2)

                    Badge

                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/svelte.

                    • Markdown
                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/svelte)
                    • HTML
                      <a href="https://www.jsdocs.io/package/@storybook/svelte"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>