Add eslint import rules

.eslintrc.json

@@ -1,3 +1,11 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "plugins": ["simple-import-sort"],
+  "rules": {
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error"
+  }
 }

components/confirm-prompt.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from "react-dom";
+
 import Modal, { ModalProps } from "./modal/modal";
 
 export const confirmPrompt = (props: ModalProps) => {

components/cookie-consent.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { getPortal } from "utils/selectors";
+
 import CookiesIllustration from "./cookie-consent/cookies.svg";
 
 const CookieConsentPopover: React.VoidFunctionComponent = () => {

components/crisp-chat.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
-import Button from "./button";
+
 import Chat from "@/components/icons/chat.svg";
 
+import Button from "./button";
+
 const crispWebsiteId = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
 
 declare global {

components/discussion/discussion.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useList } from "react-use";
+
 import {
   createComment,
   CreateCommentPayload,

components/dropdown.tsx

@@ -4,6 +4,7 @@ import clsx from "clsx";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { usePopper } from "react-popper";
+
 export interface DropdownProps {
   trigger?: React.ReactNode;
   children?: React.ReactNode;

components/error-page.tsx

@@ -1,11 +1,13 @@
 import Head from "next/head";
 import Link from "next/link";
 import * as React from "react";
-import StandardLayout from "./standard-layout";
+
 import Button from "@/components/button";
 import Chat from "@/components/icons/chat.svg";
 import EmojiSad from "@/components/icons/emoji-sad.svg";
+
 import { showCrispChat } from "./crisp-chat";
+import StandardLayout from "./standard-layout";
 
 export interface ComponentProps {
   icon?: React.ComponentType<{ className?: string }>;

components/forms/poll-options-form/month-calendar/month-calendar.tsx

@@ -4,7 +4,7 @@ import { addMinutes, setHours } from "date-fns/esm";
 import isSameDay from "date-fns/isSameDay";
 import { usePlausible } from "next-plausible";
 import * as React from "react";
-import { DateTimeOption } from "..";
+
 import {
   expectTimeOption,
   getDateProps,
@@ -24,6 +24,7 @@ import PlusSm from "../../../icons/plus-sm.svg";
 import Trash from "../../../icons/trash.svg";
 import X from "../../../icons/x.svg";
 import Switch from "../../../switch";
+import { DateTimeOption } from "..";
 import { DateTimePickerProps } from "../types";
 import { formatDateWithoutTime, formatDateWithoutTz } from "../utils";
 import TimePicker from "./time-picker";

components/home.tsx

@@ -1,9 +1,10 @@
 import Head from "next/head";
 import React from "react";
-import PageLayout from "./page-layout";
+
 import Bonus from "./home/bonus";
 import Features from "./home/features";
 import Hero from "./home/hero";
+import PageLayout from "./page-layout";
 
 const Home: React.VoidFunctionComponent = () => {
   return (

components/home/bonus.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import Ban from "./ban-ads.svg";
+
 import Code from "@/components/icons/code.svg";
-import Server from "@/components/icons/server.svg";
 import CursorClick from "@/components/icons/cursor-click.svg";
+import Server from "@/components/icons/server.svg";
+
+import Ban from "./ban-ads.svg";
 
 const Bonus: React.VoidFunctionComponent = () => {
   return (

components/home/features.tsx

@@ -1,8 +1,9 @@
+import * as React from "react";
+
 import Bell from "@/components/icons/bell.svg";
 import Chat from "@/components/icons/chat.svg";
 import Clock from "@/components/icons/clock.svg";
 import DeviceMobile from "@/components/icons/device-mobile.svg";
-import * as React from "react";
 
 const Features: React.VoidFunctionComponent = () => {
   return (

components/home/hero.tsx

@@ -1,7 +1,8 @@
 import { motion } from "framer-motion";
-import { useTranslation } from "next-i18next";
 import Link from "next/link";
+import { useTranslation } from "next-i18next";
 import * as React from "react";
+
 import { UserAvatarProvider } from "../poll/user-avatar";
 import PollDemo from "./poll-demo";
 import ScribbleArrow from "./scribble-arrow.svg";

components/home/poll-demo.tsx

@@ -2,6 +2,7 @@ import { format } from "date-fns";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { useTimeoutFn } from "react-use";
+
 import DateCard from "../date-card";
 import Score from "../poll/score";
 import UserAvater from "../poll/user-avatar";

components/home/stats.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
-import * as React from "react";
 import { useTranslation } from "next-i18next";
+import * as React from "react";
 
 const Stats: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("homepage");

components/modal/modal-provider.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useList } from "react-use";
+
 import { useRequiredContext } from "../use-required-context";
 import Modal, { ModalProps } from "./modal";
 

components/page-layout.tsx

@@ -1,15 +1,17 @@
-import Link from "next/link";
-import * as React from "react";
-import Github from "./home/github.svg";
-import Logo from "../public/logo.svg";
-import Footer from "./page-layout/footer";
-import Head from "next/head";
-import { useRouter } from "next/router";
 import clsx from "clsx";
-import DotsVertical from "@/components/icons/dots-vertical.svg";
 import dynamic from "next/dynamic";
+import Head from "next/head";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import * as React from "react";
 import { createBreakpoint } from "react-use";
 
+import DotsVertical from "@/components/icons/dots-vertical.svg";
+
+import Logo from "../public/logo.svg";
+import Github from "./home/github.svg";
+import Footer from "./page-layout/footer";
+
 const Popover = dynamic(() => import("./popover"), { ssr: false });
 export interface PageLayoutProps {
   children?: React.ReactNode;

components/page-layout/footer.tsx

@@ -1,7 +1,8 @@
 import Link from "next/link";
+import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 import GitHubButton from "react-github-btn";
-import { Trans, useTranslation } from "next-i18next";
+
 import Logo from "../../public/logo.svg";
 import Vercel from "../../public/vercel-logotype-dark.svg";
 

components/poll/legacy-poll-notice.tsx

@@ -1,7 +1,8 @@
-import Speakerphone from "@/components/icons/speakerphone.svg";
 import Cookies from "js-cookie";
 import * as React from "react";
 
+import Speakerphone from "@/components/icons/speakerphone.svg";
+
 const cookieName = "legacy-poll-notice";
 
 const LegacyPollNotice: React.VoidFunctionComponent<{ show?: boolean }> = ({

components/poll/manage-poll.tsx

@@ -1,3 +1,9 @@
+import { Placement } from "@popperjs/core";
+import { format } from "date-fns";
+import { Trans,useTranslation  } from "next-i18next";
+import * as React from "react";
+import { decodeDateOption, encodeDateOption } from "utils/date-time-utils";
+
 import Button from "@/components/button";
 import Cog from "@/components/icons/cog.svg";
 import LockClosed from "@/components/icons/lock-closed.svg";
@@ -5,18 +11,13 @@ import LockOpen from "@/components/icons/lock-open.svg";
 import Pencil from "@/components/icons/pencil-alt.svg";
 import Save from "@/components/icons/save.svg";
 import Table from "@/components/icons/table.svg";
-import { Placement } from "@popperjs/core";
-import { format } from "date-fns";
-import { useTranslation } from "next-i18next";
-import * as React from "react";
-import { decodeDateOption, encodeDateOption } from "utils/date-time-utils";
+
 import Dropdown, { DropdownItem } from "../dropdown";
 import { PollDetailsForm } from "../forms";
 import { useModal } from "../modal";
 import { useModalContext } from "../modal/modal-provider";
 import { usePoll } from "../use-poll";
 import { useUpdatePollMutation } from "./mutations";
-import { Trans } from "next-i18next";
 
 const PollOptionsForm = React.lazy(() => import("../forms/poll-options-form"));
 

components/poll/mobile-poll/mobile-poll.tsx

@@ -1,18 +1,20 @@
-import { usePoll } from "@/components/use-poll";
 import { Listbox } from "@headlessui/react";
 import { Participant, Vote } from "@prisma/client";
 import clsx from "clsx";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
+
+import { usePoll } from "@/components/use-poll";
+
 import { decodeDateOption } from "../../../utils/date-time-utils";
 import { requiredString } from "../../../utils/form-validation";
 import Button from "../../button";
 import DateCard from "../../date-card";
+import CheckCircle from "../../icons/check-circle.svg";
 import ChevronDown from "../../icons/chevron-down.svg";
 import Pencil from "../../icons/pencil.svg";
 import PlusCircle from "../../icons/plus-circle.svg";
-import CheckCircle from "../../icons/check-circle.svg";
 import Trash from "../../icons/trash.svg";
 import { styleMenuItem } from "../../menu-styles";
 import NameInput from "../../name-input";

components/poll/mutations.ts

@@ -1,6 +1,7 @@
 import { updatePoll, UpdatePollPayload } from "api-client/update-poll";
 import { usePlausible } from "next-plausible";
 import { useMutation, useQuery, useQueryClient } from "react-query";
+
 import { addParticipant } from "../../api-client/add-participant";
 import {
   deleteParticipant,

components/poll/notifications-toggle.tsx

@@ -1,12 +1,14 @@
-import * as React from "react";
-import Tooltip from "../tooltip";
-import { usePoll } from "../use-poll";
 import { Trans, useTranslation } from "next-i18next";
+import { usePlausible } from "next-plausible";
+import * as React from "react";
+
 import Button from "@/components/button";
 import Bell from "@/components/icons/bell.svg";
 import BellCrossed from "@/components/icons/bell-crossed.svg";
+
+import Tooltip from "../tooltip";
+import { usePoll } from "../use-poll";
 import { useUpdatePollMutation } from "./mutations";
-import { usePlausible } from "next-plausible";
 
 export interface NotificationsToggleProps {}
 

components/poll/poll-subheader.tsx

@@ -1,11 +1,12 @@
-import { formatRelative } from "date-fns";
-import * as React from "react";
-import { Trans, useTranslation } from "next-i18next";
-import Button from "../button";
-import { usePoll } from "../use-poll";
-import Popover from "../popover";
-import { useMutation } from "react-query";
 import axios from "axios";
+import { formatRelative } from "date-fns";
+import { Trans, useTranslation } from "next-i18next";
+import * as React from "react";
+import { useMutation } from "react-query";
+
+import Button from "../button";
+import Popover from "../popover";
+import { usePoll } from "../use-poll";
 
 export interface PollSubheaderProps {}
 

components/poll/poll.tsx

@@ -3,6 +3,8 @@ import debounce from "lodash/debounce";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { useMeasure } from "react-use";
+import smoothscroll from "smoothscroll-polyfill";
+
 import { decodeDateOption } from "../../utils/date-time-utils";
 import Button from "../button";
 import DateCard from "../date-card";
@@ -11,6 +13,7 @@ import ArrowRight from "../icons/arrow-right.svg";
 import PlusCircle from "../icons/plus-circle.svg";
 import TimeZonePicker from "../time-zone-picker";
 import { TransitionPopInOut } from "../transitions";
+import { usePoll } from "../use-poll";
 import { useAddParticipantMutation } from "./mutations";
 import ParticipantRow from "./participant-row";
 import ParticipantRowForm from "./participant-row-form";
@@ -18,8 +21,6 @@ import { PollContext, usePollContext } from "./poll-context";
 import Score from "./score";
 import TimeRange from "./time-range";
 import { PollProps } from "./types";
-import smoothscroll from "smoothscroll-polyfill";
-import { usePoll } from "../use-poll";
 
 if (typeof window !== "undefined") {
   smoothscroll.polyfill();

components/poll/truncated-linkify.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import ReactLinkify from "react-linkify";
+
 import Tooltip from "../tooltip";
 
 export const truncateLink = (href: string, text: string, key: number) => {

components/popover.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { usePopper } from "react-popper";
 import { Popover as HeadlessPopover } from "@headlessui/react";
-import clsx from "clsx";
-import ReactDOM from "react-dom";
 import { Placement } from "@popperjs/core";
+import clsx from "clsx";
+import React from "react";
+import ReactDOM from "react-dom";
+import { usePopper } from "react-popper";
 
 interface PopoverProps {
   trigger: React.ReactNode;

components/sharing.tsx

@@ -5,6 +5,7 @@ import { usePlausible } from "next-plausible";
 import * as React from "react";
 import toast from "react-hot-toast";
 import { useCopyToClipboard } from "react-use";
+
 import Button from "./button";
 
 export interface SharingProps {

components/standard-layout.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import React from "react";
+
 import Logo from "../public/logo.svg";
 import Newspaper from "./icons/newspaper.svg";
 import Pencil from "./icons/pencil.svg";

components/support.tsx

@@ -1,10 +1,12 @@
-import * as React from "react";
-import PageLayout from "./page-layout";
 import { Disclosure } from "@headlessui/react";
-import Chat from "@/components/icons/chat.svg";
-import Button from "@/components/button";
-import { showCrispChat } from "./crisp-chat";
 import { Trans, useTranslation } from "next-i18next";
+import * as React from "react";
+
+import Button from "@/components/button";
+import Chat from "@/components/icons/chat.svg";
+
+import { showCrispChat } from "./crisp-chat";
+import PageLayout from "./page-layout";
 
 const Support: React.VoidFunctionComponent = () => {
   const { t } = useTranslation("support");

components/time-zone-picker/time-zone-picker.tsx

@@ -7,6 +7,7 @@ import soft from "timezone-soft";
 import ChevronDown from "../../components/icons/chevron-down.svg";
 import { styleMenuItem } from "../menu-styles";
 import timeZones from "./time-zones.json";
+
 interface TimeZoneOption {
   value: string;
   label: string;

pages/404.tsx

@@ -1,6 +1,7 @@
+import React from "react";
+
 import ErrorPage from "@/components/error-page";
 import DocumentSearch from "@/components/icons/document-search.svg";
-import React from "react";
 
 const Custom404: React.VoidFunctionComponent = () => {
   return (

pages/_app.tsx

@@ -1,17 +1,20 @@
-import ModalProvider from "@/components/modal/modal-provider";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import "tailwindcss/tailwind.css";
+import "../style.css";
+
 import { NextPage } from "next";
-import { appWithTranslation } from "next-i18next";
-import PlausibleProvider from "next-plausible";
 import { AppProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
-import "react-big-calendar/lib/css/react-big-calendar.css";
+import { appWithTranslation } from "next-i18next";
+import PlausibleProvider from "next-plausible";
 import toast, { Toaster } from "react-hot-toast";
 import { MutationCache, QueryClient, QueryClientProvider } from "react-query";
 import { useSessionStorage } from "react-use";
-import "tailwindcss/tailwind.css";
+
+import ModalProvider from "@/components/modal/modal-provider";
+
 import { UserNameContext } from "../components/user-name-context";
-import "../style.css";
 
 const CrispChat = dynamic(() => import("@/components/crisp-chat"), {
   ssr: false,

pages/_error.tsx

@@ -1,7 +1,6 @@
-import NextErrorComponent, { ErrorProps as NextErrorProps } from "next/error";
-import { NextPage, NextPageContext } from "next";
-
 import * as Sentry from "@sentry/nextjs";
+import { NextPage, NextPageContext } from "next";
+import NextErrorComponent, { ErrorProps as NextErrorProps } from "next/error";
 
 interface ErrorProps extends NextErrorProps {
   hasGetInitialPropsRun?: boolean;

pages/_middleware.ts

@@ -1,4 +1,5 @@
 import { NextMiddleware, NextResponse } from "next/server";
+
 import { isInMaintenanceMode } from "../utils/constants";
 
 export const middleware: NextMiddleware = async (req) => {

pages/api/legacy/[urlId].ts

@@ -4,6 +4,7 @@ import { exclude, getQueryParam } from "utils/api-utils";
 import { LegacyPoll } from "utils/legacy-utils";
 import { getMongoClient } from "utils/mongodb-client";
 import { nanoid } from "utils/nanoid";
+
 import { prisma } from "../../../db";
 
 export default async function handler(

pages/api/poll/[urlId]/comments/index.ts

@@ -1,4 +1,5 @@
 import absoluteUrl from "utils/absolute-url";
+
 import { prisma } from "../../../../../db";
 import {
   getAdminLink,

pages/api/poll/[urlId]/index.ts

@@ -1,6 +1,7 @@
 import { GetPollApiResponse } from "api-client/get-poll";
 import { NextApiResponse } from "next";
 import { resetDates } from "utils/legacy-utils";
+
 import { UpdatePollPayload } from "../../../../api-client/update-poll";
 import { prisma } from "../../../../db";
 import { exclude, withLink } from "../../../../utils/api-utils";

pages/api/poll/[urlId]/participant/[participantId].ts

@@ -1,5 +1,5 @@
 import { prisma } from "../../../../../db";
-import { withLink, getQueryParam } from "../../../../../utils/api-utils";
+import { getQueryParam,withLink } from "../../../../../utils/api-utils";
 
 export default withLink(async (req, res, link) => {
   const participantId = getQueryParam(req, "participantId");

pages/api/poll/[urlId]/participant/index.ts

@@ -1,4 +1,5 @@
 import absoluteUrl from "utils/absolute-url";
+
 import { AddParticipantPayload } from "../../../../../api-client/add-participant";
 import { prisma } from "../../../../../db";
 import {

pages/api/poll/[urlId]/verify.ts

@@ -1,4 +1,5 @@
 import absoluteUrl from "utils/absolute-url";
+
 import { prisma } from "../../../../db";
 import { sendEmailTemplate, withLink } from "../../../../utils/api-utils";
 

pages/api/poll/demo.ts

@@ -1,6 +1,7 @@
 import { addMinutes } from "date-fns";
 import { NextApiRequest, NextApiResponse } from "next";
 import { nanoid } from "utils/nanoid";
+
 import { prisma } from "../../../db";
 
 const participantData = [

pages/api/poll/index.ts

@@ -1,6 +1,7 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { sendEmailTemplate } from "utils/api-utils";
 import { nanoid } from "utils/nanoid";
+
 import { CreatePollPayload } from "../../../api-client/create-poll";
 import { prisma } from "../../../db";
 import absoluteUrl from "../../../utils/absolute-url";

pages/demo.tsx

@@ -1,10 +1,11 @@
 import { GetStaticProps, NextPage } from "next";
+import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { usePlausible } from "next-plausible";
-import { useRouter } from "next/router";
 import React from "react";
 import { useMount } from "react-use";
+
 import { createDemo } from "../api-client/create-demo";
 import FullPageLoader from "../components/full-page-loader";
 

pages/home.tsx

@@ -1,5 +1,6 @@
 import { GetStaticProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
 export { default } from "@/components/home";
 
 export const getStaticProps: GetStaticProps = async ({ locale = "en" }) => {

pages/new.tsx

@@ -1,13 +1,14 @@
 import { GetServerSideProps, NextPage } from "next";
-import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { usePlausible } from "next-plausible";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { usePlausible } from "next-plausible";
 import React from "react";
 import { useMutation } from "react-query";
 import { useSessionStorage } from "react-use";
+
 import { createPoll } from "../api-client/create-poll";
 import Button from "../components/button";
 import {

pages/poll.tsx

@@ -1,3 +1,16 @@
+import axios from "axios";
+import { GetServerSideProps, NextPage } from "next";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { usePlausible } from "next-plausible";
+import React from "react";
+import { toast } from "react-hot-toast";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useMount } from "react-use";
+import { preventWidows } from "utils/prevent-widows";
+
 import Button from "@/components/button";
 import ErrorPage from "@/components/error-page";
 import FullPageLoader from "@/components/full-page-loader";
@@ -16,18 +29,7 @@ import Sharing from "@/components/sharing";
 import StandardLayout from "@/components/standard-layout";
 import { PollContext, usePoll } from "@/components/use-poll";
 import { useUserName } from "@/components/user-name-context";
-import axios from "axios";
-import { GetServerSideProps, NextPage } from "next";
-import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { usePlausible } from "next-plausible";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import React from "react";
-import { toast } from "react-hot-toast";
-import { useMutation, useQuery, useQueryClient } from "react-query";
-import { useMount } from "react-use";
-import { preventWidows } from "utils/prevent-widows";
+
 import { GetPollResponse } from "../api-client/get-poll";
 import { getBrowserTimeZone } from "../utils/date-time-utils";
 import Custom404 from "./404";

pages/privacy-policy.tsx

@@ -1,7 +1,8 @@
-import PageLayout from "@/components/page-layout";
 import { GetStaticProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import PageLayout from "@/components/page-layout";
+
 const PrivacyPolicy = () => {
   return (
     <PageLayout>

pages/support.tsx

@@ -1,5 +1,6 @@
 import { GetStaticProps } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+
 export { default } from "@/components/support";
 
 export const getStaticProps: GetStaticProps = async ({ locale = "en" }) => {

yarn.lock

@@ -3023,7 +3023,7 @@ eslint-plugin-react@^7.27.0:
 
 eslint-plugin-simple-import-sort@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-7.0.0.tgz#a1dad262f46d2184a90095a60c66fef74727f0f8"
   integrity sha512-U3vEDB5zhYPNfxT5TYR7u01dboFZp+HNpnGhkDB2g/2E4wZ/g1Q9Ton8UwCLfRV9yAKyYqDh62oHOamvkFxsvw==
 
 eslint-scope@^5.0.0, eslint-scope@^5.1.1: