iT邦幫忙

storybook相關文章
共有 41 則文章
鐵人賽 Modern Web DAY 30
玩轉 Storybook 系列 第 30

技術 玩轉 Storybook: Day 30 總結 & 學習資源

根據研究指出,重用程式碼可以節省42–81%的時間,並提高生產力 40%。易於共享UI元件的Design System在開發團隊中越來越流行。 Design S...

鐵人賽 Modern Web DAY 29
玩轉 Storybook 系列 第 29

技術 玩轉 Storybook: Day 29 Design System for Developers - Distribute

在整個組織中發佈 Design System 從架構的角度來看,Design System 如同 lodash、moment 一樣,可做為專案開發過程的 dep...

鐵人賽 Modern Web DAY 28
玩轉 Storybook 系列 第 28

技術 玩轉 Storybook: Day 28 Design System for Developers - Document

通過 Storybook Docs 推動 Design System 的採用 Design System為整個組織的利益相關者服務,因此我們需要教其他人如何從經...

鐵人賽 Modern Web DAY 27
玩轉 Storybook 系列 第 27

技術 玩轉 Storybook: Day 27 Design System for Developers - Review、Test

單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...

鐵人賽 Modern Web DAY 26
玩轉 Storybook 系列 第 26

技術 玩轉 Storybook: Day 26 Design System for Developers - Intro、Architecture、Build

Introduction 目前較具規模的公司,像是 Airbnb / Uber / Microsoft,為了保持旗下不同網站一致的使用者體驗,會遵循著 Desi...

鐵人賽 Modern Web DAY 25
玩轉 Storybook 系列 第 25

技術 玩轉 Storybook: Day 25 將 Storybook 持續部署

Exporting as a static app 首先要把寫好的Stories相關檔案,都打包成靜態可部署的檔案。 打包的語法如下 // package.js...

鐵人賽 Modern Web DAY 24
玩轉 Storybook 系列 第 24

技術 玩轉 Storybook: Day 24 MDX

MDX 若要更詳細的整理 Storybook 文件,可以使用 Markdown 語法搭配 JSX 的格式 - MDX。 有二種使用 MDX 方法 Story...

鐵人賽 Modern Web DAY 23
玩轉 Storybook 系列 第 23

技術 玩轉 Storybook: Day 23 DocsPage and Doc Blocks

DocsPage 介紹 Storybook Docs 是預設的 Addons,不需要做設定就可以使用。它可以整合元件裡的Stories、文字描述、程式註解、參數...

鐵人賽 Modern Web DAY 22
玩轉 Storybook 系列 第 22

技術 玩轉 Storybook: Day 22 Construct a screen - Angular

在前面的單元,我們已經完成了開發單一元件Task,也完成了複合元件 TaskList,也把 TaskList 拆分為容器型(TaskListComponent)...

鐵人賽 Modern Web DAY 21
玩轉 Storybook 系列 第 21

技術 玩轉 Storybook: Day 21 Wire in data - Angular & ngxs

Container and Presentational 官網的程式碼架構,會把元件分成二種類型-容器型(Container)及表現型(Presentation...

鐵人賽 Modern Web DAY 20
玩轉 Storybook 系列 第 20

技術 玩轉 Storybook: Day 20 Construct a screen - Vue

在前面的單元,我們已經完成了開發單一元件Task,也完成了複合元件 TaskList,也把 TaskList 拆分為容器型(TaskList.vue) 及 表現...

鐵人賽 Modern Web DAY 19
玩轉 Storybook 系列 第 19

技術 玩轉 Storybook: Day 19 Wire in data - Vue & Vuex

Container and Presentational 官網的程式碼架構,會把元件分成二種類型-容器型(Container)及表現型(Presentation...

鐵人賽 Modern Web DAY 18
玩轉 Storybook 系列 第 18

技術 玩轉 Storybook: Day 18 Automated Visual Testing

視覺回溯測試 做視覺回溯測試的目的是要檢查每次修改元件UI的變化,當專案越來越大時,或是接近上線時期,修改元件的部分,有時會影響到整個專案。人工去檢視一定會有疏...

鐵人賽 Modern Web DAY 17
玩轉 Storybook 系列 第 17

技術 玩轉 Storybook: Day 17 Unit Test with JEST

用 Storybook 搭配測試方法,從元件開發到完成整個專案,可以增加開發者的信心,不會擔心改A錯B的狀況發生,因為從邏輯面及UI面都能被完整的測試到。 單元...

鐵人賽 Modern Web DAY 16
玩轉 Storybook 系列 第 16

技術 玩轉 Storybook: Day 16 Addons - Viewport/Accessibility

Viewport https://storybook.js.org/docs/vue/essentials/viewport Viewport 也是預設安裝好的...

鐵人賽 Modern Web DAY 15
玩轉 Storybook 系列 第 15

技術 玩轉 Storybook: Day 15 Addons - Controls

Controls Addon 提供 Storybook 一個視覺化動態設定元件參數的方式,這樣就不需要寫程式重啟,也能發現元件的變化。 要使用 Control...

鐵人賽 Modern Web DAY 14
玩轉 Storybook 系列 第 14

技術 玩轉 Storybook: Day 14 Addons - Essential / Actions

Storybook的另一個主要的功能就是Addons 在使用Storybook做元件開發設計時搭配Addon功能更加強大 接下來就來好好體驗感受他的威力吧 寫在...

鐵人賽 Modern Web DAY 13
玩轉 Storybook 系列 第 13

技術 玩轉 Storybook: Day 13 Simple and Composite - Angular

在這個單元我們使用官網的教學搭配Angular的框架,STEP BY STEP的撰寫Component及Stories。(如果是使用Vue的讀者,可以跳過這個單...

鐵人賽 Modern Web DAY 12
玩轉 Storybook 系列 第 12

技術 玩轉 Storybook: Day 12 Composite component - Vue

接下來就來把Task元件組裝成TaskList吧 TaskList 可以把TaskList規劃成四種狀態 Default - 當 Task 都是 defu...

鐵人賽 Modern Web DAY 11
玩轉 Storybook 系列 第 11

技術 玩轉 Storybook: Day 11 Simple component - Vue

在這個單元我們使用官網的教學搭配Vue的框架,STEP BY STEP的撰寫Component及Stories。 Setup Vue Storybook 官網教...

鐵人賽 Modern Web DAY 10
玩轉 Storybook 系列 第 10

技術 玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components 修改一下Story檔案,對應於Component的Title名稱(default export區塊),就會發現Sidebar...

鐵人賽 Modern Web DAY 9
玩轉 Storybook 系列 第 9

技術 玩轉 Storybook: Day 09 Decorators

Decorators Decorator是一種設計模式,把要被裝飾的Story當做參數,傳入裝飾器中,Decorator可以幫Story加上額外的資訊,賦予給S...

鐵人賽 Modern Web DAY 8
玩轉 Storybook 系列 第 8

技術 玩轉 Storybook: Day 08 Parameters

Parameter Parameter 是用來定義Stories的靜態metadata(解釋資料的資料),Parameter能提供給不同的addon去做設定。...

鐵人賽 Modern Web DAY 7
玩轉 Storybook 系列 第 7

技術 玩轉 Storybook: Day 07 Write stories

Template & Args 同一個元件的多個story function,都會重複的指定相同的Template,可以拉出一個共用 template...

鐵人賽 Modern Web DAY 6
玩轉 Storybook 系列 第 6

技術 玩轉 Storybook: Day 06 Component Story Format

Story檔案放置位置 Component對應的Story檔案,通常會放置在Component檔案旁邊。Story只會用於開發時期,在Production的bu...

鐵人賽 Modern Web DAY 5
玩轉 Storybook 系列 第 5

技術 玩轉 Storybook: Day 05 CLI Options

以下列出,啟動或是建置 Storybook 時,有哪些可以使用的 CLI Options。 start-storybook 啟動 Storybook Usage...

鐵人賽 Modern Web DAY 4
玩轉 Storybook 系列 第 4

技術 玩轉 Storybook: Day 04 Configure

預設放置組態檔案的目錄 Storybook集中放置組態設定檔案的目錄預設是.storybook,若需要變更路徑及名稱,要在Storybook的CLI指令做設定。...

鐵人賽 Modern Web DAY 3
玩轉 Storybook 系列 第 3

技術 玩轉 Storybook: Day 03 專案結構

前情提要 從開始安裝到完成,檢查專案目錄下變更的檔案結構,會發現Storybook的安裝做了以下的步驟。 安裝需要的相依套件 在Package.json加上建...

鐵人賽 Modern Web DAY 2
玩轉 Storybook 系列 第 2

技術 玩轉 Storybook: Day 02 安裝

Install Storybook 安裝 Storybook 只需要在Terminal,切換到現有專案的根目錄後,簡單的執行一行指令 npx sb init...

鐵人賽 Modern Web DAY 1
玩轉 Storybook 系列 第 1

技術 玩轉 Storybook: Day 01 說明

Intro 想做這個主題是因為,在翻閱過去的鐵人賽,「單純」只討論 Storybook 的文章並不多,雖然它的基本觀念並不難理解。 若有更多人知道及理解這個好用...