feat: Add Storybook for component documentation, testing, and development by diondiondion · Pull Request #34907 · mastodon/mastodon

Closes MAS-428 Changes proposed in this PR: Introduces an initial basic Storybook (v9) setup to the project (only the Button component is included for now) Updates vitest to version 3.2 and uses t...

GitHub
How to use Pinia with Storybook

Using Pinia in Storybook allows you to test components with a shared state. Since Storybook runs outside your main Vue app, you need to manually set up a Pinia instance for each story.

ProstoCode
Switch background color when changing theme in Storybook

Changing the background color when switching themes in Storybook can be done easily with withThemeByClassName. This method applies theme-related classes directly to the body tag.

ProstoCode

✍️ I really enjoy working with Storybook, but I've found that it's very easy to end up repeating a component's arguments quite a bit. Well, I'm here to say that there is a better way! A DRYer way!

(And I have to remind myself of it every single time I set up a new codebase, so I thought I'd finally write it down 😉)

https://theadhocracy.co.uk/wrote/no-more-damp-stories

#StorybookJS #React

theAdhocracy | No More Damp Stories

Storybook encourages setting the same arguments over and over and over again, but this is a pain to maintain. There is a better, DRYer approach, it's just not well documented.

theAdhocracy
The YouTube version is up of my #MelbJS talk yesterday about how we’re using #StorybookJS as our primary test tooling for UI at Culture Amp: “Help! Storybook is eating all our tests!” https://kevinyank.com/posts/help-storybook-is-eating-all-our-tests/
Help! Storybook is eating all our tests!

Kevin Yank’s website

Storybook webinar: Automation + tools for design systems engineers

Frontend development and design event – hosted in Paris, streaming online

Eventbrite
Kicking off work on my MelbJS talk for next week: “Help! Storybook is eating all our tests!” #storybookJs #JavaScript #MelbJS #webdev https://melbjs.com
MelbJS

@preya Does #StorybookJS work for you?
#storybookjs is supposed to be awesome. And it kind of is. But it really bugs me how one of their top selling points is that it’s a great tool for writing documentation, while their own documentation is… very very far from good. It also looks like they’re not actually using Storybook for the Storybook documentation (though that might be a wrong impression I’m getting due to not understanding how customizable it is).

My favourite part is how you have a bajillion ways to set up different stuff, both through pure js/ts and also through React and Angular components, but it’s practically impossible to find a simple reference of “Here are all the default keys you can put in
parameters for a story”.

Of course most of the addons available, first and third party, also suffer from the same issue, where they give you a snippet to copy-paste instead of an explanation what the thing is and how to use it.

For my first post of 2023 (and my first in the https://bringback.blog/ challenge) I failed to write on any of the topics that I had planned 😅

**But** I did manage to find the root cause of an accessibility bug raised at work that I felt was worth writing up. Spoiler alert: this wasn't so much a bug as an unexpected behaviour between NVDA and Storybook 🤷‍♂️

Read it here: https://theadhocracy.co.uk/wrote/clickable-confusion-with-nvda

#NVDA #accessibility #a11y #StorybookJS #BringBackBlogging

theAdhocracy | Clickable Confusion with NVDA

Understanding why non-interactive Storybook components are often announced as clickable by NVDA and other screenreaders.

theAdhocracy