[Bug]: Types are missing/unavailable for options.storySort

[kaiyoma]

Describe the bug

Even if I apply the Preview type (from @storybook/react), TypeScript doesn't know the types of the arguments to storySort:

preview.ts:33:17 - error TS7006: Parameter 'a' implicitly has an 'any' type.

33     storySort: (a, b) => {
                   ~

preview.ts:33:20 - error TS7006: Parameter 'b' implicitly has an 'any' type.

33     storySort: (a, b) => {
                      ~

The migration guide says that these arguments are of type StoryIndexEntry, but I can't find this type in the Storybook packages. I shouldn't even need to, because storySort should already have the correct types assigned to it.

To Reproduce

import type { Preview } from '@storybook/react';

export default <Preview>{
  options: {
    storySort: (a, b) => {
      return a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
    },
  },
};

System

Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 16.19.1 - C:\Program Files\Node.js\node.EXE
    npm: 9.6.2 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.50)
  npmPackages:
    @storybook/addon-actions: 7.0.17 => 7.0.17
    @storybook/addon-controls: 7.0.17 => 7.0.17
    @storybook/addon-docs: 7.0.17 => 7.0.17
    @storybook/addons: 7.0.17 => 7.0.17
    @storybook/api: 7.0.17 => 7.0.17
    @storybook/components: 7.0.17 => 7.0.17
    @storybook/core-events: 7.0.17 => 7.0.17
    @storybook/react: 7.0.17 => 7.0.17
    @storybook/react-vite: 7.0.17 => 7.0.17
    @storybook/theming: 7.0.17 => 7.0.17

Additional context

No response

[shilman]

We should fix that. There are types for that here: https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/csf.ts#L67-L71

I'm not sure what work is required to hook that up across all the different renderers. @kasperpeulen thoughts?

[kaiyoma]

Another issue here. If I add types manually, like this:

    options: {
      storySort: (a: StoryIndexEntry, b: StoryIndexEntry): number => {
        return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
      },
    },

and then try to build Storybook, it bails with a parsing error:

WARN 🚨 SyntaxError: Unexpected token ':'
ERR! SyntaxError: Unexpected token ':'
ERR!     at eval (<anonymous>)
ERR!     at getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+csf-tools@7.1.0-alpha.41\node_modules\@storybook\csf-tools\dist\index.js:28:1772)
ERR!     at StoryIndexGenerator.getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:5850)
ERR!     at async StoryIndexGenerator.sortStories (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3060)
ERR!     at async StoryIndexGenerator.getIndex (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3920)
ERR!     at async extractStoriesJson (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:57:4535)
ERR!     at async Promise.all (index 3)
ERR!     at async buildStaticStandalone (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:109:1799)
ERR!     at async withTelemetry (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:113:3620)
ERR!     at async build (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+cli@7.1.0-alpha.41\node_modules\@storybook\cli\dist\generate.js:435:1059)
ERR!  SyntaxError: Unexpected token ':'
ERR!     at eval (<anonymous>)
ERR!     at getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+csf-tools@7.1.0-alpha.41\node_modules\@storybook\csf-tools\dist\index.js:28:1772)
ERR!     at StoryIndexGenerator.getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:5850)
ERR!     at async StoryIndexGenerator.sortStories (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3060)
ERR!     at async StoryIndexGenerator.getIndex (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3920)
ERR!     at async extractStoriesJson (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:57:4535)
ERR!     at async Promise.all (index 3)
ERR!     at async buildStaticStandalone (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:109:1799)
ERR!     at async withTelemetry (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:113:3620)
ERR!     at async build (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+cli@7.1.0-alpha.41\node_modules\@storybook\cli\dist\generate.js:435:1059)
WARN 🚨 SyntaxError: Unexpected token ':'

[kdssoftware]

Another issue here. If I add types manually, like this:

    options: {
      storySort: (a: StoryIndexEntry, b: StoryIndexEntry): number => {
        return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
      },
    },

and then try to build Storybook, it bails with a parsing error:

WARN 🚨 SyntaxError: Unexpected token ':'
ERR! SyntaxError: Unexpected token ':'
ERR!     at eval (<anonymous>)
ERR!     at getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+csf-tools@7.1.0-alpha.41\node_modules\@storybook\csf-tools\dist\index.js:28:1772)
ERR!     at StoryIndexGenerator.getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:5850)
ERR!     at async StoryIndexGenerator.sortStories (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3060)
ERR!     at async StoryIndexGenerator.getIndex (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3920)
ERR!     at async extractStoriesJson (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:57:4535)
ERR!     at async Promise.all (index 3)
ERR!     at async buildStaticStandalone (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:109:1799)
ERR!     at async withTelemetry (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:113:3620)
ERR!     at async build (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+cli@7.1.0-alpha.41\node_modules\@storybook\cli\dist\generate.js:435:1059)
ERR!  SyntaxError: Unexpected token ':'
ERR!     at eval (<anonymous>)
ERR!     at getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+csf-tools@7.1.0-alpha.41\node_modules\@storybook\csf-tools\dist\index.js:28:1772)
ERR!     at StoryIndexGenerator.getStorySortParameter (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:5850)
ERR!     at async StoryIndexGenerator.sortStories (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3060)
ERR!     at async StoryIndexGenerator.getIndex (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:65:3920)
ERR!     at async extractStoriesJson (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:57:4535)
ERR!     at async Promise.all (index 3)
ERR!     at async buildStaticStandalone (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:109:1799)
ERR!     at async withTelemetry (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+core-server@7.1.0-alpha.41\node_modules\@storybook\core-server\dist\index.js:113:3620)
ERR!     at async build (C:\Users\kgetz\Work\event-viewer\node_modules\.pnpm\@storybook+cli@7.1.0-alpha.41\node_modules\@storybook\cli\dist\generate.js:435:1059)
WARN 🚨 SyntaxError: Unexpected token ':'

You can't add types according to the docs https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories
// Theaandbarguments in this function have a type ofimport('@storybook/types').IndexEntry. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it.

Using ts-ignore removes Typescript warning.

        // @ts-ignore
        storySort: (a, b) => //...

Works for me this way.