customize `chakra-ui/props-order`

[hexiro]

Hello! just have a few suggestions to leave here about how I believe this rule can be more like eslint-plugin-react's jsx-sort-props, only more specific to chakra.

I think it would be cool if like jsx-sort-props, one could sort with options like callbacksLast and shorthandFirst. for chakra-specific use case it would also be cool to have something like pseudoFirst so that one could choose if they want it at the beginning or the end.

Additionally, (this is a lot more complex) it would be cool if there was an option called something like uniqueFirst which moves unique props specific to that element to the front. For example, on a Flex element, align, justify, and direction props would show up before props that aren't specific to Flex.

Let me know what you think!

[yukukotani]

@hexiro Thank you for the suggestion!

I totally agree with your opinion that chakra-ui/props-order should provide the same functionality as jsx-sort-props.

My idea is like wrapping jsx-sort-props. Our rule provides same option as jsx-sort-props and internally runs their rule, then override the result to optimize for Chakra UI. This approach has room for optimization of performance but easy as initial implementation.

uniqueFirst also sounds cool. But it's too hard to list unique props of all components and maintain them as updated. It's awesome if we could automatically generate them from Chakra's source code or something else.

[hexiro]

@hexiro Thank you for the suggestion!

I totally agree with your opinion that chakra-ui/props-order should provide the same functionality as jsx-sort-props.

My idea is like wrapping jsx-sort-props. Our rule provides same option as jsx-sort-props and internally runs their rule, then override the result to optimize for Chakra UI. This approach has room for optimization of performance but easy as initial implementation.

uniqueFirst also sounds cool. But it's too hard to list unique props of all components and maintain them as updated. It's awesome if we could automatically generate them from Chakra's source code or something else.

cool, i'll take a look tomorrow and i'll let you know if i find anything.

[yukukotani]

@hexiro Thanks!

I think you can do this in two steps:

1. Make compatibility with jsx-sort-props with minimum Chakra support.
2. Enhance the Chakra support such as adding uniqueFirst option.

[artnikbrothers]

Our rule provides same option as jsx-sort-props

@yukukotani I tried to use the same options from jsx-sort-props but it doesn't work. Can you show an example please, how we can apply the options like callbacksLast

[yukukotani]

@artnikbrothers You can't do it for now since it's still just an idea of the implementation strategy of options such as callbacksLast. Feel free to send PR by following the strategy written above.