Addon-docs: Props component should accept a sort function.

[patricklafrance]

Is your feature request related to a problem? Please describe.
IMO for a user, this is easier to find a specific property in the props table if the props are sort. I believe this is still best to keep the declaration order by default but the component should allow a way to provide sorting.

Describe the solution you'd like
The <Props /> component could accept a sort function, something similar to sort function for the nav.

Otherwise, maybe it could be a string prop accepting 2 values asc and desc.

Material UI props are sort ascending (https://material-ui.com/api/form-control/):

Same thing with Semantic UI (https://react.semantic-ui.com/elements/button/):

┆Issue is synchronized with this Asana task by Unito

[stale]

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!

[meyerds]

I'd like to see this option too. This bug is affecting me, but I'm in a Typescript codebase, so the bugfix on that issue didn't have any effect. A sort prop on the Props component seems like the best way to make everybody happy.

[mattcorner]

Would also like a sort function. Currently the input args to my first story seem to be overriding the order of the props, such that if props "C" and "D" are input to the first story, the props table order is "C", "D", "A", "B" even if they were defined alphabetically.

[Vadorequest]

Could the default be changed until this is done?

Basically, split all props in 2, those enabled and those disabled, and sort alphabetically each group, so that disabled props always appear at the bottom and not at the top (they currently appear at the top when we disable them on a component/story level).

[chadlavi-casebook]

Any updates on this or anyone know a sneaky workaround for TypeScript users?

It's maddening that the props are in a seemingly random order. For components that have dozens of props this ends up making it quite difficult to find the one you want.

[shilman]

There's an open PR for this and I'll try to get it merged before 6.2 is released #13125

[shilman]

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-beta.15 containing PR #13125 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[pybuche]

@shilman Thanks for this awesome feature! I'm just wondering: it doesn't seem to work on the ArgsTable, only on the controls panels, am I right? Is there a way to make it work in the docs blocks?

[shaneajeffery]

Just in case someone reaches this PR and is confused on how to implement the solution that @shilman implemented, look at: https://storybook.js.org/docs/react/essentials/controls#sorting-controls

It is just an update to the story parameters for each story or you an add it as a global parameter like I did in the preview.js:

export const parameters = {
  ...
  controls: { sort: 'requiredFirst' },
}

Documentation for global parameters: https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters

This solution should work for both your Canvas controls and for your Args Table. It works for both of mine with this change.

[nicollecastrog]

First of all, thanks for your solution @shilman! 😍 requiredFirst is already SO much better than the seemingly random order the props were displaying in before.

However, I was wondering if you (or anyone else) knows of a way to set an actual sort function for the props? I know you can do this for the order of the Stories themselves (parameters.options.storySort) and was hoping for a similar param for the order of the props as I have an unusual use-case.

For context: my component is a superset of a MUI component, so it has LOADS of props, but I want to highlight certain important props at the top of my Docs ArgsTable, some of which are required, some of which are optional but that are nonetheless more important to know about than the other slew of 40+ props. So I want to implement a custom prop sorting function to achieve this.

Any help is appreciated 🙏

[IndProgo]

This change would help

storybook/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

Line 288 in 421b066

const sortFn = sortFns[sort];

-  const sortFn = sortFns[sort];
+  const sortFn = typeof sort === "function" ? sort : sortFns[sort];

Then in preview.js I can make my custom sort function, in addition to requiredFirst

const SORT_PROPTYPES_FUNC = (a, b) => Number(!!b.type?.required) - Number(!!a.type?.required)
    || Number(a.description.includes('custom')) - Number(b.description.includes('custom'))
    || a.name.localeCompare(b.name)

const parameters = {
    controls: {
        sort: SORT_PROPTYPES_FUNC,
    },
    docs: {
        controls: {
            sort: SORT_PROPTYPES_FUNC,
        },
    }
}

To temporarely modify source file, I put pre- script in packages.json which would update node_modules file before building storybook

For example:

{
  "scripts: {
    "predev-storybook": "node _utils/node-replacer.js",
  }
}

node-replacer.js

const fs = require('fs')
const { resolve } = require('path')
const nodemodulesfile = resolve(__dirname, '../node_modules/@storybook/blocks/dist/index.mjs')

fs.readFile(nodemodulesfile, 'utf8', function (err, data) {
    if (err) {
        return console.error(err);
    }

    // Allow custom sort function for ArgTables canvas and docs
    const result = data
        .replace('let sortFn=sortFns[sort],', 'let sortFn=typeof sort==="function"?sort:sortFns[sort],')

    if (result !== data) {
        fs.writeFile(nodemodulesfile, result, 'utf8', function (err) {
            if (err) return console.error(err);
        });
    }
});

[wesleymostien]

sorting controls in every component by setting it globally in preview file is not working for me:

const preview = {
  parameters: {
    controls: {
      sort: 'alpha',
    },
...

export default preview;

[PVUL]

@wesleymostien try:

const preview = {
  parameters: {
    docs: {
      controls: {
        sort: 'alpha',
      },
...

export default preview;

[wesleymostien]

@wesleymostien try:

const preview = {
  parameters: {
    docs: {
      controls: {
        sort: 'alpha',
      },
...

export default preview;

that works like a charm, thanks for the tip @PVUL

[Shinigami92]

This change would help

storybook/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx

Line 288 in 421b066

const sortFn = sortFns[sort];

-  const sortFn = sortFns[sort];
+  const sortFn = typeof sort === "function" ? sort : sortFns[sort];

Then in preview.js I can make my custom sort function, in addition to requiredFirst

const SORT_PROPTYPES_FUNC = (a, b) => Number(!!b.type?.required) - Number(!!a.type?.required)
    || Number(a.description.includes('custom')) - Number(b.description.includes('custom'))
    || a.name.localeCompare(b.name)

const parameters = {
    controls: {
        sort: SORT_PROPTYPES_FUNC,
    },
    docs: {
        controls: {
            sort: SORT_PROPTYPES_FUNC,
        },
    }
}

To temporarely modify source file, I put pre- script in packages.json which would update node_modules file before building storybook

For example:

{
  "scripts: {
    "predev-storybook": "node _utils/node-replacer.js",
  }
}

node-replacer.js

const fs = require('fs')
const { resolve } = require('path')
const nodemodulesfile = resolve(__dirname, '../node_modules/@storybook/blocks/dist/index.mjs')

fs.readFile(nodemodulesfile, 'utf8', function (err, data) {
    if (err) {
        return console.error(err);
    }

    // Allow custom sort function for ArgTables canvas and docs
    const result = data
        .replace('let sortFn=sortFns[sort],', 'let sortFn=typeof sort==="function"?sort:sortFns[sort],')

    if (result !== data) {
        fs.writeFile(nodemodulesfile, result, 'utf8', function (err) {
            if (err) return console.error(err);
        });
    }
});

The new location seems to be here:

storybook/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx

Line 257 in a997fa1

const sortFn = sortFns[sort];

Could someone provide a PR?