sort-imports: switch to prettier-plugin-organize-imports

Summary:
This has better compatibility with vim / emacs, since prettier is the code
formatter and there is no need to execute the "code fix" provided by eslint.

I first tried `prettier-plugin-sort-imports`. but it has a serious bug
prettier/prettier-vscode#3578 - incorrectly
drops type parameters, and breaks type checking.
This issue might be fixable by upgrading prettier, but we also use the monorepo
prettier and upgrading that requires rewriting all javascript files in the
monorepo, which I'd like to avoid for now.

There are 2 prettiers in use:
- Local prettier. Affects `yarn run prettier`, and editors like `nvim`.
- Monorepo prettier. Affects `arc lint`, and the internal VSCode.
Right now they have the same version. The monorepo prettier sets cwd to
fbsource root, which requires extra logic to load plugins.

To support both, check `prettier.config.mjs`.

Reviewed By: muirdm, evangrayk

Differential Revision: D69540547

fbshipit-source-id: 9fe5b4f213be8bd9630d6f256a12c52d99cb15ff

addons/.eslintrc.js

@@ -34,7 +34,7 @@ module.exports = {
     '@typescript-eslint',
     // enforce rules of hooks and hook dependencies
     'react-hooks',
-    // Sorting imports is hard...
+    // Sorting imports is maintained by prettier-plugin-organize-imports
     'import',
     // Allow locally defined custom rules
     'rulesdir',
@@ -63,17 +63,8 @@ module.exports = {
     curly: 'error',
     'dot-notation': 'error',
     'import/no-duplicates': 'error',
-    'import/order': [
-      'error',
-      {
-        groups: ['type'],
-        'newlines-between': 'always',
-        alphabetize: {
-          order: 'asc',
-          caseInsensitive: false,
-        },
-      },
-    ],
+    // Sorting imports is maintained by prettier-plugin-organize-imports
+    'import/order': 'off',
     'no-await-in-loop': 'error',
     'no-bitwise': 'error',
     'no-caller': 'error',

addons/components/Badge.tsx

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactProps} from './utils';
 import type {ReactNode} from 'react';
+import type {ReactProps} from './utils';
 
 import * as stylex from '@stylexjs/stylex';
 

addons/components/Banner.tsx

@@ -7,8 +7,8 @@
 
 import type {ReactNode} from 'react';
 
-import {Tooltip} from './Tooltip';
 import * as stylex from '@stylexjs/stylex';
+import {Tooltip} from './Tooltip';
 
 import './Banner.css';
 

addons/components/Button.tsx

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {ForwardedRef} from 'react';
 import type {ExclusiveOr} from './Types';
 import type {ReactProps} from './utils';
-import type {ForwardedRef} from 'react';
 
-import {layout} from './theme/layout';
-import {colors} from './theme/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 import {forwardRef, type ReactNode} from 'react';
+import {layout} from './theme/layout';
+import {colors} from './theme/tokens.stylex';
 
 /**
  * StyleX tries to evaluate CSS variables and store them separately.

addons/components/ButtonDropdown.tsx

@@ -7,10 +7,10 @@
 
 import type {ReactNode} from 'react';
 
+import * as stylex from '@stylexjs/stylex';
 import {Button, buttonStyles} from './Button';
 import {Icon} from './Icon';
 import {colors, spacing} from './theme/tokens.stylex';
-import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
   container: {

addons/components/ButtonGroup.tsx

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {colors} from './theme/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
+import {colors} from './theme/tokens.stylex';
 
 const styles = stylex.create({
   group: {

addons/components/Checkbox.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactProps} from './utils';
 import type react from 'react';
+import type {ReactProps} from './utils';
 
-import {layout} from './theme/layout';
-import {spacing} from './theme/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
 import {useEffect, useId, useRef} from 'react';
+import {layout} from './theme/layout';
+import {spacing} from './theme/tokens.stylex';
 
 const cssVarFocusWithinBorder = '--checkbox-focus-within-color';
 const styles = stylex.create({

addons/components/Dropdown.tsx

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactProps} from './utils';
 import type {ReactNode} from 'react';
+import type {ReactProps} from './utils';
 
 import * as stylex from '@stylexjs/stylex';
 import {useId} from 'react';

addons/components/ErrorNotice.tsx

@@ -7,9 +7,9 @@
 
 import type {ReactNode} from 'react';
 
+import React, {Component, useState} from 'react';
 import {Icon} from './Icon';
 import {Tooltip} from './Tooltip';
-import React, {useState, Component} from 'react';
 
 import './error-notice.css';
 

addons/components/Flex.tsx

@@ -7,8 +7,8 @@
 
 import type {ReactProps} from './utils';
 
-import {spacing} from './theme/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
+import {spacing} from './theme/tokens.stylex';
 
 type ContainerProps = ReactProps<HTMLDivElement> & {xstyle?: stylex.StyleXStyles};
 

addons/components/HorizontallyGrowingTextField.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactProps} from './utils';
 import type {ForwardedRef} from 'react';
+import type {ReactProps} from './utils';
 
-import {textFieldStyles} from './TextField';
 import * as stylex from '@stylexjs/stylex';
 import {forwardRef} from 'react';
+import {textFieldStyles} from './TextField';
 
 const styles = stylex.create({
   horizontalGrowContainer: {

addons/components/LinkButton.tsx

@@ -7,8 +7,8 @@
 
 import type {ReactNode} from 'react';
 
-import {colors, font} from './theme/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
+import {colors, font} from './theme/tokens.stylex';
 
 const styles = stylex.create({
   linkButton: {

addons/components/Panels.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ColumnAlignmentProps} from './Flex';
 import type {ReactNode} from 'react';
+import type {ColumnAlignmentProps} from './Flex';
 
+import * as stylex from '@stylexjs/stylex';
 import {Column, Row} from './Flex';
 import {spacing} from './theme/tokens.stylex';
-import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
   tabList: {

addons/components/Radio.tsx

@@ -7,12 +7,12 @@
 
 import type react from 'react';
 
+import * as stylex from '@stylexjs/stylex';
+import {useId} from 'react';
 import {Column} from './Flex';
 import {Tooltip} from './Tooltip';
 import {layout} from './theme/layout';
 import {spacing} from './theme/tokens.stylex';
-import * as stylex from '@stylexjs/stylex';
-import {useId} from 'react';
 
 // stylex doesn't support :checked and :before simultaneously very well
 import './Radio.css';

addons/components/Subtle.tsx

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {stylexPropsWithClassName} from './utils';
 import * as stylex from '@stylexjs/stylex';
+import {stylexPropsWithClassName} from './utils';
 
 const styles = stylex.create({
   subtle: {

addons/components/Tag.tsx

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactProps} from './utils';
 import type {ReactNode} from 'react';
+import type {ReactProps} from './utils';
 
 import * as stylex from '@stylexjs/stylex';
 

addons/components/TextArea.tsx

@@ -7,9 +7,9 @@
 
 import type {ForwardedRef, ReactNode} from 'react';
 
-import {Column} from './Flex';
 import * as stylex from '@stylexjs/stylex';
 import {forwardRef, useId} from 'react';
+import {Column} from './Flex';
 
 const styles = stylex.create({
   root: {

addons/components/TextField.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ReactProps} from './utils';
 import type {ForwardedRef, ReactNode} from 'react';
+import type {ReactProps} from './utils';
 
-import {Column} from './Flex';
 import * as stylex from '@stylexjs/stylex';
 import {forwardRef, useId} from 'react';
+import {Column} from './Flex';
 
 export const textFieldStyles = stylex.create({
   root: {

addons/components/ThemedComponentsRoot.tsx

@@ -7,8 +7,8 @@
 
 import type {ReactNode} from 'react';
 
-import {light} from './theme/tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
+import {light} from './theme/tokens.stylex';
 
 type Writable<T> = {-readonly [P in keyof T]: T[P]};
 export function ThemedComponentsRoot({

addons/components/Tooltip.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ExclusiveOr} from './Types';
 import type {MouseEvent, ReactNode} from 'react';
+import type {ExclusiveOr} from './Types';
 
+import React, {useEffect, useLayoutEffect, useRef, useState} from 'react';
 import {ViewportOverlay} from './ViewportOverlay';
 import {findParentWithClassName} from './utils';
 import {getZoomLevel} from './zoom';
-import React, {useLayoutEffect, useEffect, useRef, useState} from 'react';
 
 import './Tooltip.css';
 

addons/components/Typeahead.tsx

@@ -8,11 +8,11 @@
 import type {TypeaheadResult} from './Types';
 import type {ReactProps} from './utils';
 
+import {useEffect, useRef, useState} from 'react';
 import {Icon} from './Icon';
 import {Subtle} from './Subtle';
 import {TextField} from './TextField';
 import {extractTokens, TokensList, tokensToString} from './Tokens';
-import {useRef, useEffect, useState} from 'react';
 
 export function Typeahead({
   tokenString,

addons/components/__tests__/KeyboardShortcuts.test.tsx

@@ -7,11 +7,11 @@
  * @jest-environment jsdom
  */
 
-import {makeCommandDispatcher, KeyCode, Modifier} from '../KeyboardShortcuts';
-import {render, screen, act} from '@testing-library/react';
 import '@testing-library/jest-dom';
+import {act, render, screen} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useCallback, useState} from 'react';
+import {KeyCode, makeCommandDispatcher, Modifier} from '../KeyboardShortcuts';
 
 /* eslint-disable no-bitwise */
 

addons/components/__tests__/basic.test.tsx

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import {render, screen} from '@testing-library/react';
 import {ThemedComponentsRoot} from '../ThemedComponentsRoot';
 import {ViewportOverlayRoot} from '../ViewportOverlay';
 import ComponentExplorer from '../explorer/ComponentExplorer';
-import {render, screen} from '@testing-library/react';
-import React from 'react';
 
 describe('component library', () => {
   it('renders component explorer', () => {

addons/components/explorer/ComponentExplorer.tsx

@@ -7,6 +7,8 @@
 
 import type {StyleXVar} from '@stylexjs/stylex/lib/StyleXTypes';
 
+import * as stylex from '@stylexjs/stylex';
+import {useState, type ReactNode} from 'react';
 import {Badge} from '../Badge';
 import {Banner, BannerKind} from '../Banner';
 import {Button} from '../Button';
@@ -30,8 +32,6 @@ import {Tooltip} from '../Tooltip';
 import {Typeahead} from '../Typeahead';
 import {layout} from '../theme/layout';
 import {colors, font, radius, spacing} from '../theme/tokens.stylex';
-import * as stylex from '@stylexjs/stylex';
-import {useState, type ReactNode} from 'react';
 
 /* eslint-disable no-console */
 

addons/components/explorer/index.tsx

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import 'react';
+import ReactDOM from 'react-dom/client';
 import {ThemedComponentsRoot} from '../ThemedComponentsRoot';
 import {ViewportOverlayRoot} from '../ViewportOverlay';
 import ComponentExplorer from './ComponentExplorer';
-import 'react';
-import ReactDOM from 'react-dom/client';
 
 import './index.css';
 

addons/components/theme/layout.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {spacing} from './tokens.stylex';
 import * as stylex from '@stylexjs/stylex';
+import {spacing} from './tokens.stylex';
 
 export const layout = stylex.create({
   flexRow: {

addons/isl-server/proxy/__tests__/rmtree.test.ts

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import rmtree from '../rmtree';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import {exists} from 'shared/fs';
+import rmtree from '../rmtree';
 
 describe('rmtree', () => {
   let tmp: string;

addons/isl-server/proxy/__tests__/run-proxy.test.ts

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import * as util from 'node:util';
 import {readExistingServerFile} from '../existingServerStateFiles';
 import * as startServer from '../server';
 import * as lifecycle from '../serverLifecycle';
-import {runProxyMain, parseArgs} from '../startServer';
-import * as util from 'node:util';
+import {parseArgs, runProxyMain} from '../startServer';
 
 /* eslint-disable require-await */
 

addons/isl-server/proxy/existingServerStateFiles.ts

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import rmtree from './rmtree';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
 import {nullthrows} from 'shared/utils';
+import rmtree from './rmtree';
 
 export type ExistingServerInfo = {
   sensitiveToken: string;