優雅地使用 Storybook 建立 React.js 組件

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 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

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

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。