如何使用 Storybook 優雅地製作 React.js 組件?

如何使用 Storybook 優雅地製作 React.js 組件?
作者: Calpa Liu
字數:2090
出版日期:January 11, 2023
更新日期:December 7, 2023
分類: #前端開發
#心得分享#React.js

Storybook 支援多種前端框架的工具,包括 React.js、Vue.js 和 Angular。它提供了一個獨立的環境,用於開發和測試組件。這個工具能夠協助我們更快速地建立和測試組件,同時確保它們在應用程式中的正確運作。在這裡,我希望分享一些有關 Storybook 的心得。

優點

Storybook 最大的優點是它可以提供不同的頁面來顯示組件的不同狀態,讓我們在各種不同的情況下測試和評估組件。通過為不同狀態創建不同的頁面,我們可以輕鬆地測試組件。另外,Storybook 也可以輸出一個 Static Website,可以輕鬆分享給設計師和其他團隊成員,讓他們容易理解組件的外觀和行為。

例如 Attraction 這個組件,我就可以在 Storybook 的界面上展示如何透過傳達不同的 Props 輸出不同效果。

如果將 title 由「東京的電子商圈和動漫天堂」修改爲「可以一去再去的動漫聖地」的話,那麼你也可以看見實時的輸出效果。

我們也可以使用內置的功能來測試該組件在不同大小的設備上是否可以達到滿意的效果,例如 Small Mobile 就可以模擬比較小的手機上的效果。

使用方法

我在使用 Markdown 的時候發現預設的 blockquote 語法不太滿足我的需求,於是便開始使用 CSS 修改 blockquote 的字體大小、顏色、背景色、縮排等等,讓它有更獨特的樣式。

以下是我在 @calpa/ui 的 React.js 代碼:

// src/components/Blockquote/index.tsx
import React, { FC } from "react";

type BlockquoteProps = {
  children: React.ReactNode;
};

const Blockquote: FC<BlockquoteProps> = (props) => {
  return (
    <blockquote
      style={{
        maxWidth: "100%",
        width: "100%",
        wordBreak: "break-word",
        caretColor: "rgba(255, 255, 255, 0.9)",
        borderLeft: "3px solid currentcolor",
        margin: "0",
        paddingLeft: "0.9em",
        paddingRight: "0.9em",
      }}
    >
      {props.children}
    </blockquote>
  );
};

export default Blockquote;

我們可以簡單地使用以下代碼來創建一個 Storybook 頁面。

//src/components/Blockquote/index.stories.ts
import Blockquote from ".";

export default {
  title: "Components/Blockquote",
  component: Blockquote,
};

const Template = (args) => <Blockquote {...args} />;

export const Default = Template.bind({});
Default.args = {
  children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
};

Addons

Storybook 豐富的生態圈可以讓我們擁有各種各樣的開發體驗,例如 @storybook/addon-interactions 可以讓我們模擬各種互動效果。

總結

我最近在重構以前的博客項目,並且使用 Material UI 以及 TypeScript 來構建一個獨立的 UI 組件庫。UI 組件庫名為 @calpa/ui,它已經發佈到 npm 上並且可以通過 npm install @calpa/ui 來安裝。歡迎到 https://ui.calpa.me 來體驗 Storybook 的效果。

組件庫的 Source Code 在 https://github.com/calpa/ui ,喜歡的話歡迎給 Star 以及 Follow。

感謝您閱讀我的文章。歡迎隨時分享你的想法。
關於 Calpa

Calpa 擅長使用 TypeScript、React.js 和 Vue.js 開發Responsive Web Design網站。

此外,Calpa 積極參與香港和台灣的開源社區,曾在2019年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過300顆星星和60個分支的支持。

更多前端開發技術文章:傳送門