Tessera
Folgen

Yann Braga

@yannbf.bsky.social

🇧🇷🇳🇱 Storybook team at Chromatic | Author at Newline | Speaker | http://yannbraga.dev

41 Posts1095 Follower86 Folgt
Yann Braga@yannbf.bsky.social · 2w ago

Finally ready to share the rework of the MSW addon @kettanaito.com and I worked on! The API is a lot closer to what you would use in Vitest and other environments (using in a beforeEach step). So much potential for the addon, keep an eye out for some really neat features in future versions!

Artem Zakharchenko@kettanaito.com · 2w ago

Huge news to Storybook developers using MSW: version 3.0 of our add-on has just been released! 🎉 github.com/mswjs/msw-s... This brings a new architecture to support both CSF3 and CSF4, fix some long-standing issues, become dependency-free, and a ton more.

Yann Braga@yannbf.bsky.social · 3mo ago

What do you think of a dev tool that helps you inspect components in your live app and then save that snapshot as a story in Storybook? 🤔 Backed by the incredible Vite devtools of course @antfu.me <3

Yann Braga@yannbf.bsky.social · 5mo ago

@npmx.dev about to make history today!! It's incredible to see how much can be done when you mix incredible, passionate people together. Really, check this out ♥ npmx.dev/blog/alpha-r... Props to @danielroe.dev and @patak.cat and others for shepherding many contributions to make amazing software!

Announcing npmx: a fast, modern browser for the npm registry

Today we're releasing the alpha of npmx.dev – a fast, modern browser for the npm registry, built in the open by a growing community.

npmx.dev

Yann Braga@yannbf.bsky.social · 9mo ago

Hey everyone! We're actively experimenting with AI in Storybook so we can provide you an excellent developer experience. We now have an MCP server to serve as your companion when working on your project. Check this out and sign up to be part of our early access list <3

Storybook@storybook.js.org · 9mo ago

🧵 (1/3) Most AI-generated code looks good until you try to merge it. Wrong props, odd states, subtle regressions. Storybook MCP fixes that. It turns your stories, docs & tests into machine-readable context so agents actually follow your patterns.

Storybook-MCP-early-access-program
Yann Braga@yannbf.bsky.social · last yr.

There's so much cool stuff here I won't even say, you should try it for yourself now that it's really out! 🙈

Storybook@storybook.js.org · last yr.

Storybook 9 is here! ▶️ Interaction tests ♿ Accessibility tests 👁️ Visual tests 🛡️ Coverage reports 🚥 Test widget 🪶 48% Leaner ✍️ Story generation 🏷️ Tag-based organization 🌐 Story globals 🏗️ Major updates for Svelte, Next.js, React Native, and more! Let’s dive in!

Yann Braga@yannbf.bsky.social · 2y ago

If you use or is interested in Storybook, I'd love to hear your thoughts on these proposals. We are working on making it typesafe and intuitive to write stories and tests in Storybook, check this out!

Michael Shilman@shilman.net · 2y ago

When it comes to writing stories, improved typesafety and autocompletion are @storybook.js.org's top user requests. We've also heard our "play" function feels too different from the rest of the testing ecosystem. We want to address this feedback in Storybook 9. 🧵

Code snippet for new CSF typesafe factories and test proposal. const meta = config.meta({ component: Button }) // 1. Type-safe story factories "arrange" export const Primary = meta.story({ args: { label: 'Primary', onClick: fn() } }) // 2. Jest-style tests "act" and "assert" Primary.test('handles clicks', async ({ canvas, args }) => { await userEvent.click(canvas) await expect(args.onClick).toHaveBeenCalled() });
Yann Braga@yannbf.bsky.social · 2y ago

Storybook 8.5 has reached beta ✨ There are tons of interesting features there – including automatic a11y testing – you should check it out 👀 Feel free to ask anything about it! github.com/storybookjs/...

Release v8.5.0-beta.1 · storybookjs/storybook

8.5.0-beta.1 Addon A11y: Add conditional rendering for a11y violation number in Testing Module - #30073, thanks @valentinpalkovic! Addon A11y: Remove warnings API - #30049, thanks @kasperpeulen! A...

github.com

vanessa 🍄@nessa.dev · 2y ago

I’m looking for engineers to do user interviews for @storybook.js.org: - Senior+ / tech lead type - Full stack or frontend app dev - ❗️Have *not* used storybook professionally - Cares about testing Know anyone that’d lend me 30 mins? Hook us up pls 🙏.

Arisa Fukuzaki@arisa-dev.bsky.social · 2y ago

Seeking a new role👍 If you hear of any opportunities/wanna catch up, DM/comment. 💼Looking for FE Dev(mid-level), Full Stack Dev (mid-level), DevRel(senior-level), & Docs Engineer(mid-senior) roles 🌎 Open to roles in remote & hybrid(🇩🇪) 🏆Experience: FE & Full Stack Dev(4 years) & DevRel(3.5 years)

Yann Braga@yannbf.bsky.social · 2y ago

Rendering (and testing) React Server Components in the browser is possible and this shows you how! It's crazy that you're able to achieve such code coverage in components.

Storybook@storybook.js.org · 2y ago

🙅 Firing up your whole E2E setup just to test React Server Components (RSCs) 🙌 Component testing RSCs in the browser, with mocked complex app states and reliable speed Check our newest blog post, or read on for the highlights. storybook.js.org/blog/compone...

Yann Braga@yannbf.bsky.social · 2y ago

What an interesting couple of weeks: - @nextjs.org 15 released - Angular 19 released - @vite.dev 6 released And of course at the moment they are released, issues in Storybook pop up with users asking for support. Fortunately we got it all working in a short time, but what a ride that was 😮‍💨

Yann Braga@yannbf.bsky.social · 2y ago

Hey peeps! In 35min we're doing another kickoff meeting for the Storybook Test early access program. Come learn what we've been doing to build the best way to test your components 🫰 us02web.zoom.us/j/8405223993...

Join our Cloud HD Video Meeting

Zoom is the leader in modern enterprise video communications, with an easy, reliable cloud platform for video and audio conferencing, chat, and webinars across mobile, desktop, and room systems. Zoom ...

us02web.zoom.us

Michael Shilman@shilman.net · 2y ago

We're alpha testing React Native Web Vite for @storybook.js.org ! Kick the tires if you build in RN and want to: - Develop components in isolation - Document a design system - Test components or pages Hit us up on GH or SB Discord #react-native for help storybook.js.org/docs/8.5/get...

Storybook for React Native Web | Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

storybook.js.org