An in depth information for higher use of Storybook
Storybook is an open supply instrument for constructing UI parts and pages in isolation. This permits us to work on one element at a time. It streamlines UI improvement, testing, and documentation.
We now have written about Storybook and its options — zero-configuration setup, dynamic element modifying, a number of Storybook composition, and documentation enchancment.
It’s a widespread activity to configure international kinds for Storybook, corresponding to background shade, shade, font household, and font sizes. On this article, we use setting the background shade for instance to perform the duty in 6 alternative ways. To distinguish the options, every manner units a singular background shade. Within the course of, we see which methodology takes the upper priority.
- Pink background: Use stylesheet in
preview-head.html. - Chocolate background: Configure
previewHeadinmost important.js. - Yellow background: Import stylesheet in
preview.js. - Purple background: Configure
previewBodyinmost important.js. - Beige background: Set type inside
preview-body.html. - aquamarine background: Configure decorator in
preview.js.
Let’s go into the main points on how every methodology works.
We use Create React App as a base to discover Storybook. The next command creates a React challenge:
npx create-react-app react-storybook
cd react-storybook
Kind the command, npx sb init, and Storybook is put in.
Kind the command, npm run storybook, and the instance Storybook runs at http://localhost:6006.
By default, the background shade is white. We need to configure it to a distinct shade, with out going to every story to set it.
In Storybook, tales are rendered in a selected “preview” iframe (the Canvas tab). The Storybook internet utility reads .storybook/preview-head.html if it exists, which straight controls the <head> component within the rendered HTML.
Create .storybook/preview-head.html as follows:
Line 1 defines the <hyperlink> component for an exterior useful resource, stylesheets or website icons. href specifies the URL of the linked useful resource, which is outlined as public/type.css:
Restart the Storybook, and we see the background is modified to pink.
We will confirm that the worldwide type modifications have been utilized to each story.
Nevertheless, the type change doesn’t apply to any doc web page.
That is the anticipated habits. For each story, deciding on the Docs tab, we are able to confirm that the markdown web page is just not impacted by story styling.
Properly, we put a narrative into src/tales/introduction.tales.dx.
The doc is mechanically transformed to a narrative. Then, the Canvas tab exhibits the pink background.
Contained in the .storybook folder, there’s a file named most important.js, which controls the Storybook server’s habits. This configuration file is a preset and has an interface to regulate tales, addons, webpackFinal, babel, framework, and so forth.
Right here is the default content material of .storybook/most important.js:
It is usually attainable to change the preview head HTML programmatically utilizing a preset outlined within the most important.js file.
Strains 16–23 are added to overwrite the present previewHead with the chocolate background.
Because the type component (traces 18–22) is positioned after the present head (line 17). The brand new type overwrites the present kinds in head.
Restart the Storybook, and we see the background is modified to chocolate.
Contained in the .storybook folder, there’s a file named preview.js, which units the worldwide setting for decorators, parameters, and international sorts.
Right here is the default content material of .storybook/preview.js:
Create the stylesheet, .storybook/type.css:
Import this type file into .storybook/preview.js (line 1):
This import has greater priority than the head styling.
Refresh the Storybook, and we see the background is modified to yellow.
Much like previewHead, we are able to modify the preview physique HTML programmatically utilizing a preset outlined within the most important.js file.
It is suggested to have the CSS declared earlier than <physique> begins. Subsequently, the styling must be set in previewHead, as an alternative of previewBody.
Nevertheless, it nonetheless works. The browser re-renders the web page when the physique kinds are parsed.
Right here is the modified ./sotrybook/most important.js:
Strains 24–31 are added to overwrite the present previewBody with the purple background.
Because the CSS must be declared earlier than <physique> begins, the type component (traces 25–29) is positioned earlier than the present physique (line 30).
Restart the Storybook, and we see the background is modified to purple.
Much like preview-head.html. The Storybook internet utility reads .storybook/preview-body.html if it exists, which straight controls the <physique> component within the rendered HTML.
As we have now mentioned, the styling must be set in head, i.e. preview-head.html, as an alternative of preview-body.html.
Nevertheless, it nonetheless works.
Create .storybook/preview-body.html as follows:
Restart the Storybook, and we see the background is modified to beige.
A decorator is a technique to wrap a narrative in further “rendering” performance. Naturally, we are able to use a decorator to wrap tales with extra styling, further markup, context mocking, or something.
Right here is the modified ./storybook/preview.js:
Strains 13–17 outline the decorator, withBackground, which defines the html background shade (line 14) and physique background shade (line 15). Since that is an HOC (High Order Component), there are numerous attainable methods to set styling.
Line 19 configures decorators with withBackground.
Refresh the Storybook, and we see the background is modified to aquamarine.
We now have gone by 6 methods to configure international kinds for Storybook. Totally different background colours are used to indicate the priority of those options.
Throughout the course of, we have now checked out most important.js, preview.js, preview-head.html, and preview-body.html. Amongst these information, it’s most well-liked to set kinds in head, as an alternative of physique. On this manner, kinds are loaded earlier to keep away from a attainable clean display screen earlier than the CSS is rendered. Additionally, it avoids the browser re-rendering the web page when the kinds declared in physique are parsed.
There are alternative ways to type a Storybook, imports, desecrators, hyperlink parts, and elegance parts. Amongst them, we favor the imports manner. It imports a world type file in preview.js. It’s easy, and the modifications are live-loaded to the Storybook (solely want refresh, as an alternative of restart).
Which technique to decide? It will depend on the particular Internet utility and private choice. In any case, there are 6 methods to select from.
Thanks for studying. I hope this was useful.
Observe: Thanks, Taylor Laubach and Sebastian Kessel, for assigning me the duty to configure international kinds for Storybook.
