chore: enable import/order rule (#7418)

website/src/components/ColorGenerator/index.tsx

@@ -8,12 +8,11 @@
 import React, {useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Color from 'color';
-import CodeBlock from '@theme/CodeBlock';
-import Admonition from '@theme/Admonition';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 import {useColorMode} from '@docusaurus/theme-common';
-
+import CodeBlock from '@theme/CodeBlock';
+import Admonition from '@theme/Admonition';
 import {
   type ColorState,
   COLOR_SHADES,

website/src/components/Playground/index.tsx

@@ -8,10 +8,10 @@
 /* eslint-disable global-require */
 
 import React from 'react';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import Image from '@theme/IdealImage';
-import clsx from 'clsx';
 
 const Playgrounds = [
   {

website/src/components/UpgradeGuide/index.tsx

@@ -11,11 +11,11 @@ import {
   useActiveDocContext,
   useVersions,
 } from '@docusaurus/plugin-content-docs/client';
-import Admonition from '@theme/Admonition';
 import Link from '@docusaurus/Link';
-import CodeBlock from '@theme/CodeBlock';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import Translate from '@docusaurus/Translate';
+import Admonition from '@theme/Admonition';
+import CodeBlock from '@theme/CodeBlock';
 
 function PackageJson() {
   const latestVersion = useLatestVersion();

website/src/data/__tests__/user.test.ts

@@ -5,12 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {TagList, sortedUsers, type User} from '../users';
-import {Joi} from '@docusaurus/utils-validation';
-
 import fs from 'fs-extra';
 import path from 'path';
 import imageSize from 'image-size';
+import {Joi} from '@docusaurus/utils-validation';
+import {TagList, sortedUsers, type User} from '../users';
 
 declare global {
   namespace jest {

website/src/pages/index.tsx

@@ -6,6 +6,9 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
+import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -18,10 +21,6 @@ import Tweet from '@site/src/components/Tweet';
 import Tweets, {type TweetItem} from '@site/src/data/tweets';
 import Quotes from '@site/src/data/quotes';
 import Features, {type FeatureItem} from '@site/src/data/features';
-import LiteYouTubeEmbed from 'react-lite-youtube-embed';
-import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
-
-import clsx from 'clsx';
 
 import styles from './styles.module.css';
 

website/src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -7,13 +7,10 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import Image from '@theme/IdealImage';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
-
-import styles from './styles.module.css';
+import Image from '@theme/IdealImage';
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
-import Tooltip from '../ShowcaseTooltip';
 import {
   Tags,
   TagList,
@@ -22,6 +19,8 @@ import {
   type Tag,
 } from '@site/src/data/users';
 import {sortBy} from '@site/src/utils/jsUtils';
+import Tooltip from '../ShowcaseTooltip';
+import styles from './styles.module.css';
 
 const TagComp = React.forwardRef<HTMLLIElement, Tag>(
   ({label, color, description}, ref) => (

website/src/pages/showcase/_components/ShowcaseFilterToggle/index.tsx

@@ -6,12 +6,12 @@
  */
 
 import React, {useState, useEffect, useCallback} from 'react';
+import clsx from 'clsx';
 import {useHistory, useLocation} from '@docusaurus/router';
 
 import {prepareUserState} from '../../index';
 
 import styles from './styles.module.css';
-import clsx from 'clsx';
 
 export type Operator = 'OR' | 'AND';
 

website/src/pages/showcase/_components/ShowcaseTagSelect/index.tsx

@@ -15,9 +15,9 @@ import React, {
 } from 'react';
 import {useHistory, useLocation} from '@docusaurus/router';
 import {toggleListItem} from '@site/src/utils/jsUtils';
-import {prepareUserState} from '../../index';
 import type {TagType} from '@site/src/data/users';
 
+import {prepareUserState} from '../../index';
 import styles from './styles.module.css';
 
 interface Props extends ComponentProps<'input'> {

website/src/pages/showcase/index.tsx

@@ -6,11 +6,21 @@
  */
 
 import React, {useState, useMemo, useEffect} from 'react';
+import clsx from 'clsx';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import Translate, {translate} from '@docusaurus/Translate';
+import {useHistory, useLocation} from '@docusaurus/router';
+import {usePluralForm} from '@docusaurus/theme-common';
 
 import Layout from '@theme/Layout';
-import clsx from 'clsx';
-
 import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
+import {
+  sortedUsers,
+  Tags,
+  TagList,
+  type User,
+  type TagType,
+} from '@site/src/data/users';
 import ShowcaseTagSelect, {
   readSearchTags,
 } from './_components/ShowcaseTagSelect';
@@ -19,20 +29,8 @@ import ShowcaseFilterToggle, {
   readOperator,
 } from './_components/ShowcaseFilterToggle';
 import ShowcaseCard from './_components/ShowcaseCard';
-import {
-  sortedUsers,
-  Tags,
-  TagList,
-  type User,
-  type TagType,
-} from '@site/src/data/users';
 import ShowcaseTooltip from './_components/ShowcaseTooltip';
 
-import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
-import Translate, {translate} from '@docusaurus/Translate';
-import {useHistory, useLocation} from '@docusaurus/router';
-import {usePluralForm} from '@docusaurus/theme-common';
-
 import styles from './styles.module.css';
 
 const TITLE = 'Docusaurus Site Showcase';

website/src/pages/versions.tsx

@@ -8,14 +8,13 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
-import Layout from '@theme/Layout';
-import Heading from '@theme/Heading';
 import Translate from '@docusaurus/Translate';
 import {
   useVersions,
   useLatestVersion,
 } from '@docusaurus/plugin-content-docs/client';
-
+import Layout from '@theme/Layout';
+import Heading from '@theme/Heading';
 import VersionsArchived from '@site/versionsArchived.json';
 
 const VersionsArchivedList = Object.entries(VersionsArchived);

website/src/plugins/changelog/theme/ChangelogAuthors/index.tsx

@@ -7,11 +7,11 @@
 
 import React, {useState} from 'react';
 import clsx from 'clsx';
-import type {Props} from '@theme/BlogPostAuthors';
 import ChangelogAuthor from '@theme/ChangelogAuthor';
+import IconExpand from '@theme/IconExpand';
+import type {Props} from '@theme/BlogPostAuthors';
 
 import styles from './styles.module.css';
-import IconExpand from '@theme/IconExpand';
 
 // Component responsible for the authors layout
 export default function BlogPostAuthors({

website/src/plugins/changelog/theme/ChangelogItem/index.tsx

@@ -12,10 +12,10 @@ import Link from '@docusaurus/Link';
 import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
 import {blogPostContainerID} from '@docusaurus/utils-common';
 import MDXComponents from '@theme/MDXComponents';
+import ChangelogAuthors from '@theme/ChangelogAuthors';
 import type {Props} from '@theme/BlogPostItem';
 
 import styles from './styles.module.css';
-import ChangelogAuthors from '@theme/ChangelogAuthors';
 
 export default function ChangelogItem(props: Props): JSX.Element {
   const {withBaseUrl} = useBaseUrlUtils();

website/src/plugins/changelog/theme/ChangelogList/index.tsx

@@ -6,21 +6,21 @@
  */
 
 import React from 'react';
-import BlogLayout from '@theme/BlogLayout';
-import BlogListPaginator from '@theme/BlogListPaginator';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
-import type {Props} from '@theme/BlogListPage';
+import Link from '@docusaurus/Link';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
-import Link from '@docusaurus/Link';
+import BlogLayout from '@theme/BlogLayout';
+import BlogListPaginator from '@theme/BlogListPaginator';
+import SearchMetadata from '@theme/SearchMetadata';
 import ChangelogItem from '@theme/ChangelogItem';
+import type {Props} from '@theme/BlogListPage';
 
 import styles from './styles.module.css';
-import SearchMetadata from '@theme/SearchMetadata';
-import clsx from 'clsx';
 
 function ChangelogListMetadata(props: Props): JSX.Element {
   const {metadata} = props;

website/src/plugins/changelog/theme/ChangelogPage/index.tsx

@@ -6,19 +6,19 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
-import BlogLayout from '@theme/BlogLayout';
-import ChangelogItem from '@theme/ChangelogItem';
-import ChangelogPaginator from '@theme/ChangelogPaginator';
-import type {Props} from '@theme/BlogPostPage';
+import Link from '@docusaurus/Link';
 import {
   PageMetadata,
   HtmlClassNameProvider,
   ThemeClassNames,
 } from '@docusaurus/theme-common';
+import BlogLayout from '@theme/BlogLayout';
+import ChangelogItem from '@theme/ChangelogItem';
+import ChangelogPaginator from '@theme/ChangelogPaginator';
 import TOC from '@theme/TOC';
-import Link from '@docusaurus/Link';
-import clsx from 'clsx';
+import type {Props} from '@theme/BlogPostPage';
 
 function ChangelogPageMetadata(props: Props): JSX.Element {
   const {content: BlogPostContents} = props;

website/src/plugins/featureRequests/FeatureRequestsPage.tsx

@@ -6,10 +6,10 @@
  */
 
 import React, {useEffect} from 'react';
+import clsx from 'clsx';
 import Layout from '@theme/Layout';
 
 import cannyScript from './cannyScript';
-import clsx from 'clsx';
 import styles from './styles.module.css';
 
 const BOARD_TOKEN = '054e0e53-d951-b14c-7e74-9eb8f9ed2f91';

website/src/theme/CodeBlock/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/CodeBlock';
 import CodeBlock from '@theme-original/CodeBlock';
+import type {Props} from '@theme/CodeBlock';
 
 // This component does nothing on purpose
 // Dogfood: wrapping a theme component already enhanced by another theme

website/src/theme/ColorModeToggle.tsx

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import OriginalToggle from '@theme-original/ColorModeToggle';
-import type {Props} from '@theme/ColorModeToggle';
 import {
   lightStorage,
   darkStorage,
@@ -19,6 +18,7 @@ import {
   DARK_BACKGROUND_COLOR,
   COLOR_SHADES,
 } from '@site/src/utils/colorUtils';
+import type {Props} from '@theme/ColorModeToggle';
 
 // The ColorGenerator modifies the DOM styles. The styles are persisted in
 // session storage, and we need to apply the same style when toggling modes even

website/src/theme/DocSidebar/Desktop/Content/index.js

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import Content from '@theme-original/DocSidebar/Desktop/Content';
 import {useLocation} from '@docusaurus/router';
+import Content from '@theme-original/DocSidebar/Desktop/Content';
 
 function SidebarAd() {
   return (

website/src/theme/Layout/index.tsx

@@ -6,8 +6,8 @@
  */
 
 import React from 'react';
-import type {Props} from '@theme/Layout';
 import Layout from '@theme-original/Layout';
+import type {Props} from '@theme/Layout';
 
 // This component is only used to test for CSS insertion order
 import './styles.module.css';