Storybook does not resolve paths from TS config

[dhruvkb]

Description

The TypeScript config file tsconfig.json defines paths as follows:

"paths": {
  "@mathesar/*": ["src/*"],
  "@mathesar-components-dir/*": ["src/components/*"],
  "@mathesar-components/types": ["src/components/types.d.ts"],
  "@mathesar-components": ["src/components/index.ts"]
}

which allows us to import using a much cleaner syntax:

import { portal } from '@mathesar-components';

These paths are not resolved by Storybook and thus stories written for components that use such imports do not compile.

Expected behavior

Storybook should use the same TS config and resolve paths.

To Reproduce

0. Add the .svelte extension to src/components/modal/__meta__/Modal.stories.
1. Run Storybook.

Additional context

Aliases set at the bundler level can be configured for Storybook using the webpackFinal field or viteFinal field in main.js but since these paths are set at the TypeScript level instead, I'm not sure what needs to be done.

[pavish]

We do have paths at each level (at TS, vite and jest levels). Currently we read it only from TS config, convert to respective formats while using them at the various levels. This ensures that we have a single source of truth.

We have to follow the same approach for Storybook. I would recommend going with the webpackFinal field, as it is the native bundler used by storybook.