Understand Component Story Format (CSF)

[00:00] Now that we've covered the bulk of Storybooks UI features and how they intersect with code, let's learn how to define stories of our own. We do this using a file format called component story format or c s f for short. Let's be bold and delete all of our existing stories and start from [00:19] scratch. And while we're in here, let's change this directory from stories to components to be a little bit more real world. Create a new file titled button.stories.js. Import the button that we want to write stories for. Close our sidebar [00:39] for more space. Import button from we use a relative path here. Button.jsx. Next, we need to export a default with our component meta. The simplest version where we've imported a component is simply to define that component field using [00:59] our component button. And this is technically it. We have a valid storybook component even though there's nothing showing up in the sidebar over here. We just need to add stories. In CSF, we define stories by exporting named exports. So I'll create a story called My Story and we want to use the object [01:19] syntax here. When I save this we'll see it appear in the sidebar. We're getting this automatic category here based on the containing folder components. And when we click into our component, we see our first story. It is looking a little bit meager though. There's a button [01:39] here, but there's no text. Remember, Storybook uses args to provide UI controls in Storybook. So on this Storybook object, we wanna add an args property with the label button. Notice that we're not using a templating syntax. We're just defining the args that make up this unique story. [01:59] Storybook automatically applies these args to this button component using a behind the scenes template, giving us a number of benefits inside of Storybook while remaining as terse as possible.