0.4.0 • Published 30 days ago

@stencil/storybook-plugin v0.4.0

Weekly downloads
-
License
MIT
Repository
github
Last release
30 days ago

StencilJS Storybook Plugin

This is still early and work in progress, don't use it yet!

Setup

In an existing StencilJS project, run:

npx storybook@next init

to setup a new Storybook project. Select any preset available, e.g. Lit and finish the setup process. After, install the StencilJS preset.

npm i --save-dev @stencil/storybook-plugin

Last, update the .storybook/main.ts file as following:

const config = {
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@stencil/storybook-plugin"
  }
};

export default config;

See the Storybook Docs for the best documentation on getting started with Storybook.

Usage

A basic story will look like this:

import type { Meta, StoryObj } from '@stencil/storybook-plugin';
import { h } from '@stencil/core';

import { MyComponent } from './my-component';

const meta = {
  title: 'MyComponent',
  component: MyComponent,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    first: { control: 'text' },
    last: { control: 'text' },
    middle: { control: 'text' },
  },
  args: { first: 'John', last: 'Doe', middle: 'Michael' },
} satisfies Meta<MyComponent>;

export default meta;
type Story = StoryObj<MyComponent>;

export const Primary: Story = {
  args: {
    first: 'John',
    last: 'Doe',
    middle: 'Michael',
  },
  render: (props) => {
    return <my-component {...props} />;
  }
};

If you are using slots in your component, pass them as parameters to the story object like this:

import type { Meta, StoryObj } from '@stencil/storybook-plugin';
import { h } from '@stencil/core';

import { MySlotted } from './my-slotted';

const meta = {
  title: 'MySlotted',
  component: MySlotted,
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<MySlotted>;

export default meta;
type Story = StoryObj<MySlotted>;

export const Primary: Story = {
  args: {},
  parameters: {
    slots: {
      default: 'Hello World',
      another: <div>another</div>
    },
  }
};

Troubleshooting

If you encounter any issues with the story rendering, please check the following:

  • If your customElementsExportBehavior is set to a value that lazy loads components, ensure that you are using defineCustomElements() in preview.ts. You should also define your component as a string in your story file: component: 'my-component' as it does not yet exist in the custom element registry.
  • If your customElementsExportBehavior is set to a value like auto-define-custom-elements or default, do not include defineCustomElements() in preview.ts and use the constructor as the component value in your story file: component: MyComponent.
  • Check the console for any error messages.

Limitations

This is early development and we are still seeing some limitations we want to see fixed:

  • Story is completely reloaded when component is changed (no hot module replacement)
  • There is no automation yet for easily scaffolding storybook in a Stencil project.
  • Stories are run in dev mode - no SSR, or serialization happens

Please get involved and support the project with code contributions. Thanks!

0.4.0

30 days ago

0.3.0

1 month ago

0.2.0

1 month ago

0.1.0

1 month ago

0.0.16

1 month ago

0.0.15

1 month ago

0.0.14

2 months ago

0.0.13

2 months ago

0.0.12

2 months ago

0.0.11

2 months ago

0.0.10

2 months ago

0.0.9

3 months ago

0.0.8

3 months ago

0.0.7

3 months ago

0.0.6

3 months ago

0.0.5

3 months ago

0.0.4

3 months ago

0.0.3

3 months ago

0.0.2

3 months ago

0.0.1

3 months ago