fix imports order

.eslintrc.json

@@ -11,6 +11,30 @@
     "react/prop-types": 0,
     "react/react-in-jsx-scope": 0,
     "react/display-name": 0,
-    "no-unused-vars": 0
+    "no-unused-vars": 0,
+    "sort-imports": ["error", { "ignoreCase": true, "ignoreDeclarationSort": true }],
+    "import/order": [
+      1,
+      {
+        "groups": ["external", "builtin", "internal", "sibling", "parent", "index"],
+        "pathGroups": [
+          { "pattern": "env", "group": "internal" },
+          { "pattern": "types", "group": "internal" },
+          { "pattern": "components/**", "group": "internal" },
+          { "pattern": "contexts/**", "group": "internal" },
+          { "pattern": "hooks/**", "group": "internal" },
+          { "pattern": "pages/**", "group": "internal" },
+          { "pattern": "views/**", "group": "internal" },
+          { "pattern": "utils/**", "group": "internal" },
+          { "pattern": "public/**", "group": "internal", "position": "after" },
+          { "pattern": "posts/**", "group": "internal", "position": "after" }
+        ],
+        "pathGroupsExcludedImportTypes": ["internal"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
   }
 }

components/ArticleCard.tsx

@@ -1,7 +1,7 @@
 import NextImage from 'next/image';
+import NextLink from 'next/link';
 import styled from 'styled-components';
 import { media } from 'utils/media';
-import NextLink from 'next/link';
 
 export interface ArticleCardProps {
   title: string;

components/ArticleImage.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import NextImage, { ImageProps } from 'next/image';
+import React from 'react';
 import styled from 'styled-components';
 
 interface ArticleImageProps extends ImageProps {

components/BasicSection.tsx

@@ -1,10 +1,10 @@
+import NextImage from 'next/image';
 import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import NextImage from 'next/image';
 import { media } from 'utils/media';
 import Container from './Container';
-import RichText from './RichText';
 import OverTitle from './OverTitle';
+import RichText from './RichText';
 
 export interface BasicSectionProps {
   imageUrl: string;

components/Code.tsx

@@ -1,8 +1,8 @@
-import { useClipboard } from 'hooks/useClipboard';
 import Highlight, { defaultProps, Language } from 'prism-react-renderer';
 import React from 'react';
 import styled from 'styled-components';
 import ClientOnly from 'components/ClientOnly';
+import { useClipboard } from 'hooks/useClipboard';
 
 export interface CodeProps {
   code: string;

components/Footer.tsx

@@ -1,8 +1,8 @@
-import styled from 'styled-components';
 import NextLink from 'next/link';
-import { media } from 'utils/media';
+import { FacebookIcon, LinkedinIcon, TwitterIcon } from 'react-share';
+import styled from 'styled-components';
 import Container from 'components/Container';
-import { TwitterShareButton, TwitterIcon, FacebookShareButton, FacebookIcon, LinkedinShareButton, LinkedinIcon } from 'react-share';
+import { media } from 'utils/media';
 
 type SingleFooterListItem = { title: string; href: string };
 type FooterListItems = SingleFooterListItem[];

components/MDXRichText.tsx

@@ -1,10 +1,10 @@
-import styled from 'styled-components';
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote';
+import styled from 'styled-components';
+import { media } from 'utils/media';
+import ArticleImage from './ArticleImage';
 import Code from './Code';
-import Quote from './Quote';
 import Link from './Link';
-import ArticleImage from './ArticleImage';
-import { media } from 'utils/media';
+import Quote from './Quote';
 
 export default function RichText(props: MDXRemoteSerializeResult) {
   return (

components/Navbar.tsx

@@ -1,16 +1,16 @@
-import styled from 'styled-components';
-import Logo from './Logo';
 import NextLink from 'next/link';
+import { useRouter } from 'next/router';
 import React, { useRef, useState } from 'react';
-import Container from './Container';
-import Drawer from './Drawer';
+import styled from 'styled-components';
+import { useNewsletterModalContext } from 'contexts/newsletter-modal.context';
 import { ScrollPositionEffectProps, useScrollPosition } from 'hooks/useScrollPosition';
-import { useRouter } from 'next/router';
 import { NavItems, SingleNavItem } from 'types';
-import { HamburgerIcon } from './HamburgerIcon';
 import { media } from 'utils/media';
 import Button from './Button';
-import { useNewsletterModalContext } from 'contexts/newsletter-modal.context';
+import Container from './Container';
+import Drawer from './Drawer';
+import { HamburgerIcon } from './HamburgerIcon';
+import Logo from './Logo';
 
 type NavbarProps = { items: NavItems };
 type ScrollingDirections = 'up' | 'down' | 'none';

components/NavigationDrawer.tsx

@@ -1,11 +1,11 @@
-import styled from 'styled-components'
-import OriginalDrawer from './Drawer'
-import CloseIcon from './CloseIcon'
 import NextLink from 'next/link'
-import { PropsWithChildren, useEffect, useRef } from 'react'
-import ClientOnly from './ClientOnly'
 import { useRouter } from 'next/router'
+import { PropsWithChildren, useEffect, useRef } from 'react'
+import styled from 'styled-components'
 import { NavItems } from 'types'
+import ClientOnly from './ClientOnly'
+import CloseIcon from './CloseIcon'
+import OriginalDrawer from './Drawer'
 
 type NavigationDrawerProps = PropsWithChildren<{ items: NavItems }>
 

components/NewsletterModal.tsx

@@ -1,5 +1,5 @@
-import useEscClose from 'hooks/useEscKey';
 import styled from 'styled-components';
+import useEscClose from 'hooks/useEscKey';
 import { media } from 'utils/media';
 import Button from './Button';
 import CloseIcon from './CloseIcon';

components/Spacer.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const Spacer = styled.hr`
   width: 100%;

components/WaveCta.tsx

@@ -1,9 +1,9 @@
 import NextLink from 'next/link';
+import styled from 'styled-components';
+import Button from 'components/Button';
 import ButtonGroup from 'components/ButtonGroup';
 import Container from 'components/Container';
 import SectionTitle from 'components/SectionTitle';
-import Button from 'components/Button';
-import styled from 'styled-components';
 import { media } from 'utils/media';
 
 export default function WaveCta() {

hooks/useScrollPosition.ts

@@ -1,9 +1,9 @@
-import { useScrollPosition as originalUseScrollPosition } from '@n8tb1t/use-scroll-position'
+import { useScrollPosition as originalUseScrollPosition } from '@n8tb1t/use-scroll-position';
 
-declare type ElementRef = React.MutableRefObject<HTMLElement | undefined>
+declare type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
 
-type Axis = { x: number; y: number }
-export type ScrollPositionEffectProps = { prevPos: Axis; currPos: Axis }
+type Axis = { x: number; y: number };
+export type ScrollPositionEffectProps = { prevPos: Axis; currPos: Axis };
 
 export function useScrollPosition(
   effect: (props: ScrollPositionEffectProps) => void,
@@ -13,5 +13,5 @@ export function useScrollPosition(
   wait?: number | undefined,
   boundingElement?: ElementRef | undefined,
 ) {
-  return originalUseScrollPosition(effect, deps, element, useWindow, wait, boundingElement)
+  return originalUseScrollPosition(effect, deps, element, useWindow, wait, boundingElement);
 }

pages/_app.tsx

@@ -3,17 +3,18 @@ import 'swiper/css/bundle';
 import 'swiper/css/navigation';
 import 'swiper/css/autoplay';
 
-import Head from 'next/head';
+
 import { AppProps } from 'next/dist/shared/lib/router/router';
+import Head from 'next/head';
+import { PropsWithChildren } from 'react';
+import Footer from 'components/Footer';
 import { GlobalStyle } from 'components/GlobalStyles';
 import Navbar from 'components/Navbar';
-import { NavItems } from 'types';
 import NavigationDrawer from 'components/NavigationDrawer';
 import NewsletterModal from 'components/NewsletterModal';
-import Footer from 'components/Footer';
 import WaveCta from 'components/WaveCta';
 import { NewsletterModalContextProvider, useNewsletterModalContext } from 'contexts/newsletter-modal.context';
-import { PropsWithChildren } from 'react';
+import { NavItems } from 'types';
 
 const navItems: NavItems = [
   { title: 'Why logoipsum', href: '/' },

pages/_document.tsx

@@ -1,5 +1,5 @@
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
 import React from 'react';
-import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {

pages/blog/[slug].tsx

@@ -1,22 +1,18 @@
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
+import Head from 'next/head';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { formatDate } from 'utils/formatDate';
+import Container from 'components/Container';
 import MDXRichText from 'components/MDXRichText';
-
-import Head from 'next/head';
-// import OpenGraphHead from 'views/SingleArticlePage/OpenGraphHead';
-// import MetadataHead from 'views/SingleArticlePage/MetadataHead';
-// import StructuredDataHead from 'views/SingleArticlePage/StructuredDataHead';
+import { formatDate } from 'utils/formatDate';
+import { media } from 'utils/media';
 import { getAllPostsSlugs, getSinglePost } from 'utils/postsFetcher';
-import React, { useEffect } from 'react';
 import { getReadTime } from 'utils/readTime';
-import { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
-import Container from 'components/Container';
+import Header from 'views/SingleArticlePage/Header';
 import MetadataHead from 'views/SingleArticlePage/MetadataHead';
-import StructuredDataHead from 'views/SingleArticlePage/StructuredDataHead';
 import OpenGraphHead from 'views/SingleArticlePage/OpenGraphHead';
-import Header from 'views/SingleArticlePage/Header';
 import ShareWidget from 'views/SingleArticlePage/ShareWidget';
-import { media } from 'utils/media';
+import StructuredDataHead from 'views/SingleArticlePage/StructuredDataHead';
 
 export default function SingleArticlePage(props: InferGetStaticPropsType<typeof getStaticProps>) {
   const { slug, content, meta, readTime } = props;

pages/contact.tsx

@@ -1,8 +1,7 @@
+import styled from 'styled-components';
 import Container from 'components/Container';
 import Page from 'components/Page';
-import styled from 'styled-components';
 import { media } from 'utils/media';
-
 import FormSection from 'views/ContactPage/FormSection';
 import InformationSection from 'views/ContactPage/InformationSection';
 

pages/index.tsx

@@ -1,17 +1,15 @@
 import { InferGetStaticPropsType } from 'next';
 import styled from 'styled-components';
-
-import { getAllPosts } from 'utils/postsFetcher';
-import Link from 'components/Link';
 import BasicSection from 'components/BasicSection';
-
-import Hero from 'views/HomePage/Hero';
-import Partners from 'views/HomePage/Partners';
+import Link from 'components/Link';
+import { getAllPosts } from 'utils/postsFetcher';
 import Cta from 'views/HomePage/Cta';
 import Features from 'views/HomePage/Features';
-import Testimonials from 'views/HomePage/Testimonials';
 import FeaturesGallery from 'views/HomePage/FeaturesGallery';
+import Hero from 'views/HomePage/Hero';
+import Partners from 'views/HomePage/Partners';
 import ScrollableBlogPosts from 'views/HomePage/ScrollableBlogPosts';
+import Testimonials from 'views/HomePage/Testimonials';
 
 export default function Homepage({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (

utils/media.ts

@@ -1,3 +1,3 @@
-import originalMedia from 'css-in-js-media'
+import originalMedia from 'css-in-js-media';
 
-export const media = originalMedia
+export const media = originalMedia;

utils/postsFetcher.ts

@@ -1,6 +1,6 @@
-import * as path from 'path';
-import * as fs from 'fs';
 import matter from 'gray-matter';
+import * as fs from 'fs';
+import * as path from 'path';
 import { SingleArticle } from 'types';
 
 export async function getAllPosts() {

views/ContactPage/FormSection.tsx

@@ -1,6 +1,6 @@
+import styled from 'styled-components';
 import Button from 'components/Button';
 import Input from 'components/Input';
-import styled from 'styled-components';
 import { media } from 'utils/media';
 
 export default function FormSection() {

views/HomePage/Cta.tsx

@@ -1,12 +1,12 @@
+import NextLink from 'next/link';
 import React from 'react';
 import styled from 'styled-components';
-import NextLink from 'next/link';
 import Button from 'components/Button';
+import ButtonGroup from 'components/ButtonGroup';
 import Container from 'components/Container';
 import OverTitle from 'components/OverTitle';
-import ButtonGroup from 'components/ButtonGroup';
-import { media } from 'utils/media';
 import SectionTitle from 'components/SectionTitle';
+import { media } from 'utils/media';
 
 export default function Cta() {
   return (

views/HomePage/Features.tsx

@@ -1,6 +1,6 @@
-import styled from 'styled-components';
-import React from 'react';
 import NextImage from 'next/image';
+import React from 'react';
+import styled from 'styled-components';
 import AutofitGrid from 'components/AutofitGrid';
 import Container from 'components/Container';
 import { media } from 'utils/media';

views/HomePage/FeaturesGallery.tsx

@@ -1,12 +1,12 @@
+import NextImage from 'next/image';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import NextImage from 'next/image';
-import Container from 'components/Container';
-import { media } from 'utils/media';
 import Collapse from 'components/Collapse';
-import ThreeLayersCircle from 'components/ThreeLayersCircle';
+import Container from 'components/Container';
 import OverTitle from 'components/OverTitle';
 import SectionTitle from 'components/SectionTitle';
+import ThreeLayersCircle from 'components/ThreeLayersCircle';
+import { media } from 'utils/media';
 
 const TABS = [
   {

views/HomePage/Hero.tsx

@@ -1,11 +1,11 @@
+import NextLink from 'next/link';
+import styled from 'styled-components';
 import Button from 'components/Button';
+import ButtonGroup from 'components/ButtonGroup';
 import Container from 'components/Container';
 import HeroIllustration from 'components/HeroIllustation';
-import styled from 'styled-components';
-import { media } from 'utils/media';
-import NextLink from 'next/link';
 import OverTitle from 'components/OverTitle';
-import ButtonGroup from 'components/ButtonGroup';
+import { media } from 'utils/media';
 
 export default function Hero() {
   return (

views/HomePage/Partners.tsx

@@ -1,6 +1,6 @@
+import NextImage from 'next/image';
 import React from 'react';
 import styled from 'styled-components';
-import NextImage from 'next/image';
 import { Autoplay } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import Container from 'components/Container';

views/HomePage/ScrollableBlogPosts.tsx

@@ -1,12 +1,12 @@
-import Container from 'components/Container';
-import { Swiper, SwiperSlide } from 'swiper/react';
+import styled from 'styled-components';
 import { A11y } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import ArticleCard from 'components/ArticleCard';
-import SectionTitle from 'components/SectionTitle';
+import Container from 'components/Container';
 import OverTitle from 'components/OverTitle';
-import styled from 'styled-components';
-import { media } from 'utils/media';
+import SectionTitle from 'components/SectionTitle';
 import { SingleArticle } from 'types';
+import { media } from 'utils/media';
 
 interface ScrollableBlogPostsProps {
   posts: SingleArticle[];

views/HomePage/Testimonials.tsx

@@ -1,10 +1,10 @@
-import Container from 'components/Container';
+import NextImage from 'next/image';
 import React from 'react';
 import styled from 'styled-components';
-import NextImage from 'next/image';
 
+import { A11y, Autoplay, Navigation } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Navigation, Autoplay, A11y } from 'swiper';
+import Container from 'components/Container';
 import Separator from 'components/Separator';
 import { media } from 'utils/media';