Storybook with StencilJS story template and args generator

Easy way of generating basic template, args and argTypes

Generate basic template, args and argTypes

Introduction

We are going to face some disadvantages when working storybook with stenciljs

• We need to define properties that we want to use in controls
  • We need to define default props for controls
• We need to add description and prop types for Docs pages
• defaultValue property is not working for Doc pages
• We need to pass args values on the template

The purpose of this library is to make easier write all this properties.

Install

Install with npm:

$ npm install --save story-wc-generator

Usage

stories/cool-button.stories.ts

import notes from '../../components/cool-button/readme.md';
import storyGenerator from 'story-wc-generator';

const { args, argTypes, Template } = storyGenerator('cool-button', {
  text: { value: 'Click me!', description: 'Text label', type: 'string' },
  color: {
    value: 'primary',
    description: 'Color of button',
    control: 'select',
    options: ['primary', 'secondary', 'dark'],
    type: 'primary | secondary | dark',
  },
});

export default {
  title: 'UI/Cool Button',
  args,
  argTypes,
  parameters: {
    notes,
  },
};

export const Primary = Template.bind({});

export const Secondary = Template.bind({});
Secondary.args = {
  color: 'secondary',
};

...

Parameters

| Parameter | Description | |--------------|----------------------------------------| | componentTag | Tag of the component | | params | Object with more parameters(see below) |

Params

The object will have this structure

{
  propName: {
    ...parameters
  }
}

| Field | Description | |-------------|----------------------------------------| | value | Default value for controls | | description | Description of prop on Docs | | control | Control type | | options | Array of options if the props needs it | | type | To define prop type |