React DocTab

Generate React component code as documentation tabs.

React-DocTab

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

Usage

To generate DocTab 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 DocTab Files

  • By default generated files will be prefixed with _ for example:
    MyComponent.doctab.jsx & MyComponent.doctab.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 tabs

    $ 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]

Built with DocTab

GitHub