General

Storybook: Can Your Next Project Benefit from It?

Published Oct 28, 2022

Updated Feb 13, 2023

6 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

I will show you what Storybook is all about and hopefully help you decide if you need it in your next project. Don't worry if you have limited experience as an engineer because you don't need to have an advanced technical background to make use of Storybook.

What is Storybook?

Storybook is a tool for developing UIs that allows you to work on one component at a time.

What is a component?

A component is smallest part of a UI. In chemistry, we refer to it as an atom(Smallest unit of a matter). Most frameworks are now components based.

Why Storybook?

Storybook allows you to actually develop the entire UIs without starting the major application.

But in order to cleary state why one would choose to use it, lets look at some benefits and challenges of Storybook.

Benefits

Being able to build components in isolation,and not having to think about integrations or other systems running in your stack is a blessing
A clearer vision of your components styling and layout
Navigating between UI component as you get to see all component as a sidebar item
Communicating with other devs. It really allows you to show how your new component is supposed to be used and which features it boasts.
You can manipulate props value
Its is not framework agnostic i.e you can use for Vue, React, Angular, etc.
Great for documenting

Challenges

If you’re integrating it into an existing project, there is some migration work to be done.
You rely on addons and decorators for handling data.
It can take up a lot of time to maintain and properly set up.
It takes team commitment to keep it updated and ensure everything still works.

What are add-ons actually?

Add-ons are plugins that can be added to make certain feature work. For example, by default scss doesn't work on Storybook, so you will have to install an add-on to make it work as expected.

When to use Storybook

In this section, we will the making use of This Dot Labs' Open source project starter.dev as a case study.

starter.dev is built using a variety of technologies to demonstrate architectural patterns and best practices using these tools. This project uses these technologies like Vue, React, Nextjs, Angular, etc to show various ways Github can be implemented!.

Lets Pick a component from starter.dev GitHub Showcases to demonstrate the features Storybook has.

Every conponent has a control tab that allows us to manipulte the props if there be any.

For example:

Here, looking at the image with the props, you will notice some properties:

cardType: This is a dropdown/select option with two opions issue and pullrequest.
state: this defines the state of the card
author: the person who created it or a name, or whatever, you get the point.

Lets change some of the props and see the result

cardType will be pullrequest
state will be closed

Here, we can see there has been a change. This is so helpful, and tells the team members what the component can and can't do.

Other features

Looking at other interesting features like

Settings

Here, we can toggle for feature like side nav, the controls (which, in the dropdown option, is call addons) Seetings options

Responsiveness

There are few options that help us test for responsivess. Below, you will find an image showing those options:

Here we can select any option to see the responsiveness of that component.

Large screen Issue Pullrequest Card on large screen

Mobile screen Issue Pullrequest Card on mobile screen

Hover state of the card

Inspection

Here, we can see certain properties like padding, and current width and height Inspected card

Looking to get started

To get started, all you need is to visit this sites based on your prefered technology

Conclusion

It's up to you to decide if Storybook helps you achieve your goals faster, or if you think it's useful for your project setup. It's important to look at what it could offer and what it can't. You can decide to use it for just plain documentation or for components, or both.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Jerry Hogan
Passionate developer, super fan of Vue, a singer, writer and musician.
@iamjerry_hogan @hdjerry

How to Set Up Storybook in VueJS

How to setup Storybook in VueJS In this post, we will take a look at how to setup storybook in our VueJS application. What is Storybook? Storybook is a tool for developing UI components / libraries faster and in isolation. Storybook is an excellent addition to a project development cycle as it allows you to work on one component at a time and develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. It can also be used to write a documentation (story) of what each component does: for the parameters it accepts, the event it emits and response to expect. A story describes a component in a specified state. You'd want to write a story for each state a component can have, such as active, inactive, loading. Storybook will then let you preview the component in its specified state in an interactive component library. Setup our Project Let’s start by creating our VueJS project. We would be using yarn for package management. Using Vue CLI >Install Vue CLI if you don't already have it installed. ` >Create vue app ` >Enter 'your-app' folder ` Add storybook ` >Add Storybook to package.json ` -p command refers to the port number where the Storybook will be run. -c command refers to the config directory. -s command refers to directory to load static / public files >run the following command, we should now see storybook running on port :9001 ` Let's Configure Storybook in our VueJS project As a best practice, Storybook configuration should be stored in a directory called .storybook. Create .storybook directory as the config directory in the project root ` Next lets create our config file Create main.js inside our .storybook folder ` The main configuration file main.js controls the behaviour of the Storybook server. - stories - an array of globs that describes the location of your story files, relative to main.js. This makes the maintenance of the main.js file much easier by keeping it highly focused on the configuration of Storybook rather than its implementation. You can require as many stories as you need. - addons - a list of all the addons you are using (we will be describing what addons are as we go). - babel - custom babel configuration. Note: you must always restart the Storybook’s process when you modify the main.js so as to update it. Our folder structure should look like this: Let's write a story for a button component First, let's write our custom button component - ../src/component/button.vue ` Let's write stories inside ./src/stories/button.stories.js ` Addons are plugins in Storybook used to perform advanced functionalities on components. Examples are actions, knobs etc. - The actions addon is used to display data received by an event handler (callback) arguments in your stories. - The knobs addon allows you to dynamically interact with a component’s args (inputs). Experiment with alternate configurations of the component to discover edge cases. Update our main.js file. Now let's add the path from main.js to our stories folder: ` >Let's stop our storybook server and run it again ` Now if we click on the button we would notice that there's a log of the event under actions in our storybook. If we click on the knobs tab, we would be able to edit the values that our component accepts and see how they change in realtime. Conclusion Yes! We've been able to setup Storybook in VueJS and have also built a simple button component to test out knobs and actions. For more complex examples like using Vuex store in stories, check out Using Storybook with VueJS. If you have any questions or run into any trouble, feel free to reach out on Twitter or Github....

Sep 18, 2020

4 mins

VueStorybook

Mocking API on Storybook using MSW

In this blog, you will learn how to mock APIs on Storybook using MSW. This blog will assume you have your project setup with either GraphQL, or a REST API like Axios or Fetch API and also will assume you have Storybook installed in your project. We will be covering how to mock for both GraphQL and REST API. In this project, we will use Vue and our UI tool. But don't worry. The sample code will work for whichever framework you choose. What is MSW? MSW(Mock Service Worker) is an API mocking library that uses Service Worker API to intercept actual requests. Why Mock? Mocking helps us avoid making an actual HTTP request by using a mock server and a service worker. This, in turn, prevents any form of break in case something goes wrong with the server you would have sent a request to. What is a Mock Server? A mock server is simply a fake server that works as a real server to help users test and check APIs . It imitates a real API server by returning the mock API responses to the API requests. You can ream more here. What is a Service Worker? A Service worker enable communication between the application, the browser, and the networks (if netwrok is available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests, and take appropriate action based on whether the network is available or not. You can learn more about Service Worker API here. Use Cases Enough of all the stories 😃. Now we will be looking at two use cases: - GraphQL - REST API We will need to install some pulig ins to maximize what msw has to offer by running one of these commands in the root directory of the project: Installing MSW and the addon ` Generate a service worker for MSW in your public folder. ` Replace the placeholder with the relative path to your server's public directory. For example, the Vue command will be: ` You can check here to see what path your framework will use. Note: If you already use MSW in your project, you have likely done this before, so you can skip this step. Configuring Storybook In your .storybook/preview.js file, add this: ` You also want to ensure that your GraphQL set up is initialized in this .storybook/preview.js file if you are using Apollo Client. Creating our mock API Lets create where our mocking will be happening by first creating mock folder in the src folder. Create a data.ts file in the mock folder, and add this code, which will serve as our fake response. ` Create a mockedPost.ts file and add this code. ` Create a mockedUserProfile.ts file and add this code. ` The concept of interception comes into place with these mocked files. For example, if there is any request outside of the mocked request, msw won't mock it. So every API url or query we want to mock must correspond to the component that's data you are trying to mock, regardless of if the API url is authentic or not. Create a handlers.ts file and add this code. Handlers allow us to have multiple request, no matter its method [POST, GET]... ` How do we make use of the Handler? I created two components to test for our two use cases - Card - Posts Card component - Create a Card folder in your component folder. - Create a Card.vue and add this snippet ` - create an index.ts and add this code ` - create Card.stories.ts and add this code ` below is the UI expectation Posts component - Create a Posts folder in your component folder. - Create a Posts.vue and add this snippet ` - create an index.ts and add this code ` - create Posts.stories.ts and add this code ` below is the UI expectation Code Explanation We created a card and posts component that is making use of certain query/API call to get data. msw has a property handlers which accepts an array of requests, giving us the ability to add as many requests as we want provided that they are in the component. Overview Of the UI Below is an overview of the UI, which brings together the components: Whewww!!! 😌 Why mock? - You want test without hitting the actual API - Yhe API isn't yet avaible from the backend team. - During development to reduce dependencies between teams. - To accelerate third parties API integration. - during functional and integration testing. - to test various advanced scenarios more easily. - for demonstration purposes. Conclusion If you have any issues, we provided a repo which you can use as a template if you want to start a new project with the setup and use it to practice. Please let me know if you have any issues or questions, and also contributions are welcome....

Nov 2, 2022

5 mins

StorybookTesting

How To Authenticate Your SolidJS Routes With Solid Router

In this post, we will talk about how we can authenticate our SolidJS route with Solid Router. By the end of this article, we will understand what authentication is, and how it is used to guard routes in SolidJS using the Solid Router. Overview Route authentication has been around for a while, and is now a fundamental part of many applications like Facebook, Gmail, and Instagram. At this point, it’s about as ubiquitous as entering a password into a phone. Authentication through route guards in SolidJS can be achieved in two different ways. The first that we are going to cover in this app is the use of a Solid Router. The second is provided by Solid Start, which is more like a folder-based routing. It is a meta-framework (a framework built on another framework). At its core, it's powered by SolidJS and Solid Router. This article assumes that you have already set up a SolidJS project, and will not walk through that part of the process. If you have not yet spun up a project, you can find tutorials and instructions at SolidJS. What is Authentication? Authentication is a process of verifying the identity of the user. It provides access control to check if the user is authenticated. Authentication enables organizations to keep their networks secure by permitting only authenticated users or processes to gain access to their protected resources which, in our case, is the route in the application. To learn more about authentication, you can check out the following; - Authentication By Mary E. Shacklett - Authentication By Auth0 - Authentication By Wiki What is a route guard? A route guard helps to prevent unauthenticated users from accessing certain routes/parts in an application. For example, an app lock on a mobile phone can be seen as a guard. You may be able to access the phone and some apps, but you can’t access other apps. We can also use parental controls on the phone, internet, and so on as a type of guard. You can read more about route guard. Get Started If you haven't installed the Solid Router in your project, run the command below: ` Solid Router is a universal router for SolidJS which works whether you're rendering on the client or the server. It was inspired by and combines the paradigms of React Router and the Ember Router. To read more, check out Solid Router Having installed @SolidJS/router, we will be creating the following files; - Home: *src/pages/Home.jsx* - Signin: *src/pages/Signin.jsx* - Pricing: *src/pages/Pricing.jsx* - RouteGuard: *src/RouteGuard/index.jsx* - Header: *src/components/Header/index.jsx* - Header styles: *src/components/Header/Header.module.css* Terminologies - useNavigate: a library provided to us by SolidJS Router that is used to navigate. - createEffect: creates a listener, which calls it's first argument when attached signals change. - Outlet: serves as the children associated with RouteGuard wrapper - NavLink: used to navigate between pages just like a tag which takes a property href for the page route path. Home page Below is the code we will paste in our home page file. But if you already have a content for this, you don't have to change it. ` This is just a simple page component with a style imported at the top. Signin page This is the content of our sign in page, but if have a content already, that's fine. The most important contents are the logIn function and the createEffect. ` The logIn function will be called when the login button is clicked. When clicked, a hardcoded token is saved in the session storage. The user is then navigated to the home page, which by default, can only be accessed if the user has been authenticated. The createEffect ensures the authenticated user won't access the sign in page. Pricing page This is just another page which, in this project, represents another protected page that could only be accessed by an authenticated user. ` This is just a simple page component with a style imported at the top. RouteGuard Component ` This serves as the wrapper for routes you want to protect from unauthenticated users. If there is no token in the session storage, the user will be routed to the signin page. Header component If you already have the content for the header file, you don't have to change it. All you need is the logOut function. ` Above, we have styles imported from the header CSS module, and we have a logOut function that is used to remove the token from the session storage and also navigate the user to the signin page. Header styles This is the style for the header component. ` Updates for src/App.jsx This file is where the route is managed, and where we grouped certain routes we wanna guard or protect from unauthenticated users. ` Update for src/App.module.css ` Updates for src/index.jsx We have to update this file by wrapping our App with Router ` Update for src/index.css ` Conclusion In this article, we were able to understand what authentication is, and how to create a route guard which is very important when trying to prevent certain users from accessing certain routes in our application. I hope we have been able to help you see the possibilities of making use of SolidJS and Solid Router to build a well-authenticated application. If you are having issues, you can check out the repo for SolidJS-route-guard. Don't forget that you can see, in detail, how this was maximized in one of This Dot's open source project starter.dev GitHub Showcases. Happy coding!...

Mar 6, 2023

4 mins

SolidJS

Internationalization in Next.js with next-intl

Internationalization in Next.js with next-intl Internationalization (i18n) is essential for providing a multi-language experience for global applications. next-intl integrates well with Next.js’ App Router, handling i18n routing, locale detection, and dynamic configuration. This guide will walk you through setting up i18n in Next.js using next-intl for URL-based routing, user-specific settings, and domain-based locale routing. Getting Started First, create a Next.js app with the App Router and install next-intl: ` Next, configure next-intl in the next.config.ts file to provide a request-specific i18n configuration for Server Components: ` Without i18n Routing Setting up an app without i18n routing integration can be advantageous in scenarios where you want to provide a locale to next-intl based on user-specific settings or when your app supports only a single language. This approach offers the simplest way to begin using next-intl, as it requires no changes to your app’s structure, making it an ideal choice for straightforward implementations. ` Here’s a quick explanation of each file's role: * translations/: Stores different translations per language (e.g., en.json for English, es.json for Spanish). Organize this as needed, e.g., translations/en/common.json. * request.ts: Manages locale-based configuration scoped to each request. Setup request.ts for Request-Specific Configuration Since we will be using features from next-intl in Server Components, we need to add the following configuration in i18n/request.ts: ` Here, we define a static locale and use that to determine which translation file to import. The imported JSON data is stored in the message variable, and is returned together with the locale so that we can access them from various components in the application. Using Translation in RootLayout Inside RootLayout, we use getLocale() to retrieve the static locale and set the document language for SEO and pass translations to NextIntlClientProvider: ` Note that NextIntlClientProvider automatically inherits configuration from i18n/request.ts here, but messages must be explicitly passed. Now you can use translations and other functionality from next-intl in your components: ` In case of async components, you can use the awaitable getTranslations function instead: ` And with that, you have i18n configured and working on your application! \ Now, let’s take it a step further by introducing routing. \ With i18n Routing To set up i18n routing, we need a file structure that separates each language configuration and translation file. Below is the recommended structure: ` We updated the earlier structure to include some files that we require for routing: * routing.ts: Sets up locales, default language, and routing, shared between middleware and navigation. * middleware.ts: Handles URL rewrites and locale negotiation. * app/[locale]/: Creates dynamic routes for each locale like /en/about and /es/about. Define Routing Configuration in i18n/routing.ts The routing.ts file configures supported locales and the default locale, which is referenced by middleware.ts and other navigation functions: ` This configuration lets Next.js handle URL paths like /about, with locale management managed by next-intl. Update request.ts for Request-Specific Configuration We need to update the getRequestConfig function from the above implementation in i18n/request.ts. ` Here, request.ts ensures that each request loads the correct translation files based on the user’s locale or falls back to the default. Setup Middleware for Locale Matching The middleware.ts file matches the locale based on the request: ` Middleware handles locale matches and redirects to localized paths like /en or /es. Updating the RootLayout file Inside RootLayout, we use the locale from params (matched by middleware) instead of calling getLocale() ` The locale we get from the params was matched in the middleware.ts file and we use that here to set the document language for SEO purposes. Additionally, we used this file to pass configuration from i18n/request.ts to Client Components through NextIntlClientProvider. Note: When using the above setup with i18n routing, next-intl will currently opt into dynamic rendering when APIs like useTranslations are used in Server Components. next-intl provides a temporary API that can be used to enable static rendering. Static Rendering for i18n Routes For apps with dynamic routes, use generateStaticParams to pass all possible locale values, allowing Next.js to render at build time: ` next-intl provides an API setRequestLocale that can be used to distribute the locale that is received via params in layouts and pages for usage in all Server Components that are rendered as part of the request. You need to call this function in every layout/page that you intend to enable static rendering for since Next.js can render layouts and pages independently. ` Note: Call setRequestLocale before invoking useTranslations or getMessages or any next-intl functions. Domain Routing For domain-specific locale support, use the domains setting to map domains to locales, such as us.example.com/en or ca.example.com/fr. ` This setup allows you to serve localized content based on domains. Read more on domain routing here. Conclusion Setting up internationalization in Next.js with next-intl provides a modular way to handle URL-based routing, user-defined locales, and domain-specific configurations. Whether you need URL-based routing or a straightforward single-locale setup, next-intl adapts to fit diverse i18n needs. With these tools, your app will be ready to deliver a seamless multi-language experience to users worldwide....

Apr 11, 2025

4 mins

NextJSAccessibility

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Storybook: Can Your Next Project Benefit from It?

What is Storybook?

What is a component?

Why Storybook?

Benefits

Challenges

What are add-ons actually?

When to use Storybook

Other features

Looking to get started

Conclusion

Jerry Hogan

You might also like

How to Set Up Storybook in VueJS

Mocking API on Storybook using MSW

How To Authenticate Your SolidJS Routes With Solid Router

Internationalization in Next.js with next-intl

Let's innovate together!

You might also like

How to Set Up Storybook in VueJS

Mocking API on Storybook using MSW

How To Authenticate Your SolidJS Routes With Solid Router

Internationalization in Next.js with next-intl