Feature request: `sort-prop-types` should work on TS Props types

[tylerlaprade]

Is there an existing issue for this?

• I have searched the existing issues and my issue is unique
• My issue appears in the command-line and not only in the text editor

Description Overview

It currently only works on Class components, which are not in favor in the codebases in which I work. The rule doesn't trigger any warnings on properties on a functional component.

Expected Behavior

It should behave the same on functional components as it does on class components.

eslint-plugin-react version

v7.32.2

eslint version

8.40.0

node version

v16.17.1

[ljharb]

Can you provide example code?

[kshirish]

Facing the same issue. @ljharb

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const variantMap = {
  filled: {
    primary: 'ui-text-white ui-bg-primary',
    secondary: 'ui-text-white ui-bg-secondary',
  },
  outlined: {
    primary: 'ui-border ui-border-primary ui-text-primary',
    secondary: 'ui-border ui-border-secondary ui-text-secondary',
  },
  text: { primary: 'ui-text-primary', secondary: 'ui-text-secondary' },
};

const sizeMap = {
  sm: 'ui-px-2 ui-py-1 ui-text-xs',
  md: 'ui-px-3 ui-py-2 ui-text-sm',
  lg: 'ui-px-4 ui-py-3 ui-text-base',
};

const Button = ({
  variant = 'filled',
  color = 'primary',
  size = 'md',
  children,
  disabled = false,
  className,
  ...restProps
}) => {
  const variantClass = variantMap[variant][color];
  const sizeClass = sizeMap[size];

  return (
    <button
      className={classNames(
        'ui-rounded',
        variantClass,
        sizeClass,
        {
          'ui-pointer-events-none': disabled,
        },
        className,
      )}
      type="button"
      {...restProps}
    >
      {children}
    </button>
  );
};

Button.propTypes = {
  variant: PropTypes.oneOf(['filled', 'outlined', 'text']),
  color: PropTypes.oneOf(['primary', 'secondary']),
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  disabled: PropTypes.bool,
  className: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
};

Button.displayName = 'Button';

export default Button;

Although, it is highlighting the error Prop types declarations should be sorted alphabetically react/sort-prop-types but --fix option is not fixing it!

[kshirish]

Here is the .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [/*'eslint:recommended'*/ 'plugin:react/recommended'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    'react/sort-prop-types': [
      2,
      {
        callbacksLast: true,
        sortShapeProp: true,
        noSortAlphabetically: false,
      },
    ],
    'react/jsx-sort-props': [
      2,
      {
        callbacksLast: true,
        shorthandFirst: false,
        shorthandLast: true,
        noSortAlphabetically: false,
        reservedFirst: true,
      },
    ],
  },
};

[ljharb]

@kshirish autofixing isn't ever a guarantee; if it's warning properly then there's no bug, just perhaps a lack of an enhancement.

[ljharb]

ping @tylerlaprade; can you provide example code?

[tylerlaprade]

@ljharb, I would have expected this to give me an error since "aaa" should be sorted before "zzz".

type Props = {
  zzz: string;
  aaa: string;
}

function Foo(props: Props) {
...
}

Config:

"react/sort-prop-types": "error",

[ljharb]

does it give that error on a class component?

In other words, is this a bug with SFCs, or a bug with TS type definitions? (which i'm not sure the rule ever supported)

[tylerlaprade]

I have never used a class component, so I'm not entirely sure of the syntax, but looking at the above comment I made this change and it does fire. However, I don't think many people define their props like that anymore, at least not on any of the projects I have worked on. I really like the rules in this plugin and if possible would enjoy using this one on TypeScript components, since all my projects use them.

[ljharb]

Foo.propTypes should fire for all kinds of components, including SFCs, but i'm talking about using a Props type specifically.

[tylerlaprade]

Yes, I would like to use Props types with this rule - is it possible to add?

[ljharb]

That seems like a reasonable enhancement to add.