Background

I have a problem in Storybook docs where the order of union members is unpredictable. As far as I can tell, it's deterministic, but I just can't determine what it will be from build to build. A single commit of our code is consistent, but unrelated changes to our codebase can end up changing the order in which strings in a union are printed out in our prop tables. This is more than an annoyance because I have regression tests around the content of the documentation, and I can't lock onto it with a snapshot if the order keeps changing; it gives me false negatives all the time.

Summary of changes

I've added a shouldSortUnions configuration option that, when used in combination with shouldExtractValuesFromUnion will make sure the members are sorted in a consistent way (string sort order).

Fixes #302

Verification

I wrote unit tests, but I was unable to get the examples running due to some outdated dependencies. I did verify my changes in Storybook, however. See the screenshots below. In order to set the correct options for this library from the Storybook config, I had to extend the defaults like this:

import { typescript as typescriptPresets } from '@storybook/core-server/dist/presets/common-preset';

const config: StorybookConfig = {
  typescript: {
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      ...typescriptPresets().reactDocgenTypescriptOptions,
      shouldSortUnions: true,
    }
  },
  // ...other settings
};

export default config;

(See also storybookjs/storybook#26496 and specifically this comment.)

Before

After