Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React: Handle TypeScript path aliases in react-docgen loader #26273

Merged
merged 1 commit into from
Mar 4, 2024

Conversation

valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Mar 1, 2024

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/*"]
    }
  }
}
  1. Setup the vite-tsconfig-paths plugin
  2. 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;
}
  1. 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

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>

@valentinpalkovic valentinpalkovic self-assigned this Mar 1, 2024
@valentinpalkovic valentinpalkovic added ci:daily Run the CI jobs that normally run in the daily job. bug typescript addon: controls labels Mar 1, 2024
@valentinpalkovic valentinpalkovic changed the title Handle TypeScript path aliases in react-docgen loader React Docgen: Handle TypeScript path aliases in react-docgen loader Mar 1, 2024
@valentinpalkovic valentinpalkovic marked this pull request as ready for review March 1, 2024 09:26
@valentinpalkovic valentinpalkovic merged commit b0f4ab3 into next Mar 4, 2024
117 of 122 checks passed
@valentinpalkovic valentinpalkovic deleted the valentin/support-typescript-aliases branch March 4, 2024 07:51
@github-actions github-actions bot mentioned this pull request Mar 4, 2024
17 tasks
@shilman shilman changed the title React Docgen: Handle TypeScript path aliases in react-docgen loader React: Handle TypeScript path aliases in react-docgen loader Mar 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: controls bug ci:daily Run the CI jobs that normally run in the daily job. typescript
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants