React: Handle TypeScript path aliases in react-docgen loader

[valentinpalkovic]

Relates #25059
Relates reactjs/react-docgen#456

What I did

I added tsconfig path handling in both, the Webpack5 react-docgen loader and in the Vite react-docgen plugin.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Vite

1. Create a react-ts-vite sandbox
2. Add the following to the sandbox's tsconfig file:

{
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/stories/*"]
    }
  }
}

3. Setup the vite-tsconfig-paths plugin
4. Create the following files in src/stories:

// Button2.tsx
import React from 'react';

import { ButtomType, ButtonProps } from '~/Button2.types';

/**
 * Primary UI component for user interaction
 */
export const Button = ({
  size = 'medium',
  label,
  type = ButtomType.Button,
  ...props
}: ButtonProps) => {
  return (
    <button
      type={type}
      className={['storybook-button', `storybook-button--${size}`].join(' ')}
      {...props}
    >
      {label}
    </button>
  );
};

// Button2.stories.ts
import type { Meta, StoryObj } from '@storybook/react';

import { Button } from '~/Button2';

// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
  component: Button,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
  tags: ['autodocs'],
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
  args: {
    label: 'Button',
  },
};

// Button2.types.tsx
export enum ButtomType {
  Submit = 'submit',
  Reset = 'reset',
  Button = 'button',
}

export interface ButtonProps {
  /**
   * How large should the button be?
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Button contents
   */
  label: string;
  /**
   * Optional click handler
   */
  onClick?: () => void;
  /**
   * Optional button type
   */
  type?: ButtomType;
}

5. Make sure, that react-docgen can extract the types! E.g. JSDOC comments are available and all Button properties are shown in the Controls panel

Webpack

• 1. Setup a react-ts-webpack sandbox
• 2. Follow https://storybook.js.org/docs/builders/webpack#typescript-modules-are-not-resolved-within-storybook to setup the path aliases loader
• 3. Copy the tsconfig from the vite sandbox into the react sandbox (delete the reference part)
• 4. Create the same files, which were created in the testing instructions for Vite
• 5. Make sure, that react-docgen can extract the types! E.g. JSDOC comments are available and all Button properties are shown in the Controls panel

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>