如何在Next.js中创建shadcn Toast并在Storybook中生成其变体？

技术栈：shadcn、Tailwind CSS、TypeScript、Next.js、Storybook

你已经实现了静态Toast，现在想改成动态触发的形式，但刚接触Storybook遇到了配置问题。下面是修正后的代码和说明：

原代码问题分析 #

你之前的代码把带触发按钮的组合组件直接设为meta的component，导致Storybook无法正确识别Toaster本身的props，而且args里的color大概率不是Toaster的有效属性，所以配置无效。

修正后的Storybook配置代码 #

import type { Meta, StoryObj } from '@storybook/react';
import { useToast } from '@/components/ui/use-toast/use-toast';
import { Toaster } from '../toaster/toaster';
import { Button } from '@/components/ui/button/button';

// 正确指定组件为Toaster本身，让Storybook识别组件的原生props
const meta: Meta<typeof Toaster> = {
  component: Toaster,
  title: 'Components/Toaster', // 可选，设置Storybook中组件的分类路径
  argTypes: {
    // 配置Toaster可交互的props，比如位置（根据你的Toaster实际属性调整）
    position: {
      control: 'select',
      options: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
    },
  },
};

export default meta;

type Story = StoryObj<typeof Toaster>;

// 默认故事：展示基础动态触发效果
export const Default: Story = {
  render: (args) => {
    const { toast } = useToast();
    return (
      <div className="p-4">
        <Button onClick={() => toast({ 
          title: '操作成功', 
          description: '这是一条动态触发的提示消息' 
        })}>
          触发基础Toast
        </Button>
        <Toaster {...args} />
      </div>
    );
  },
};

// 错误类型Toast故事：展示不同样式的动态Toast
export const ErrorToast: Story = {
  render: (args) => {
    const { toast } = useToast();
    return (
      <div className="p-4">
        <Button onClick={() => toast({ 
          variant: 'destructive', 
          title: '操作失败', 
          description: '请检查输入后重试' 
        })}>
          触发错误Toast
        </Button>
        <Toaster {...args} />
      </div>
    );
  },
};

关键修正点 #

1. 正确指定component：meta的component必须是Toaster组件本身，这样Storybook才能解析组件的原生props并生成对应的控制面板。
2. 拆分触发逻辑：把触发按钮和Toaster的组合放到每个Story的render函数中，每个故事可以独立展示不同的Toast场景。
3. 配置可交互props：通过argTypes定义Toaster的可调整属性（比如位置），方便在Storybook面板中实时修改查看效果。
4. 多场景展示：可以添加多个Story，分别展示成功、错误、警告等不同类型的Toast，让组件的用法更清晰。

内容的提问来源于stack exchange，提问作者sam khan