style: Ban interfaces in linter

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     "plugin:react/jsx-runtime",
     "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ["dist", "node_modules"],
+  ignorePatterns: ["dist", "node_modules", "src/api"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
@@ -25,6 +25,26 @@ module.exports = {
   plugins: ["react", "@typescript-eslint", "@typescript-eslint/eslint-plugin"],
   root: true,
   rules: {
+    "@typescript-eslint/consistent-type-definitions": ["warn", "type"],
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/naming-convention": [
+      1,
+      {
+        selector: "typeAlias",
+        format: ["StrictPascalCase"],
+        prefix: ["T"],
+      },
+      {
+        format: ["StrictPascalCase"],
+        prefix: ["are", "can", "did", "does", "has", "is", "should", "will"],
+        selector: "variable",
+        types: ["boolean"],
+      },
+    ],
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/no-extra-semi": 1,
+    "@typescript-eslint/no-unused-vars": 0,
     "arrow-parens": 1,
     camelcase: 1,
     "max-params": ["error", 2],
@@ -39,44 +59,6 @@ module.exports = {
     "no-tabs": 1,
     "react/jsx-sort-props": ["warn", { ignoreCase: true }],
     "react/prop-types": 0,
-    "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-empty-interface": 0,
-    "@typescript-eslint/no-extra-semi": 1,
-    "@typescript-eslint/no-unused-vars": 0,
-    "@typescript-eslint/naming-convention": [
-      1,
-      {
-        format: ["StrictPascalCase"],
-        prefix: ["I"],
-        selector: "interface",
-      },
-      {
-        format: ["StrictPascalCase"],
-        prefix: ["are", "can", "did", "does", "has", "is", "should", "will"],
-        selector: "variable",
-        types: ["boolean"],
-      },
-    ],
-    // "sort-keys": [
-    //   "warn",
-    //   "asc",
-    //   {
-    //     caseSensitive: true,
-    //     minKeys: 2,
-    //     natural: false,
-    //   },
-    // ],
-    // 'sort-imports': [
-    //   'error',
-    //   {
-    //     allowSeparatedGroups: true,
-    //     ignoreCase: false,
-    //     ignoreDeclarationSort: false,
-    //     ignoreMemberSort: false,
-    //     memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
-    //   },
-    // ],
   },
   settings: {
     react: {

cypress/constants/test-users.ts

@@ -11,9 +11,9 @@ export const testUsers = {
   },
 } as const
 
-export type ITestUser = typeof testUsers[keyof typeof testUsers]
+export type TTestUser = (typeof testUsers)[keyof typeof testUsers]
 
-export const credentialsByTestUserId: Record<ITestUser["id"], { password: string; username: ITestUser["username"] }> = {
+export const credentialsByTestUserId: Record<TTestUser["id"], { password: string; username: TTestUser["username"] }> = {
   "1": {
     username: testUsers.johnDoe.username,
     password: testUsers.johnDoe.password,

cypress/support/commands.ts

@@ -1,5 +1,5 @@
 /// <reference types="cypress" />
-import { ITestUser, credentialsByTestUserId } from "../constants/test-users"
+import { TTestUser, credentialsByTestUserId } from "../constants/test-users"
 
 // ***********************************************
 // This example commands.ts shows you how to
@@ -41,9 +41,9 @@ import { ITestUser, credentialsByTestUserId } from "../constants/test-users"
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
     interface Chainable {
-      authorize(testUserId: ITestUser["id"]): Promise<void>
+      authorize(testUserId: TTestUser["id"]): Promise<void>
     }
   }
 }

cypress/support/component.tsx

@@ -32,7 +32,7 @@ import "./commands"
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
     interface Chainable {
       mount: typeof mount
     }

declarations/mui.d.ts

@@ -1,7 +1,7 @@
 import BreakpointOverrides from ""
 
 declare module "@mui/system" {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface BreakpointOverrides {
     sm: false
     md: false

src/components/BreadcrumbsPanel.tsx

@@ -4,7 +4,7 @@ import { Link, useLocation } from "react-router-dom"
 
 import { useGetBoardQuery } from "#api/boards"
 
-interface IBreadcrumb {
+type TBreadcrumb = {
   element: ReactNode
   hrefTemplate: string
 }
@@ -28,7 +28,7 @@ const BoardName: FC = () => {
   return <>{getBoardResult.data?.board.name}</>
 }
 
-const breadcrumbsByPathnamePatterns: { pathnamePatterns: RegExp[]; breadcrumbs: IBreadcrumb[] }[] = [
+const breadcrumbsByPathnamePatterns: { pathnamePatterns: RegExp[]; breadcrumbs: TBreadcrumb[] }[] = [
   {
     pathnamePatterns: [/^\/boards$/, /^\/boards\/create$/],
     breadcrumbs: [{ element: "Boards", hrefTemplate: "/boards" }],
@@ -71,7 +71,7 @@ export const BreadcrumbsPanel: FC = () => {
   const location = useLocation()
   const boardId = useBoardId()
 
-  const breadcrumbs = useMemo<IBreadcrumb[] | undefined>(() => {
+  const breadcrumbs = useMemo<TBreadcrumb[] | undefined>(() => {
     for (const group of breadcrumbsByPathnamePatterns) {
       const doesPathnameMatchGroupPathnamePatterns = group.pathnamePatterns.some((pathnamePattern) => {
         return pathnamePattern.test(location.pathname)

src/components/DataLayout/index.tsx

@@ -5,7 +5,7 @@ import { getChildByDisplayName } from "#utils/getChildByDisplayName"
 import { DataLayoutControls } from "./subcomponents/DataLayoutControls"
 import { DataLayoutHeading } from "./subcomponents/DataLayoutHeading"
 import { DataLayoutTableContainer } from "./subcomponents/DataLayoutTableContainer"
-import { IDataLayoutWithSubcomponents, IDataLayoutWithoutSubcomponents } from "./types"
+import { TDataLayoutWithSubcomponents, TDataLayoutWithoutSubcomponents } from "./types"
 
 const Header = styled("div")({
   display: "flex",
@@ -15,7 +15,7 @@ const Header = styled("div")({
   rowGap: "8px",
 })
 
-const _DataLayout: IDataLayoutWithoutSubcomponents = ({ children }) => {
+const _DataLayout: TDataLayoutWithoutSubcomponents = ({ children }) => {
   const table = getChildByDisplayName({ children, displayName: "DataLayoutTableContainer" })
   const controls = getChildByDisplayName({ children, displayName: "DataLayoutControls" })
   const heading = getChildByDisplayName({ children, displayName: "DataLayoutHeading" })
@@ -35,6 +35,6 @@ _DataLayout.Controls = DataLayoutControls
 _DataLayout.Heading = DataLayoutHeading
 _DataLayout.TableContainer = DataLayoutTableContainer
 
-const DataLayout = _DataLayout as IDataLayoutWithSubcomponents
+const DataLayout = _DataLayout as TDataLayoutWithSubcomponents
 
 export { DataLayout }

src/components/DataLayout/subcomponents/DataLayoutTableContainer.tsx

@@ -1,18 +1,18 @@
 import { TableContainer } from "@mui/material"
 import { FC, PropsWithChildren, createContext } from "react"
 
-interface IDataLayoutTableContainerContext {
+type TDataLayoutTableContainerContext = {
   columnsAmount: number
 }
-export const DateLayoutTableContainerContext = createContext<IDataLayoutTableContainerContext>({
+export const DateLayoutTableContainerContext = createContext<TDataLayoutTableContainerContext>({
   columnsAmount: 0,
 })
 
-interface IDataLayoutTableProps {
+type TDataLayoutTableProps = {
   columnsWidths: string[]
 }
 
-const DataLayoutTableContainer: FC<PropsWithChildren<IDataLayoutTableProps>> = ({ children, columnsWidths }) => {
+const DataLayoutTableContainer: FC<PropsWithChildren<TDataLayoutTableProps>> = ({ children, columnsWidths }) => {
   const columnWidthByCellSelector: Record<string, { width: string }> = {}
   columnsWidths.forEach((columnWidth, columnWidthIndex) => {
     columnWidthByCellSelector[`& td:nth-of-type(${columnWidthIndex + 1})`] = { width: columnWidth }

src/components/DataLayout/types.ts

@@ -4,16 +4,15 @@ import { DataLayoutControls } from "./subcomponents/DataLayoutControls"
 import { DataLayoutHeading } from "./subcomponents/DataLayoutHeading"
 import { DataLayoutTableContainer } from "./subcomponents/DataLayoutTableContainer"
 
-export interface IDataLayoutProps {}
-type IDataLayoutComponent = FC<PropsWithChildren<IDataLayoutProps>>
+type TDataLayoutComponent = FC<PropsWithChildren>
 
-export interface IDataLayoutWithoutSubcomponents extends IDataLayoutComponent {
+export type TDataLayoutWithoutSubcomponents = TDataLayoutComponent & {
   Controls?: typeof DataLayoutControls
   Heading?: typeof DataLayoutHeading
   TableContainer?: typeof DataLayoutTableContainer
 }
 
-export interface IDataLayoutWithSubcomponents extends IDataLayoutComponent {
+export type TDataLayoutWithSubcomponents = TDataLayoutComponent & {
   Controls: typeof DataLayoutControls
   Heading: typeof DataLayoutHeading
   TableContainer: typeof DataLayoutTableContainer

src/components/Dialog/index.tsx

@@ -7,7 +7,7 @@ import { getChildByDisplayName } from "#utils/getChildByDisplayName"
 import { DialogBody } from "./subcomponents/DialogBody"
 import { DialogFooter } from "./subcomponents/DialogFooter"
 import { DialogHeader } from "./subcomponents/DialogHeader"
-import { IDialogWithSubcomponents, IDialogWithoutSubcomponents } from "./types"
+import { TDialogWithSubcomponents, TDialogWithoutSubcomponents } from "./types"
 
 const DialogWindow = styled("div")(({ theme }) => ({
   backgroundColor: theme.palette.background.default,
@@ -31,7 +31,7 @@ const HeaderWithCloseButton = styled("div")({
   gridTemplateColumns: "auto min-content",
 })
 
-const _Dialog: IDialogWithoutSubcomponents = ({ children, closeDialog, closeDialogHref }) => {
+const _Dialog: TDialogWithoutSubcomponents = ({ children, closeDialog, closeDialogHref }) => {
   const navigate = useNavigate()
 
   const header = getChildByDisplayName({ children, displayName: "DialogHeader" })
@@ -84,6 +84,6 @@ _Dialog.Body = DialogBody
 _Dialog.Footer = DialogFooter
 _Dialog.Header = DialogHeader
 
-const Dialog = _Dialog as IDialogWithSubcomponents
+const Dialog = _Dialog as TDialogWithSubcomponents
 
 export { Dialog }

src/components/Dialog/types.ts

@@ -4,19 +4,19 @@ import { DialogBody } from "./subcomponents/DialogBody"
 import { DialogFooter } from "./subcomponents/DialogFooter"
 import { DialogHeader } from "./subcomponents/DialogHeader"
 
-export interface IDialogProps {
+export type TDialogProps = {
   closeDialog?: () => void
   closeDialogHref?: string
 }
-type IDialogComponent = FC<PropsWithChildren<IDialogProps>>
+type TDialogComponent = FC<PropsWithChildren<TDialogProps>>
 
-export interface IDialogWithoutSubcomponents extends IDialogComponent {
+export type TDialogWithoutSubcomponents = TDialogComponent & {
   Header?: typeof DialogHeader
   Body?: typeof DialogBody
   Footer?: typeof DialogFooter
 }
 
-export interface IDialogWithSubcomponents extends IDialogComponent {
+export type TDialogWithSubcomponents = TDialogComponent & {
   Header: typeof DialogHeader
   Body: typeof DialogBody
   Footer: typeof DialogFooter

src/components/Navbar/helpers.tsx

@@ -1,12 +1,12 @@
 import { Dashboard as DashboardIcon, Person as PersonIcon } from "@mui/icons-material"
 
-interface ISection {
+type TSection = {
   icon: React.ReactElement
   id: string
   path: string
 }
 
-export const section: ISection[] = [
+export const section: TSection[] = [
   { icon: <DashboardIcon />, id: "boards", path: "/boards" },
   { icon: <PersonIcon />, id: "auth", path: "/auth" },
 ]

src/components/form-contructor/RadioGroup.tsx

@@ -6,23 +6,24 @@ import {
   RadioGroup as MuiRadioGroup,
   Radio,
 } from "@mui/material"
+import { FC } from "react"
 import { UseFormRegister } from "react-hook-form"
 
-interface IRadioGroupOption {
+type TRadioGroupOption = {
   label: string
   value: number | string
 }
-interface IRadioGroupProps {
-  fieldValue: IRadioGroupOption["value"]
+type TRadioGroupProps = {
+  fieldValue: TRadioGroupOption["value"]
   helperText: string | undefined
   label: string
   name: string
-  options: IRadioGroupOption[]
+  options: TRadioGroupOption[]
   register: UseFormRegister<any> // eslint-disable-line @typescript-eslint/no-explicit-any
   setValue(fieldName: string, newValue: string | number): void
 }
 
-export const RadioGroup: React.FC<IRadioGroupProps> = ({
+export const RadioGroup: FC<TRadioGroupProps> = ({
   fieldValue,
   helperText,
   label,

src/views/auth/Login/form-helpers.ts

@@ -12,9 +12,9 @@ export const validationSchema = yup
   })
   .required()
 
-export const defaultValues: FormValues = {
+export const defaultValues: TFormValues = {
   password: "",
   username: "",
 }
 
-export type FormValues = yup.InferType<typeof validationSchema>
+export type TFormValues = yup.InferType<typeof validationSchema>

src/views/auth/Login/index.tsx

@@ -10,7 +10,7 @@ import { RowGroup } from "#components/RowGroup"
 import { apolloClient } from "#utils/apolloClient"
 
 import { Container } from "../components"
-import { FieldName, FormValues, defaultValues, validationSchema } from "./form-helpers"
+import { FieldName, TFormValues, defaultValues, validationSchema } from "./form-helpers"
 
 export const Login: FC = () => {
   const navigate = useNavigate()
@@ -21,7 +21,7 @@ export const Login: FC = () => {
     handleSubmit,
     register,
     setError,
-  } = useForm<FormValues>({
+  } = useForm<TFormValues>({
     defaultValues,
     mode: "onChange",
     resolver: yupResolver(validationSchema),

src/views/boards/BoardRecords/RecordFormDialog/form-helpers.ts

@@ -10,7 +10,7 @@ export enum FieldName {
   Date = "date",
 }
 
-export interface IFormValues {
+export type TFormValues = {
   [FieldName.Amount]: BudgetRecord["amount"] | null
   [FieldName.CategoryId]: BudgetRecord["category"]["id"] | null
   [FieldName.Comment]: BudgetRecord["comment"]