Props are not resolved as expected in props table with typescript

[kruthivijay31]

Describe the bug
Version: SB 5.3.18
index.tsx

type TooltipProps = {
   position?: 'left' | 'right' // Not getting resolved instead shows union
}

Current Output

main.js

const path = require('path')

module.exports = {
  stories: ['../packages/**/*.story.mdx', '../packages/**/*.stories.tsx'],
  addons: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, '../tsconfig.json'),
        },
        transpileManager: true,
      },
    },
    {
      name: '@paypalcorp/storybook-preset',
      options: {
        parser: 'typescript'
      },
    },
    '@storybook/addon-viewport/register'
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader', // compiles Less to CSS
          options: {
            paths: [path.resolve(__dirname, '../node_modules')],
          },
        },
      ],
    })
    config.resolve.extensions.push('.ts', '.tsx')
    return config
  },
}

Expected behavior

position: 'left' | 'right'

Similar to the image in this docs https://github.com/storybookjs/storybook/blob/next/addons/docs/react/README.md

TIA for helping me to figure this out!!

[shilman]

closing as dupe to #10311

[kruthivijay31]

@shilman i am using 5.3 storybook and config is based on the doc https://storybook.js.org/docs/configurations/typescript-config/.

If you are not using CRA or have other requirements, then the next best option is @storybook/preset-typescript, which configures ts-loader under the hood.

Dupe mentioned is for 6.0. Please let me know what am i missing. I see in this example the values are resolved as expected https://github.com/storybookjs/storybook/blob/next/addons/docs/react/README.md

[shilman]

The behavior you’re seeing is a function of the CRA preset, not of SB 5.x vs 6.0

[kruthivijay31]

Thanks, @shilman! I am not using CRA. Also how these values are resolved in the image example https://github.com/storybookjs/storybook/blob/next/addons/docs/react/README.md.

status: `positive` | `negative` | `neutral`

I am expecting the same behavior using the config mentioned in the docs. Not sure what am i missing?
Expected

position: 'left' | 'right'

Current output

position: 'union'

[shilman]

Are you suing a custom babel or webpack config?

[kruthivijay31]

I am using webpack config with @storybook/preset-typescript. Details are added in the description.