Add eslint import rules

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;