Ability to add docs

[andreasvirkus]

It'd be great if we could easily add documentation in our SFC stories, akin to the MDX experience. Maybe a <Docs> component could help us more easily extract this?

[tobiasdiez]

Can you explain a bit more what you want to do? Under the hood, the addon translates vue story files into the classical Component Story Format. But I don't think that CSF provides a way to specify documentation.

[andreasvirkus]

Even adding the description would be a nice start (available in story params). But with MDX you can document various use-cases as freeform text, sprinkling in the component between text blocks. That'd be ideal for us.

An example use-case would be describing the UX rules behind validation errors, where we'd want to show different cases (e.g. the whole field component in an error state, with the validation error being displayed vs just the input field's border indicating a validation error) and explain when to display each.

[tobiasdiez]

And how do you want to declare the documentation part? Do you just want to have a <docs lang=mdx>...</docs> block where you can put whatever you would normally put in the mdx file? This is possible (see https://github.com/johnsoncodehk/vite-plugin-vue-component-preview for a similar idea), but requires quite a bit of setup to get right (in particular to get linter + ide support, see e.g. vuejs/language-tools#1687).

[tobiasdiez]

Support for a docs custom block is now added (see readme for details). Please give it a try 🚀