青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

Storybook

storybook、なにもしていないのに急にFailed to fetch dynamically imported moduleって言われた が、結局キャッシュ消してリロードしたら解決した

Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_addon-interactions_preview.js?v=ca377e5c The file doe…

storybook 8 docsのオンオフ

storybook.js.org tags: ['autodocs'], でオンだけど、逆に特定コンポーネントだけではdocs生成オフにしたいことがある。(absoluteの要素とか…) tags: ['!autodocs'], これでいける。

【リンクメモ】Stotyrbook 白いコンポーネントの確認のため背景黒くする

https://storybook.js.org/docs/essentials/backgrounds import { WhiteButton } from './WhiteButton'; const meta: Meta<typeof WhiteButton> = { title: 'common/WhiteButton', component: WhiteButton, parameters: { backgrounds: { default: 'dark', }, }, };</typeof>

Storybookでdecolaterを使い、各Storyを共通のもので包む

storybook.js.org qiita.com decorators: [ Story => ( <div style={{ width: '216px' }}> <Story /> </div> ), ], これでこのコンポーネントのStoryは全てこのdivに包まれる。

Storybookの諸々の書き方まとめ

index.stories.tsx importする、Metaがいる import { Story, Meta } from '@storybook/react/types-6-0'; descriptionでStorybookの上の方にそのコンポーネントの説明が出る subComponent指定でこのStoryからそのコンポーネントも見れる export default { ti…