Storybookのアドオン
date
Jan 1, 2023
repo_url
slug
storybook-addon
status
Published
summary
type
Post
thumbnail_url
tags
storybook
outer_link
Storybookではアドオンを追加することで機能を拡張できます。
ControlsやActionsは@storybook/addon-essentialsに含まれているアドオンです。
npx sb initで初期化した場合、@storybook/addon-essentialsは既にインストールされているため、これらのアドオンを最初から使用できます。
新たにStorybookにアドオンを追加するには、パッケージをインストールし、.storybook/main.jsのオブジェクトのaddonにアドオンを指定します。
module.exports = {
stories: [
'../stories/**/*.stories.mdx',
'../stories/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
//必要に応じてインストールしたアドオンをここに追加する
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: '@storybook/react',
core: {
builder: '@storybook/builder-webpack5',
},
};@storybook/addon-essentials
@storybook/essentialsではいくつかの機能を提供しています。
Docsはストーリー上でドキュメントを表示する機能です。
メタデータの元にドキュメントを自動生成して表示します。また、mdxファイルを別途定義して、その内容を追加できます。
その場合はmdxファイルをインポートして、メタデータのparameters以下に追加します。
Next.jsで.mdxファイルを使用する設定
mdx is 何
MDX はマークダウンファイルに JSX を直接記述できるマークダウンのスーパーセットです。これは、動的な対話機能を追加し、コンテンツにコンポーネントを埋め込む強力な方法であり、ページに命を吹き込むのに役立ちます。
VSCode拡張機能「MDX」
デフォルトだとVSCodeで
.mdx ファイルを認識してくれない（シンタックスハイライトされない）ので、「MDX」という拡張機能を入れておく。