feat: add absolute imports and eslint

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react",
+        "@typescript-eslint",
+        "simple-import-sort",
+        "import"
+    ],
+    "rules": {
+        "simple-import-sort/imports": "error",
+        "simple-import-sort/exports": "error",
+        "import/first": "error",
+        "import/newline-after-import": "error",
+        "import/no-duplicates": "error"
+    }
+}

package.json

@@ -29,7 +29,17 @@
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
-    "eslint-config-react-app": "^7.0.1"
+    "@typescript-eslint/eslint-plugin": "^5.30.6",
+    "@typescript-eslint/parser": "^5.30.6",
+    "eslint": "^8.19.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-import-resolver-typescript": "^3.2.5",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "i": "^0.3.7",
+    "npm": "^8.13.2"
   },
   "scripts": {
     "start": "HTTPS=true SSL_CRT_FILE=./devpie.local.pem SSL_KEY_FILE=./devpie.local-key.pem react-scripts start",

src/components/Avatar/Avatar.tsx

@@ -1,8 +1,9 @@
-import React from "react";
 import { styled } from "@mui/material/styles";
-import { getUserInitials } from "../../helpers";
+import { getUserInitials } from "helpers/helpers";
+import React from "react";
+import { User } from "types/user";
+
 import ImageViewer, { ImageViewerProps } from "../ImageViewer";
-import { User } from "../../types";
 
 interface Props {
   alt: ImageViewerProps["alt"];

src/components/DropdownButton.tsx

@@ -1,11 +1,12 @@
-import React from "react";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Grow from "@mui/material/Grow";
-import Paper from "@mui/material/Paper";
-import Popper from "@mui/material/Popper";
 import MenuItem from "@mui/material/MenuItem";
 import MenuList from "@mui/material/MenuList";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
 import { styled } from "@mui/material/styles";
+import React from "react";
+
 import { MoreOptions } from "./MoreOptions";
 
 export function DropdownButton({ onDelete }: { onDelete: () => void }) {

src/components/ImageViewer/ImageViewer.tsx

@@ -1,12 +1,10 @@
-import React from "react";
-import { placeholder } from "./placeholder";
-import {
-  // isIOS,
-  getOrientation,
-  convertRotationToDegrees,
-} from "./ImageUtils";
 import "./animate.css";
+
 import { styled } from "@mui/material/styles";
+import React from "react";
+
+import { convertRotationToDegrees, getOrientation } from "./ImageUtils";
+import { placeholder } from "./placeholder";
 
 export interface ImageViewerProps {
   alt: string;
@@ -86,7 +84,7 @@ export default class ImageViewer extends React.Component<
     return this.fetchImage(url)
       .then(this.processImageBuffer)
       .then(this.createObjectURL)
-      .catch(() => {});
+      .catch();
   }
 
   render() {

src/components/ImageViewer/index.ts

@@ -1,4 +1,5 @@
 import ImageViewer, { ImageViewerProps } from "./ImageViewer";
+
 export type { ImageViewerProps };
 
 export default ImageViewer;

src/Layout.tsx → src/components/Layout.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { styled } from "@mui/material/styles";
+import React from "react";
 
 export const Layout = (props: React.PropsWithChildren) => (
   <PageContent>{props.children}</PageContent>

src/components/Loader.tsx

@@ -1,6 +1,6 @@
-import React from "react";
 import { CircularProgress } from "@mui/material";
 import { styled } from "@mui/material/styles";
+import React from "react";
 
 export const Loader = () => (
   <Container>

src/components/MenuLink/MenuLink.tsx

@@ -1,6 +1,6 @@
+import { MenuItem } from "@mui/material";
 import React from "react";
 import { Link } from "react-router-dom";
-import { MenuItem } from "@mui/material";
 
 interface Props {
   to: string;

src/components/Modal/Modal.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import Close from "@mui/icons-material/Close";
 import Dialog from "@mui/material/Dialog";
 import DialogContent from "@mui/material/DialogContent";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
-import Close from "@mui/icons-material/Close";
+import React from "react";
 
 export interface Props {
   open: boolean;

src/components/MoreOptions.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
-import IconButton from "@mui/material/IconButton";
 import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
+import React from "react";
 
 export const MoreOptions = ({
   aref,

src/components/Panel.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import { styled } from "@mui/material/styles";
-import { TextField, IconButton } from "@mui/material";
 import Close from "@mui/icons-material/Close";
+import { IconButton, TextField } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import React from "react";
+
 import { DropdownButton } from "./DropdownButton";
 
 interface Actions {

src/components/SearchBar.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { styled } from "@mui/material/styles";
+import React from "react";
 
 export const SearchBar = () => <StyledSearchBar placeholder="Search" />;
 

src/components/SideBar/SideBar.tsx

@@ -1,9 +1,14 @@
+import { styled } from "@mui/material/styles";
+import {
+  assignColor,
+  findPinnedByPath,
+  getOrgs,
+  orderBy,
+} from "helpers/helpers";
+import { useTenantMap } from "hooks/users";
 import React from "react";
 import { Link } from "react-router-dom";
-import { styled } from "@mui/material/styles";
-import { useTenantMap } from "../../hooks/users";
-import { assignColor, findPinnedByPath, getOrgs, orderBy } from "../../helpers";
-import { usePinned } from "../../services/PinnedProvider";
+import { usePinned } from "services/PinnedProvider";
 
 const RenderOrganizations = () => {
   const { isLoading, isError, data: tmap } = useTenantMap();

src/components/TopBar/NotifyModal.tsx

@@ -1,15 +1,15 @@
-import React, { useEffect, useState } from "react";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import Star from "@mui/icons-material/Star";
-import MoreHoriz from "@mui/icons-material/MoreHoriz";
-import IconButton from "@mui/material/IconButton";
 import Check from "@mui/icons-material/Check";
 import Close from "@mui/icons-material/Close";
+import MoreHoriz from "@mui/icons-material/MoreHoriz";
+import Star from "@mui/icons-material/Star";
 import Button from "@mui/material/Button";
-import { Invite } from "./types";
+import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
-import { useInviteDecision } from "../../hooks/invites";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { useInviteDecision } from "hooks/invites";
+import React, { useEffect, useState } from "react";
+import { Invite } from "types/invite";
 
 dayjs.extend(relativeTime);
 
@@ -71,7 +71,7 @@ export const NotifyModal = ({ invites, open }: Props) => {
                 </aside>
                 {renderUnreadIndicator(invite)}
               </header>
-              <p>{invite.teamName} wants you to join their team.</p>
+              <p> ____ wants you to join their organization.</p>
               <div className="decision">
                 {!invite.read ? (
                   <>

src/components/TopBar/TopBar.tsx

@@ -1,12 +1,13 @@
-import React, { useState } from "react";
+import Notifications from "@mui/icons-material/Notifications";
 import Badge from "@mui/material/Badge";
 import IconButton from "@mui/material/IconButton";
-import Notifications from "@mui/icons-material/Notifications";
-import { UserMenu } from "../UserMenu";
+import { styled } from "@mui/material/styles";
+import { useInvites } from "hooks/invites";
+import React, { useState } from "react";
+
 import { SearchBar } from "../SearchBar";
+import { UserMenu } from "../UserMenu";
 import { NotifyModal } from "./NotifyModal";
-import { useInvites } from "../../hooks/invites";
-import { styled } from "@mui/material/styles";
 
 export const TopBar = () => {
   const [isNotificationsOpen, setNotificationsOpen] = useState(false);

src/components/UserMenu/UserMenu.tsx

@@ -1,9 +1,3 @@
-import React, { useRef } from "react";
-import Button from "@mui/material/Button";
-import ImageViewer from "../ImageViewer";
-import { styled } from "@mui/material/styles";
-import { Auth } from "aws-amplify";
-import { useSeatsAvailable, useUser } from "../../hooks/users";
 import {
   Divider,
   List,
@@ -14,10 +8,17 @@ import {
   MenuItem,
   MenuList,
 } from "@mui/material";
-import { MenuLink } from "../MenuLink";
-import { User } from "../../types";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+import { Auth } from "aws-amplify";
+import { formatPath } from "helpers/helpers";
+import { useSeatsAvailable, useUser } from "hooks/users";
+import React, { useRef } from "react";
 import { Link } from "react-router-dom";
-import { formatPath } from "../../helpers";
+import { User } from "types/user";
+
+import ImageViewer from "../ImageViewer";
+import { MenuLink } from "../MenuLink";
 
 export const UserMenu = () => {
   const seatsResult = useSeatsAvailable();

src/features/Account/Account.tsx

@@ -1,12 +1,13 @@
-import React, { useEffect, useState } from "react";
-import Table from "rc-table";
-import { useTableUsers, useUsers } from "../../hooks/users";
 import { styled } from "@mui/material/styles";
-import { Modal as AddUser } from "./Modal";
 import { Auth } from "aws-amplify";
-import { components } from "./TableRow";
+import { Layout } from "components/Layout";
+import { useTableUsers, useUsers } from "hooks/users";
+import Table from "rc-table";
+import React, { useEffect, useState } from "react";
+
+import { Modal as AddUser } from "./Modal";
 import { columns } from "./TableColumns";
-import { Layout } from "../../Layout";
+import { components } from "./TableRow";
 
 export const Account = () => {
   const [userInfo, setUserInfo] = useState<{ company: string }>();

src/features/Account/AvatarModal/AvatarEditor/AvatarEditor.jsx

@@ -1,6 +1,6 @@
-import React from "react";
-import piexif from "piexifjs";
 import Konva from "konva/lib/Core";
+import piexif from "piexifjs";
+import React from "react";
 
 export class AvatarEditor extends React.Component {
   static defaultProps = {

src/features/Account/AvatarModal/AvatarModal.tsx

@@ -1,8 +1,9 @@
+import { styled } from "@mui/material/styles";
+import ImageViewer from "components/ImageViewer";
+import { Modal } from "components/Modal";
 import React from "react";
+
 import { AvatarEditor } from "./AvatarEditor";
-import { Modal } from "../../../components/Modal";
-import ImageViewer from "../../../components/ImageViewer";
-import { styled } from "@mui/material/styles";
 
 interface Actions {
   onToggle: () => void;

src/features/Account/DeleteDialog/DeleteDialog.tsx

@@ -1,14 +1,14 @@
-import * as React from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { styled } from "@mui/material";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-import { styled } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import IconButton from "@mui/material/IconButton";
-import { useDeleteUser } from "../../../hooks/users";
+import { useDeleteUser } from "hooks/users";
+import * as React from "react";
 
 interface Props {
   title: string;

src/features/Account/Modal/Modal.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from "react";
+import { Alert, TextField } from "@mui/material";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
-import { Alert, TextField } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { NewUser } from "../../../types";
-import { useCreateUser, useSeatsAvailable } from "../../../hooks/users";
+import { useCreateUser, useSeatsAvailable } from "hooks/users";
+import React, { useState } from "react";
+import { NewUser } from "types/user";
 
 export const Modal = () => {
   const [open, setOpen] = useState(false);

src/features/Account/TableColumns.tsx

@@ -1,6 +1,7 @@
-import { DeleteDialog } from "./DeleteDialog";
-import React from "react";
 import { styled } from "@mui/material/styles";
+import React from "react";
+
+import { DeleteDialog } from "./DeleteDialog";
 
 export const columns = [
   {

src/features/Account/index.ts

@@ -1,2 +1,3 @@
 import { Account } from "./Account";
+
 export default Account;

src/features/NoMatch/NoMatch.tsx

@@ -1,5 +1,5 @@
+import { Layout } from "components/Layout";
 import React from "react";
-import { Layout } from "../../Layout";
 
 const NoMatch = () => (
   <Layout>

src/features/NoMatch/index.ts

@@ -1,2 +1,3 @@
-import {NoMatch} from "./NoMatch";
-export default NoMatch;
+import { NoMatch } from "./NoMatch";
+
+export default NoMatch;

src/features/Profile/Profile.tsx

@@ -1,5 +1,5 @@
+import { Layout } from "components/Layout";
 import React from "react";
-import { Layout } from "../../Layout";
 
 class Profile extends React.Component {
   render() {

src/features/Profile/index.ts

@@ -1,2 +1,3 @@
 import { Profile } from "./Profile";
+
 export default Profile;