Use import/order eslint check (#5150)

* Use import/order eslint check

* Move ts-ignore comment

.changeset/moody-cars-end.md

@@ -0,0 +1,44 @@
+---
+'@keystone-ui/core': patch
+'@keystone-ui/fields': patch
+'@keystone-ui/notice': patch
+'@keystone-ui/website': patch
+'@keystone-next/website': patch
+'@keystone-next/example-auth': patch
+'@keystone-next/example-ecommerce': patch
+'@keystone-next/example-roles': patch
+'@keystone-next/example-todo': patch
+'@keystone-next/admin-ui': patch
+'@keystone-next/admin-ui-utils': patch
+'@keystone-next/auth': patch
+'@keystone-next/cloudinary': patch
+'@keystone-next/fields': patch
+'@keystone-next/fields-document': patch
+'@keystone-next/keystone': patch
+'@keystone-next/session-store-redis': patch
+'@keystone-next/types': patch
+'@keystone-next/adapter-mongoose-legacy': patch
+'@keystone-next/adapter-prisma-legacy': patch
+'@keystone-next/app-admin-ui-legacy': patch
+'@keystone-next/app-static-legacy': patch
+'@keystone-next/field-views-loader-legacy': patch
+'@keystone-next/fields-legacy': patch
+'@keystone-next/fields-auto-increment-legacy': patch
+'@keystone-next/fields-cloudinary-image-legacy': patch
+'@keystone-next/fields-color-legacy': patch
+'@keystone-next/fields-location-google-legacy': patch
+'@keystone-next/fields-markdown-legacy': patch
+'@keystone-next/fields-mongoid-legacy': patch
+'@keystone-next/fields-oembed-legacy': patch
+'@keystone-next/fields-unsplash-legacy': patch
+'@keystone-next/keystone-legacy': patch
+'@keystone-next/test-utils-legacy': patch
+'@keystone-next/api-tests-legacy': patch
+'@keystonejs/examples-smoke-tests': patch
+'@keystone-next/cypress-project-access-control-legacy': patch
+'@keystone-next/cypress-project-basic-legacy': patch
+'@keystone-next/cypress-project-client-validation-legacy': patch
+'@keystone-next/cypress-project-login-legacy': patch
+---
+
+Applied eslint `import/order` rule.

.eslintrc.js

@@ -47,6 +47,7 @@ module.exports = {
       },
     ],
     'import/no-unresolved': 'error',
+    'import/order': 'error',
     'jest/valid-describe': 'off',
     'jest/valid-expect': 'off',
     'jest/no-conditional-expect': 'off',

design-system/packages/core/src/components/Center.tsx

@@ -2,8 +2,8 @@
 
 import { jsx } from '../emotion';
 
-import { Box, BoxProps } from './Box';
 import { forwardRefWithAs } from '../utils';
+import { Box, BoxProps } from './Box';
 
 type CenterProps = {
   fillView?: boolean;

design-system/packages/core/src/components/Core.tsx

@@ -1,7 +1,7 @@
 /* @jsx jsx */
 
-import { jsx, Global } from '../emotion';
 import { Fragment, ReactNode } from 'react';
+import { jsx, Global } from '../emotion';
 
 import { normalize } from '../normalize';
 import { useTheme } from '../theme';

design-system/packages/core/src/components/Divider.tsx

@@ -2,9 +2,9 @@
 
 import { jsx } from '../emotion';
 
-import { Box, MarginProps } from './Box';
 import { useTheme } from '../theme';
 import { ResponsiveProp, Theme } from '../types';
+import { Box, MarginProps } from './Box';
 
 type ColorType = ResponsiveProp<keyof Theme['palette']>;
 

design-system/packages/core/src/components/Heading.tsx

@@ -2,9 +2,9 @@
 
 import { jsx } from '../emotion';
 
-import { Box, BoxProps } from './Box';
 import { forwardRefWithAs } from '../utils';
 import { useTheme } from '../theme';
+import { Box, BoxProps } from './Box';
 
 export const HeadingTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 type HeadingType = typeof HeadingTypes[number];

design-system/packages/core/src/components/Inline.tsx

@@ -3,10 +3,10 @@
 import { Children, ReactNode } from 'react';
 import { jsx } from '../emotion';
 
-import { Box, BoxProps } from './Box';
 import { forwardRefWithAs } from '../utils';
 import { Theme } from '../types';
 import { useTheme } from '../theme';
+import { Box, BoxProps } from './Box';
 
 const alignment = {
   center: 'center',

design-system/packages/core/src/components/Text.tsx

@@ -2,11 +2,11 @@
 
 import { jsx } from '../emotion';
 
-import { Box, BoxProps } from './Box';
 import { Theme } from '../types';
 import { forwardRefWithAs } from '../utils';
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import { useTheme } from '../theme';
+import { Box, BoxProps } from './Box';
 
 type TextProps = {
   /** The leading of the text. */

design-system/packages/fields/src/DatePicker/components/InputButton.tsx

@@ -4,8 +4,8 @@ import { ButtonHTMLAttributes, forwardRef } from 'react';
 import { jsx, useTheme } from '@keystone-ui/core';
 import { XIcon } from '@keystone-ui/icons/icons/XIcon';
 import { CalendarIcon } from '@keystone-ui/icons/icons/CalendarIcon';
-import { Adornment, AdornmentWrapper } from './Adornments';
 import { useInputTokens, useInputStyles } from '../..';
+import { Adornment, AdornmentWrapper } from './Adornments';
 
 type ButtonProps = {
   invalid?: boolean;

design-system/packages/fields/src/DatePicker/index.tsx

@@ -5,10 +5,10 @@ import FocusLock from 'react-focus-lock';
 import { jsx } from '@keystone-ui/core';
 import { PopoverDialog, usePopover } from '@keystone-ui/popover';
 
-import { Calendar } from './Calendar';
-import { InputButton } from './components/InputButton';
 import { formatDMY, formatDateType } from '../utils/dateFormatters';
 import { DateType } from '../types';
+import { Calendar } from './Calendar';
+import { InputButton } from './components/InputButton';
 
 export type DateInputValue = string | undefined;
 

design-system/packages/notice/src/Notice.tsx

@@ -9,9 +9,9 @@ import { CheckCircleIcon } from '@keystone-ui/icons/icons/CheckCircleIcon';
 import { InfoIcon } from '@keystone-ui/icons/icons/InfoIcon';
 import { HelpCircleIcon } from '@keystone-ui/icons/icons/HelpCircleIcon';
 
+import { Button, ButtonProvider } from '@keystone-ui/button';
 import { useNoticeStyles, useNoticeTokens, ToneKey } from './hooks/notice';
 import { useButtonTokens } from './hooks/button';
-import { Button, ButtonProvider } from '@keystone-ui/button';
 
 const symbols: { [key in ToneKey]: ReactNode } = {
   active: <InfoIcon />,

design-system/website/pages/components/modals.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react';
 import { jsx, Stack } from '@keystone-ui/core';
-import { Page } from '../../components/Page';
 import { Button } from '@keystone-ui/button';
 import { Drawer, DrawerController, AlertDialog } from '@keystone-ui/modals';
+import { Page } from '../../components/Page';
 
 export default function ModalsPage() {
   let [isNarrowOpen, setIsNarrowOpen] = useState(false);

design-system/website/pages/core/alias-tokens.tsx

@@ -2,9 +2,9 @@
 
 import { jsx, useTheme, Inline } from '@keystone-ui/core';
 
+import { Fragment } from 'react';
 import { Page } from '../../components/Page';
 import { ReadableColor } from '../../components/ReadableColor';
-import { Fragment } from 'react';
 
 type SelectableColorType = keyof ReturnType<typeof useTheme>['selectableColors'];
 

design-system/website/pages/core/global-tokens.tsx

@@ -2,9 +2,9 @@
 
 import { jsx, useTheme } from '@keystone-ui/core';
 
+import { Fragment } from 'react';
 import { Page } from '../../components/Page';
 import { ReadableColor } from '../../components/ReadableColor';
-import { Fragment } from 'react';
 
 const PALETTES = [
   'neutral',

docs-next/components/DocumentEditorDemo.tsx

@@ -19,9 +19,9 @@ import {
   InferRenderersForComponentBlocks,
 } from '@keystone-next/fields-document/component-blocks';
 
-import { Code } from './Code';
 import { initialContent } from '../lib/initialDocumentDemoContent';
 import { componentBlocks as componentBlocksInExampleProject } from '../../examples-next/basic/admin/fieldViews/Content';
+import { Code } from './Code';
 
 const headingLevels = ['1', '2', '3', '4', '5', '6'] as const;
 

docs-next/components/Page.tsx

@@ -1,15 +1,15 @@
 /** @jsx jsx  */
 import { Fragment, ReactNode } from 'react';
 import Head from 'next/head';
-import { proseStyles } from '../lib/prose-lite';
 import { useRef, useState } from 'react';
-import { getHeadings, Heading } from '../lib/getHeadings';
 import { jsx } from '@keystone-ui/core';
-import { Code, InlineCode } from '../components/Code';
-import { H1, H2, H3, H4, H5, H6 } from '../components/Heading';
 import { MDXProvider } from '@mdx-js/react';
 import cx from 'classnames';
 import Link from 'next/link';
+import { H1, H2, H3, H4, H5, H6 } from '../components/Heading';
+import { Code, InlineCode } from '../components/Code';
+import { getHeadings, Heading } from '../lib/getHeadings';
+import { proseStyles } from '../lib/prose-lite';
 import { Navigation } from './Navigation';
 import { TableOfContents } from './TableOfContents';
 

docs-next/next.config.js

@@ -1,6 +1,7 @@
 const withPreconstruct = require('@preconstruct/next');
 const withPlugins = require('next-compose-plugins');
 const mdxHints = require('./remark-plugins/hints');
+// eslint-disable-next-line import/order
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
   options: {

examples-next/auth/keystone.ts

@@ -1,7 +1,7 @@
 import { config } from '@keystone-next/keystone/schema';
 import { statelessSessions, withItemData } from '@keystone-next/keystone/session';
-import { lists } from './schema';
 import { createAuth } from '@keystone-next/auth';
+import { lists } from './schema';
 
 /**
  * TODO: Implement validateItem. Would be invoked by the getItem() method in

examples-next/ecommerce/mutations/checkout.ts

@@ -1,6 +1,6 @@
+import { KeystoneContext } from '@keystone-next/types';
 import { OrderCreateInput } from '../.keystone/schema-types';
 
-import { KeystoneContext } from '@keystone-next/types';
 // import stripeConfig from '../lib/stripe';
 
 const graphql = String.raw;

examples-next/roles/keystone.ts

@@ -1,7 +1,7 @@
 import { config } from '@keystone-next/keystone/schema';
 import { statelessSessions, withItemData } from '@keystone-next/keystone/session';
-import { lists } from './schema';
 import { createAuth } from '@keystone-next/auth';
+import { lists } from './schema';
 
 import { isSignedIn } from './access';
 

examples-next/todo/keystone.ts

@@ -1,7 +1,7 @@
 import { config } from '@keystone-next/keystone/schema';
 import { statelessSessions, withItemData } from '@keystone-next/keystone/session';
-import { lists } from './schema';
 import { createAuth } from '@keystone-next/auth';
+import { lists } from './schema';
 
 const sessionSecret = '-- DEV COOKIE SECRET; CHANGE ME --';
 const sessionMaxAge = 60 * 60 * 24 * 30; // 30 days

packages-next/admin-ui-utils/src/Fields.tsx

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { jsx, Stack } from '@keystone-ui/core';
 import { FieldMeta } from '@keystone-next/types';
-import { Value } from '.';
 import { memo, useMemo } from 'react';
+import { Value } from '.';
 
 type RenderFieldProps = {
   field: FieldMeta;

packages-next/admin-ui-utils/src/item-form.ts

@@ -1,9 +1,9 @@
-import { DataGetter } from './dataGetter';
-import { ItemData, deserializeValue, serializeValueToObjByFieldKey } from './serialization';
 import { FieldMeta } from '@keystone-next/types';
 import { GraphQLError } from 'graphql';
 import { useMemo } from 'react';
 import isDeepEqual from 'fast-deep-equal';
+import { ItemData, deserializeValue, serializeValueToObjByFieldKey } from './serialization';
+import { DataGetter } from './dataGetter';
 
 export type Value = Record<
   string,

packages-next/admin-ui/src/components/Navigation.tsx

@@ -8,9 +8,9 @@ import { Popover } from '@keystone-ui/popover';
 import { MoreHorizontalIcon } from '@keystone-ui/icons/icons/MoreHorizontalIcon';
 import { ChevronRightIcon } from '@keystone-ui/icons/icons/ChevronRightIcon';
 
-import { SignoutButton } from './SignoutButton';
 import { useKeystone } from '../context';
 import { Link } from '../router';
+import { SignoutButton } from './SignoutButton';
 
 type NavItemProps = {
   href: string;

packages-next/admin-ui/src/context.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode, createContext, useContext, useMemo } from 'react';
-import { ApolloProvider, ApolloClient, InMemoryCache, ApolloError, DocumentNode } from './apollo';
 import type { AdminConfig, AdminMeta, FieldViews } from '@keystone-next/types';
 import { Center } from '@keystone-ui/core';
 import { ToastProvider } from '@keystone-ui/toast';
 import { LoadingDots } from '@keystone-ui/loading';
 import { DrawerProvider } from '@keystone-ui/modals';
-import { useAdminMeta } from './utils/useAdminMeta';
 import { createUploadLink } from 'apollo-upload-client';
+import { useAdminMeta } from './utils/useAdminMeta';
+import { ApolloProvider, ApolloClient, InMemoryCache, ApolloError, DocumentNode } from './apollo';
 import {
   AuthenticatedItem,
   VisibleLists,

packages-next/admin-ui/src/next-config.ts

@@ -1,6 +1,6 @@
+import Path from 'path';
 // @ts-ignore
 import withPreconstruct from '@preconstruct/next';
-import Path from 'path';
 
 export const config = withPreconstruct({
   webpack(config: any) {

packages-next/admin-ui/src/pages/App/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { KeystoneProvider } from '../../context';
-import { ErrorBoundary } from '../../components';
 import { Core } from '@keystone-ui/core';
 import { AppProps } from 'next/app';
 import { DocumentNode } from 'graphql';
 import { AdminConfig, FieldViews } from '@keystone-next/types';
+import { ErrorBoundary } from '../../components';
+import { KeystoneProvider } from '../../context';
 
 type AppConfig = {
   adminConfig: AdminConfig;

packages-next/admin-ui/src/pages/ListPage/FilterList.tsx

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { Inline, jsx, Stack } from '@keystone-ui/core';
 import { FieldMeta, ListMeta } from '@keystone-next/types';
-import { Filter } from './useFilters';
-import { useRouter } from '../../router';
 import { Button } from '@keystone-ui/button';
 import { usePopover, PopoverDialog } from '@keystone-ui/popover';
 import { FormEvent, Fragment, useState } from 'react';
 import { Pill } from '@keystone-ui/pill';
+import { useRouter } from '../../router';
+import { Filter } from './useFilters';
 
 export function FilterList({ filters, list }: { filters: Filter[]; list: ListMeta }) {
   return (

packages-next/admin-ui/src/pages/ListPage/index.tsx

@@ -11,18 +11,18 @@ import { LoadingDots } from '@keystone-ui/loading';
 import { AlertDialog, DrawerController } from '@keystone-ui/modals';
 import { useToasts } from '@keystone-ui/toast';
 
-import { gql, TypedDocumentNode, useMutation, useQuery } from '../../apollo';
-import { CellLink } from '../../components';
-import { CreateItemDrawer } from '../../components/CreateItemDrawer';
-import { PageContainer, HEADER_HEIGHT } from '../../components/PageContainer';
-import { useList } from '../../context';
-import { Link, useRouter } from '../../router';
 import {
   getRootGraphQLFieldsFromFieldController,
   DataGetter,
   DeepNullable,
   makeDataGetter,
 } from '@keystone-next/admin-ui-utils';
+import { gql, TypedDocumentNode, useMutation, useQuery } from '../../apollo';
+import { CellLink } from '../../components';
+import { CreateItemDrawer } from '../../components/CreateItemDrawer';
+import { PageContainer, HEADER_HEIGHT } from '../../components/PageContainer';
+import { useList } from '../../context';
+import { Link, useRouter } from '../../router';
 import { FieldSelection } from './FieldSelection';
 import { FilterAdd } from './FilterAdd';
 import { FilterList } from './FilterList';

packages-next/admin-ui/src/pages/ListPage/pagination.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
+import { jsx, Center, Stack } from '@keystone-ui/core';
 import { Link, useRouter } from '../../router';
 import { useList } from '../..';
-import { jsx, Center, Stack } from '@keystone-ui/core';
 
 function Page({ page, currentPage }: { page: number; currentPage: number }) {
   const { query } = useRouter();

packages-next/admin-ui/src/pages/ListPage/useFilters.tsx

@@ -1,6 +1,6 @@
-import { useRouter } from '../../router';
 import { useMemo } from 'react';
 import { JSONValue, ListMeta } from '@keystone-next/types';
+import { useRouter } from '../../router';
 
 export type Filter = { field: string; type: string; value: JSONValue };
 

packages-next/admin-ui/src/system/generateAdminUI.ts

@@ -1,5 +1,5 @@
-import fs from 'fs-extra';
 import Path from 'path';
+import fs from 'fs-extra';
 
 import fastGlob from 'fast-glob';
 import prettier from 'prettier';