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:33Right?
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:46A.
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:45Right.
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:09Yeah.
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:06Right?
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:40Right.
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:54Right.
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:02Right.
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:51Right.
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:50Right.
21:51But having it in the same place, I think is really key for making sure
21:55that the documentation stays current.
21:57Right.
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.
26:59Right.
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:19Right.
29:19And if that’s set, then it’ll only load the button stories.
29:23Right.
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:04io.
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.
