phenixdigital / phoenix_storybook

A pluggable storybook for your Phoenix components.
MIT License
709 stars 55 forks source link

Component docs are unstyled #514

Open xxdavid opened 3 days ago

xxdavid commented 3 days ago

Hi, first of all, thanks for this awesome library! It's a game changer!

I have a few issues related to components docs, so I am going to create an issue for each of them. The first thing is that component docs are completely unstyled.

For example, if I use the following docs for PhoenixStorybookDemo.Components.Button.button/1

  @doc """
  A simple button. When clicked, triggers a `boom` event.

  This button is:
  * great
  * awesome
  * stylish

  ## Example

      <button label="Click me" />
  """

then it looks like this in the Storybook:

Screenshot 2024-11-26 at 13 50 23

Notice that the list does not have any bullets and the heading looks just like normal text.

It is due to the Tailwind Preflight which is effective on the whole page, including the docs. I think, something like the prose class from Tailwind Typography should be used on the docs. In our company's Storybook, we are currently using this hackish workaround in our CSS:

  #doc-next h2 {
    @apply text-lg font-semibold;
  }

  #doc-next h3, h4, h5, h6 {
    @apply font-semibold;
  }

  #doc-next ul {
    @apply list-disc list-inside;
  }

  #doc-next code.inline {
    @apply py-[.1em] px-[.2em] bg-[#f8fafc] border rounded-sm;
  }

  #doc-next pre code {
    @apply block py-2 px-4 bg-[#f8fafc] border rounded-sm;
  }

  #doc-next a {
    @apply text-blue-600 hover:text-blue-500;
  }

I believe something like this (probably more elaborated, e.g., with different styles for h3 and h4) should be baked directly into Storybook, so that the docs are formatted out-of-the-box. What do you think?