sort import/exports

.eslintrc.yml

@@ -3,7 +3,7 @@ parserOptions:
 env:
   es2022: true
   browser: true
-plugins: ['react', 'react-hooks']
+plugins: ['simple-import-sort', 'react', 'react-hooks']
 settings:
   react:
     version: detect
@@ -14,6 +14,8 @@ extends:
   - 'plugin:react/jsx-runtime'
   - 'plugin:react-hooks/recommended'
 rules:
+  'simple-import-sort/imports': error
+  'simple-import-sort/exports': error
   'import/no-extraneous-dependencies':
     [error, { devDependencies: ['**/*.config.{js,ts}', 'tests/**'] }]
 overrides:

demo/IntrospectionModal.tsx

@@ -1,28 +1,25 @@
-import * as React from 'react';
-
-import Tab from '@mui/material/Tab';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
-import Grid from '@mui/material/Unstable_Grid2';
-import Stack from '@mui/material/Stack';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import TabContext from '@mui/lab/TabContext';
 import TabList from '@mui/lab/TabList';
 import TabPanel from '@mui/lab/TabPanel';
+import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import Stack from '@mui/material/Stack';
+import Tab from '@mui/material/Tab';
+import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
-
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-
+import Grid from '@mui/material/Unstable_Grid2';
 import {
   buildSchema,
   getIntrospectionQuery,
   introspectionFromSchema,
 } from 'graphql/utilities';
+import * as React from 'react';
 
-import { PRESETS, defaultPresetName } from './presets';
+import { defaultPresetName, PRESETS } from './presets';
 
 enum InputType {
   Presets = 'Presets',

demo/index.tsx

@@ -1,18 +1,16 @@
-import * as React from 'react';
-import * as ReactDOMClient from 'react-dom/client';
-
+import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
 import { ThemeProvider } from '@mui/material/styles';
 import SvgIcon from '@mui/material/SvgIcon';
-import Link from '@mui/material/Link';
 import Typography from '@mui/material/Typography';
-import Stack from '@mui/material/Stack';
-import Box from '@mui/material/Box';
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
 
-import { theme } from '../src/components/MUITheme';
 import { GraphQLVoyager } from '../src';
+import { theme } from '../src/components/MUITheme';
 import LogoIcon from './icons/logo-small.svg';
-
 import { IntrospectionModal } from './IntrospectionModal';
 import { defaultPreset } from './presets';
 

package.json

@@ -62,9 +62,10 @@
     "cspell": "6.2.3",
     "css-loader": "6.7.1",
     "eslint": "8.20.0",
-    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-simple-import-sort": "10.0.0",
     "graphql": "16.5.0",
     "html-webpack-plugin": "5.5.0",
     "mini-css-extract-plugin": "2.6.0",

scripts/serve-directory.ts

@@ -1,6 +1,6 @@
 // Copied from https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework
-import * as http from 'node:http';
 import * as fs from 'node:fs';
+import * as http from 'node:http';
 import * as path from 'node:path';
 import * as util from 'node:util';
 

src/components/GraphViewport.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import LoadingAnimation from './utils/LoadingAnimation';
 
 import { Viewport } from './../graph/';
+import LoadingAnimation from './utils/LoadingAnimation';
 
 interface GraphViewportProps {
   svgRenderer: any;

src/components/MUITheme.tsx

@@ -1,5 +1,5 @@
-import { createTheme } from '@mui/material/styles';
 import { cyan, grey } from '@mui/material/colors';
+import { createTheme } from '@mui/material/styles';
 
 import variables from './variables.css';
 

src/components/Voyager.tsx

@@ -1,25 +1,23 @@
-import { getIntrospectionQuery } from 'graphql/utilities';
-
-import { getSchema, extractTypeId } from '../introspection';
-import { SVGRender, getTypeGraph } from '../graph/';
+import './Voyager.css';
+import './viewport.css';
 
+import { ThemeProvider } from '@mui/material/styles';
+import { getIntrospectionQuery } from 'graphql/utilities';
 import {
-  createRef,
   Children,
   Component,
-  type ReactNode,
+  createRef,
   type ReactElement,
+  type ReactNode,
 } from 'react';
-import { theme } from './MUITheme';
-import { ThemeProvider } from '@mui/material/styles';
 
-import GraphViewport from './GraphViewport';
+import { getTypeGraph, SVGRender } from '../graph/';
+import { extractTypeId, getSchema } from '../introspection';
 import DocExplorer from './doc-explorer/DocExplorer';
-import PoweredBy from './utils/PoweredBy';
+import GraphViewport from './GraphViewport';
+import { theme } from './MUITheme';
 import Settings from './settings/Settings';
-
-import './Voyager.css';
-import './viewport.css';
+import PoweredBy from './utils/PoweredBy';
 
 type IntrospectionProvider = (query: string) => Promise<any>;
 

src/components/doc-explorer/DocExplorer.tsx

@@ -1,14 +1,14 @@
-import { isNode } from '../../graph';
+import './DocExplorer.css';
 
 import { Component } from 'react';
-import TypeList from './TypeList';
-import TypeDoc from './TypeDoc';
+
+import { isNode } from '../../graph';
+import SearchBox from '../utils/SearchBox';
 import FocusTypeButton from './FocusTypeButton';
-import TypeInfoPopover from './TypeInfoPopover';
 import OtherSearchResults from './OtherSearchResults';
-import SearchBox from '../utils/SearchBox';
-
-import './DocExplorer.css';
+import TypeDoc from './TypeDoc';
+import TypeInfoPopover from './TypeInfoPopover';
+import TypeList from './TypeList';
 
 interface DocExplorerProps {
   typeGraph: any;

src/components/doc-explorer/FocusTypeButton.tsx

@@ -1,7 +1,8 @@
+import './FocusTypeButton.css';
+
 import IconButton from '@mui/material/IconButton';
-import EyeIcon from '../icons/remove-red-eye.svg';
 
-import './FocusTypeButton.css';
+import EyeIcon from '../icons/remove-red-eye.svg';
 
 function FocusTypeButton(props: { onClick: () => void }) {
   return (

src/components/doc-explorer/OtherSearchResults.tsx

@@ -1,4 +1,4 @@
-import { isMatch, highlightTerm } from '../../utils';
+import { highlightTerm, isMatch } from '../../utils';
 
 interface OtherSearchResultsProps {
   typeGraph: any;

src/components/doc-explorer/TypeDetails.tsx

@@ -1,10 +1,10 @@
-import { SimplifiedTypeWithIDs } from '../../introspection/types';
 import * as _ from 'lodash';
 
+import { SimplifiedTypeWithIDs } from '../../introspection/types';
 import Markdown from '../utils/Markdown';
 import Description from './Description';
-import WrappedTypeName from './WrappedTypeName';
 import EnumValue from './EnumValue';
+import WrappedTypeName from './WrappedTypeName';
 
 interface TypeDetailsProps {
   type: SimplifiedTypeWithIDs;

src/components/doc-explorer/TypeDoc.tsx

@@ -1,16 +1,15 @@
+import './TypeDoc.css';
+
 import * as _ from 'lodash';
 import { Component } from 'react';
 
-import './TypeDoc.css';
-
 import { SimplifiedTypeWithIDs } from '../../introspection/types';
-import { isMatch, highlightTerm } from '../../utils';
-
+import { highlightTerm, isMatch } from '../../utils';
 import Markdown from '../utils/Markdown';
+import Argument from './Argument';
 import Description from './Description';
 import TypeLink from './TypeLink';
 import WrappedTypeName from './WrappedTypeName';
-import Argument from './Argument';
 
 interface TypeDocProps {
   selectedType: any;

src/components/doc-explorer/TypeInfoPopover.tsx

@@ -1,11 +1,10 @@
-import { Component } from 'react';
-
 import './TypeInfoPopover.css';
 
-import CloseIcon from '../icons/close-black.svg';
 import IconButton from '@mui/material/IconButton';
+import { Component } from 'react';
 
 import TypeDetails from '../doc-explorer/TypeDetails';
+import CloseIcon from '../icons/close-black.svg';
 
 interface ScalarDetailsProps {
   type: any;

src/components/doc-explorer/TypeLink.tsx

@@ -1,12 +1,12 @@
+import './TypeLink.css';
+
 import {
   isBuiltInScalarType,
-  isScalarType,
   isInputObjectType,
+  isScalarType,
 } from '../../introspection';
 import { highlightTerm } from '../../utils';
 
-import './TypeLink.css';
-
 interface TypeLinkProps {
   type: {
     name: string;

src/components/doc-explorer/TypeList.tsx

@@ -1,11 +1,11 @@
-import * as _ from 'lodash';
-import { isMatch } from '../../utils';
-
 import './TypeList.css';
 
-import TypeLink from './TypeLink';
+import * as _ from 'lodash';
+
+import { isMatch } from '../../utils';
 import Description from './Description';
 import FocusTypeButton from './FocusTypeButton';
+import TypeLink from './TypeLink';
 
 interface TypeListProps {
   typeGraph: any;

src/components/doc-explorer/WrappedTypeName.tsx

@@ -1,11 +1,11 @@
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
 import './WrappedTypeName.css';
 
-import { stringifyWrappers } from '../../introspection/';
-import TypeLink from './TypeLink';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 
+import { stringifyWrappers } from '../../introspection/';
 import RelayIcon from '../icons/relay-icon.svg';
+import TypeLink from './TypeLink';
 
 interface WrappedTypeNameProps {
   container: any;

src/components/settings/RootSelector.tsx

@@ -1,7 +1,7 @@
-import { isNode, getDefaultRoot } from '../../graph/';
-
-import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+
+import { getDefaultRoot, isNode } from '../../graph/';
 
 interface RootSelectorProps {
   rootType?: string;

src/components/settings/Settings.tsx

@@ -1,4 +1,5 @@
 import Checkbox from '@mui/material/Checkbox';
+
 import RootSelector from './RootSelector';
 
 interface SettingsProps {

src/components/utils/Markdown.tsx

@@ -1,5 +1,5 @@
-import { Component } from 'react';
 import { HtmlRenderer, Parser } from 'commonmark';
+import { Component } from 'react';
 
 interface MarkdownProps {
   text: string;

src/components/utils/SearchBox.tsx

@@ -1,8 +1,8 @@
-import { Component } from 'react';
+import './SearchBox.css';
+
 import Input from '@mui/material/Input';
 import InputAdornment from '@mui/material/InputAdornment';
-
-import './SearchBox.css';
+import { Component } from 'react';
 
 interface SearchBoxProps {
   placeholder: string;

src/graph/dot.ts

@@ -1,6 +1,7 @@
-import { stringifyWrappers } from '../introspection/';
 import * as _ from 'lodash';
 
+import { stringifyWrappers } from '../introspection/';
+
 export function getDot(typeGraph, displayOptions): string {
   function isNode(type) {
     return typeGraph.nodes[type.id] !== undefined;

src/graph/index.ts

@@ -1,4 +1,4 @@
+export * from './dot';
+export * from './svg-renderer';
 export * from './type-graph';
 export * from './viewport';
-export * from './svg-renderer';
-export * from './dot';

src/graph/svg-renderer.ts

@@ -1,8 +1,7 @@
-import { getDot } from './dot';
-
 // eslint-disable-next-line import/no-unresolved
 import VizWorker from '../../worker/voyager.worker.js';
 import { stringToSvg } from '../utils/';
+import { getDot } from './dot';
 
 const RelayIconSvg = require('!!svg-as-symbol-loader?id=RelayIcon!../components/icons/relay-icon.svg');
 const DeprecatedIconSvg = require('!!svg-as-symbol-loader?id=DeprecatedIcon!../components/icons/deprecated-icon.svg');