GAZAR

Principal Engineer | Mentor
Storybook Harmony: Effortless RemixJS Integration Unleashed

Storybook Harmony: Effortless RemixJS Integration Unleashed

Storybook Harmony: Effortless RemixJS Integration Unleashed

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.

RemixJS Storybook Frontend Development Integration Guide Streamlined Workflow

Comments