构建你自己的 Storybook GPT

上个月，我们社区的一位成员发布了一个由 AI 驱动的 Storybook 工具，它彻底火爆了！

今天，我将分享如何在你 Storybook 项目中运用 AI，通过构建一个 GPT 来自动为你的组件编写 stories。 这只需 10 分钟甚至更少的时间。 这将加速编写 stories 的过程，并让你更快地进行测试和开发。

你需要的

你需要一个 ChatGPT Plus 帐户来构建自定义 GPT。 如果你已经有了，请导航到 GPTs 主页并选择“创建 GPT”。 给你的新 GPT 命名和描述，然后前往“Instructions（指令）”部分。

指导你的 GPT

在“Instructions（指令）”部分，添加以下提示。 这是由 Netlify 首席工程师 Kaelig Deloumeau-Prigent 最初创建的 GPT 提示的修改版本！

As StorybookGPT, I am specialized in creating Storybook stories for React components.

My focus is on aiding expert frontend developers by generating clean, readable, and standardized story code. I strictly adhere to CSF3 conventions and do not use Component Story Format 2 (CSF2). This means I avoid syntax and patterns specific to CSF2, such as Template.bind({}), and instead focus on the cleaner, function-based approach of CSF3.

I work with TypeScript components and follow a template structure for consistency. When a prop is an event handler, like onClick or onSubmit, I use the action function from '@storybook/addon-actions' to simulate actions in the Storybook UI.

I strive to be helpful by providing specific code that integrates seamlessly with users' components, enhancing their Storybook experience. If I encounter any unclear details, I will ask for clarification, and I'm programmed to avoid making assumptions or providing unsolicited coding advice. My personality is crafted to be supportive, aiming to ease the development process by producing tailored Storybook stories.

Below, here's the template I stick to. I keep the provided format, and add component variants if possible:

import type { Meta, StoryFn } from '@storybook/react';

/* import component file */

export default {
  title: /* Component title */,
  component: /* Component name */,
} as Meta<typeof /* Component name */>;

export const /* StoryName */ = {
  args: {
    /* args */
  },
};

试用一下

为了了解 GPT 的工作原理，我们将使用 Storybook 自带的模板 button.tsx 组件

// button.tsx

import React from 'react';
import './button.css';

interface ButtonProps {
  /**
   * Is this the principal call to action on the page?
   */
  primary?: boolean;
  /**
   * What background color to use
   */
  backgroundColor?: string;
  /**
   * How large should the button be?
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Button contents
   */
  label: string;
  /**
   * Optional click handler
   */
  onClick?: () => void;
}

/**
 * Primary UI component for user interaction
 */
export const Button = ({
  primary = false,
  size = 'medium',
  backgroundColor,
  label,
  ...props
}: ButtonProps) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

复制并粘贴你的代码到你的新 GPT 中。 然后，观看接下来会发生什么。

// button.stories.tsx

import React from 'react';
import { Meta, StoryFn } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { Button, ButtonProps } from './Button'; // Adjust the import path as necessary

export default {
  title: 'Example/Button',
  component: Button,
} as Meta<typeof Button>;

export const Primary: StoryFn<ButtonProps> = {
  args: {
    primary: true,
    label: 'Button',
    onClick: action('onClick'),
  },
};

export const Secondary: StoryFn<ButtonProps> = {
  args: {
    label: 'Button',
    onClick: action('onClick'),
  },
};

export const Large: StoryFn<ButtonProps> = {
  args: {
    size: 'large',
    label: 'Button',
    onClick: action('onClick'),
  },
};

export const Small: StoryFn<ButtonProps> = {
  args: {
    size: 'small',
    label: 'Button',
    onClick: action('onClick'),
  },
};

export const CustomBackground: StoryFn<ButtonProps> = {
  args: {
    backgroundColor: '#e0e0e0',
    label: 'Button',
    onClick: action('onClick'),
  },
};

瞧！ GPT 生成了五个不同的 stories，我们现在可以在 Storybook 中使用它们了！

帮助我们更进一步

恭喜你成为新 GPT 的骄傲拥有者！ 你现在能够一键为你的组件编写 stories 了！

如果你不使用 React，我们鼓励你尝试编辑我们提供的指令，看看你能做出什么。 如果你创建了适用于其他框架的提示，请通过 GitHub Discussions 或 社交媒体 与我们分享。

Build your own StorybookGPT · storybookjs/storybook · Discussion #25119

嗨！ Storybook 网站上有一篇新博客，展示了如何构建一个 GPT 来自动生成 stories。 如果你有兴趣将提示适配到其他非 React 框架…

GitHubstorybookjs

再次感谢 Kaelig 创建和分享原始提示。 在这里查看他的原始 StorybookGPT。