Better prose support

[davestewart]

Problem

I like to add detail to more complex stories with some basic prose styling:

.variant > p {
  font-size: .75em;
  padding: .5em 0;
  ...
}

The thing is, it can get a bit more complex when one accounts for bullets, output, etc:

.variant-content {
  --variant-content-font-size: .75rem;
  --variant-content-text-color: #717171;
  --variant-content-info-color: #3b82f6;
  --variant-content-warning-color: #c50c3d;

  > p,
  > ul,
  > output,
  > div > p,
  > div > ul,
  > div > output,
  .info {
    font-size: var(--variant-content-font-size);
    color: var(--variant-content-text-color);
    font-weight: 300;
    padding: .5em 0;
  }
}

I had this working nicely in Histoire; this is it in Bedtime:

The thing is, it still feels like a bit of a hack.

So how could we better-support text?

Proposals

CSS classes

Adding a bt-prose class might be one way to do it. Then you just add prose like so:

<div class="bt-prose">
  <p>...</p>
  <ul>...</ul>
</div>

Prose component

An even nicer way to do it might be to add a markdown driven Prose component.

We have the bones of this in our main repo; the easiest way (which supports HMR) is to add Markdown in an attribute:

<Prose md="
  Some information

  - bullet 1
  - bullet 2
  - bullet 3
" />

Variants group + Variant description

Another approach might be some way to group variants, but provide descriptions for the variants themselves (not sure how this would look, but):

<template>
  <Variants title="Some component">
    <Variant description="Foo description">
      <SomeComponent foo />
    </Variant>
    <Variant description="Bar description">
      <SomeComponent bar/>
    </Variant>
  </Variants>
</template>

Document mode

But what if we could find a way for Bedtime to support Markdown as a first-class citizen using .mdx ?

## Basic Usage

This thing

<SomeComponent />

That thing

<SomeComponent prop="foo" />

I'm not sure how this would work with both scripting / data and IDE support. Maybe there is prior art (Astro, VitePress, even Storybook itself?).

I think this is an interesting direction as well, as perhaps we could even leverage a Remark plugin to add copy / code buttons based on the contents of the markdown AST?

Also

It would be useful to introduce simple markdown support to titles, so you could add <code> or <strong> tags to headings, for example:

<Story title="The `title` prop">

Conclusion

Just suggestions for now. But the idea is to make it really clear to developers what components can do, rather than just "making a Histoire clone that works".

I will re-add the basic prose classes from the Histoire implementation to our app, but may look at adding a bt-prose class to the repo.

Thoughts?