00:49 Hey, good to see you.
00:50 Thanks for coming.
00:50 This is another episode of Wireframe and today I’m going
00:53 to be talking about Storybook.
00:56 So, I have quite a bit of a history with Storybook.
00:59 I believe I was using version 4 to start off with.
01:06 We’re at version 8 now actually.
01:08 And version 4 was sitting somewhere around
01:11 2018, I think, or 2019, something around that nature.
01:16 And that’s when I first started working with storybook.
01:19 I was working with it at the company compass where I was doing design system
01:25 work over there as UX engineer role.
01:28 And obviously it is a very helpful tool for working on components, right?
01:34 It’s just really the number one.
01:37 tool out there, especially it being free and so powerful.
01:41 Just Ends up kind of being a no brainer to be a part of your stack and at the
01:46 time that I was Trying to use storybook.
01:50 It was specifically while I was Exploring web components.
01:53 This is very early on in the web components kind of Engagement when
01:59 it was, you know, just started to hit browsers and be potentially viable as a
02:03 really interesting solution to a multi framework problem right at compass.
02:08 At the time, we had very legacy code that was sitting in there.
02:13 We had angular code.
02:14 That was our main kind of code base through most of the application, and
02:18 then react started to pick up some speed in a couple of these different
02:23 teams, and it made a lot of sense to me that web components we’re trying
02:27 to be a, , platform agnostic way of making libraries, and unfortunately,
02:33 only up until recently here in 2024 has react finally, decided to kind of
02:39 come around and say, hey, we accept web components too, and I admittedly
02:42 haven’t worked with that a little bit, but I’m, I’m, I’m hopeful there, but
02:47 getting back to the storybook stuff.
02:48 So what I was really interested.
02:50 With in storybook was a full kind of ecosystem that revolved around storybook.
02:56 So the big thing that I was doing was obviously I’m writing stories, right?
03:00 So you have your button story, your avatar story all of those different
03:04 components that would be in there.
03:06 And in those stories, of course, you would have these variations, right?
03:11 So you have your primary button, your secondary button.
03:14 You have icon buttons that would be in the different variation, of course.
03:17 So lots of different combinations of these props that you would be putting in.
03:22 And you want to be able to easily see these variations.
03:26 And one of the plugins that was available at the time was something called storybook
03:31 Knobs Storybook knobs eventually turned into something called Storybook controls.
03:36 They might be more familiar with that these days, but
03:38 it used to be called knobs.
03:40 So the Storybook knobs would be these kind of form control elements
03:44 that would be in the side panel or the bottom panel, actually, that
03:48 you would then set as, primary, secondary, or tertiary for your button.
03:53 And you would configure these in.
03:55 Ways that would be appropriate for your components and later on your stories.
04:00 And in order to configure these, it took quite a bit of work to
04:06 configure a particular knob.
04:07 It was not the kind of automated way that it is with controls now.
04:12 You have to be very explicit about how you would define a
04:15 particular knob for a story.
04:18 And that was a little bit challenging so what made a lot more sense to me was
04:25 Is to automate it, of course, right?
04:28 I’m going to be having lots of components in this library eventually.
04:33 Right?
04:33 So it’s going to be really important to me that I can just, you know, create a
04:38 new component and the knobs just kind of.
04:41 I don’t want to have to spend time authoring a knob on top of this component.
04:46 The knob should be smart enough to know all the different possibilities
04:51 that I’d like to add here.
04:53 So that’s one of the first things I ended up doing with Storybook, was to kind of,
04:57 you know, dynamically generate knobs.
05:00 And I had to do a lot of additional work to make that happen.
05:05 I still have some of the old code that, that does create those knobs.
05:08 In fact, I think the blog post that I talk about storybook, which is
05:12 called dynamic storybook 1, I’ll have it in the show notes goes over how
05:16 you might create those dynamic knobs.
05:18 I believe that’s still in there.
05:20 I will also warn that everything in that blog post is very out of date.
05:26 So much so that I’m going to talk about another API of storybook in a moment.
05:31 Way past gone that I don’t think they even attempted to support anymore which
05:35 is actually a shame but yeah, so that’s, some of my initial parts of storybook.
05:39 Now, the thing that was really interesting with storybook eventually was actually
05:43 not just automatically generating the knobs, but also automatically
05:47 generating the stories, right?
05:50 So it’s one thing to be able to show all the options that you can choose
05:54 to, create a primary button or an icon button, all that other stuff.
05:58 But it’s another thing to actually.
06:01 fully visualize all the potential.
06:04 Combinations of those props, right?
06:06 You want to see, what the primary icon button looks like.
06:09 And then the secondary icon button.
06:11 What about label and icon, all those permutations of all the props,
06:15 that’s something that I was wanting to be able to display, right?
06:18 We want to see the whole gamut of everything, you know, and there’s a
06:21 lot of different reasons for that.
06:23 One of the reasons of course, is we want to see if there’s any
06:26 combinations that are in there that are.
06:30 Not just unlikely not with the guidelines, right?
06:33 So going against the guidelines, so we want to see if there’s any combinations
06:37 in there that we go I don’t think that’s something that we want to support or
06:42 we would have to have heavy guidance about supporting You know and try to
06:45 sway people away from doing that kind of combination for you know, whatever
06:49 reasons those are But we only can really know that If we really see the full gamut
06:56 of what we’re trying to deliver, right?
07:00 So one of the other things that I did soon after was the ability to show
07:05 up all of these different variations.
07:08 And something that was really nice about that, of course, is you can imagine
07:12 that’s really helpful for testing, right?
07:15 Because now you’re not creating.
07:17 All these different, test cases manually and being like, okay,
07:21 we’re going to test this version.
07:23 We’re going to test this version.
07:24 We’re going to test this version.
07:25 Now it’s just automatically generated, right?
07:28 And the way that that happens, of course, is we go through all of those props and
07:33 we permutate through all those props with certain defaults that are sitting in there
07:37 that could help the different variations.
07:39 So that was really helpful.
07:42 Now, the thing that makes that possible was an API called storiesOf, so
07:52 storiesOf, I think was what you might call component story format one, but
07:57 maybe it’s even predates that I don’t.
08:01 Remember all the components story format formats.
08:04 I know we’re up to CS F3 at this point But at the beginning as far as I know it
08:10 was storiesOf so storiesOf was a method That was exportable from the storybook
08:17 package that you would basically return the component that you wanted to display.
08:24 And inside of the arguments, I think is where the, all the props who would
08:27 send in or attributes would send in and then render that, that story.
08:31 So in this particular process, and definitely in this blog post I was
08:35 talking about earlier, I describe how I used the storiesOf function
08:40 to permutate through all of those props and basically render out.
08:46 A.
08:47 Full gamut of stories that describe all these different possibilities.
08:53 So like I said, I think there’s a real big benefit to that way of manipulating
09:01 storybook or manipulating just any way of showing all of your components
09:05 off, you know, permutating through those props just to see everything that
09:09 you got and every possibility that, that you may need to support, right?
09:13 Because the more props you got, the more.
09:16 Possible combinations you may have, and some of them might not
09:19 be expected or supported, right?
09:23 So taking that one step further there was a package that came out around that
09:28 time that was called react sketch app and sketch was the kind of design tool
09:35 at the time that folks would be using on teams in, you know, startups and large
09:40 corporations to convey their designs.
09:42 And then they would upload it to things like Invision or later on
09:45 abstract to have that versioning.
09:48 And The react sketch app tool was able to take react code and then
09:56 transform it into sketch symbols.
09:59 Okay, very interesting at the time.
10:03 Nowadays it’s very common for things to do this.
10:06 In fact, there’s a a whole suite of tools by the folks at backlight that
10:10 end up taking HTML or similar and converting it into you know, Figma related
10:16 designs and, and, and reverse, right?
10:18 Taking Figma and making it into code.
10:20 That, that’s also something that’s happening as well.
10:22 So a lot of those transformations are happening these days, but in years ago
10:26 React SketchUp was kind of like the first thing to do that from what I can tell.
10:31 Now I wasn’t using React again.
10:33 I was using web components, so that really didn’t work for me.
10:35 But however, there was a package that came out.
10:37 Very soon afterwards that kind of identified that and said,
10:40 well, not everybody’s using react at this moment in time.
10:44 So there was a kind of a sister package that came out was called HTML sketch app.
10:51 And this was perfect for what I was looking for.
10:53 Right now.
10:55 Think about this, right?
10:57 I am generating all these permutations of these components, every single individual
11:03 way that a component could be displayed.
11:05 Well, that’s kind of what you’re doing when you are trying to maintain
11:09 a library in Sketch or Figma, right?
11:12 You have to have all these variations or you kind of did before we had variables,
11:17 of course, but you have to have all these variations kind of itemized in
11:22 your art boards to then convey them as, you know, symbols, the library.
11:27 So what if you could just generate all of them automatically?
11:32 And in fact, these would be generated very nicely because
11:37 these would be representative of exactly what’s in the code, right?
11:42 As long as that transformation is accurate.
11:45 Right.
11:45 So now we have potentially totally removed this mundane library kind of maintenance
11:54 thing on the sketch / figma side in favor of just generating these coded assets
12:01 that already exist and putting them into the library for those designers to use.
12:06 Now, my.
12:08 Opinion about part of, you know, using high fidelity assets in
12:13 designs has changed since then.
12:16 However, I still see a whole bunch of value in that for folks that need
12:20 to build up high fidelity designs.
12:23 So you can imagine, you know, having this sort of system.
12:27 Kind of working, it would be very interesting.
12:29 And in fact, it’s exactly what we ended up beginning to do at Compass, right?
12:33 I was making these web components, and then every time we publish
12:38 a new update to these components that update Would then generate a
12:43 JSON file using HTML sketch app.
12:46 And then the plugin that was in sketch would take that JSON and
12:49 it would update the library.
12:51 And then at this point, this is around the time where a library updates were a thing
12:56 in sketch that, you know, you could push library updates to the rest of the team.
13:00 They could accept them and things like that.
13:02 We also have an abstract at the time, which was a tool
13:04 that was used for versioning.
13:05 So that was really nice to keep everything under control.
13:08 I guess I’ll say.
13:09 Yeah.
13:10 And that system was really helpful because it just kind of forced
13:15 everything to be in sync, right?
13:17 I would work with my designer at the time and the designer would
13:19 be like, Hey, we want to make a change to this component, right?
13:23 I was, you know.
13:24 Doing an exploration in, in my art board.
13:26 So we would make that change in code and then it would push everywhere.
13:31 Right now, imagine again, you would have met like have a a system of checks
13:35 and balances to make sure, okay, it goes dev test prod, of course, you
13:39 know, or, you know, people who need to be pinned to a particular version.
13:43 So nothing breaks like all that stuff is Also in place, but just the idea
13:50 of being able to, again, work with a designer as an engineer and make
13:56 that design change to code, which is exactly what the user is going to see,
14:01 and then have that readily available throughout the entire organization.
14:06 Right?
14:06 We’re talking dev and design all at once, more or less, right?
14:11 That’s really powerful.
14:12 So what I’m describing, . I demoed this at design system coalition which was in
14:18 New York just before the pandemic in 2019.
14:21 I demoed this and Diana Mounter, who’s now the head of design at GitHub
14:25 was the one that was running that.
14:27 Meetup and I had everything set up and the, and the live demo works.
14:34 It was, I think, very Inspiring for folks that were there.
14:38 I was told that it was recorded, but I never got the recording and I’m
14:42 kind of sad about that because again, I was really proud of that demo.
14:45 And I lead up to talking about that demo because.
14:48 At that meeting was where I first met Dom and Dom is the co founder of Chromatic
14:55 and he was there witnessing me Basically take storybook several levels above what
15:02 they were expecting it to do, right?
15:04 I’m got all of this integration that I threw into storybook.
15:08 Kind of duct tape and rubber band more or less We didn’t have the Ecosystem
15:14 I think that we do now and I think he was really excited about what I was
15:18 doing in there And for the next couple of I guess months and years after
15:23 that There was Dom would reach out to me every once in a while to ask for
15:26 some feedback about what was going on.
15:28 Less so now because they have lots and lots of feedback.
15:31 But I was actually happy to see Dom again recently at a Storybook meetup that was
15:35 here in New York only a few months ago.
15:37 Where they were launching Storybook 8, of course.
15:39 And some, some chromatic testing.
15:42 Which really looks excellent.
15:44 It’s just that, you know, for the company I’m at right now, the security
15:48 challenges that there, there are to send data to some of the servers is difficult,
15:53 of course, but I think what they’re offering at a chromatic for this, you
15:57 know, visual testing is really powerful.
16:02 Of course, from making sure that all of your components are.
16:06 Up to snuff from a design perspective, and there’s no kind of weird changes,
16:11 although I will say that there’s a challenge to be had in that space when it
16:16 comes to multi theme, multi brand, right?
16:18 Because at that point, typically, you’ll have folks that are, you know, In
16:25 charge of like the layout and structure of a particular component, but then
16:30 you’ll have different folks that are in charge of the colors and typography
16:33 and all the other presentational parts.
16:35 And together they make that final expression of a particular component.
16:40 Right.
16:41 But the decisions that are happening on that side of color and
16:45 typography , they may not be in the same kind of process of where these
16:51 components are being visually tested.
16:54 Right.
16:54 So you could have a scenario where a person changes the color over here and
16:59 then breaks all of the tests over there.
17:02 Right.
17:03 And I kind of wonder if there’s some additional work
17:07 or thought that could be taken.
17:08 Put into this where, when we are doing visual regression testing, that we are
17:16 actually not really testing the colors and typography so much at that level,
17:21 but really talking more about the layout and structure and other things
17:25 that are not really themable, right?
17:28 The, the kind of, again, I’ll, I’ll I’ll bring it up again, the wireframe
17:32 that we should be making sure that nothing’s really changed, right?
17:34 That structure, and then have a separate test that has expectations
17:40 about what colors and typography should be being portrayed for.
17:45 This brand, this theme, et cetera, et cetera.
17:47 And when people make changes on that, they should know what
17:49 kind of stuff is being changed.
17:51 Right.
17:51 And probably something in the middle that says, okay, here are
17:53 the components that will change.
17:55 You know, what will be affected by this, this change and have a
17:58 separate test in there as well.
18:00 So there’s a whole bunch of additional like layers of testing that I
18:03 think needs to happen in there.
18:04 And I’m not sure if chromatic handles that or really any.
18:09 Visual testing software would handle that without a whole bunch of additional
18:13 work to be done, but who knows?
18:16 But anyway, going back to storybook again one of the things that I always
18:21 recommend to folks that are thinking about building a design system and Is, and
18:27 this happens all the time is people just actually this past couple of days, I had
18:31 someone that was in the design system, slack asking about what would be the best
18:34 way to start building a design system.
18:36 And I’m always very apprehensive about answering that question
18:39 because really you aren’t like.
18:44 Going gun ho about building a design system immediately and having all the
18:48 resources and like looking at these ones that have been in the world for a long
18:53 time and going, Oh, we need to build that.
18:56 It’s not really the way of going about this.
18:58 The way of really going about this is kind of starting small, right?
19:02 And understanding what you need first before trying to build everything out.
19:07 And that goes hand in hand with what I recommend, which is if you are on the
19:11 engineering side and you’re trying to.
19:14 Begin to support a design system idea, you know, component library idea.
19:20 You start basically with a monorepo with the expectation that you’re going to
19:24 be making packages of components that would be distributed across the platform.
19:28 So that’s just like table stakes.
19:30 And then the additional thing that I always recommend.
19:34 In that repo is storybook, right?
19:38 And the big thing that storybook gets you, of course, is that component isolation.
19:41 That’s really key for a developer.
19:44 That’s trying to make sure that a component is behaving properly and has all
19:48 the right options and things like that.
19:50 And, and all the plugins that storybook provides really give you a lot of Ways
19:55 of presenting this component to the rest of your team in a helpful way,
19:59 especially if you build that storybook.
20:01 So it’s shareable, it could be part of your CICD.
20:03 So you have versioning that occurs and you could share that, that link with folks.
20:08 So all of that’s really helpful in there, but the additional thing
20:12 that storybook was actually really driving in, I’d say about storybook
20:17 6 or so was this whole documentation.
20:21 Direction so much so that they introduced the MDX format as stories
20:25 in there, and they were really driving the ability to create
20:30 documentation through stories, right?
20:33 So you could write a story, and then it would kind of sort of
20:37 automate the document creation process a little API table.
20:42 It would show you the stories.
20:44 It’s like a one pager, and then you could write.
20:47 Additional documentation in between.
20:48 And that could all like be very helpful when you are trying to provide guidance
20:55 to when you would be making these components, because prior to this, of
20:58 course, you know, doc sites would exist and they would always be very far removed
21:04 from the components themselves, right?
21:05 You can imagine making changes to your source code and then
21:09 publishing that document.
21:10 Out and then having to go to a separate repo potentially and
21:14 update documentation for it, right?
21:15 It’s context switching and every time you do that context switching you’re
21:18 going to lose information, right?
21:20 You want to stay in the context So what storybook was helping out with
21:23 is if you’re writing documentation right there in the same frame of
21:28 you making the source code that kept everything nice and tight and together
21:33 and cohesive so that it’s much harder to forget what you need to document.
21:37 I mean, even if your documentation was in the same repo, it’s entirely possible that
21:43 you’re switching between the documentation site and the source code itself.
21:48 And there could be in totally different places in that repo.
21:50 Right.
21:51 But having it in the same place, I think is really key for making sure
21:55 that the documentation stays current.
21:57 Right.
21:58 And Storybook was a really great outlet of doing that, especially
22:01 through that MDX format.
22:03 Now they have since kind of walked back the MDX format a little bit.
22:07 I know that it’s still available in the system, but they really
22:11 been pushing this component story format 3 way of creating stories.
22:16 And if you’re not familiar with that, this is basically a.
22:20 Story file like an index file and at the top of it You would have this main
22:25 export that would kind of be your metadata about that story And then all the name
22:29 exports that you would have below would be the individual stories for that
22:33 component that we you would export And that format is a little bit Weird in my
22:40 opinion and I say that because what you’re kind of doing in that format or you’re
22:45 expected to do I should say is really just kind of like define the Component
22:50 props that you expect to provide to the component And metadata about that.
22:55 And you’re not really meant to like render a component.
23:01 It kind of is supposed to already know how to render the component
23:04 based on like the metadata on the top.
23:06 You do have a render function that is a option inside of these things
23:10 that you can then of course, render a component exactly how you want.
23:13 But that’s, I think not what they’re expecting from what I see in the docs
23:18 all the time about, you know, how you would actually render a button.
23:20 Being a very simple element, you would just provide the args for
23:24 that button and for that story.
23:27 And then it would just render the button as is expected for
23:30 that particular framework.
23:32 And that makes it a little bit hard to grok when you’re looking at the
23:39 source code for a story, right?
23:41 Because that story is supposed to be a representation of like a
23:44 snapshot of this component in a particular state or particular.
23:49 Set of options that would be for it.
23:51 And when you look at that story file and you don’t see anything being
23:57 rendered, you kind of just see named exports of small objects of props.
24:04 You’re kind of like separated from the final output of that.
24:09 Now, granted the expectation here really is that people aren’t really
24:12 supposed to be looking at the story source as much as they’re
24:15 supposed to be looking at the story.
24:16 Presentation, the rendering, the final output, right?
24:19 And in that final output, there are code snippets that show
24:23 what is being rendered here.
24:25 They’re not always accurate.
24:26 Of course.
24:27 I mean, especially if you have things like refs in react, you have outputs
24:30 that look like circular refs, the functions that are provided in those
24:33 things don’t show you the entire function that’s being sent up in there.
24:38 Sometimes, so there’s a lot of stuff that’s missing in that.
24:42 And I think again, something that would have been.
24:46 More helpful, of course, is actually showing the rendering that is happening
24:52 inside of the story This is something that storybook used to kind of have back in
24:56 the day what story source was a plug in that they had or add on, excuse me, and
25:00 That was also a little confusing because there was a whole bunch of storybook
25:04 specific stuff that would be rendered to the page as well That would be confusing.
25:07 So really we’re looking for like this medium of Not showing the storybook, like,
25:15 parts of the source as the presentation, but showing the entire presentation
25:21 that’s there to show, like, what a rendering scenario would be for that.
25:25 But as long as it, of course, renders something fairly close
25:29 in, you know, The UI that’s good.
25:31 The other thing that I think people might not know is that
25:35 the component story format 3.
25:38 Nowadays at least is statically analyzed.
25:41 So it’s not exactly like what you write is what you get Because there is
25:47 certain processes that are behind the scenes that are manipulating that file
25:52 to then Turn it into something else that then is rendered to storybook.
25:57 And the only reason I kind of know that is because again, as a person who’s been
26:01 hacking storybook for a long time I was trying to do something in particular
26:05 and I realized that I couldn’t because there’s a whole bunch of additional.
26:09 Magic that’s happening behind the scenes when you write that story file that’s
26:13 kind of manipulating some things in ways that I was kind of not expecting.
26:17 So something to kind of pay attention to in there as well is like, I kind of
26:21 wish that it was just like, what you write is what you get a little bit.
26:24 But I know Storybook is a huge ecosystem of stuff and they’ve been doing a lot
26:28 of work to, you know, make it more accessible for different frameworks.
26:33 I know it supports things like Qwik now and there’s A lot of great
26:37 work that’s been happening there, especially with the community.
26:39 But I will always recommend storybook, you know putting these I guess opinions
26:45 aside because I do truly think that storybook is like the first thing that
26:50 you add to your component library in order to Get a handle on the beginnings
26:55 of creating a, a component library with guidance and design system.
26:59 Right.
27:00 It’s so much so in fact that actually at the place I’m working at right now,
27:04 we had a separate docs site that was written in Docusaurus, which is a API
27:10 documentation, I think it was pushed out by the folks at Facebook or Meta.
27:15 And we’ve realized how difficult it is to keep the, the separate documentation
27:20 site in sync with our releases.
27:23 So now we’re actually going to go and roll all that back and plan
27:28 on making our docs in storybook.
27:31 So we’ve done a whole bunch of work to create a root storybook kind of
27:35 ecosystem, and what that means is we have.
27:40 A storybook that could be ran at the root of the monorepo.
27:43 And what that provides us is all of the components.
27:46 So basically for your documentation site, right?
27:49 You want all those components available.
27:50 So we run that at the root.
27:53 However, when you’re working on a particular component, you don’t need
27:57 all of the storybooks open, right?
27:59 Most likely, unless you’re having some, you know, combination happening there.
28:03 Most likely you’re working on that one.
28:06 Component, right?
28:08 So we also have the ability to more or less use the, the same configuration
28:16 to only load one storybook.
28:19 And of course that ends up being much faster.
28:21 It’s also really scopes you down and focuses you on that
28:25 one component and its stories.
28:26 So you’re not overwhelmed by all the additional components that
28:29 are in the repo at that time.
28:32 So we have a nice kind of set up and I can kind of explain that set
28:36 up real, real quick here is that at the root of the repo, there’s a
28:40 main JS file that has basically the configuration in it and in the leaf
28:46 packages, which is your individual component packages, we dive down in
28:50 the config file, basically your script.
28:52 We dive all the way down to that main JS and look at that main JS.
28:56 Then in the thing that actually looks for stories, we check in.
29:03 If we’re at a leaf node or if we’re at the root and basically change where
29:09 we’re looking for stories based on if we’re at leaf or at the root, right?
29:13 So we have like a global variable that we set that says, okay,
29:16 please load all the button stories.
29:19 Right.
29:19 And if that’s set, then it’ll only load the button stories.
29:23 Right.
29:24 Meanwhile, if there’s no global variable set, then we say, Oh,
29:28 well, if there’s nothing set, we’re going to load everything.
29:31 So that’s the way that it kind of figures out between root and leaf packages, right?
29:35 I’m just in the beginning stages of doing the IA for the regular docs, right?
29:40 So the foundations, color, typography, all that other stuff, just trying
29:44 to figure out how that sets itself up in the grand scheme of things.
29:48 I know it’s going to only be in the root.
29:50 It’s not going to be in the leaf packages, of course, but how
29:52 does that look when it’s finally going to be deployed as a site?
29:57 So I’m very excited about moving that over to Storybook because again, that
30:01 maintenance part is super important.
30:04 With that.
30:04 So I’m hoping to leverage some MDX in there.
30:07 I’m hoping to do additional niceties, I guess, just from a maintenance standpoint
30:13 have, I guess, custom components that would show, you know, how to install,
30:17 how to test, how to do all these kinds of things that again, would be
30:20 happening in a lot of these components.
30:21 So something that I, again.
30:23 Highly recommend other folks look into, especially when you were either first
30:27 starting out, or if you are having trouble keeping these two things in
30:30 sync, right, especially for small teams that have low resources that really are
30:36 struggling to keep up with, you know, a doc site and the library itself, right?
30:42 Just put them together, use a storybook and move on.
30:46 I think is a really mature way of going about it.
30:49 And I know it’s not the sexiest.
30:52 You know, the way of going about it.
30:54 Certainly the, you know, you see these design system sites like Alassian
30:57 and Polaris and Twilio’s Paste design system, all very beautiful
31:02 documentation sites, but remember if the documentation is out of date
31:08 or, you know, doesn’t, doesn’t work.
31:10 Suit the needs, then you really kind of have to like revisit that.
31:14 And that’s very easy to do, unfortunately, is to, is to get out
31:18 of date and otherwise be a little bit less usable when you’re in a support
31:23 system, like design systems is right.
31:26 You’re always trying to, you know, improve things.
31:28 There’s always something that needs to be done.
31:30 And if you can take documentation off the table and make it a
31:34 little bit more automated, I think there’s a lot of value in that.
31:38 And I think storybooks a real good way of doing it.
31:40 Also hashtag not sponsored by storybook at all.
31:43 Just want to end with that saying that I just really think that it’s a really great
31:49 way to start with any particular system.
31:51 There are some alternatives out there that I know of.
31:54 I think bit.
31:55 dev is another alternative.
31:56 However, that’s more of a full on ecosystem.
31:59 Of making components and building components, et cetera, et cetera.
32:03 There’s another one called backstage.
32:04 io.
32:05 I think that’s the folks from Spotify or maybe Shopify.
32:10 I think it’s Spotify.
32:11 I don’t know.
32:12 I get them confused sometimes, but they have another kind of system that allows
32:16 for this kind of Ability to put components on top and then distribute them and that’s
32:21 so much maybe documentation wise, but.
32:24 You could see for other alternatives that are out there, but it’s hard to
32:27 not use storybook because it’s free and easy to drop into your existing
32:33 products and organizations, you know?
32:36 So, but anyway, let me know what you think.
32:38 Let me know when you started out with Storybook and what version that was and
32:41 all the headaches that you may have had to upgrade it because I know I had my own.
32:45 All the breaking changes have been difficult, especially since
32:48 level you know, the version 4.
32:49 Lots of changes since 4.
32:51 But I know that they’ve been doing a really good job,
32:53 especially between 7 and 8.
32:56 To introduce a lot less breaking changes and to still give
32:59 you a lot of good features.
33:00 In fact, I think eight is the one where they took out the peer dependency
33:03 for react, which is really great because not everyone’s using react.
33:06 So but yeah, let me know what you think about that.
33:09 And I guess otherwise I’ll see you in the next one later.
