Merge pull request #74 from TurunWappuradio/chore/import-sort

Chore: (ehdotus) Järjestetään importit automaattisesti

.eslintrc.json

@@ -1,6 +1,25 @@
 {
   "extends": ["next", "prettier"],
+  "plugins": ["simple-import-sort"],
   "rules": {
-    "semi": 2
+    "semi": 2,
+    "simple-import-sort/imports": [
+      2,
+      {
+        "groups": [
+          [
+            "^\\u0000", // Side effect imports.
+            "^react.*",
+            "^next.*",
+            "^node:",
+            "^@?\\w" // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
+          ],
+          [
+            "^", // Absolute imports and other imports such as `@/foo`. Anything not matched in another group.
+            "^\\." // Anything that starts with a dot.
+          ]
+        ]
+      }
+    ]
   }
 }

archiver/archive.ts

@@ -1,4 +1,8 @@
-import { Show, Showlist, showsToGroups } from 'scripts/google/showlistHelpers';
+import {
+  Show,
+  Showlist,
+  showsToGroups,
+} from '@/scripts/google/showlistHelpers';
 
 const showlistBaseUrl = process.env.ARCHIVE_SOURCE_URL;
 const emptyResponse = { showsByDate: [], weekKeys: {} } as const;

archiver/archiveCrawlers.ts

@@ -1,9 +1,9 @@
-import { parseSheetToShowList } from 'scripts/google/client';
-import { GoogleConfigSheets, getSheet } from 'scripts/google/google';
 import { mkdirSync } from 'node:fs';
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import { getImagePath } from 'utils/fileHelpers';
+
+import { parseSheetToShowList } from '@/scripts/google/client';
+import { getSheet, GoogleConfigSheets } from '@/scripts/google/google';
 
 export const archiveOldShowlists = async () => {
   // NOTE: Uncomment for archiving google sheet data

components/ShoutBox/messageformatter.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import NameFormatter from './nameformatter';
 
 interface MessageFormatterProps {

components/ShoutBox/messageinput.tsx

@@ -1,5 +1,6 @@
 import React, { ChangeEvent, Component, useEffect, useState } from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
+
 import NameFormatter from './nameformatter';
 import TextField from './textfield';
 

components/ShoutBox/nameformatter.tsx

@@ -1,6 +1,6 @@
-import { format } from 'date-fns';
 import React from 'react';
 import Image from 'next/image';
+import { format } from 'date-fns';
 
 interface NameFormatterProps {
   name: string;

components/ShoutBox/nameinput.tsx

@@ -1,4 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
+
 import TextField from './textfield';
 
 const isButtonDisabled = (name: string) => name === '';

components/ShoutBox/shoutbox.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { GrFormClose } from 'react-icons/gr';
 
+import useShoutBoxAndVideo from '../../hooks/useShoutboxAndVideo';
+import MessageFormatter from './messageformatter';
 import MessageInput from './messageinput';
 import NameInput from './nameinput';
-import MessageFormatter from './messageformatter';
-import useShoutBoxAndVideo from '../../hooks/useShoutboxAndVideo';
 
 const wsURL = process.env.NEXT_PUBLIC_SHOUTBOX_SOURCE || 'ws://localhost:3030';
 

components/button.tsx

@@ -1,5 +1,5 @@
-import Link from 'next/link';
 import { FC, ReactNode } from 'react';
+import Link from 'next/link';
 
 const buttonStyle =
   'bg-teal px-6 md:px-8 py-2 md:py-3 text-blue font-bold hover:bg-coral transition ease-in-out rounded';

components/calendar.tsx

@@ -1,5 +1,5 @@
-import { FC, useState, useEffect } from 'react';
-import { startOfDay, format, parseISO, isSameDay } from 'date-fns';
+import { FC, useEffect, useState } from 'react';
+import { format, isSameDay, parseISO, startOfDay } from 'date-fns';
 import fi from 'date-fns/locale/fi';
 
 // Fetch next events but not more than 6 months from now

components/controls.tsx

@@ -1,4 +1,4 @@
-import { FiPlay, FiPause, FiVolumeX, FiVolume2 } from 'react-icons/fi';
+import { FiPause, FiPlay, FiVolume2, FiVolumeX } from 'react-icons/fi';
 
 import VolumeSlider from './volumeSlider';
 

components/footer.tsx

@@ -1,14 +1,14 @@
-import Image from 'next/image';
-import Link from 'next/link';
 import {
-  AiOutlineInstagram,
   AiFillFacebook,
-  AiOutlineMail,
   AiFillGithub,
+  AiOutlineInstagram,
+  AiOutlineMail,
 } from 'react-icons/ai';
 import { FaDiscord, FaTelegramPlane } from 'react-icons/fa';
+import Image from 'next/image';
+import Link from 'next/link';
 
-import { NavigationItem } from 'contentful/client';
+import { NavigationItem } from '@/contentful/client';
 
 interface FooterProps {
   navigationItems: NavigationItem[];

components/hero.tsx

@@ -1,11 +1,11 @@
+import { FC, useState } from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { FC, useState } from 'react';
 
-import { contentfulImageLoader } from 'contentful/contentfulImageLoader';
-import { LinkButton } from './button';
-import { NavigationItem } from 'contentful/client';
+import { NavigationItem } from '@/contentful/client';
+import { contentfulImageLoader } from '@/contentful/contentfulImageLoader';
 import heroImage from '../public/hero.webp';
+import { LinkButton } from './button';
 import Hamburger from './hamburger/hamburger';
 import Menu from './menu';
 

components/menu.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 
-import { NavigationItem } from 'contentful/client';
+import { NavigationItem } from '@/contentful/client';
 
 interface MenuProps {
   navigationItems: NavigationItem[];

components/player.tsx

@@ -1,12 +1,12 @@
-import Image from 'next/image';
 import { useEffect, useState } from 'react';
+import { FiMessageSquare, FiPause, FiPlay, FiVideo } from 'react-icons/fi';
+import Image from 'next/image';
 import { format } from 'date-fns';
 
-import testcard from '../public/testcard.webp';
+import useShoutBoxAndVideo from '@/hooks/useShoutboxAndVideo';
+import { Show } from '@/scripts/google/showlistHelpers';
 import placeholderImage from '../public/kuva_puuttuu_v2.jpeg';
-import useShoutBoxAndVideo from 'hooks/useShoutboxAndVideo';
-import { FiPause, FiPlay, FiMessageSquare, FiVideo } from 'react-icons/fi';
-import { Show } from 'scripts/google/showlistHelpers';
+import testcard from '../public/testcard.webp';
 
 const SHOW_REFRESH_TIME = 10000; // 10 seconds
 

components/playerControlPanel.tsx

@@ -1,4 +1,4 @@
-import useMetadata from 'hooks/useMetadata';
+import useMetadata from '@/hooks/useMetadata';
 import Controls from './controls';
 
 interface PlayerControlPanelProps {

components/responsiveShowlist.tsx

@@ -1,10 +1,10 @@
-import { format, parse } from 'date-fns';
-import fi from 'date-fns/locale/fi';
 import { Dispatch, SetStateAction, useState } from 'react';
 import { BsArrowLeft, BsArrowRight } from 'react-icons/bs';
+import { format, parse } from 'date-fns';
+import fi from 'date-fns/locale/fi';
 
-import { ShowCard } from 'components/showcard';
-import { Show } from 'scripts/google/showlistHelpers';
+import { ShowCard } from '@/components/showcard';
+import { Show } from '@/scripts/google/showlistHelpers';
 
 interface NavButton {
   value: string | null;

components/richtext.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
-import { MARKS, BLOCKS, INLINES } from '@contentful/rich-text-types';
+import Image from 'next/image';
 import {
   documentToReactComponents,
   Options,
 } from '@contentful/rich-text-react-renderer';
-import Image from 'next/image';
+import { BLOCKS, INLINES, MARKS } from '@contentful/rich-text-types';
 
 import { contentfulImageLoader } from '../contentful/contentfulImageLoader';
 import { LinkButton } from './button';

components/showcard.tsx

@@ -1,10 +1,10 @@
+import { useState } from 'react';
+import Image from 'next/image';
 import { format } from 'date-fns';
 import fi from 'date-fns/locale/fi';
-import Image from 'next/image';
-import { useState } from 'react';
 
+import { Show } from '@/scripts/google/showlistHelpers';
 import placeholderImage from '../public/kuva_puuttuu_v2.jpeg';
-import { Show } from 'scripts/google/showlistHelpers';
 
 interface ShowCard {
   show: Show;

components/showlist.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 
-import { Show } from 'scripts/google/showlistHelpers';
+import { useViewport } from '@/hooks/useViewport';
+import { Show } from '@/scripts/google/showlistHelpers';
+import { ModeButton } from './button';
 import ResponsiveShowlist from './responsiveShowlist';
 import ShowlistMap from './showlistMap';
-import { ModeButton } from './button';
-import { useViewport } from 'hooks/useViewport';
 
 interface ShowlistProps {
   showsByDate: {

components/showlistMap.tsx

@@ -3,7 +3,7 @@ import { differenceInMinutes, format, parse } from 'date-fns';
 import fi from 'date-fns/locale/fi';
 import { head, keys } from 'ramda';
 
-import { Show } from 'scripts/google/showlistHelpers';
+import { Show } from '@/scripts/google/showlistHelpers';
 import { ModeButton } from './button';
 import { ShowCard } from './showcard';
 import { WideScreencard } from './widescreen-card';

components/videoPlayer.tsx

@@ -1,6 +1,7 @@
-import useShoutBoxAndVideo from 'hooks/useShoutboxAndVideo';
 import { GrFormClose } from 'react-icons/gr';
 
+import useShoutBoxAndVideo from '@/hooks/useShoutboxAndVideo';
+
 const VideoPlayer = () => {
   const { videoOpen, setVideoOpen } = useShoutBoxAndVideo();
 

components/widescreen-card.tsx

@@ -1,4 +1,4 @@
-import { Color } from 'scripts/google/showlistHelpers';
+import { Color } from '@/scripts/google/showlistHelpers';
 
 interface WideScreenCardProps {
   text: string;

contentful/client.ts

@@ -4,6 +4,7 @@ import {
   InMemoryCache,
   NormalizedCacheObject,
 } from '@apollo/client';
+
 import {
   NavigationItemsDocument,
   NavigationItemsQuery,

package.json

@@ -37,6 +37,7 @@
     "eslint": "^8.9.0",
     "eslint-config-next": "^12.0.10",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
     "graphql-let": "^0.18.4",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",

pages/[...slug].tsx

@@ -1,22 +1,22 @@
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 
+import Footer from '@/components/footer';
+import Hero from '@/components/hero';
+import RichText from '@/components/richtext';
 import {
   fetchContent,
   fetchNavigationItems,
   NavigationItem,
-} from 'contentful/client';
-import RichText from 'components/richtext';
-import {
-  ContentPagePathsDocument,
-  ContentPagePathsQuery,
-} from 'contentful/graphql/contentPagePaths.graphql';
+} from '@/contentful/client';
 import {
   ContentPageDocument,
   ContentPageQuery,
-} from 'contentful/graphql/contentPage.graphql';
-import Hero from 'components/hero';
-import Footer from 'components/footer';
+} from '@/contentful/graphql/contentPage.graphql';
+import {
+  ContentPagePathsDocument,
+  ContentPagePathsQuery,
+} from '@/contentful/graphql/contentPagePaths.graphql';
 
 interface ContentPageProps {
   name: string;

pages/_app.tsx

@@ -1,11 +1,11 @@
+import 'tailwindcss/tailwind.css';
 import { createRef, useState } from 'react';
 import { AppProps } from 'next/app';
-import 'tailwindcss/tailwind.css';
 
-import PlayerControlPanel from 'components/playerControlPanel';
-import { ShoutBoxAndVideoProvider } from 'hooks/useShoutboxAndVideo';
-import { ChatWrapper } from 'components/ShoutBox/shoutbox';
-import VideoPlayer from 'components/videoPlayer';
+import PlayerControlPanel from '@/components/playerControlPanel';
+import { ChatWrapper } from '@/components/ShoutBox/shoutbox';
+import VideoPlayer from '@/components/videoPlayer';
+import { ShoutBoxAndVideoProvider } from '@/hooks/useShoutboxAndVideo';
 
 const AUDIO_STREAM_URL = 'https://player.turunwappuradio.com/wappuradio.mp3';
 

pages/_document.tsx

@@ -1,4 +1,4 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
 
 // A custom Document for Next.js to inject Tailwind styles to the body.
 class MyDocument extends Document {

pages/api/archiver.ts

@@ -1,6 +1,7 @@
-import { archiveOldShowlists } from 'archiver/archiveCrawlers';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
+import { archiveOldShowlists } from '@/archiver/archiveCrawlers';
+
 type ResponseData = {
   message: string;
 };