Configure eslint to prevent imports from nested paths of externally provided modules

Summary: We have a list of modules that we do not bundle with the plugins, but provide externally to them from Flipper. For the mechanism to work correctly, we have to stop importing from nested paths of these modules.

Reviewed By: mweststrate

Differential Revision: D39776237

fbshipit-source-id: 06eae9bf9d5b11b48d2720bf592bfea749773847

desktop/.eslintrc.js

@@ -66,6 +66,26 @@ const restrictedImportsUniversalErrorConfig = {
       message:
         "Imports from nested flipper-ui-core directories are not allowed. Import from 'flipper-ui-core' module directly. If it is missing an export, add it there.",
     },
+    {
+      group: ['antd/*'],
+      message:
+        "Imports from nested antd directories are not allowed. Import from 'antd' module directly. If you want to import only a type, use `import type` syntax and silence this warning.",
+    },
+    {
+      group: ['immer/*'],
+      message:
+        "Imports from nested antd directories are not allowed. Import from 'antd' module directly. If you want to import only a type, use `import type` syntax and silence this warning.",
+    },
+    {
+      group: ['@emotion/styled/*'],
+      message:
+        "Imports from nested @emotion/styled directories are not allowed. Import from '@emotion/styled' module directly. If you want to import only a type, use `import type` syntax and silence this warning.",
+    },
+    {
+      group: ['@ant-design/icons/*'],
+      message:
+        "Imports from nested @ant-design/icons directories are not allowed. Import from '@ant-design/icons' module directly. If you want to import only a type, use `import type` syntax and silence this warning.",
+    },
   ],
 };
 

desktop/flipper-plugin/src/ui/CodeBlock.tsx

@@ -10,7 +10,9 @@
 import React from 'react';
 import {Typography} from 'antd';
 import styled from '@emotion/styled';
-import {ParagraphProps} from 'antd/lib/typography/Paragraph';
+// This import is OK since it is a type-only import
+// eslint-disable-next-line no-restricted-imports
+import type {ParagraphProps} from 'antd/lib/typography/Paragraph';
 
 export function CodeBlock({children, ...props}: ParagraphProps) {
   return (

desktop/flipper-plugin/src/ui/NUX.tsx

@@ -24,6 +24,8 @@ import {useValue} from '../state/atom';
 import {_SandyDevicePluginInstance} from 'flipper-plugin-core';
 import {Layout} from './Layout';
 import {BulbTwoTone} from '@ant-design/icons';
+// This import is OK since it is a type-only import
+// eslint-disable-next-line no-restricted-imports
 import type {TooltipPlacement} from 'antd/lib/tooltip';
 import {_SandyPluginInstance} from 'flipper-plugin-core';
 import {theme} from './theme';

desktop/flipper-plugin/src/ui/data-inspector/DataDescription.tsx

@@ -18,6 +18,8 @@ import {parseColor} from '../../utils/parseColor';
 import {TimelineDataDescription} from './TimelineDataDescription';
 import {theme} from '../theme';
 import {EditOutlined} from '@ant-design/icons';
+// This import is OK since it is a type-only import
+// eslint-disable-next-line no-restricted-imports
 import type {CheckboxChangeEvent} from 'antd/lib/checkbox';
 
 const {Link} = Typography;

desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx

@@ -54,7 +54,6 @@ import FpsGraph from '../chrome/FpsGraph';
 import UpdateIndicator from '../chrome/UpdateIndicator';
 import PluginManager from '../chrome/plugin-manager/PluginManager';
 import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet';
-import SubMenu from 'antd/lib/menu/SubMenu';
 import constants from '../fb-stubs/constants';
 import {
   canFileExport,
@@ -260,7 +259,7 @@ function ExtrasMenu() {
           className={menu}
           selectable={false}
           style={{backgroundColor: theme.backgroundDefault}}>
-          <SubMenu
+          <Menu.SubMenu
             popupOffset={[10, 0]}
             key="extras"
             title={<LeftRailButton icon={<SettingOutlined />} small />}
@@ -288,7 +287,7 @@ function ExtrasMenu() {
               </Menu.Item>
             ) : null}
             <Menu.Divider />
-            <SubMenu title="Plugin developers">
+            <Menu.SubMenu title="Plugin developers">
               <Menu.Item
                 key="styleguide"
                 onClick={() => {
@@ -301,7 +300,7 @@ function ExtrasMenu() {
                 onClick={() => openDeeplinkDialog(store)}>
                 Trigger deeplink
               </Menu.Item>
-            </SubMenu>
+            </Menu.SubMenu>
             <Menu.Divider />
             {config.isFBBuild ? (
               <>
@@ -324,7 +323,7 @@ function ExtrasMenu() {
             <Menu.Item key="help" onClick={() => setWelcomeVisible(true)}>
               Help
             </Menu.Item>
-          </SubMenu>
+          </Menu.SubMenu>
         </Menu>
       </NUX>
       {showSettings && (

desktop/flipper-ui-core/src/ui/components/Button.tsx

@@ -9,10 +9,9 @@
 
 import React, {useCallback} from 'react';
 import styled from '@emotion/styled';
-import {Button as AntdButton} from 'antd';
+import {Button as AntdButton, ButtonProps} from 'antd';
 
 import Glyph, {IconSize} from './Glyph';
-import type {ButtonProps} from 'antd/lib/button';
 import {theme, getFlipperLib} from 'flipper-plugin';
 
 type ButtonType = 'primary' | 'success' | 'warning' | 'danger';

desktop/plugins/public/fresco/MultipleSelect.tsx

@@ -11,6 +11,8 @@ import React, {Component} from 'react';
 import {Layout} from 'flipper-plugin';
 import {Button, Menu, Checkbox, Dropdown} from 'antd';
 import {DownOutlined} from '@ant-design/icons';
+// This import is OK since it is a type-only import
+// eslint-disable-next-line no-restricted-imports
 import type {CheckboxChangeEvent} from 'antd/lib/checkbox';
 
 export default class MultipleSelect extends Component<{

desktop/plugins/public/ui-debugger/components/Tree.tsx

@@ -8,8 +8,7 @@
  */
 
 import {Id, UINode} from '../types';
-import {DataNode} from 'antd/es/tree';
-import {Tree as AntTree} from 'antd';
+import {Tree as AntTree, TreeDataNode} from 'antd';
 import {DownOutlined} from '@ant-design/icons';
 import React from 'react';
 
@@ -56,10 +55,13 @@ export function Tree(props: {
   );
 }
 
-function nodesToAntTree(root: Id, nodes: Map<Id, UINode>): [DataNode, Id[]] {
+function nodesToAntTree(
+  root: Id,
+  nodes: Map<Id, UINode>,
+): [TreeDataNode, Id[]] {
   const inactive: Id[] = [];
 
-  function uiNodeToAntNode(id: Id): DataNode {
+  function uiNodeToAntNode(id: Id): TreeDataNode {
     const node = nodes.get(id);
 
     if (node?.activeChild) {