Storybook8のベータ版のアナウンスがでた storybook.js.org 更新内容 大幅なパフォーマンスの向上 ビジュアルテストワークフロー 洗練されたモバイル UI テストユーティリティの改善 ⚛️ React Server Componentのサポート React の依存関係の削除 エコ…

Storybookのvupを行いたい 5.3.19 → 6.5.12 以前に試みたことがあったがエラーが発生して、時間切れで断念していた しかし、v6.4からできるようになったplay関数とtesting-libraryの連携をやる必要性が出てきたので再びvupに挑戦することにした とりあえず、…

StorybookのStoryをJestに取り込んでコンポーネントのテストをしたい このとき、必要なライブラリは以下だとわかった @testing-library/react @storybook/testing-react @testing-library/jest-dom @testing-library/reactはReactの仮想DOMを操作するのに必…

前々から気になっていたFigmaのStorybookと連携できるプラグインを試してみる www.figma.com これをやるにはChromaticにStorybookがパブリックにホスティングされている必要がある やり方は以下にまとめた uga-box.hatenablog.com これをみてやってみる www.…

StorybookをvupしてからControlsを使ってなかったので設定してみる storybook.js.org Controlsは設定するだけでコンポーネントの引数を動的に操作するためのGUIが提供される 基本的に何も設定しなくても引数の型を解析してGUIをつくってくれるが たとえば、…

Atomic Designの作者のBrad氏のブログでAtomic DesignとStorybookについて語られていた bradfrost.com これまでAtomic Designはデザインをする上でのメンタルモデルでしかなく、CSS設計などの実装については言及していないとBrad氏自身が言っていたが、それ…

Reactアプリケーション内でSVGアイコンを以下のようによびだしている <svg> <use href="/public/sprite.svg#icon-star" /> </svg> ただ、このままだとStorybookで表示できないことに気づいたので対処方法を調べた Storybookのpublicなassetsを表示する方法は以下にあった storybook.js.org // .storybook/main.js mo…

Storybook6.4リリースに伴いplay関数と@testing-library/user-eventで インタラクションの定義を試そうとしたところ、そのコンポーネントがReduxのstoreの値を使うためProviderを利用する必要があるのだが、testing-reactのexampleを探してもplay関数と仮想D…

StorybookのCSF（Component Story Format）3.0についての記事がでた storybook.js.org 記事を単に読むだけだと、Storyの書き方が関数からオブジェクトになってより短いコードになったよ（あとインタラクションのテストもできるようになった）と読めてしまっ…

自分の中ではデザインシステムを管理するツールにStorybookはマストになっているが、そのStorybookコミュニティが使っているデザインシステムが公開されていたのでみてみた ちなみに実際使用しているのはStorybookコミュニティが運営する以下の３サイト Stor…

Storybookを使っていてView Portをスマホ用にしたときに右端にスクロールバーが表示される これを消したい 消し方はこちらの記事にまとめられていたので、これを参考にした www.yoheim.net Chromeでは-webkit-scrollbarをつければよいことがわかったので、あ…

根本解決してないが、調査したことのメモ ある施策を実装したと、CloudBuildでビルド中に失敗した 原因はnpm install中に以下のエラーが発生してとまっていた npm ERR! Maximum call stack size exceeded 調べると記事はいろいろでてきて、npmのキャッシュが…

CypressでStorybookのcavasに表示されているページのフルスクリーンのキャプチャを撮りたい しかし、このページのURLでは左にコンポーネントツリーが見えているし、下までスクロールすることができない ちょっと調べた結果、左上のアイコンを押すとcanvasだ…

Storybook(v6.1.7)を導入する storybook.js.org 公式にあるコマンドを実行 $ npx sb init 実行すると以下のソースが生成される .storybook ├── main.js └── preview.js src/stories ├── Button.stories.tsx ├── Button.tsx ├── Header.stories.tsx ├── Heade…

Storybookを5.3から6.0にあげて、立ち上げようとしたときに以下のエラーが発生した Uncaught TypeError: Cannot read property 'fonts' of undefined 同様のトラブルがissueに上がっていて github.com 原因は不明だが、最終的にnode_modulesを消してインスト…

Storybookを更新したら以下のエラーがコンソールにでていた Error: Illegal mix of CSF default export and storiesOf calls in a single file CSF（Component Story Format）とはStorybookの新しいフォーマットのこと これまでのフォーマット storiesOf('at…

StorybookでGoogleMapを表示しているページのプレビューを行いたい ReactプロジェクトでGoogleMapを表示している uga-box.hatenablog.com <GoogleMapReact bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }} defaultCenter={this.props.center} defaultZoom={this.props.zoom} > このときの/* YOUR KEY HERE */は実際は__GOOGLE_MAP_API_KEY__という変数を使っている この変数はWebpackのDe…</googlemapreact>

Web UI の自動テストツールいわゆるE2Eテストツールの一つにCypressというのがあることを知った Storybookを活用したテストを考えていて、StorybookとJestやPuppeteerをつかったe2eテストは聞いたことがあるが、StorybookとCypressはあまり聞いたことがなか…

Storybookを5.2.xを使っているが、現在は6系があるようなので無邪気にバージョンアップしてみた $ npx sb upgrade エラーが発生したので解いていく 発生したエラー Core-JS dependency errors Module not found: Error: Can't resolve 'core-js/modules/web.…

Storybook for Vue を利用している https://storybook.js.org/docs/guides/guide-vue/ このstorybookにvuexを導入したい 導入方法 ドキュメントより preview.js import { configure } from '@storybook/vue'; import Vue from 'vue'; // Import Vue plugins …