Histoireを使ってSvelteコンポーネントを管理しよう

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© 2022 Ateam Inc. 7 ● Histoire(イストワール)はフランス語で「物語」を意味する言葉で、StoryBookのようにUIコンポーネントのカタログを作成するためのツールです。 ● 特徴 ○ Viteにネイティブ対応 ○ .svelteや.vueでStoryが書ける ○ Tailwind CSSのデザイントークンを自動生成 ○ ビジュアルリグレッションテスト ○ テーマをカスタマイズ可能 etc… Histoireとは

Slide 8

Slide 8 text

© 2022 Ateam Inc. 8 ● vite.config.jsにhistoireプロパティとして記述できます。 ● histoire.config.jsという名前で別のファイルに切り出すこともできます。 Viteにネイティブ対応 import { defineConfig } from 'histoire'; import { HstSvelte } from '@histoire/plugin-svelte'; export default defineConfig({ plugins: [HstSvelte()] }); histoire.config.js

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 2022 Ateam Inc. 17 ● logEvent関数を使用することでコンポーネントから発火するイベントを取得することができます。 ● 第 1 引数はイベント名、第 2 引数はイベントにより発生したデータを指定します。イベント import { logEvent } from 'histoire/client' import Button from './Button.svelte'; export let Hst; logEvent('click', event)}> Click me! Button.story.svelte

Slide 18

Slide 18 text

Slide 19

Slide 19 text

© 2022 Ateam Inc. 19 ● ドキュメントをStoryに追加するには.story.mdファイルを作成します。ドキュメント # Button ## Example ```svelte Click me! ``` ## Props | Name | Type | Default | Description | | -------- | ---------------------------- | --------- | ------------------------------ | | size | 'small' 'medium' 'large' | 'medium' | The size of the button | | disabled | boolean | false | Whether the button is disabled | Button.story.md

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

© 2022 Ateam Inc. 23 ● Tailwind CSSをStory上で使えるようにするには少し設定が必要です。 Tailwind CSSをStoryに適用させる @tailwind base; @tailwind components; @tailwind utilities; tailwind.css import './tailwind.css' /src/histoire.setup.ts import { defineConfig } from 'histoire'; import { HstSvelte } from '@histoire/plugin-svelte'; export default defineConfig({ plugins: [HstSvelte()], setupFile: '/src/histoire.setup.ts' }); histoire.config.js

Slide 24

Slide 24 text

© 2022 Ateam Inc. 24 ● 公式プラグインの@histoire/plugin-screenshotを使ってスクリーンショットを撮影してビジュアルリグレッションテストを実施することができます。 ● ビルドコマンドで実行でき、スクリーンショットは.histoire/screenshots に保存されます。ビジュアルリグレッションテスト $ npm i -D @histoire/plugin-screenshot import { defineConfig } from 'histoire'; import { HstSvelte } from '@histoire/plugin-svelte'; import { HstScreenshot } from '@histoire/plugin-screenshot'; export default defineConfig({ plugins: [HstSvelte(), HstScreenshot()], setupFile: '/src/histoire.setup.ts' }); histoire.config.js

Slide 25

Slide 25 text

© 2022 Ateam Inc. 25 ● Histoireはブランドのガイドライン等に合わせてカスタマイズすることが可能です。テーマをカスタマイズ可能 export default defineConfig({ theme: { title: 'Ateam Inc.', logo: { square: './image/logo_square.png', light: './image/logo_light.png', dark: './image/logo_dark.png' }, logoHref: 'https://www.a-tm.co.jp/', favicon: './image/favicon.png', colors: { gray: defaultColors.zinc, primary: defaultColors.rose } } }); histoire.config.js

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

© 2022 Ateam Inc. 28 ● Histoireを一通り使ってみましたが、UIコンポーネント管理ツールとしては最低限機能も揃ってますし、.svelteでStoryが書けるというのはすごく魅力的に感じました。ただ、発展途上なツールなので不具合もありますし、SvelteKitのアップデートにより、動かなくなることもありました。 Svelteコアチームの方がHisoireのリポジトリのほうでフォローしていたりして都度、修正もしているので後々安定してくると思います。 StoryBookと比べてしまうと、足りない機能はたくさんありますが、StoryBookほど機能はいらないし、コンポーネントカタログとして使えればいいという需要であればHistoireは選択肢としていいのではないかなと思います。 StoryBook7でSvelteKitの完全サポートも予定されているようなので StoryBookも注目していきたいです！最後に

Slide 29

Slide 29 text

No content