Story-tab NPM | npm.io

StoryTab 📑

Generate component code as documentation in Storybook tab 📑

npm.io

Maintaining code and documentation separately makes it painful, it's easy to get them out of sync 🙅

Code can't lie, documentation can 💥

StoryTab keeps your documentation up to date 💪

Installation

# Instal StoryTab
$ npm install story-tab --save-dev

# And one of the following (depending on the used framework):
$ npm install story-tab-react --save-dev # React

Demo

StoryTab live demo

Usage

To generate StoryTab components in your project:

default export component and name files as:
- [filename].storytab.[ext]
from your terminal:
- cd into your project
- run $ storytab generate react

Import generated StoryTab components into Storybook. 🎉

Generated StoryTab Files

By default generated files will be prefixed with _ for example:
MyComponent.storytab.jsx & MyComponent.storytab.css -> _MyComponent.jsx
You can set custom prefix with --prefix flag:
$ storytab generate react --prefix=CustomPrefix

Import generated StoryTab component and use it in story:

import React from 'react';
import { storiesOf } from '@storybook/react';

import ButtonGreen from './_ButtonGreen';
import ButtonRed from './_ButtonRed';

const stories = storiesOf('Button', module);

stories.add('Green Button', () => <ButtonGreen />).add('Red Button', () => <ButtonRed />);

Commands

Generate component code as documentation in Storybook tab
```
$ storytab generate [framework]
```
Arguments:
framework - generate StoryTab component for desired framework 'react'
Options:
--prefix - generate StoryTab components with filename prefix (default '_')
List StoryTab possible commands
```
$ storytab help
```
List StoryTab command details
```
$ storytab help [name of command]
```