docs: 📚 optimize code preview + add table of contents

[mariohamann]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

There's no connected issue.

Changes

Changes in this pull request:

• This PR adds prettier formatting to every story. This was done with "Replace all" on extractComponentDescription: () => readme, so stories that don't use this might be missed.

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

Other information

Hey there!

I'm maintainer of two design systems (Synergy Design System, Solid Design System) that use Storybook and Lit as well. Really enjoyed going through your Storybook, but the formatting of your code really bugged me and made it feel "broken".

I therefore propose to introduce automatic formatting, which is described over here in the Storybook docs: https://storybook.js.org/docs/api/doc-block-source#format
As you already use prettier in your codebase yourself, I believe that this might be just "consequent". :)

Example 1

Before

After

Example 2

Before

After

All the best and keep up the cool work!

[jeripeierSBB]

Thanks a lot for your contribution. I was last week trying to integrate prettier in the browser to achieve better code block formatting. Was also checking storybook docs but just not recognizing the format source format part. So again, thanks for solving my problem! :D
Can you please add the definition to preview.ts so we have to only once configure the formatting?

just add

  docs: {
    source: { format: 'html' },
  },

to export const parameters.

Thank you!

[mariohamann]

Done! :)

I wasn't sure, if you want to introduce centralized changes (we use preview.ts in our projects ourself for that.))

And I totally get you... we added an package for code formatting, which even introduced bugs on Safari, until I realized that there's prettier support.

Lowhangig-fruit we did in the same commit – we added Table of Contents: solid-design-system/solid@a09daf9#diff-fa2909f2ae1c2b6b0c3710b27e556083f35005f15d2890089e8d2a431fc4ab43R89

Do you want me to add that, too? I would update the PR title then.

[jeripeierSBB]

If you still like to spend time for us, then go for it :D. thanks!

[mariohamann]

That's Open Source. 😆

[jeripeierSBB]

LGTM, thanks a lot for your help :)

[mariohamann]

Seems like you have to merge. :) Enjoy!