Sort imports

This helps with preventing [1]. This solution is recommended in [2].

[1]: facebook/create-react-app#5372
[2]: facebook/create-react-app#5372 (comment)

.prettierrc.yml

@@ -1,2 +1,7 @@
+importOrder:
+  - '^\.\.'
+  - '^\.'
+importOrderSeparation: true
+importOrderSortSpecifiers: true
 singleQuote: true
 trailingComma: all

gatsby-browser.js

@@ -1,3 +1,4 @@
 import 'normalize.css';
 import 'swiper/swiper.css';
+
 import './src/styles/global.css';

package.json

@@ -39,6 +39,7 @@
     "swiper": "^9.3.2"
   },
   "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/node": "^18.16.14",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",

src/components/apartmea/Content.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
 import { SwiperSlide } from 'swiper/react';
+
 import Article from '../text/article/Article';
-import Container from '../ui/layout/Container';
 import Description from '../text/article/Description';
 import H1 from '../text/article/H1';
-import MainSwiper from '../ui/swiper/MainSwiper';
 import Paragraph from '../text/article/Paragraph';
+import Container from '../ui/layout/Container';
+import MainSwiper from '../ui/swiper/MainSwiper';
 import ThumbSwiper from '../ui/swiper/ThumbSwiper';
 import useSwiper from '../ui/swiper/use-swiper';
 

src/components/frango/Content.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
+
 import Article from '../text/article/Article';
 import Blockquote from '../text/article/Blockquote';
-import CenterBox from '../ui/layout/CenterBox';
-import Container from '../ui/layout/Container';
 import Description from '../text/article/Description';
 import H1 from '../text/article/H1';
 import H2 from '../text/article/H2';
 import Paragraph from '../text/article/Paragraph';
+import CenterBox from '../ui/layout/CenterBox';
+import Container from '../ui/layout/Container';
 import Row from '../ui/layout/Row';
 
 import { frangoIcon, grid } from './Common.module.css';

src/components/hate-free-zone/Content.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
 import { SwiperSlide } from 'swiper/react';
-import Article from '../text/article/Article';
-import Container from '../ui/layout/Container';
-import Description from '../text/article/Description';
+
 import HateFreeVideo1 from '../../assets/hate-free-video-1.mp4';
 import HateFreeVideo2 from '../../assets/hate-free-video-2.mp4';
-import MainSwiper from '../ui/swiper/MainSwiper';
+import Article from '../text/article/Article';
+import Description from '../text/article/Description';
 import Paragraph from '../text/article/Paragraph';
+import Container from '../ui/layout/Container';
+import MainSwiper from '../ui/swiper/MainSwiper';
 import ThumbSwiper from '../ui/swiper/ThumbSwiper';
 import useSwiper from '../ui/swiper/use-swiper';
 import Video from '../ui/video/Video';

src/components/home-page/hero-banner/HeroBanner.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import { AnchorLink } from 'gatsby-plugin-anchor-links';
+import React from 'react';
+
 import ArrowDownIcon from '../../../assets/arrow-down-icon.svg';
-import Header from '../../ui/header/Header';
 import MarkAvenueVideo from '../../../assets/mark-avenue-video.mp4';
+import Header from '../../ui/header/Header';
 import ServicesTabs from '../services-tabs/ServicesTabs';
 
 import {

src/components/home-page/our-team/OurTeam.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
+
 import Heading from '../../text/heading/Heading';
 import Paragraph from '../../text/paragraph/Paragraph';
 import Section from '../../ui/section/Section';

src/components/home-page/partners/Partners.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
 
 import { partners } from './Partners.module.css';
 

src/components/home-page/services-tabs/ServicesTabs.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+
 import useWindowWidth from '../../../hooks/use-window-size';
 import TabsContent from '../../ui/tabs/TabsContent';
 import TabsList from '../../ui/tabs/TabsList';

src/components/quest-bar/Content.tsx

@@ -1,6 +1,7 @@
 import { StaticImage } from 'gatsby-plugin-image';
 import React from 'react';
 import { SwiperSlide } from 'swiper/react';
+
 import Article from '../text/article/Article';
 import Description from '../text/article/Description';
 import H1 from '../text/article/H1';

src/components/soupculture/Content.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
 import { SwiperSlide } from 'swiper/react';
+
 import Article from '../text/article/Article';
-import Container from '../ui/layout/Container';
 import Description from '../text/article/Description';
 import H1 from '../text/article/H1';
 import Paragraph from '../text/article/Paragraph';
-
-import { video } from './Common.module.css';
+import Container from '../ui/layout/Container';
 import MainSwiper from '../ui/swiper/MainSwiper';
-import useSwiper from '../ui/swiper/use-swiper';
 import ThumbSwiper from '../ui/swiper/ThumbSwiper';
+import useSwiper from '../ui/swiper/use-swiper';
+
+import { video } from './Common.module.css';
 
 const IMAGES = [
   <StaticImage src="../../assets/soupculture-1.png" alt="" />,

src/components/soupculture/Swiper.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { StaticImage } from 'gatsby-plugin-image';
+import React from 'react';
 import { SwiperSlide } from 'swiper/react';
+
 import MainSwiper from '../ui/swiper/MainSwiper';
 
 export default function Swiper() {

src/components/text/heading/Heading.tsx

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
 
 import { heading, normal, yellow } from './Heading.module.css';
 

src/components/text/paragraph/Paragraph.tsx

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren } from 'react';
 import classNames from 'classnames';
+import React, { PropsWithChildren } from 'react';
 
 import { paragraph } from './Paragraph.module.css';
 

src/components/ui/footer/Footer.tsx

@@ -1,26 +1,27 @@
-import { graphql, Link, useStaticQuery } from 'gatsby';
+import { Link, graphql, useStaticQuery } from 'gatsby';
 import React, { forwardRef } from 'react';
-import Heading from '../../text/heading/Heading';
+
 import FacebookIcon from '../../../assets/facebook.svg';
-import FooterIconLink from './FooterIconLink';
 import InstagramIcon from '../../../assets/instagram.svg';
 import LinkedInIcon from '../../../assets/linked-in.svg';
-import PhoneLink from '../link/PhoneLink';
-import EmailLink from '../link/EmailLink';
-import Section from '../section/Section';
 import {
   CONTACT_EMAIL_ADDRESS,
   CONTACT_PHONE_NUMBER,
 } from '../../../const/contact';
 import { COOKIE_POLICY_PAGE, PRIVACY_POLICY_PAGE } from '../../../const/routes';
 import { SITE_TITLE } from '../../../const/site-metadata';
+import Heading from '../../text/heading/Heading';
+import EmailLink from '../link/EmailLink';
+import PhoneLink from '../link/PhoneLink';
+import Section from '../section/Section';
 
 import {
   footerLink,
   primaryRow,
   secondaryRow,
   socials,
 } from './Common.module.css';
+import FooterIconLink from './FooterIconLink';
 
 export default forwardRef<HTMLElement>((_, ref) => {
   const data = useStaticQuery<Queries.FooterQuery>(graphql`

src/components/ui/header/Header.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import classNames from 'classnames';
 import { Link } from 'gatsby';
 import { AnchorLink } from 'gatsby-plugin-anchor-links';
+import React from 'react';
+
 import Logo from '../logo/Logo';
 
 import {