Storybook

Overview

Storybook is a development tool that lets you build, view, and test UI components in isolation. It acts like a visual catalog of your components—think of it as a design system that lives alongside your code. This is helpful not just for developers but also for designers, product managers, and QA to preview and interact with components without needing to run the full app.

Further Reading

• Storybook Documentation – Official guide for installation, configuration, and advanced usage.
• Nuxt.js Storybook Module – Integration guide for using Storybook with Nuxt 3 applications.

Why is Storybook included in the Storefront Application?

In complex frontend applications, components often serve many use cases. Storybook helps us document, test, and iterate on these components independently. For the Storefront Application, Storybook ensures:

• Developers can build consistent, reusable components.
• Designers can verify visual details without inspecting code.
• QA and PMs can validate UI elements without deploying the entire app.

Interface

In this view, you’re seeing the documentation page for the SFProductCard component.

• Left Sidebar: Navigate all components, grouped by section (Account, Product, Core, etc.)
• Main Panel: Shows what the component looks like and how it behaves
• Tabs (e.g., Docs, Default): Show different views or usage states
• Inputs Section: Lists available inputs (also called props), with descriptions and examples

This is the interactive Controls panel for the SFButton component.

• The preview shows the button rendered live.
• Below it, the "Controls" tab lets you test out props like variant and size
• Changes made in this panel update the component in real time.

Key Benefits

Component Isolation: Develop and test components independently from the Storefront Application. No need to set up routes or real data—just the component and its props.

Living Documentation: Storybook auto-generates documentation from your component files, including interactive controls, props, and example use cases.

Collaboration-Friendly: Storybook is deployed as a static web page. Designers and stakeholders can browse and test components on their own without needing a dev environment.

Add-ons Support: Storybook supports a rich ecosystem of add-ons:

• Accessibility checks (a11y)
• Responsive viewports to test across devices
• Interactive controls for real-time property tweaking
• Design tokens previews, theming, and more

Why It’s Valuable – Role-Based Overview

Usage

You can access Storybook depending on how it has been deployed. For details, see the Deployment section.

If it’s hosted separately (e.g., on GitLab Pages, Vercel, or another static hosting service), it will have a different URL.

You can find the correct URL on the respective deployment platform’s page (e.g., Vercel or GitLab Pages), or ask the responsible developer for access.

Setup

Prerequisites

1. Make sure you’ve followed the Storefront Project Setup Guide and installed dependencies:

bash

Copy

2. Run Storybook Locally:

bash

Copy

3. Visit http://localhost:6006 in your browser to open Storybook.

How Mocking Works

To support Storybook without relying on live APIs, we’ve created a custom mock file that replaces the composables from the Storefront SDKs. These mocked versions return static test data or empty structures instead of making real API calls, ensuring Storybook remains fast and self-contained.

Example: useCurrentShop()

Instead of hitting a real endpoint, the mock returns:

typescript

Copy

Why This Matters

• Components don’t fail or crash when Storybook runs without a backend.
• You can preview components in different states quickly (empty basket, filled cart, promotion active, etc.).
• Makes it easy to document and demo UI elements without setting up real sessions, users, or products.

In our custom Storybook setup, the real composables are aliased to our mock file:

typescript

Copy

This ensures that whenever a component imports from #storefront/composables Storybook automatically uses the mock instead.

Deployment

To deploy Storybook, you can build the static site using:

bash

Copy

This generates a static version of your Storybook in the storybook-static directory, which you can then deploy to any static hosting provider such as GitHub Pages, GitLab Pages, or Vercel.