Vite で動く React コンポーネントプレビューツールの Ladle を試してみる
Ladle について
Ladle は公式で「Storybook の代替品みたいなもの」と言及されています。
要するに、React コンポーネントをプレビューするためのツールです。
通常、記述した React コンポーネントを閲覧するにはアプリケーションに組み組み込む必要がありますが、Ladle を使えばコンポーネント単位からプレビューできます。
Ladle は現在 React のみサポート、Vite でビルドしており、かなり軽量に動作します。その上、Zero Config で始めることができるため、かなり気楽に試せます。
Ladle 自体はまだ開発段階であり、Storybook のようにエコシステムが充実しているわけではありませんが、サクッとプレビューするには十分使えると思えるので、Tailwind CSS と組み合わせてプレビューシステムを構築するまでを解説します。
リポジトリとデモ
リポジトリ
※2023/7/22
リポジトリ更新しました。yarnからpnpmに変わっています。また、各パッケージのバージョンアップも行いました。
デモサイト
まずは最小構成
公式の紹介ではコマンドを 10 回も叩かずに試せます。
今回は実際の Vite で構築した React の環境を前提にします。
$ yarn create vite ladle-react --template react-ts
$ cd ladle-react
$ yarn
$ yarn add -D @ladle/react
$ touch src/Button.tsx
$ touch src/Button.stories.tsx
import React from 'react'
type ButtonProps = React.ComponentProps<'button'>
export const Button = (props: ButtonProps) => <button {...props} />
import { Button } from './Button'
export const Submit = () => <Button type={'submit'}>submit</Button>
export const Reset = () => <Button type={'reset'}>reset</Button>
コンポーネントを記述後は ladle serve でプレビューできます。Config の記述は一切なく動作します。
右側に作成したコンポーネントの一覧が表示されます。
Vite で動作しているため変更後の HMR も高速です。
# http://localhost:61000 にてプレビュー
$ yarn ladle serve
Props の型の記述のアイディアは下記を参考にしました。
Tailwind CSS を導入する
実際にはコンポーネントに対して何かしらの CSS を適応すると思います。今回は Tailwind CSS を導入します。
$ yarn add -D tailwindcss postcss autoprefixer
$ yarn tailwindcss init --types -p
@tailwind base;
@tailwind components;
@tailwind utilities;
/** @type {import('tailwindcss/types').Config} */
const config = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
module.exports = config
Tailwind CSS ではルートとなるコンポーネントで index.css を読み込む必要があります。
Ladle ではプレビューページ全体で読み込む必要があるファイルは .ladle/components.tsx に記述します。
$ mkdir .ladle
$ touch .ladle/components.tsx
import type { GlobalProvider } from '@ladle/react'
import '../src/index.css'
export const Provider: GlobalProvider = ({ children, globalState }) => (
<>{children}</>
)
変更を読み込むために再度 yarn ladle serve で起動します。
これで Tailwind CSS が有効になったのでスタイルを指定します。
import { Button } from './Button'
export const Submit = () => (
<Button
className="font-sans bg-blue-600 text-white text-xl rounded-full p-2 w-full"
type={'submit'}
>
submit
</Button>
)
export const Reset = () => (
<Button
className="font-sans bg-red-600 text-white text-xl rounded-full p-2 w-full"
type={'reset'}
>
reset
</Button>
)
スタイルが適応されているのが確認できます。
引数を変えてプレビューできるようにする
現状だとプレビューするたびにコードの変更になります。Storybook と同様にブラウザ上で操作して設定値を変えられるようにします。
使い方としては Ladle の type Story にコンポーネントが受け取る引数の型をジェネリクスの引数として与え、 Component.args と Component.argTypes を必要に応じて設定します。
import type { Story } from '@ladle/react'
import { Button } from './Button'
type ButtonParameter = {
label: string
size?: 'small' | 'medium' | 'large'
disabled?: boolean
}
export const Submit: Story<ButtonParameter> = ({
label,
size = 'medium',
disabled = false,
}: ButtonParameter) => (
<Button
className={`${disabled ? `bg-gray-600` : `bg-blue-600 hover:bg-blue-700`} ${
size === 'small'
? `px-2 py-1 text-sm`
: size === 'medium'
? `px-3 py-2 text-base`
: `px-6 py-3 text-xl`
}
font-sans text-white rounded-full w-full`}
type={'submit'}
disabled={disabled}
>
{label}
</Button>
)
Submit.args = {
label: 'Submit',
disabled: false,
size: 'medium',
}
Submit.argTypes = {
size: {
control: { type: 'radio' },
defaultValue: 'medium',
options: ['small', 'medium', 'large'],
},
}
これで Ladle 画面左下のパラメータ項目から設定値を変えてプレビューできるようになりました。
Ladle を静的サイトとしてビルド
Ladle をビルドして静的なサイトとして構築することもできます。
Ladle は Vite の Config を参照します。Vite は PostCSS については postcss.config.js があればそれを自動的に読み込みます。そのため追加の設定は不要です。
ビルドも Vite 経由で行われるためかなり早いです。
$ yarn ladle build
...
Creating meta.json file...
meta.json file created.
✨ Done in 2.45s.
静的ビルドしたものは build ディレクトリに保存されます。
まとめ
ざっくりと需要が高そうなところを優先にまとめました。
デザインシステムとはいかなくても、「Tailwind CSS でこう書いた場合はどのように表示されるっけ?」ぐらいの確認には十分使えると思います。
今回のサンプルを書くにあたって本当に Ladle の設定ファイルは追加していません。そのため、かなり気楽に試せました。
その他のオプションや Config は公式ドキュメントを参考にしてください。
注意点としては MDX は現状まだサポートされていないとのことです。ただ、ロードマップには存在するため近々実装されるかもしれません。
Discussion