story-wc-generator
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

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

Package Sidebar

Install

npm i story-wc-generator

Weekly Downloads

106

Version

1.0.0

License

MIT

Unpacked Size

33.4 kB

Total Files

13

Last publish

Collaborators

  • jf-gm-dev