[Bug]: Storybook v8.0.0-alpha.16 unknown types

[MariaTeo]

This is happening in a nextjs14 project with typescript.

this is part of my package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
    "test:watch": "jest --watchAll",
    "story": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "next": "14.0.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "styled-components": "^6.1.8"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^8.0.0-alpha.16",
    "@storybook/addon-interactions": "^8.0.0-alpha.16",
    "@storybook/addon-links": "^8.0.0-alpha.16",
    "@storybook/addon-onboarding": "^1.0.10",
    "@storybook/blocks": "^8.0.0-alpha.16",
    "@storybook/nextjs": "^8.0.0-alpha.16",
    "@storybook/react": "^8.0.0-alpha.16",
    "@storybook/test": "^8.0.0-alpha.16",
    "@testing-library/jest-dom": "^6.2.0",
    "@testing-library/react": "^14.1.2",
    "@types/jest": "^29.5.11",
    "@types/node": "^20",
    "@types/react": "^18.2.51",
    "@types/react-dom": "^18",
    "@types/styled-components": "^5.1.34",
    "@typescript-eslint/eslint-plugin": "^6.20.0",
    "@typescript-eslint/parser": "^6.20.0",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-storybook": "^0.6.15",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "prettier": "^3.2.4",
    "storybook": "^8.0.0-alpha.16",
    "ts-jest": "^29.1.2",
    "ts-loader": "^9.5.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"

My config seems to be fine. Types of props are not being defined in the storybook docs

To Reproduce

No response

System

No response

Additional context

No response

[vanessayuenn]

@MariaTeo thank you for testing Storybook 8-alpha! I am not able to reproduce your issue in a fresh Next.js project. Could you share a reproduction of your issue with storybook.new? That will help us significantly in the debugging process. Thank you!

[MariaTeo]

hello @vanessayuenn thank you for your response. I have reproduced the issue here. Hope that helps

[HerbCaudill]

I've put up another repro of this behavior here.

// variants.ts
export const variants = {
  sizes: {
    small: 'text-sm',
    medium: 'text-base',
    large: 'text-lg',
  },
};

// Button.tsx
type SizeOptions = keyof typeof variants['sizes'];

interface ButtonProps {
  // ...
  /**
   * How large should the button be?
   */
  size?: SizeOptions;

In the description for size, it says

How large should the button be? unknown

Storybook 7 handles this correctly:

How large should the button be? small medium large

I've experimented and it only says unknown if the type of the prop has to use the bracket syntax (keyof typeof variants['sizes']. If I can write keyof typeof sizes, then it says union, which isn't much better.

const sizes = {
  small: 'text-sm',
  medium: 'text-base',
  large: 'text-lg',
};

export const variants = { sizes };

type SizeOptions = keyof typeof sizes;

How large should the button be? union

This is also what you get if you put a union type directly in the prop:

interface ButtonProps {
  //...
  intent?: 'secondary' | 'primary';
}

How large should the button be? union

Again, Storybook 7 handles both of these cases correctly, listing the actual options instead of returning union.

[shilman]

@HerbCaudill I've verified that setting typescript.reactDocgen to react-docgen-typescript restores the old behavior: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

[ndelangen]

@MariaTeo I think the PR attached closes your issue. Thank you for supplying the reproduction, it was very useful in tracking down the problem.

Considering you're overriding argTypes manually, you might find that you'll sometimes need to manually specify the type property too:

...
  argTypes: {
    as: {
      type: 'string',
      description:
        'Represents what kind of header should the text be, by default it is rendered as a paragraph',
      control: 'select',
      options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
      defaultValue: 'p',
      property: 'string',
    },
...

And you can supply something more complex using table: (This code already works without the patch)