33 Matching Annotations
  1. Jun 2025
    1. You can use args in your stories to configure the component's appearance, similar to what you would do in an application. For example, here's how you could use a footer arg to populate a child component:

      In other words, args aren't necessarily only for passing straight through to the component. I agree with this idea in theory.

      I had trouble getting this to work with TypeScript in practice. It fought against me pretty hard and told me the args/argTypes were invalid if they didn't match the props from the component. I'm hoping that's solvable, but I did not manage to so far.

      Also, in this example, we should really destructure args so that we only pass the Page props to Page:

      template({ footer, ...props })

  2. Aug 2023
  3. Jun 2023
  4. Feb 2023
  5. Aug 2022
  6. May 2022
  7. Dec 2021
    1. Interactive storiesStorybook enables you to capture various states of a component in a structured format called a story. Each story simulates a particular UI state by rendering the component in isolation and supplying props and mock data.However, some UI states can only be reached via user interaction—click, drag, tap, type, etc. These were previously impossible to model in Storybook. To address this, we've added a new construct in Storybook 6.4 called the play function. That enables you to run scripted interactions after a story is rendered.Consider this play function that fills out a form to trigger a validation:

      I wonder how this can change how we approach component testing / unit tests?

  8. Dec 2019
  9. Oct 2019
  10. Aug 2019
  11. Dec 2018