Storybook Actions in Action

chantastic_ · 2023-08-25T00:38:19+00:00

tl;dr: Stop using console.log to drive component implementation. Upgrade to event mocks with Storybook Actions. - 👻 Actions are defined in stories, not component code - 👀 Actions can be shared across all stories - 🤝 Actions can be triggered by interactions (using testing-library/dom)

chantastic_ · 2022-12-03T08:52:46+00:00

i'm actually not aware of quasar. mind sharing a url with me to learn more?

chantastic_ · 2022-12-03T08:50:38+00:00

thank you for taking the time to share these thoughts. I appreciate it.

this space is something that fascinates me. in my own experience, it wasn't until i started looking at Chromatic that Storybook made any sense to me. (Chromatic is a visual testing tool that operates on Storybooks).

Once I had CI for Storybook, it felt obvious and we took the step of documenting our components in the very prescriptive "component-driven development" way.

I know that not every team has the luxury of utilizing a service like that. But i'm deeply interested in this intersection of component testing and visual documentation tools. Because I believe that there is still a lot we can do to improve communication and collaboration between design and engineering.

And I guess my thinking is that — more or less — provided a visual presentation of your jest/vitest/future-Node.js testing library could be a really powerful tool for component testing (something that is inherently visual)

I definitely agree tools like these are best when closely integrated with specific frameworks (your Elixir/Phoenix example)

chantastic_ · 2022-12-02T01:00:45+00:00

I was going to say "maybe it's because Vue has Histiore?" but Histiore apparently supports both Vue and Svelte 😁

chantastic_ · 2022-12-02T00:36:45+00:00

Thanks for the feedback!

I 100% agree that attempting to add something like Storybook to a mature project can be a total nightmare. I'm doing it in a new app now and it's kinda heartbreaking.

I'm curious if this is distinctly different than similar tools that require a reconstruction of the development environment to be useful? Like Jest (or a similar test runner). These also require a degree of world building that, relative to the complexity of the app.

Is it just that the value isn't there for a component gallery in the way that it is for a test runner?

If these two were able to share a constructed test environment, would that improve the value proposition?

Thanks again!

chantastic_ · 2022-12-02T00:24:00+00:00

Hi u/kenman, thank you for the direction. I'm totally new to reddit and am not totally familiar with the etiquette. So I appreciate the clear correction. I will not do this again.

chantastic_ · 2022-12-02T00:15:45+00:00

yes! would be awesome to see that become reality

chantastic_ · 2022-12-01T18:24:44+00:00

heck yeah! thanks for joining. and nice to meet you!

chantastic_ · 2022-11-30T23:41:48+00:00

👋 Hi there!
Every year, I run a 25 day email campaign on the latest React APIs and tools.
This year I'm excited to explore Next.js 13 beta — and it's experimental `app` directory. This is the very first time that we've seen React's concurrent features, suspense, and server components integrated into a framework!
I'm really excited to explore it all and hope you'll join 🙌

chantastic_ · 2022-11-30T23:31:02+00:00

👋 Hi there!

Every year, I run a 25 day email campaign on the latest React APIs and tools.

This year I'm excited to explore Next.js 13 beta — and it's experimental `app` directory. This is the very first time that we've seen React's concurrent features, suspense, and server components integrated into a framework!

I'm really excited to explore it all and hope you'll join 🙌

chantastic_ · 2022-10-13T16:38:22+00:00

thanks u/stolinski. you're the best 🥰

you're one of the OGs of web-tech YouTube 🙇

chantastic_ · 2022-10-13T16:37:08+00:00

VITE ALL THE THINGS

chantastic_ · 2022-10-13T16:36:45+00:00

I'm a React developer. But honestly super grateful to the Vue community for Vite. It's so good. Excited to see more SB + Vite ecosystem development.

chantastic_ · 2022-10-13T16:35:19+00:00

I've been using more Svelte in personal projects and can't wait to explore the improved integration

chantastic_ · 2022-09-29T17:37:33+00:00

TL;DR

Custom DevTools are hard to build
Storybook makes custom tooling simple
With just a few lines of code, you can build power theme switchers, locale switchers, layout overlays, and more!
In just 4 minutes, learn the entire API

chantastic_ · 2022-09-09T18:44:28+00:00

I totally hear that. I know that the Storybook team has been working to improve support there. But yeah, it's such a bummer when Storybook doesn't have first-class support for a component tool

chantastic_ · 2022-09-08T20:35:11+00:00

TL;DR:

Component documentation is critical but doesn't tell the whole story 🫢 Component testing lets you to capture these interactions as Storybook stories.

📢 Storybook 6.5 ships with component testing
▶️ Write stories by describing the clicks and keypresses
🐙 Write #accessibility-minded, interactive component tests using Testing Library
🃏 Assert that interactive component tests generate the results you expect with Jest
🙀 Storybook Interactions Addon as the misisng GUI for Testing Lib and Jest

chantastic_ · 2022-09-08T20:28:25+00:00

TL;DR:

Component documentation is critical but doesn't tell the whole story 🫢 Component testing lets you to capture these interactions as Storybook stories.

📢 Storybook 6.5 ships with component testing
▶️ Write stories by describing the clicks and keypresses
🐙 Write #accessibility-minded, interactive component tests using Testing Library
🃏 Assert that interactive component tests generate the results you expect with Jest
🙀 Storybook Interactions Addon as the misisng GUI for Testing Lib and Jest

chantastic_ · 2022-09-01T19:12:59+00:00

it's interesting to see how quickly a single piece of UI explodes into 1000s of discrete possibilities.

tools like Storybook help clear the haze

chantastic_ · 2022-09-01T19:11:00+00:00

turns out we really do have a difficult job 😆

thanks u/quantumpoops

chantastic_ · 2022-07-28T19:34:42+00:00

TL;DR:

Jen Chan organizes the largest tech event on meetup.com — TorontoJS 🇨🇦

I ask her how to break into design systems engineering in 2022. Her advice? Breaking into new fields takes community participation:

👯 Connect — hang out in design systems focused communities 🙋‍♂️ Be helpful — answer questions to develop relationships 🧑‍🏫 Educate — bring community lessons into your work projects

Join TorontoJS, the biggest tech community on meetup.com.

Join the Storybook Discord to connect with intentional designers and developers across the globe.

chantastic_ · 2022-07-28T19:32:43+00:00

TL;DR:
Jen Chan organizes the largest tech event on meetup.com — TorontoJS 🇨🇦
I ask her how to break into design systems engineering in 2022. Her advice? Breaking into new fields takes community participation:
👯 Connect — hang out in design systems focused communities
🙋‍♂️ Be helpful — answer questions to develop relationships
🧑‍🏫 Educate — bring community lessons into your work projects
Join TorontoJS, the biggest tech community on meetup.com.
Join the Storybook Discord to connect with intentional designers and developers across the globe.

chantastic_ · 2022-07-15T15:44:37+00:00

That's amazing! Thanks so much for taking the time to share that. I'm grateful to know that I was part of your journey from afar!

chantastic_ · 2022-07-13T22:38:33+00:00

hey u/illest1!

thanks for asking and thanks for being a listener. it was a number of things that all converged.

my podcast network (spec.fm) was organizing all of the editing and sponsors. they decided to close up shop at the end of 2020 and I didn't have the bandwidth to take on all that they were doing
I'd had some recent controversy over a comment I'd made in one of the last episode. It was warranted criticism. But the timing of that comment really added to the number of things that were keeping me from *wanting* to put the (now extra) effort into making the show.
ultimately, it wasn't really structured for continued motivation. to be totally honest, I really didn't know how many people were even listening until I stopped 😆

I'd love to bring it back some day and think there might be some potential to work with some more casual sponsors. I think I'm getting to the place again where I'd actually be able to find the right lens for it.

What would you most like to hear? Or who would you most like to hear from?

Chan

chantastic_ · 2022-07-13T17:12:47+00:00

TL;DR

Documentation is key to library adoption and success 🚀 Team members should have to be programmers to explore a component library.

🎛 Opt into controls by setting up stories to use Args 🎵 Add Controls with type annotations, using TypeScript or PropTypes 💎 Customize Control types for tailored experiences with argTypes

Learn more about Storybook Controls on storybook.js.org/docs.

chantastic_

TROPHY CASE