Support Storybook's Component Story Format

Component Story Format (CSF) is a new format that doesn't call Storybook API directly, meaning it can be used not just in Storybook. By supporting CSF we can allow teams to use Storybook for component development, visual and end-to-end testing, and use Styleguidist to generate beautiful documentation.

It looks like this:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Button from './Button';

export default {
  component: Button,
  title: 'Button',
};

export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;

export const emoji = () => (
  <Button onClick={action('clicked')}>
    <span role="img" aria-label="so cool">
      😀 😎 👍 💯
    </span>
  </Button>
);

I see two ways of doing it:

1. We can implement it by first adding an internal Styleguidist format that will be used on the frontend, the current Markdown format and CSF will be converted to this format. I had this idea back in 2017, and this may open other possibilities.

2. Keep documentation in Markdown but reference stories to load source code from them, similar to loading source code from files.

• Check if CSF can be extended (meaning adding new fields to stories and default export object won't break Storybook).
• Find a way to load source of the stories.
• Find a way to define imports. Dependencies are essential part of documentation to make code copypastable.
• Find what to do with actions. We can probably substitute it with our own implementation.

Only needed for the first option:

• Define the API to add textual Markdown documentation for each story.
• Define the API to include / exclude stories in / from the styleguide.
• Define internal Styleguidist format that will be used on the frontend, the current Markdown format and CSF will be converted to this format