Updating storybook from 6.1

[mayank99]

History

We first upgraded storybook from 6.1 to 6.2 in 907ceec as it offered some nice things (subcomponent naming, args sorting, editing objects in controls, etc).

But we ended up reverting in f0bbdfa because it completely broke our Footer styling for some reason. Also, it broke useState hook in some stories (e.g. Select).

6.3 and the future

We faced those issues in Storybook 6.2.2 and 6.2.5. Storybook has since then released a few more patches to 6.2 (latest is 6.2.9 on April 22) but I went through the changelog and it doesn't seem like those issues were fixed.

More interesting is the upcoming 6.3 release (storybookjs/storybook#14397). They have released dozens of alpha and beta patches, which might include fixes for those issues. We should wait for the stable version and try it out, because we can't stay on 6.1 forever. Also maybe we might finally get a fix for the postcss situation if we update?

[mayank99]

I investigated some more, and the Footer issue was appearing because of this line:

iTwinUI-react/stories/core/Footer.stories.tsx

Line 52 in 8ad4aba

docs: { inlineStories: false },

I updated locally to 6.2.9 and tested adding that line in some other components (Header, Sidenav), and it broke those stories too!

And then I updated to 6.3.0-beta.11 and it's still broken! Also it seems that useState is still broken too 😞

[mayank99]

I've created an issue about the inline stories: storybookjs/storybook#15143

[mayank99]

Storybook 6.3.0 stable was released! I've started the upgrade in #163 and the result is mostly... acceptable.

There are some quirks with how args are handled, so I had to change some code.

[mayank99]

Just merged the 6.3.4 update. We'll see how it goes. There is a problem with default values (#163 (comment)) but we'll just have to live with that.