Storybook: csf-hoist-story-annotations codemod doesn't work when default exporting a named value

Created on 11 Aug 2020 · 5Comments · Source: storybookjs/storybook

Describe the bug
The csf-hoist-story-annotations codemod does not work when doing export default <identifier>, instead of export default {...}.

To Reproduce
Steps to reproduce the behavior:

Create a story my.story.tsx with the following content:
```ts
type ExportType = {
title: string
}
const info: ExportType = { title: "my story" }
export default info

export const story = () =>

story.story = { parameters: { foo: "bar" } }
```

Run the codemod: ./node_modules/.bin/sb migrate csf-hoist-story-annotations --glob="my.story.tsx* --parser tsx
Observe error:
ERR my.story.tsx Transformation error (Cannot read property 'map' of undefined) TypeError: Cannot read property 'map' of undefined at /path/node_modules/@storybook/codemod/dist/transforms/csf-hoist-story-annotations.js:51:45 at Array.filter (<anonymous>) at Collection.filter (/path/node_modules/@storybook/codemod/node_modules/jscodeshift/src/Collection.js:64:46) at transformer (/path/node_modules/@storybook/codemod/dist/transforms/csf-hoist-story-annotations.js:49:70)

Expected behavior
I'd expect the codemod to be applied, transforming my story to this:
ts export const story = () => <div/> story.parameters = {foo: "bar"}

System:

❯ npx -p @storybook/cli@next sb info

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
  Binaries:
    Node: 14.7.0 - /usr/bin/node
    Yarn: 1.19.1 - /usr/bin/yarn
    npm: 6.14.7 - /usr/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Firefox: 79.0
  npmPackages:
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-essentials: ^6.0.1 => 6.0.1 
    @storybook/addon-knobs: ^6.0.1 => 6.0.1 
    @storybook/addon-links: ^6.0.1 => 6.0.1 
    @storybook/addon-storyshots: ^6.0.1 => 6.0.1 
    @storybook/addon-storysource: ^6.0.1 => 6.0.1 
    @storybook/cli: ^6.0.1 => 6.0.1 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.1 => 6.0.1 
    @storybook/source-loader: ^6.0.1 => 6.0.1

Workaround
A workaround to this is to replace my default export with export default {title: "my story" }. This is bad for a couple of reasons:

I have a lot of stories, which defeat the purpose of a codemod in the first place
The type I apply to my default exports is more complex, which helps me make sure I remember to apply everything I need

bug cli tracked

Source

torkelrogstad

All 5 comments

Also, would it make sense to do one more thing in the codemod, turning my story into this: export const story = (args) => <div {...args}/>?

torkelrogstad on 11 Aug 2020

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.2 containing PR #11895 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

shilman on 11 Aug 2020

🎉1

@torkelrogstad Would accept a PR for a new codemod that tries to convert a story to an args story, if you're interested in contributing it, tho I'm skeptical about how easy it is to automate this in a useful way.

shilman on 11 Aug 2020

👍1

This does not seem to work. The codemod doesn't throw anymore, but it doesn't apply any changes either. I found a workaround by skipping the defaultExprtWithTitle.size() === 0, as all my glob matches were files I wanted to transform.

torkelrogstad on 12 Aug 2020

@torkelrogstad correct, the codemod does not support variables. it just doesn't crash if you use them.

shilman on 12 Aug 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings