Codemod: Handle react hooks better for CSF3

[shilman]

Is your feature request related to a problem? Please describe

Currently, the CSF 2-to-3 codemod would turn the following story:

export const Counter = (args) => {
  const [count, setCount]  = useState(0)
  return <Button {...args} label={count} onClick={setCount} />
}

Into:

export const Counter = {
  render: (args) => {
    const [count, setCount]  = useState(0)
    return <Button {...args} label={count} onClick={setCount} />
  },
}

This triggers a rules of hooks eslint error:

Describe the solution you'd like

Detect likely hooks (useX) and transform into:

export const Counter = {
  render: function Render (args) {
    const [count, setCount]  = useState(0)
    return <Button label={count} onClick={setCount} />
  },
}

Describe alternatives you've considered

Support Render alias:

export const Counter = {
  Render: (args) => {
    const [count, setCount]  = useState(0)
    return <Button {...args} label={count} onClick={setCount} />
  },
}

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[IanVS]

Just curious, why not add an alias? That seems to be one thing that people try to do when writing their own stories too, not just when converting from csf2 to csf3.

[tmeasday]

@shilman I think it'd probably make sense to alias Render => render. Would be easy to do I think. But we'd still have to figure out how to update the codemod.

[AntonNiklasson]

I just ran into this, and decided to disable the lint rule in *.stories.tsx as a temporary solution. I'm not sure what solution is best though, none of them seem ergonomic to me.

I agree the codemod should handle it better, but I'm probably going to run in to this again coding by hand.

{
  "files": ["**/*.stories.tsx"],
  "rules": {
    "react-hooks/rules-of-hooks": "off"
  }
}

[mctrafik]

What's the point of wrapping stories that only have a single FC into an object with a function that isn't a react component? Feels like storybook syntax is wrong here.

[shilman]

@mctrafik Storybook still supports older versions of CSF for precisely this reason, and will continue to support them in the foreseeable future.

[emlai]

^ Why support multiple syntaxes that work for different use cases, instead of supporting a single syntax that works for all use cases?