UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

Storybook

【Jest】StorybookのStoryを再利用してテストする

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

【Figma】ChromaticのStorybookと連携する

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

【Storybook】Controlsの設定

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

【Storybook】Atomic DesignとStorybook

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

【Storybook】publicなassetsをStorybookで使いたい

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

【Storybook】play関数とReduxを使ったコンポーネントの組み合わせ

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

【Storybook】CSF3.0

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

【Design System】Storybookのデザインシステム

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

【Storybook】scroll barを消す

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

【Storybook】バージョンを6.3.4にアップしたらnpm ERR! Maximum call stack size exceededが発生した

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

【Cypress】Storybookのフルスクリーンをとる

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

【Next.js】Storybookを導入する

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 へのバージョンアップ時に"Cannot read property 'fonts' of undefined"がでる

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

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

【Storybook】GoogleMapAPIキーが必要なページ

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>

【E2E】StorybookとCypressについて

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

【Storybook】v5.2.xからv6に更新してみた

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

【Storybook】vuexを導入する

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 …