Storybook: Component-level parameters not available in storySort

[zmdavis]

Describe the bug
Custom parameters defined on a Meta component in a story-less MDX docs file are not available when sorting stories.

To Reproduce
Given an mdx file with a Meta component such as:

<Meta title="Introduction" parameters={{ sortPriority: 100 }} />

the custom parameters are not available in preview.js, eg:

addParameters({
  options: {
    storySort:  (a, b) => {
      const componentA = a[1];
      const componentB = b[1];
      // Check for custom `sortPriority` attribute; higher priority gets sorted first
      if (componentA.parameters.sortPriority || componentB.parameters.sortPriority) {
        return (componentB.parameters.sortPriority || 0) - (componentA.parameters.sortPriority || 0);
      }
      // Otherwise sort by kind
      return componentA.kind.localeCompare(componentB.kind, { numeric: true });
    },
  }
}

Expected behavior
In 5.3.x, custom parameters defined on a Meta component in a story-less MDX docs file were available in storySort. I would expect this to still be true in 6.x, unless that was an unintended side effect. I confirmed that parameters defined on an MDX Story component are still available in storySort in 6.x.

System:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 13.8.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 75.0
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/addon-docs: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/addon-knobs: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/addon-storyshots: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/addons: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/react: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/source-loader: 6.0.0-beta.20 => 6.0.0-beta.20 
    @storybook/theming: 6.0.0-beta.20 => 6.0.0-beta.20

[shilman]

@tmeasday I bet this has something to do with the parameter denormalization -- any thoughts here? he's using a docs-only MDX page, which should still inherit the global parameters (but apparently is not)

@zmdavis do you have a public repro you can share?

[tmeasday]

Yeah, this make sense, we store stories w/ params normalized and we are sorting before denormalizing.

We could denormalize first in extract(). Although there is a version of extract that we call that explicitly doesn't denormalize, so I'm not sure what we would do there. I guess we'd just denormalize and then throw away the normalized params.

[zmdavis]

Unfortunately I do not have a public reproduction. Ultimately I was able to do what I wanted in a cleaner format anyways using the storySort config, eg:

    storySort: {
      order: ['Intro', 'Components', 'Tokens'],
      locales: 'en-US',
    },

[tmeasday]

I'm glad you figured out it out @zmdavis. I think the repro isn't necessary anyway as the reason it was happening is pretty clear.

[tmeasday]

@shilman do you think we should prioritizing fixing this for 6.0?

[shilman]

@tmeasday probably worth fixing, tho we need to think about perf and this whole thing is somewhat in flux anyway e.g. https://github.com/storybookjs/storybook/pull/11097

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.9 containing PR #11572 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

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

[jeremylenz]

I'm on 6.0.22 and I think I'm still seeing this issue:

// getting-started.stories.mdx

<Meta
  title="Introduction/Getting Started"
  parameters={{
    storyWeight: 10,
  }}
/>

// storySort function imported in preview.js

export const storySort = ([storyIdA, storyA], [storyIdB, storyB]) => {
  // do not sort stories from the same kind
  if (storyA.kind === storyB.kind) return 0;

  // use parameters.storyWeight
  console.log(storyA);
  if (storyA.parameters.storyWeight !== storyB.parameters.storyWeight) {
    return storyA.parameters.storyWeight - storyB.parameters.storyWeight;
  }

  // use alphabet
  return storyIdA.localeCompare(storyIdB, { numeric: true });
};

When I inspect any of the objects from that console.log, they don't have the storyWeight parameter.

[jeremylenz]

if it helps, I'm working on https://github.com/theforeman/foreman-js/pull/214 and the associated stories files are in https://github.com/theforeman/foreman/pull/7990

[shilman]

@tmeasday Can you take a look?

[tmeasday]

@jeremylenz you may have missed this in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#no-longer-pass-denormalized-parameters-to-storysort

[shilman]

@tmeasday LOL I missed that too! 🙈 Thanks for clarifying!!!

[jeremylenz]

@tmeasday indeed I did. Works great now. thanks! :smile: