Change component imports (#54)

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

src/components/AnswerHeader/AnswerHeader.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
-import BarChart, { BarChartData } from '../BarChart';
-import DataCard from '../DataCard';
+import BarChart, { BarChartData } from '../BarChart/BarChart';
+import DataCard from '../DataCard/DataCard';
+
 
 interface AnswerHeaderProps {
   totalVotes: number;
@@ -16,12 +17,12 @@ function AnswerHeader({
   chartData,
 }: AnswerHeaderProps) {
   return (
-    <div className="flex flex-col-reverse justify-center items-center md:flex-row">
+    <div className="flex flex-col-reverse items-center justify-center md:flex-row">
       {chartData.length ? <BarChart data={chartData} /> : null}
 
       <div
         className={clsx(
-          'flex flex-col justify-center items-center mt-6 mb-12 md:my-0 md:ml-6 md:-translate-y-4',
+          'mt-6 mb-12 flex flex-col items-center justify-center md:my-0 md:ml-6 md:-translate-y-4',
           !chartData.length ? 'md:flex-row' : ''
         )}
       >

src/components/AnswerTableRow/AnswerTableRow.tsx

@@ -1,4 +1,4 @@
-import Emoji from '../Emoji';
+import Emoji from '../Emoji/Emoji';
 
 interface AnswerTableRowProps {
   time: string;
@@ -8,12 +8,12 @@ interface AnswerTableRowProps {
 
 function AnswerTableRow({ time, selectedIcon, text }: AnswerTableRowProps) {
   return (
-    <div className="grid grid-cols-6 p-3 my-2 mx-auto max-w-[800px] bg-white rounded-md shadow-sm">
+    <div className="my-2 mx-auto grid max-w-[800px] grid-cols-6 rounded-md bg-white p-3 shadow-sm">
       <div className="col-span-2">{time}</div>
       <div>
         <Emoji symbol={selectedIcon} />
       </div>
-      <div className="col-span-3 text-left break-words">{text || '-'}</div>
+      <div className="col-span-3 break-words text-left">{text || '-'}</div>
     </div>
   );
 }

src/components/Background/Background.tsx

@@ -1,7 +1,7 @@
 export default function Background() {
   return (
     <div
-      className="hidden overflow-hidden fixed  left-1/2 -z-10 opacity-70 -translate-x-1/2 pointer-events-none xl:block"
+      className="pointer-events-none fixed left-1/2  -z-10 hidden -translate-x-1/2 overflow-hidden opacity-70 xl:block"
       aria-hidden="true"
     >
       <svg
@@ -28,15 +28,15 @@ export default function Background() {
           <circle cx="155" cy="443" r="64" />
         </g>
         <image
-          className="opacity-80 rotate-6"
+          className="rotate-6 opacity-80"
           y={180}
           x={1100}
           width="200"
           height="200"
           xlinkHref={'/emote2.svg'}
         />
         <image
-          className="opacity-80 -rotate-6"
+          className="-rotate-6 opacity-80"
           y={100}
           x={50}
           width="200"

src/components/BarChart/BarChart.tsx

@@ -31,7 +31,7 @@ export default function BarChart({ data }: BarChartProps) {
   };
 
   return data ? (
-    <div className="w-[300px] max-w-[300px] h-[250px]">
+    <div className="h-[250px] w-[300px] max-w-[300px]">
       <ResponsiveContainer width="100%">
         <Chart
           width={600}

src/components/BurgerMenu/BurgerMenu.tsx

@@ -16,7 +16,7 @@ const BurgerMenu = ({ isOpen, children }: BurgerMenuProps) => {
       initial="closed"
       variants={variants}
       id="burger_menu"
-      className="flex fixed top-20 left-0 z-10 flex-col justify-center items-center pb-2 w-screen bg-zinc-100 shadow-md lg:hidden"
+      className="fixed top-20 left-0 z-10 flex w-screen flex-col items-center justify-center bg-zinc-100 pb-2 shadow-md lg:hidden"
     >
       {children}
     </motion.div>

src/components/Button/Button.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import Button, { ButtonVariant, ButtonSize } from '.';
+import Button, { ButtonVariant, ButtonSize } from './Button';
 
 describe('Button', () => {
   it('should render without crashing', () => {

src/components/ButtonLink/ButtonLink.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-import { ButtonProps, ButtonSize, ButtonVariant } from '../Button';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../Button/Button';
 
 export const ButtonLinkVariant = ButtonVariant;
 export const ButtonLinkSize = ButtonSize;

src/components/DataCard/DataCard.tsx

@@ -5,7 +5,7 @@ type Props = {
 
 export default function DataCard({ title, value }: Props) {
   return (
-    <div className="py-2 px-6 m-1 w-[200px] bg-white rounded-lg border border-zinc-200 shadow-md">
+    <div className="m-1 w-[200px] rounded-lg border border-zinc-200 bg-white py-2 px-6 shadow-md">
       <h3 className="mb-1 font-semibold">{title}</h3>
       {value}
     </div>

src/components/EmojiButton/EmojiButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Emoji from '../Emoji';
+import Emoji from '../Emoji/Emoji';
 
 interface EmojiButtonProps {
   icon: string;
@@ -14,7 +14,7 @@ function EmojiButton({
 }: EmojiButtonProps & React.HTMLProps<HTMLButtonElement>) {
   return (
     <button
-      className={`bg-white text-3xl p-3 border-4 border-transparent rounded-lg duration-100  shadow ${
+      className={`rounded-lg border-4 border-transparent bg-white p-3 text-3xl shadow  duration-100 ${
         selected ? 'scale-90 border-slate-300' : ''
       }`}
       onClick={onClick}

src/components/EmojiPicker/EmojiPicker.tsx

@@ -1,9 +1,9 @@
 import { useRef, useState } from 'react';
 import { useCloseComponent } from '../../hooks/useCloseComponent';
-import Emoji from '../Emoji';
 
 import dynamic from 'next/dynamic';
-import Loader from '../Loader';
+import Emoji from '../Emoji/Emoji';
+import Loader from '../Loader/Loader';
 const Picker = dynamic(() => import('emoji-picker-react'), {
   ssr: false,
   loading: () => <Loader isLoading={true} />,
@@ -31,7 +31,7 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
   return (
     <div ref={wrapperRef}>
       <button
-        className="p-3 w-16 text-3xl bg-white rounded-lg shadow transition hover:scale-95 label-text"
+        className="label-text w-16 rounded-lg bg-white p-3 text-3xl shadow transition hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         <Emoji symbol={chosenEmoji?.emoji || defaultEmote} />
@@ -40,11 +40,11 @@ function EmojiPicker({ defaultEmote, index, onEmotePick }: EmojiPickerProps) {
       {displayPicker && (
         <div
           onClick={() => setDisplayPicker(false)}
-          className="fixed top-0 left-0 z-10 w-full h-full bg-black opacity-60"
+          className="fixed top-0 left-0 z-10 h-full w-full bg-black opacity-60"
         />
       )}
       {displayPicker && (
-        <div className="flex overflow-hidden fixed top-1/2 left-1/2 z-20 justify-center items-center w-[400px] max-w-[90%] h-[400px] max-h-[90%] bg-white rounded-md -translate-x-1/2 -translate-y-1/2">
+        <div className="fixed top-1/2 left-1/2 z-20 flex h-[400px] max-h-[90%] w-[400px] max-w-[90%] -translate-x-1/2 -translate-y-1/2 items-center justify-center overflow-hidden rounded-md bg-white">
           <Picker
             native
             onEmojiClick={onEmojiClick}

src/components/Header/Header.tsx

@@ -4,7 +4,7 @@ type Props = {
 
 export default function Header({ children }: Props) {
   return (
-    <h1 className="pb-8 mx-auto max-w-4xl text-3xl font-bold text-center md:text-4xl">
+    <h1 className="mx-auto max-w-4xl pb-8 text-center text-3xl font-bold md:text-4xl">
       {children}
     </h1>
   );

src/components/IconButton/IconButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import clsx from 'clsx';
-import { ButtonSize, ButtonVariant, ButtonProps } from '../Button';
+import { ButtonProps, ButtonSize, ButtonVariant } from '../Button/Button';
 
 export const IconButtonVariant = ButtonVariant;
 export const IconButtonSize = ButtonSize;

src/components/Input/Input.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import Input from '.';
+import Input from './Input';
+
 
 describe('Input', () => {
   it('should render only with a label', () => {

src/components/Input/Input.tsx

@@ -9,11 +9,11 @@ function Input({
   ...props
 }: InputProps & React.HTMLProps<HTMLInputElement>) {
   return (
-    <div className="m-auto max-w-lg font-semibold text-left">
+    <div className="m-auto max-w-lg text-left font-semibold">
       <label className="block">{label}</label>
       <input
         {...props}
-        className="block py-3 px-4 mt-2 w-full rounded-lg focus:outline-none shadow"
+        className="mt-2 block w-full rounded-lg py-3 px-4 shadow focus:outline-none"
       />
     </div>
   );

src/components/Loader/Loader.tsx

@@ -5,9 +5,9 @@ type Props = {
 export default function Loader({ isLoading }: Props) {
   if (isLoading)
     return (
-      <div className="flex flex-col justify-center items-center">
+      <div className="flex flex-col items-center justify-center">
         <svg
-          className="mr-1 w-5 h-5 animate-spin"
+          className="mr-1 h-5 w-5 animate-spin"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"

src/components/LoginButton/LoginButton.tsx

@@ -17,11 +17,11 @@ function LoginButton({
     <button
       type={type}
       onClick={onClick}
-      className="flex justify-center items-center py-2 pr-4 pl-2 w-full font-semibold text-zinc-900 bg-white hover:bg-zinc-50 active:bg-zinc-50 rounded-lg border shadow sm:w-[240px]"
+      className="flex w-full items-center justify-center rounded-lg border bg-white py-2 pr-4 pl-2 font-semibold text-zinc-900 shadow hover:bg-zinc-50 active:bg-zinc-50 sm:w-[240px]"
       {...props}
     >
       <Image
-        className="block mr-6 ml-2"
+        className="mr-6 ml-2 block"
         width="45px"
         height="24px"
         src={image}

src/components/Navigation/Navigation.tsx

@@ -2,14 +2,14 @@ import { LogoutIcon, MenuIcon } from '@heroicons/react/outline';
 import { useAuthState } from 'react-firebase-hooks/auth';
 import Link from 'next/link';
 import { Fragment, useState } from 'react';
-import { ButtonVariant } from '../Button';
 import { signOut } from 'firebase/auth';
-import IconButton, { IconButtonVariant } from '../IconButton';
 import { auth } from '../../firebase';
 import Logo from '../Logo/Logo';
-import BurgerMenu from '../BurgerMenu';
 import { Menu, Transition } from '@headlessui/react';
 import ButtonLink from '../ButtonLink/ButtonLink';
+import BurgerMenu from '../BurgerMenu/BurgerMenu';
+import { ButtonVariant } from '../Button/Button';
+import IconButton, { IconButtonVariant } from '../IconButton/IconButton';
 
 function Navigation() {
   const [user, loading] = useAuthState(auth);
@@ -24,12 +24,12 @@ function Navigation() {
     setIsOpen(!isOpen);
   };
   return (
-    <nav className="fixed z-10 py-5 w-full bg-zinc-100 border-b border-neutral-200">
+    <nav className="fixed z-10 w-full border-b border-neutral-200 bg-zinc-100 py-5">
       <div className="flex justify-between px-4 md:px-8">
         <Logo />
         {!loading && user ? (
           <div className="flex md:space-x-4">
-            <div className="hidden space-x-4 lg:flex none">
+            <div className="none hidden space-x-4 lg:flex">
               <Link href={'/survey/create'} passHref>
                 <ButtonLink variant={ButtonVariant.FLAT}>
                   Create Survey
@@ -39,22 +39,22 @@ function Navigation() {
                 <ButtonLink variant={ButtonVariant.FLAT}>My Surveys</ButtonLink>
               </Link>
             </div>
-            <div className="hidden justify-center items-center lg:flex">
+            <div className="hidden items-center justify-center lg:flex">
               <Menu
                 as="div"
-                className="inline-block relative text-left rounded-md"
+                className="relative inline-block rounded-md text-left"
               >
                 <Menu.Button
                   title="Expand menu"
-                  className="flex justify-center py-1 px-4 w-full font-medium hover:bg-zinc-200 rounded-md"
+                  className="flex w-full justify-center rounded-md py-1 px-4 font-medium hover:bg-zinc-200"
                 >
-                  <p className="hidden items-center ml-2 truncate sm:flex justify-left">
+                  <p className="justify-left ml-2 hidden items-center truncate sm:flex">
                     {user.displayName}
                     {user.photoURL && (
                       <img
                         src={user.photoURL}
                         alt="user photo"
-                        className="ml-4 w-8 h-8 rounded-full"
+                        className="ml-4 h-8 w-8 rounded-full"
                       />
                     )}
                   </p>
@@ -68,14 +68,14 @@ function Navigation() {
                   leaveFrom="transform opacity-100 scale-100"
                   leaveTo="transform opacity-0 scale-95"
                 >
-                  <Menu.Items className="absolute right-0 mt-2 bg-white rounded-md divide-y divide-zinc-100 focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg origin-top-right">
+                  <Menu.Items className="absolute right-0 mt-2 origin-top-right divide-y divide-zinc-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                     <div className="flex justify-end p-1">
                       <Menu.Item>
                         <IconButton
                           onClick={logoutDesktop}
                           variant={IconButtonVariant.FLAT}
                           className="w-40 text-red-600 hover:bg-red-100"
-                          icon={<LogoutIcon className="w-5 h-5" />}
+                          icon={<LogoutIcon className="h-5 w-5" />}
                         >
                           Sign Out
                         </IconButton>
@@ -87,7 +87,7 @@ function Navigation() {
             </div>
             <MenuIcon
               onClick={() => setIsOpen(!isOpen)}
-              className="z-50 w-8 h-8 cursor-pointer lg:hidden"
+              className="z-50 h-8 w-8 cursor-pointer lg:hidden"
             />
           </div>
         ) : (
@@ -120,8 +120,8 @@ function Navigation() {
         <IconButton
           onClick={logoutMobile}
           variant={IconButtonVariant.FLAT}
-          className="justify-center w-[95%] text-red-600 hover:bg-red-100 lg:w-auto"
-          icon={<LogoutIcon className="w-5 h-5" />}
+          className="w-[95%] justify-center text-red-600 hover:bg-red-100 lg:w-auto"
+          icon={<LogoutIcon className="h-5 w-5" />}
         >
           Sign Out
         </IconButton>

src/components/PieChart/PieChart.tsx

@@ -17,7 +17,7 @@ interface PieChartProps {
 
 export default function PieChart({ data }: PieChartProps) {
   return data ? (
-    <div className="mx-auto max-w-[300px] h-[250px]">
+    <div className="mx-auto h-[250px] max-w-[300px]">
       <ResponsiveContainer width="100%">
         <Chart>
           <Pie