Test components the EASY way | Component Story Format 3

Learn all about Storybook's declarative documentation and testing standard: Component Story Format.
Join chantastic for a 7 minute crash course on the latest standard!
▬ Links and resources ▬▬▬▬▬▬▬▬▬▬
CSF 3 announcement: storybook.js.o...
Storybook 7.0 sneak peak: storybook.js.o...
Storybook 6.5 announcement: storybook.js.o...
▬ Follow us! ▬▬▬▬▬▬▬▬▬▬
Discord: / discord
Twitter: / storybookjs
Instagram: / storybookjs
GitHub: github.com/sto...
Follow ‪@chantastic‬ on:
twitter: / chantastic
youtube: ‪@chantastic‬
▬ Learn more ▬▬▬▬▬▬▬▬▬▬
Storybook at learnstorybook...
Storybook addons at storybook.js.o...
Component driven UI development at www.componentd...
▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬
Chromatic is made by Storybook maintainers and sets up in just 2 minutes.
Claim free Storybook hosting at www.chromatic....!

[@leifn]

This is so wonderfully clean! Can't wait to use it :)

[@chantastic]

It's so much fun! Let us know what you think when you try it out. Don't forget that it's available in 6.5 today without any feature flags!

[@leifn]

@@chantastic i only need to convince the team haha

[@hermit_dani]

This is wonderful! great work. So excited to use it.

[@chantastic]

Thank you, Daniel! I hope it works well for you. Let us know. what you think :)

[@haaxor1689]

I'd really love to see typescript types in your tutorial videos. Especially for this feature since in the previous component format I've seen multiple ways of typing it and seeing you provide your preferred option would help. Also will will there be support for TS 4.9 soon after release? The `satisfies` operator will work nicely with the default export of story meta.

[@chantastic]

This is a great question! Thanks for asking! I'll be honest, I am not a TypeScript expert. But I know that the Storybook team has diligently been working on sound types for CSF 3. These will be realized in the 7.0 release. And I know that 4.9 (satisfies) is very much in mind. I'm going to add your request to my queue for Storybook 7.0 videos.

[@Karine-ll5nr]

Hello! I didnt found how I can use a template with CSF 3, because one of my component is unsing (checkbox component, the label is projected into a ng-template), can you help me? Thanks!

[@chromaticui]

Hi Karine! I'll be honest, I don't know much about Angular. But there are a lot of active Angular developers in the Storybook Discord discord.gg/storybook. It's also possible that the angular version of the documentation may be more helpful: storybook.js.org/docs/angular/writing-stories/introduction - chan

[@guidogennari95]

How can I use hooks in my cs3 stories?

[@chromaticui]

in which way are you attempting to integrate hooks with CS3? Hooks are naturally executed when the component story renders.

[@JerricLynsJohn]

Svelte support?

[@chantastic]

The Storybook team is working on a strategy there. I think there's an ergonomic challenge there with folks wanting to using a Svelte native format for story authoring, instead of CSF. But I don't know all the details.

[@VenelinNikolov]

Everything gets super complex? I'm wondering why? I guess the main idea is to keep things simple, not over-engineering

[@chromaticui]

could you elaborate?