Incorrect stories order on Storybook

Question

I am using Storybook v8.4.2 (just updated to the latest version). I am trying to sort my stories so they come in this order:

1. COMPONENTS
    - inside each story inside the Components folder the "Docs" should be the last element
2. TOKENS
3. PAGES

To do this, on my preview.js file i am exporting the following parameters:

    {
        // actions: { argTypesRegex: "^on[A-Z].*" },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/,
            },
            expanded: true,
        },
        /* Sort stories in correct order. Components children are sorted so "Docs" is always the last element */
        options: {
            storySort: {
                method: 'alphabetical',
                includeNames: true,
                order: [
                    'COMPONENTS',
                    ["*", ["*", "Docs"]],
                    'TOKENS',
                    'PAGES',
                ],
            },
            // Select which addon panel is selected by default
            selectedPanel: 'storybook/controls/panel'
        }
    }

On my Stories, the title looks something like title: 'COMPONENTS/Test'

When i open Storybook i am still getting the stories in this order:

1. TOKENS
2. COMPONENTS
3. PAGES

Any idea what i am doing incorrectly?

Answer 1

I think i have found the problem. I had separated the parameters into a new file to keep the preview.js clean.

In the preview.js file i was then importing it (import { parametersConfig } from './config/parametersConfig') and exporting it (export const parameters = parametersConfig;).

For some reason this does not work! Maybe some kind of timing problem. I think Storybook expects the parameters to be exported immediately without waiting for any imports...

Anyway, my solution was to move the parameters object back to the preview.js file