Storybookでhooksを使う

そもそもargsで渡せるならargsで渡すほうがいい。

できなくはないんやけど共通のコンポーネントを定義してuseEffectとかを動かしつつ、必要に応じてargsとかでその条件を変えたりみたいなのがしたいんよねー

useEffectとか副作用で勝手に変わる系をどうやってリクエストするか

renderで呼び出す

これはargsで渡す場合渡せない

何かやる方法ある？

decoratorで書く

argsも使えるのでこの方法が楽そう？

mswとかもここで呼び出せる

この中だとhooks呼び出せるので別にこれで問題ない。

使い方が合ってるかはわからないけど、別にこれで良さそうではある。

decoratorで渡す関数に引数を渡せばargsでは無理でもストーリーごとに状態変えるとかもできるからこれでやるのが良さそう。

ただこれdecoratorで呼び出したStoryに対してPropsを渡しても処理してくれないみたい。その場合はやっぱりrenderで書くしかないのかも。

Storyにパラメータを追加できる

type Story = StoryObj<typeof Component> & { param?: string; }

こうやってargsを増やすとかもできなくはない。

renderでargsを取得できるみたいやから、renderで呼び出すってところでもできなくはないのかも？

どうやって取得するねん？書いてないから忘れた。

ただそこに書くとhooks使えないんよね。

これルールで消せるんじゃなかったっけ？

childrenに要素をおきたい場合に使うみたいなイメージかな？

こんな感じでできる

code:js

render: args => {

const methods = useForm({

mode: 'onBlur',

defaultValues: {

},

})

return (

<FormProvider {...methods}>

<Button

{...args}

options={{

required: '必須です',

}}

/>

</FormProvider>

)

},

component: Button,

args: {

name: fieldName,

},