Storybook with Vite and Pico CSS: A Real-Time Experience

Storybook lets you develop UI components in isolation. Pairing it with Vite speeds up the build process, and using Pico CSS keeps styling lightweight. This blog shares real-time experiences and best practices for setting up Storybook with Vite and Pico CSS.

Setting Up Storybook with Vite and Pico CSS

Storybook can improve collaboration, testing, and the overall development workflow for UI components. It allows teams to build and preview components in isolation, ensuring consistency before integration into larger projects.

For installation steps and basic setup, refer to the official Storybook documentation. After setup, here are some key insights from working with Storybook in a real-world project.

Handling Layouts in Storybook with Vite and Pico CSS

By default, Storybook applies its own layout styles. These can cause alignment issues. To ensure components appear as intended, use parameters in your stories:

export default {
 title: "Components/Button",
 component: Button,
 parameters: {
   layout: "centered", // Centers the component in the preview
 },
};

Using MemoryRouter with Storybook Vite Pico CSS

When your component uses React Router for navigation, wrap it inside the MemoryRouter component so navigation works properly within the isolated Storybook environment.

Example: BlogCardList Component

If a component includes links or navigation, wrap it in <MemoryRouter>:

import { MemoryRouter } from "react-router-dom";

export const BlogCardList = (args) => (
 <MemoryRouter>
   <BlogCard {...args} />
 </MemoryRouter>
);

Using StoryFn in Stories

Utilizing argTypes

To enhance flexibility and control in Storybook stories, always take advantage of argTypes. This allows you to define the types and controls for component props directly in the Storybook UI, making it easier to test variations.

export default {
 title: 'Components/Button',
 component: Button,
 argTypes: {
   variant: {
     control: { type: 'select', options: ['primary', 'secondary', 'tertiary'] },
   },
   disabled: { control: 'boolean' },
 },
} as Meta;

Creating Multiple Story Variations

Instead of defining only one default story, create multiple options for better flexibility.

export const Primary = Template.bind({});
Primary.args = {
 variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
 variant: 'secondary',
};

Basic Example

Here’s a simple example of using StoryFn in a Breadcrumbs component:

import { Meta, StoryFn } from '@storybook/react';
import AboutUs from './index';
import ShellWrapper from '../Shell/ShellWrapper';

export default {
 title: 'Pages/AboutUs',
 component: AboutUs,
} as Meta;

const Template: StoryFn = (args) => <ShellWrapper {...args} />;

export const Default = Template.bind({});
Default.args = {
 children: <AboutUs />,
};

Using StoryFn helps apply consistent styling and structures across all stories dynamically. This is useful when wrapping components inside a theme provider, global styles, or layouts, especially when integrating storybook vite pico css into your workflow.

export const ThemedButton = (args) => <Button {...args} />
 </MemoryRouter>
);
ThemedButton.decorators = [
 (StoryFn) => <ThemeProvider><StoryFn /></ThemeProvider>,
];

Importing Jest for Testing

To integrate Jest with Storybook, always import it in test-related files:

import "@testing-library/jest-dom";

This ensures that interaction tests run smoothly within Storybook’s test runner.

Styling with Pico CSS

Pico CSS provides a minimal, responsive, and lightweight CSS framework that follows a class-less approach while supporting both light and dark modes seamlessly. It is an excellent choice for Storybook components that need a consistent and modern UI.

Why Use Pico CSS with Storybook?

• Minimalist & Lightweight: No need to write extra CSS for basic styling.
• Responsive by Default: Works well across devices without additional breakpoints.
• Auto Dark Mode: Easily adapts to user preferences.
• WCAG-Compliant: Ensures accessibility best practices out of the box.

Setting Up Pico CSS in Storybook

To ensure styling consistency, import Pico CSS in .storybook/preview.js:

import 'pico.css';

If using SCSS, ensure the appropriate loader is installed:

npm install sass

Then, import your styles normally in stories:

import "./Button.scss";

Dealing with Deprecated Warnings in Pico CSS

When using Sass with Pico CSS, you may encounter a lot of deprecated warnings that cannot be easily resolved. A current workaround is to downgrade Sass to version 1.77.6 to eliminate these warnings:

npm install sass@1.77.6

This version avoids the deprecated warnings while maintaining compatibility with Pico CSS. Until Pico CSS updates its styles to remove deprecated Sass features, downgrading is the best solution.

Conclusion

Integrating Storybook with Vite and Pico CSS provides a lightweight and efficient environment for developing UI components. You can streamline your development workflow by structuring stories properly with StoryFn, managing layouts with decorators, and ensuring Jest compatibility.