Enforce coding standards on importing from @wordpress/element instead of react

[pauloiankoski]

Details

In our recent discussion, it was pointed out that our project has inconsistent import statements when it comes to React components. Some parts of our code import from the react package while others import from @wordpress/element. Given that we are using wp-scripts to build our project and WordPress handles these packages for us, it seems more appropriate to import from @wordpress/element.

Reference discussion: https://lw.slack.com/archives/C04SLRDD9CK/p1696274616679709

Points highlighted from the discussion:

• @wordpress/element serves as an abstraction layer atop React and is the recommended import source when working within a WordPress context.
• This inconsistency in our code is more of a coding standard issue rather than a technical one.
• It was suggested to enforce this standard via linting or possibly PhpStorm configurations.

We need to decide on a standard and enforce it to maintain consistency across our codebase. It might require some research on how to set up linting rules or PhpStorm configurations to ensure we adhere to this standard.

[kjohnson]

Related reading: https://github.com/woocommerce/woocommerce/issues/37503