story-tabdeprecated

Generate documentation in Storybook tab

Usage no npm install needed!

<script type="module">
  import storyTab from 'https://cdn.skypack.dev/story-tab';
</script>

README

StoryTab 📑

npm version build status oclif storybook

Generate component code as documentation in Storybook tab 📑

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]

Built with StoryTab

License

MIT