我们来比较一下Storybook和Ladle的设置

这篇文章的简要内容

在个人开发中，经常会遇到需要一个组件目录的情况。不过，只要能够进行简单的显示确认，快速准备并且轻便的工具就可以了。在这种情况下，我觉得并不需要特意使用Storybook。

因此，我决定尝试一下只是听说过名字的 Alternative Storybook – Ladle。

准备React

暫時為了比較，我想設置 Storybook，但無法在空的專案下執行storybook init指令。
因此，我將簡單準備React。

bun init

bun i react react-dom

bun i -d @types/react @types/react-dom

目前的文件結構等如下所示。

.
├── README.md
├── bun.lockb
├── index.ts
├── package.json
└── tsconfig.json

{
  "name": "comparing-storybook-ladle",
  "module": "index.ts",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.17",
    "bun-types": "latest"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  }
}

故事书 shū)

我們這次沒有打算製作應用程式本身，所以我們將繼續進行Storybook的設置。

bunx storybook@latest init

等了2、3分钟后，成功地启动了。

以下是当前文件结构等内容。

.
├── README.md
├── bun.lockb
├── index.ts
├── package.json
├── stories
│   ├── Button.stories.ts
│   ├── Button.tsx
│   ├── Configure.mdx
│   ├── Header.stories.ts
│   ├── Header.tsx
│   ├── Page.stories.ts
│   ├── Page.tsx
│   ├── assets
│   │   ├── 省略
│   ├── button.css
│   ├── header.css
│   └── page.css
└── tsconfig.json

{
  "name": "comparing-storybook-ladle",
  "module": "index.ts",
  "type": "module",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.4",
    "@storybook/addon-interactions": "^7.6.4",
    "@storybook/addon-links": "^7.6.4",
    "@storybook/addon-onboarding": "^1.0.9",
    "@storybook/blocks": "^7.6.4",
    "@storybook/react": "^7.6.4",
    "@storybook/react-vite": "^7.6.4",
    "@storybook/test": "^7.6.4",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.17",
    "bun-types": "latest",
    "storybook": "^7.6.4"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  }
}

自动生成的各种各样的功能由init命令负责确实很方便，但是仅凭要准备三个组件和一个文档就需要花费很长时间的印象。
此外，我是“依存关系越少越好”的派别，所以一次性有太多的依赖让我感到有些气馁。

请不要自行安装 @storybook/addon-onboarding 这样的东西进行Onboarding。

舀勺

这里开始是正题。
我将尝试设置Ladle。
既然这样，我会尽力使其显示与由storybook init生成的内容相同。

回到准备React阶段，继续进行设置。

bun i @ladle/react

让我们尝试执行 storybook init 生成的代码，并显示以下的 4 个内容。

• Button.stories.ts

• Header.stories.ts

• Page.stories.ts

Configure.mdx

共同之处-更改文件扩展名

故事书使用.ts的文件扩展名是可以的，但是勺子必须使用.tsx否则组件无法运行。

此外，还需要将.mdx更改为.stories.mdx。

按钮

公式文档的撰写方式有些改变，但是按照这样的方式做，它就正常工作了。

import type { StoryDefault, Story } from "@ladle/react";
import { Button } from "./Button";

type StoryType = Story<React.ComponentProps<typeof Button>>;

const ButtonStory: StoryType = (props) => <Button {...props} />;
ButtonStory.storyName = "Button";

export default {
  args: {
    primary: false,
    size: "medium",
    label: "Button",
  },
  argTypes: {
    backgroundColor: {
      control: {type: "color"},
    },
    size: {
      control: {type: "select"},
      options: ["small", "medium", "large"],
    },
  }
} satisfies StoryDefault

export const Primary = ButtonStory.bind({});
Primary.args = {
  primary: true,
};

export const Secondary = ButtonStory.bind({});

export const Large = ButtonStory.bind({});
Large.args = {
  size: "large",
};

export const Small = ButtonStory.bind({});
Small.args = {
  size: "small",
};

在公式中介绍的内容往往是在stories文件中首次编写标记，而不是导入在另一个文件中定义的组件。

只要按照所介绍的方法进行模仿，可能会导致 props 的类型被写两次，所以为了避免这种情况，我采用了 type StoryType = Story<React.ComponentProps>; 来获取并成功解决了这个问题。

整體來說，我覺得 Storybook 6.x 系列的寫作方式與這個很相似。

标题

按钮几乎没有变化，所以省略了说明。

import type { Story } from "@ladle/react";
import { Header } from "./Header";

type StoryType = Story<React.ComponentProps<typeof Header>>;

const HeaderStory: StoryType = (props) => <Header {...props} />;
HeaderStory.storyName = "Header";

export const LoggedIn = HeaderStory.bind({});
LoggedIn.args = {
  user: { name: "Jane Doe" },
};

export const LoggedOut = HeaderStory.bind({});

页面

用storybook init创建的Page通过play函数显示登录状态。
虽然在Ladle中也可以使用Playwright来实现，但在Ladle的依赖关系中的Vite和fsevents出现了某些错误，无法运行……。

我感到很沮丧，但这次我决定放弃了。

import type { Story } from "@ladle/react";
import { Page } from "./Page";

type StoryType = Story<React.ComponentProps<typeof Page>>;

export const PageStory: StoryType = (props) => <Page {...props} />;
PageStory.storyName = "Page";

配置

只要更改了文件后缀，就能成功显示了。

请进行比较

我认为，我们可以实现文章开头所提到的目标：“只需要确认显示，并且迅速准备好且轻便的东西。”这是因为它具有快速启动和少依赖关系等特点。

我也很高兴不再需要配置文件和像.ladle这样的文件夹了。

虽然外观看起来简洁，但是同时追求外观上的豪华感与提出的要求不够一致，给人一种不够统一的感觉，但这样也可以接受。

由于公式文档以外的信息几乎没有，所以在工作中使用它让我感到害怕，但是在个人开发中，我想再试一次。