I recently presented at MelbJS, where Kevin Yank from CultureAmp shared insights into StorybookJS and their experience at CultureAmp. A fascinating concept emerged - Storybook Driven Development (SDD), where frontend developers are increasingly favoring Storybook for component development.

Let's dive into integrating Storybook into a RemixJS project. Following the Storybook documentation (https://storybook.js.org/docs/get-started/install), a simple command npx storybook@latest init sets up the necessary files and configurations. It even detected my use of ViteJS, streamlining the process.

However, I wanted to customize the stories for my ChakraUI-based Button component. After deleting the default stories folder, I created my own stories. Here's a snippet of the Button component:

import { Button } from "@chakra-ui/react";
const ButtonSample = ({ colorScheme = "purple", variant = "solid", ...props }) => (
  <Button colorScheme={colorScheme} variant={variant} {...props}>
    {props.children}
  </Button>
);
export default ButtonSample;

Storybook initially had trouble reading my vite.config.ts file. Referring to this GitHub issue, I resolved it by adding a node module or renaming my config to vite.config.js.

Creating my first story, Button.stories.ts, involved using Storybook's Meta and StoryObj. Here's a snippet:

import type { Meta, StoryObj } from "@storybook/react";
import Button from "./Button";

const meta = {
  title: "Button",
  component: Button,
} as Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
  args: {},
};

To make Storybook compatible with Vite, I added vite-tsconfig-paths and created a storybook.vite.config.ts file. The final configuration in .storybook/main.js looked like this:

import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../app/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {
      builder: {
        viteConfigPath: "storybook.vite.config",
      },
    },
  },
  docs: {
    autodocs: "tag",
  },
};

export default config;

Executing npm run storybook now provides a comprehensive view of the Button component in Storybook. While the setup might seem intricate, especially in a RemixJS context, it's a powerful approach for frontend development.

If you're interested in more insights or details, let me know, and I'll share further experiences in upcoming articles.