Telling Beautiful Stories

This episodes discusses experience with Storybook, a tool for working on components. From the early days using version 4 to the advancements in version 8, emphasizing the importance of integration with design systems and documentation using the tool.
  • storybook
  • testing
  • maintenance


00:49Hey, good to see you.

00:50Thanks for coming.

00:50This is another episode of Wireframe and today I’m going

00:53to be talking about Storybook.

00:56So, I have quite a bit of a history with Storybook.

00:59I believe I was using version 4 to start off with.

01:06We’re at version 8 now actually.

01:08And version 4 was sitting somewhere around

01:112018, I think, or 2019, something around that nature.

01:16And that’s when I first started working with storybook.

01:19I was working with it at the company compass where I was doing design system

01:25work over there as UX engineer role.

01:28And obviously it is a very helpful tool for working on components, right?

01:34It’s just really the number one.

01:37tool out there, especially it being free and so powerful.

01:41Just Ends up kind of being a no brainer to be a part of your stack and at the

01:46time that I was Trying to use storybook.

01:50It was specifically while I was Exploring web components.

01:53This is very early on in the web components kind of Engagement when

01:59it was, you know, just started to hit browsers and be potentially viable as a

02:03really interesting solution to a multi framework problem right at compass.

02:08At the time, we had very legacy code that was sitting in there.

02:13We had angular code.

02:14That was our main kind of code base through most of the application, and

02:18then react started to pick up some speed in a couple of these different

02:23teams, and it made a lot of sense to me that web components we’re trying

02:27to be a, , platform agnostic way of making libraries, and unfortunately,

02:33only up until recently here in 2024 has react finally, decided to kind of

02:39come around and say, hey, we accept web components too, and I admittedly

02:42haven’t worked with that a little bit, but I’m, I’m, I’m hopeful there, but

02:47getting back to the storybook stuff.

02:48So what I was really interested.

02:50With in storybook was a full kind of ecosystem that revolved around storybook.

02:56So the big thing that I was doing was obviously I’m writing stories, right?

03:00So you have your button story, your avatar story all of those different

03:04components that would be in there.

03:06And in those stories, of course, you would have these variations, right?

03:11So you have your primary button, your secondary button.

03:14You have icon buttons that would be in the different variation, of course.

03:17So lots of different combinations of these props that you would be putting in.

03:22And you want to be able to easily see these variations.

03:26And one of the plugins that was available at the time was something called storybook

03:31Knobs Storybook knobs eventually turned into something called Storybook controls.

03:36They might be more familiar with that these days, but

03:38it used to be called knobs.

03:40So the Storybook knobs would be these kind of form control elements

03:44that would be in the side panel or the bottom panel, actually, that

03:48you would then set as, primary, secondary, or tertiary for your button.

03:53And you would configure these in.

03:55Ways that would be appropriate for your components and later on your stories.

04:00And in order to configure these, it took quite a bit of work to

04:06configure a particular knob.

04:07It was not the kind of automated way that it is with controls now.

04:12You have to be very explicit about how you would define a

04:15particular knob for a story.

04:18And that was a little bit challenging so what made a lot more sense to me was

04:25Is to automate it, of course, right?

04:28I’m going to be having lots of components in this library eventually.


04:33So it’s going to be really important to me that I can just, you know, create a

04:38new component and the knobs just kind of.

04:41I don’t want to have to spend time authoring a knob on top of this component.

04:46The knob should be smart enough to know all the different possibilities

04:51that I’d like to add here.

04:53So that’s one of the first things I ended up doing with Storybook, was to kind of,

04:57you know, dynamically generate knobs.

05:00And I had to do a lot of additional work to make that happen.

05:05I still have some of the old code that, that does create those knobs.

05:08In fact, I think the blog post that I talk about storybook, which is

05:12called dynamic storybook 1, I’ll have it in the show notes goes over how

05:16you might create those dynamic knobs.

05:18I believe that’s still in there.

05:20I will also warn that everything in that blog post is very out of date.

05:26So much so that I’m going to talk about another API of storybook in a moment.

05:31Way past gone that I don’t think they even attempted to support anymore which

05:35is actually a shame but yeah, so that’s, some of my initial parts of storybook.

05:39Now, the thing that was really interesting with storybook eventually was actually

05:43not just automatically generating the knobs, but also automatically

05:47generating the stories, right?

05:50So it’s one thing to be able to show all the options that you can choose

05:54to, create a primary button or an icon button, all that other stuff.

05:58But it’s another thing to actually.

06:01fully visualize all the potential.

06:04Combinations of those props, right?

06:06You want to see, what the primary icon button looks like.

06:09And then the secondary icon button.

06:11What about label and icon, all those permutations of all the props,

06:15that’s something that I was wanting to be able to display, right?

06:18We want to see the whole gamut of everything, you know, and there’s a

06:21lot of different reasons for that.

06:23One of the reasons of course, is we want to see if there’s any

06:26combinations that are in there that are.

06:30Not just unlikely not with the guidelines, right?

06:33So going against the guidelines, so we want to see if there’s any combinations

06:37in there that we go I don’t think that’s something that we want to support or

06:42we would have to have heavy guidance about supporting You know and try to

06:45sway people away from doing that kind of combination for you know, whatever

06:49reasons those are But we only can really know that If we really see the full gamut

06:56of what we’re trying to deliver, right?

07:00So one of the other things that I did soon after was the ability to show

07:05up all of these different variations.

07:08And something that was really nice about that, of course, is you can imagine

07:12that’s really helpful for testing, right?

07:15Because now you’re not creating.

07:17All these different, test cases manually and being like, okay,

07:21we’re going to test this version.

07:23We’re going to test this version.

07:24We’re going to test this version.

07:25Now it’s just automatically generated, right?

07:28And the way that that happens, of course, is we go through all of those props and

07:33we permutate through all those props with certain defaults that are sitting in there

07:37that could help the different variations.

07:39So that was really helpful.

07:42Now, the thing that makes that possible was an API called storiesOf, so

07:52storiesOf, I think was what you might call component story format one, but

07:57maybe it’s even predates that I don’t.

08:01Remember all the components story format formats.

08:04I know we’re up to CS F3 at this point But at the beginning as far as I know it

08:10was storiesOf so storiesOf was a method That was exportable from the storybook

08:17package that you would basically return the component that you wanted to display.

08:24And inside of the arguments, I think is where the, all the props who would

08:27send in or attributes would send in and then render that, that story.

08:31So in this particular process, and definitely in this blog post I was

08:35talking about earlier, I describe how I used the storiesOf function

08:40to permutate through all of those props and basically render out.


08:47Full gamut of stories that describe all these different possibilities.

08:53So like I said, I think there’s a real big benefit to that way of manipulating

09:01storybook or manipulating just any way of showing all of your components

09:05off, you know, permutating through those props just to see everything that

09:09you got and every possibility that, that you may need to support, right?

09:13Because the more props you got, the more.

09:16Possible combinations you may have, and some of them might not

09:19be expected or supported, right?

09:23So taking that one step further there was a package that came out around that

09:28time that was called react sketch app and sketch was the kind of design tool

09:35at the time that folks would be using on teams in, you know, startups and large

09:40corporations to convey their designs.

09:42And then they would upload it to things like Invision or later on

09:45abstract to have that versioning.

09:48And The react sketch app tool was able to take react code and then

09:56transform it into sketch symbols.

09:59Okay, very interesting at the time.

10:03Nowadays it’s very common for things to do this.

10:06In fact, there’s a a whole suite of tools by the folks at backlight that

10:10end up taking HTML or similar and converting it into you know, Figma related

10:16designs and, and, and reverse, right?

10:18Taking Figma and making it into code.

10:20That, that’s also something that’s happening as well.

10:22So a lot of those transformations are happening these days, but in years ago

10:26React SketchUp was kind of like the first thing to do that from what I can tell.

10:31Now I wasn’t using React again.

10:33I was using web components, so that really didn’t work for me.

10:35But however, there was a package that came out.

10:37Very soon afterwards that kind of identified that and said,

10:40well, not everybody’s using react at this moment in time.

10:44So there was a kind of a sister package that came out was called HTML sketch app.

10:51And this was perfect for what I was looking for.

10:53Right now.

10:55Think about this, right?

10:57I am generating all these permutations of these components, every single individual

11:03way that a component could be displayed.

11:05Well, that’s kind of what you’re doing when you are trying to maintain

11:09a library in Sketch or Figma, right?

11:12You have to have all these variations or you kind of did before we had variables,

11:17of course, but you have to have all these variations kind of itemized in

11:22your art boards to then convey them as, you know, symbols, the library.

11:27So what if you could just generate all of them automatically?

11:32And in fact, these would be generated very nicely because

11:37these would be representative of exactly what’s in the code, right?

11:42As long as that transformation is accurate.


11:45So now we have potentially totally removed this mundane library kind of maintenance

11:54thing on the sketch / figma side in favor of just generating these coded assets

12:01that already exist and putting them into the library for those designers to use.

12:06Now, my.

12:08Opinion about part of, you know, using high fidelity assets in

12:13designs has changed since then.

12:16However, I still see a whole bunch of value in that for folks that need

12:20to build up high fidelity designs.

12:23So you can imagine, you know, having this sort of system.

12:27Kind of working, it would be very interesting.

12:29And in fact, it’s exactly what we ended up beginning to do at Compass, right?

12:33I was making these web components, and then every time we publish

12:38a new update to these components that update Would then generate a

12:43JSON file using HTML sketch app.

12:46And then the plugin that was in sketch would take that JSON and

12:49it would update the library.

12:51And then at this point, this is around the time where a library updates were a thing

12:56in sketch that, you know, you could push library updates to the rest of the team.

13:00They could accept them and things like that.

13:02We also have an abstract at the time, which was a tool

13:04that was used for versioning.

13:05So that was really nice to keep everything under control.

13:08I guess I’ll say.


13:10And that system was really helpful because it just kind of forced

13:15everything to be in sync, right?

13:17I would work with my designer at the time and the designer would

13:19be like, Hey, we want to make a change to this component, right?

13:23I was, you know.

13:24Doing an exploration in, in my art board.

13:26So we would make that change in code and then it would push everywhere.

13:31Right now, imagine again, you would have met like have a a system of checks

13:35and balances to make sure, okay, it goes dev test prod, of course, you

13:39know, or, you know, people who need to be pinned to a particular version.

13:43So nothing breaks like all that stuff is Also in place, but just the idea

13:50of being able to, again, work with a designer as an engineer and make

13:56that design change to code, which is exactly what the user is going to see,

14:01and then have that readily available throughout the entire organization.


14:06We’re talking dev and design all at once, more or less, right?

14:11That’s really powerful.

14:12So what I’m describing, . I demoed this at design system coalition which was in

14:18New York just before the pandemic in 2019.

14:21I demoed this and Diana Mounter, who’s now the head of design at GitHub

14:25was the one that was running that.

14:27Meetup and I had everything set up and the, and the live demo works.

14:34It was, I think, very Inspiring for folks that were there.

14:38I was told that it was recorded, but I never got the recording and I’m

14:42kind of sad about that because again, I was really proud of that demo.

14:45And I lead up to talking about that demo because.

14:48At that meeting was where I first met Dom and Dom is the co founder of Chromatic

14:55and he was there witnessing me Basically take storybook several levels above what

15:02they were expecting it to do, right?

15:04I’m got all of this integration that I threw into storybook.

15:08Kind of duct tape and rubber band more or less We didn’t have the Ecosystem

15:14I think that we do now and I think he was really excited about what I was

15:18doing in there And for the next couple of I guess months and years after

15:23that There was Dom would reach out to me every once in a while to ask for

15:26some feedback about what was going on.

15:28Less so now because they have lots and lots of feedback.

15:31But I was actually happy to see Dom again recently at a Storybook meetup that was

15:35here in New York only a few months ago.

15:37Where they were launching Storybook 8, of course.

15:39And some, some chromatic testing.

15:42Which really looks excellent.

15:44It’s just that, you know, for the company I’m at right now, the security

15:48challenges that there, there are to send data to some of the servers is difficult,

15:53of course, but I think what they’re offering at a chromatic for this, you

15:57know, visual testing is really powerful.

16:02Of course, from making sure that all of your components are.

16:06Up to snuff from a design perspective, and there’s no kind of weird changes,

16:11although I will say that there’s a challenge to be had in that space when it

16:16comes to multi theme, multi brand, right?

16:18Because at that point, typically, you’ll have folks that are, you know, In

16:25charge of like the layout and structure of a particular component, but then

16:30you’ll have different folks that are in charge of the colors and typography

16:33and all the other presentational parts.

16:35And together they make that final expression of a particular component.


16:41But the decisions that are happening on that side of color and

16:45typography , they may not be in the same kind of process of where these

16:51components are being visually tested.


16:54So you could have a scenario where a person changes the color over here and

16:59then breaks all of the tests over there.


17:03And I kind of wonder if there’s some additional work

17:07or thought that could be taken.

17:08Put into this where, when we are doing visual regression testing, that we are

17:16actually not really testing the colors and typography so much at that level,

17:21but really talking more about the layout and structure and other things

17:25that are not really themable, right?

17:28The, the kind of, again, I’ll, I’ll I’ll bring it up again, the wireframe

17:32that we should be making sure that nothing’s really changed, right?

17:34That structure, and then have a separate test that has expectations

17:40about what colors and typography should be being portrayed for.

17:45This brand, this theme, et cetera, et cetera.

17:47And when people make changes on that, they should know what

17:49kind of stuff is being changed.


17:51And probably something in the middle that says, okay, here are

17:53the components that will change.

17:55You know, what will be affected by this, this change and have a

17:58separate test in there as well.

18:00So there’s a whole bunch of additional like layers of testing that I

18:03think needs to happen in there.

18:04And I’m not sure if chromatic handles that or really any.

18:09Visual testing software would handle that without a whole bunch of additional

18:13work to be done, but who knows?

18:16But anyway, going back to storybook again one of the things that I always

18:21recommend to folks that are thinking about building a design system and Is, and

18:27this happens all the time is people just actually this past couple of days, I had

18:31someone that was in the design system, slack asking about what would be the best

18:34way to start building a design system.

18:36And I’m always very apprehensive about answering that question

18:39because really you aren’t like.

18:44Going gun ho about building a design system immediately and having all the

18:48resources and like looking at these ones that have been in the world for a long

18:53time and going, Oh, we need to build that.

18:56It’s not really the way of going about this.

18:58The way of really going about this is kind of starting small, right?

19:02And understanding what you need first before trying to build everything out.

19:07And that goes hand in hand with what I recommend, which is if you are on the

19:11engineering side and you’re trying to.

19:14Begin to support a design system idea, you know, component library idea.

19:20You start basically with a monorepo with the expectation that you’re going to

19:24be making packages of components that would be distributed across the platform.

19:28So that’s just like table stakes.

19:30And then the additional thing that I always recommend.

19:34In that repo is storybook, right?

19:38And the big thing that storybook gets you, of course, is that component isolation.

19:41That’s really key for a developer.

19:44That’s trying to make sure that a component is behaving properly and has all

19:48the right options and things like that.

19:50And, and all the plugins that storybook provides really give you a lot of Ways

19:55of presenting this component to the rest of your team in a helpful way,

19:59especially if you build that storybook.

20:01So it’s shareable, it could be part of your CICD.

20:03So you have versioning that occurs and you could share that, that link with folks.

20:08So all of that’s really helpful in there, but the additional thing

20:12that storybook was actually really driving in, I’d say about storybook

20:176 or so was this whole documentation.

20:21Direction so much so that they introduced the MDX format as stories

20:25in there, and they were really driving the ability to create

20:30documentation through stories, right?

20:33So you could write a story, and then it would kind of sort of

20:37automate the document creation process a little API table.

20:42It would show you the stories.

20:44It’s like a one pager, and then you could write.

20:47Additional documentation in between.

20:48And that could all like be very helpful when you are trying to provide guidance

20:55to when you would be making these components, because prior to this, of

20:58course, you know, doc sites would exist and they would always be very far removed

21:04from the components themselves, right?

21:05You can imagine making changes to your source code and then

21:09publishing that document.

21:10Out and then having to go to a separate repo potentially and

21:14update documentation for it, right?

21:15It’s context switching and every time you do that context switching you’re

21:18going to lose information, right?

21:20You want to stay in the context So what storybook was helping out with

21:23is if you’re writing documentation right there in the same frame of

21:28you making the source code that kept everything nice and tight and together

21:33and cohesive so that it’s much harder to forget what you need to document.

21:37I mean, even if your documentation was in the same repo, it’s entirely possible that

21:43you’re switching between the documentation site and the source code itself.

21:48And there could be in totally different places in that repo.


21:51But having it in the same place, I think is really key for making sure

21:55that the documentation stays current.


21:58And Storybook was a really great outlet of doing that, especially

22:01through that MDX format.

22:03Now they have since kind of walked back the MDX format a little bit.

22:07I know that it’s still available in the system, but they really

22:11been pushing this component story format 3 way of creating stories.

22:16And if you’re not familiar with that, this is basically a.

22:20Story file like an index file and at the top of it You would have this main

22:25export that would kind of be your metadata about that story And then all the name

22:29exports that you would have below would be the individual stories for that

22:33component that we you would export And that format is a little bit Weird in my

22:40opinion and I say that because what you’re kind of doing in that format or you’re

22:45expected to do I should say is really just kind of like define the Component

22:50props that you expect to provide to the component And metadata about that.

22:55And you’re not really meant to like render a component.

23:01It kind of is supposed to already know how to render the component

23:04based on like the metadata on the top.

23:06You do have a render function that is a option inside of these things

23:10that you can then of course, render a component exactly how you want.

23:13But that’s, I think not what they’re expecting from what I see in the docs

23:18all the time about, you know, how you would actually render a button.

23:20Being a very simple element, you would just provide the args for

23:24that button and for that story.

23:27And then it would just render the button as is expected for

23:30that particular framework.

23:32And that makes it a little bit hard to grok when you’re looking at the

23:39source code for a story, right?

23:41Because that story is supposed to be a representation of like a

23:44snapshot of this component in a particular state or particular.

23:49Set of options that would be for it.

23:51And when you look at that story file and you don’t see anything being

23:57rendered, you kind of just see named exports of small objects of props.

24:04You’re kind of like separated from the final output of that.

24:09Now, granted the expectation here really is that people aren’t really

24:12supposed to be looking at the story source as much as they’re

24:15supposed to be looking at the story.

24:16Presentation, the rendering, the final output, right?

24:19And in that final output, there are code snippets that show

24:23what is being rendered here.

24:25They’re not always accurate.

24:26Of course.

24:27I mean, especially if you have things like refs in react, you have outputs

24:30that look like circular refs, the functions that are provided in those

24:33things don’t show you the entire function that’s being sent up in there.

24:38Sometimes, so there’s a lot of stuff that’s missing in that.

24:42And I think again, something that would have been.

24:46More helpful, of course, is actually showing the rendering that is happening

24:52inside of the story This is something that storybook used to kind of have back in

24:56the day what story source was a plug in that they had or add on, excuse me, and

25:00That was also a little confusing because there was a whole bunch of storybook

25:04specific stuff that would be rendered to the page as well That would be confusing.

25:07So really we’re looking for like this medium of Not showing the storybook, like,

25:15parts of the source as the presentation, but showing the entire presentation

25:21that’s there to show, like, what a rendering scenario would be for that.

25:25But as long as it, of course, renders something fairly close

25:29in, you know, The UI that’s good.

25:31The other thing that I think people might not know is that

25:35the component story format 3.

25:38Nowadays at least is statically analyzed.

25:41So it’s not exactly like what you write is what you get Because there is

25:47certain processes that are behind the scenes that are manipulating that file

25:52to then Turn it into something else that then is rendered to storybook.

25:57And the only reason I kind of know that is because again, as a person who’s been

26:01hacking storybook for a long time I was trying to do something in particular

26:05and I realized that I couldn’t because there’s a whole bunch of additional.

26:09Magic that’s happening behind the scenes when you write that story file that’s

26:13kind of manipulating some things in ways that I was kind of not expecting.

26:17So something to kind of pay attention to in there as well is like, I kind of

26:21wish that it was just like, what you write is what you get a little bit.

26:24But I know Storybook is a huge ecosystem of stuff and they’ve been doing a lot

26:28of work to, you know, make it more accessible for different frameworks.

26:33I know it supports things like Qwik now and there’s A lot of great

26:37work that’s been happening there, especially with the community.

26:39But I will always recommend storybook, you know putting these I guess opinions

26:45aside because I do truly think that storybook is like the first thing that

26:50you add to your component library in order to Get a handle on the beginnings

26:55of creating a, a component library with guidance and design system.


27:00It’s so much so in fact that actually at the place I’m working at right now,

27:04we had a separate docs site that was written in Docusaurus, which is a API

27:10documentation, I think it was pushed out by the folks at Facebook or Meta.

27:15And we’ve realized how difficult it is to keep the, the separate documentation

27:20site in sync with our releases.

27:23So now we’re actually going to go and roll all that back and plan

27:28on making our docs in storybook.

27:31So we’ve done a whole bunch of work to create a root storybook kind of

27:35ecosystem, and what that means is we have.

27:40A storybook that could be ran at the root of the monorepo.

27:43And what that provides us is all of the components.

27:46So basically for your documentation site, right?

27:49You want all those components available.

27:50So we run that at the root.

27:53However, when you’re working on a particular component, you don’t need

27:57all of the storybooks open, right?

27:59Most likely, unless you’re having some, you know, combination happening there.

28:03Most likely you’re working on that one.

28:06Component, right?

28:08So we also have the ability to more or less use the, the same configuration

28:16to only load one storybook.

28:19And of course that ends up being much faster.

28:21It’s also really scopes you down and focuses you on that

28:25one component and its stories.

28:26So you’re not overwhelmed by all the additional components that

28:29are in the repo at that time.

28:32So we have a nice kind of set up and I can kind of explain that set

28:36up real, real quick here is that at the root of the repo, there’s a

28:40main JS file that has basically the configuration in it and in the leaf

28:46packages, which is your individual component packages, we dive down in

28:50the config file, basically your script.

28:52We dive all the way down to that main JS and look at that main JS.

28:56Then in the thing that actually looks for stories, we check in.

29:03If we’re at a leaf node or if we’re at the root and basically change where

29:09we’re looking for stories based on if we’re at leaf or at the root, right?

29:13So we have like a global variable that we set that says, okay,

29:16please load all the button stories.


29:19And if that’s set, then it’ll only load the button stories.


29:24Meanwhile, if there’s no global variable set, then we say, Oh,

29:28well, if there’s nothing set, we’re going to load everything.

29:31So that’s the way that it kind of figures out between root and leaf packages, right?

29:35I’m just in the beginning stages of doing the IA for the regular docs, right?

29:40So the foundations, color, typography, all that other stuff, just trying

29:44to figure out how that sets itself up in the grand scheme of things.

29:48I know it’s going to only be in the root.

29:50It’s not going to be in the leaf packages, of course, but how

29:52does that look when it’s finally going to be deployed as a site?

29:57So I’m very excited about moving that over to Storybook because again, that

30:01maintenance part is super important.

30:04With that.

30:04So I’m hoping to leverage some MDX in there.

30:07I’m hoping to do additional niceties, I guess, just from a maintenance standpoint

30:13have, I guess, custom components that would show, you know, how to install,

30:17how to test, how to do all these kinds of things that again, would be

30:20happening in a lot of these components.

30:21So something that I, again.

30:23Highly recommend other folks look into, especially when you were either first

30:27starting out, or if you are having trouble keeping these two things in

30:30sync, right, especially for small teams that have low resources that really are

30:36struggling to keep up with, you know, a doc site and the library itself, right?

30:42Just put them together, use a storybook and move on.

30:46I think is a really mature way of going about it.

30:49And I know it’s not the sexiest.

30:52You know, the way of going about it.

30:54Certainly the, you know, you see these design system sites like Alassian

30:57and Polaris and Twilio’s Paste design system, all very beautiful

31:02documentation sites, but remember if the documentation is out of date

31:08or, you know, doesn’t, doesn’t work.

31:10Suit the needs, then you really kind of have to like revisit that.

31:14And that’s very easy to do, unfortunately, is to, is to get out

31:18of date and otherwise be a little bit less usable when you’re in a support

31:23system, like design systems is right.

31:26You’re always trying to, you know, improve things.

31:28There’s always something that needs to be done.

31:30And if you can take documentation off the table and make it a

31:34little bit more automated, I think there’s a lot of value in that.

31:38And I think storybooks a real good way of doing it.

31:40Also hashtag not sponsored by storybook at all.

31:43Just want to end with that saying that I just really think that it’s a really great

31:49way to start with any particular system.

31:51There are some alternatives out there that I know of.

31:54I think bit.

31:55dev is another alternative.

31:56However, that’s more of a full on ecosystem.

31:59Of making components and building components, et cetera, et cetera.

32:03There’s another one called backstage.


32:05I think that’s the folks from Spotify or maybe Shopify.

32:10I think it’s Spotify.

32:11I don’t know.

32:12I get them confused sometimes, but they have another kind of system that allows

32:16for this kind of Ability to put components on top and then distribute them and that’s

32:21so much maybe documentation wise, but.

32:24You could see for other alternatives that are out there, but it’s hard to

32:27not use storybook because it’s free and easy to drop into your existing

32:33products and organizations, you know?

32:36So, but anyway, let me know what you think.

32:38Let me know when you started out with Storybook and what version that was and

32:41all the headaches that you may have had to upgrade it because I know I had my own.

32:45All the breaking changes have been difficult, especially since

32:48level you know, the version 4.

32:49Lots of changes since 4.

32:51But I know that they’ve been doing a really good job,

32:53especially between 7 and 8.

32:56To introduce a lot less breaking changes and to still give

32:59you a lot of good features.

33:00In fact, I think eight is the one where they took out the peer dependency

33:03for react, which is really great because not everyone’s using react.

33:06So but yeah, let me know what you think about that.

33:09And I guess otherwise I’ll see you in the next one later.


  1. https://blog.damato.design/posts/dynamic-storybook/