Added perfectionist plugin for eslint (#39)

Author: spietras

src/.eslintrc.cjs

@@ -26,6 +26,9 @@ module.exports = {
     // Use recommended Lingui rules
     "plugin:lingui/recommended",
 
+    // Use recommended perfectionist rules
+    "plugin:perfectionist/recommended-alphabetical-legacy",
+
     // Turn off rules that might conflict with Prettier
     "prettier",
   ],
@@ -39,8 +42,11 @@ module.exports = {
   },
 
   plugins: [
-    // Support typescript-eslint
+    // Use @typescript-eslint plugin
     "@typescript-eslint",
+
+    // Use perfectionist plugin
+    "perfectionist",
   ],
 
   // Ignore configuration files in directories above this one

src/package-lock.json.jinja

@@ -38,6 +38,7 @@
     "babel-plugin-macros": "^3.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lingui": "^0.7.0",
+    "eslint-plugin-perfectionist": "^3.9.1",
     "eslint-plugin-react": "^7.37.2",
     "npm-check-updates": "^17.1.10",
     "postcss": "^8.4.47",

src/package.json.jinja

@@ -3,11 +3,11 @@ export default {
     "postcss-preset-mantine": {},
     "postcss-simple-vars": {
       variables: {
-        "mantine-breakpoint-xs": "36em",
-        "mantine-breakpoint-sm": "48em",
-        "mantine-breakpoint-md": "62em",
         "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-sm": "48em",
         "mantine-breakpoint-xl": "88em",
+        "mantine-breakpoint-xs": "36em",
       },
     },
   },

src/postcss.config.mjs

@@ -1,4 +1,5 @@
 import { Outlet } from "react-router-dom";
+
 import { PageLayout } from "../components/layouts/page-layout";
 import { I18nProvider } from "../providers/i18n-provider";
 import { ThemeProvider } from "../providers/theme-provider";

src/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { RouteObject } from "react-router-dom";
+
 import { RootError } from "./error";
 import { RootLayout } from "./layout";
 import { RootNotFound } from "./not-found";

src/src/app/routes.tsx

@@ -1,8 +1,8 @@
 import { Box } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
-import { PageLayoutInput } from "./types";
 
 import classes from "./styles.module.css";
+import { PageLayoutInput } from "./types";
 
 export function PageLayout({ children }: PageLayoutInput) {
   return (

src/src/components/layouts/page-layout/main.tsx

@@ -1,5 +1,6 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
+
 import { useDocumentMetadata } from "../../../../hooks/use-document-metadata";
 import { RootErrorMetadataInput } from "./types";
 

src/src/components/metadata/root/root-error-metadata/main.tsx.jinja

@@ -1,5 +1,6 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
+
 import { useDocumentMetadata } from "../../../../hooks/use-document-metadata";
 import { RootNotFoundMetadataInput } from "./types";
 

src/src/components/metadata/root/root-not-found-metadata/main.tsx.jinja

@@ -1,5 +1,6 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
+
 import { useDocumentMetadata } from "../../../../hooks/use-document-metadata";
 import { RootPageMetadataInput } from "./types";
 

src/src/components/metadata/root/root-page-metadata/main.tsx.jinja

@@ -1,6 +1,7 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { Title } from "@mantine/core";
+
 import { RootErrorViewInput } from "./types";
 
 export function RootErrorView({}: RootErrorViewInput) {

src/src/components/views/root/root-error-view/main.tsx

@@ -1,6 +1,7 @@
 import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { Title } from "@mantine/core";
+
 import { RootNotFoundViewInput } from "./types";
 
 export function RootNotFoundView({}: RootNotFoundViewInput) {

src/src/components/views/root/root-not-found-view/main.tsx

@@ -2,6 +2,7 @@ import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { Button } from "@mantine/core";
 import { useCallback } from "react";
+
 import { useStore } from "../../../../hooks/use-store";
 import { useToasts } from "../../../../hooks/use-toasts";
 import { helloWorld } from "../../../../lib/hello-world";

src/src/components/views/root/root-page-view/main.tsx

@@ -8,14 +8,14 @@ export function useDocumentMetadata({
   title,
 }: UseDocumentMetadataInput): void {
   useElementAttribute({
-    selector: "meta[name='description']",
     attribute: "content",
+    selector: "meta[name='description']",
     value: description,
   });
 
   useElementAttribute({
-    selector: "html",
     attribute: "lang",
+    selector: "html",
     value: language,
   });
 

src/src/hooks/use-document-metadata/main.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+
 import { UseElementAttributeInput } from "./types";
 
 export function useElementAttribute({

src/src/hooks/use-element-attribute/main.ts

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+
 import { UseElementTextInput } from "./types";
 
 export function useElementText({ selector, text }: UseElementTextInput): void {

src/src/hooks/use-element-text/main.ts

@@ -1,4 +1,5 @@
 import { useMemo, useSyncExternalStore } from "react";
+
 import { UseLanguageInput, UseLanguageOutput } from "./types";
 import {
   getCurrentLanguage,

src/src/hooks/use-language/main.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+
 import { store } from "../../store";
 import { UseStoreInput, UseStoreOutput } from "./types";
 

src/src/hooks/use-store/main.tsx

@@ -2,6 +2,7 @@ import { msg } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import { showNotification } from "@mantine/notifications";
 import { useCallback, useMemo } from "react";
+
 import { colors, icons } from "./constants";
 import { Toast, UseToastsInput, UseToastsOutput } from "./types";
 

src/src/hooks/use-toasts/main.tsx

@@ -1,4 +1,5 @@
 import { I18n, Messages } from "@lingui/core";
+
 import { defaultLocale } from "../../constants";
 
 export function getLocale(language: string) {

src/src/lib/load-locale/utils.ts

@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+
 import { Router } from "./router";
 
 createRoot(document.getElementById("root")!).render(

src/src/main.tsx

@@ -1,6 +1,7 @@
 import { i18n } from "@lingui/core";
 import { I18nProvider as InternalI18nProvider } from "@lingui/react";
 import { useEffect, useState } from "react";
+
 import { defaultLocale } from "../../constants";
 import { useDocumentMetadata } from "../../hooks/use-document-metadata";
 import { useLanguage } from "../../hooks/use-language";

src/src/providers/i18n-provider/main.tsx

@@ -1,4 +1,5 @@
 import { MantineProvider } from "@mantine/core";
+
 import { defaultColorScheme } from "../../constants";
 import { colorSchemeManager } from "./scheme";
 import { theme } from "./theme";

src/src/providers/theme-provider/main.tsx

@@ -1,4 +1,5 @@
 import { localStorageColorSchemeManager } from "@mantine/core";
+
 import { colorSchemeStorageKey } from "../../constants";
 
 export const colorSchemeManager = localStorageColorSchemeManager({

src/src/providers/theme-provider/scheme.ts

@@ -1,4 +1,5 @@
 import { {{ 'createBrowserRouter' if pages else 'createHashRouter' }}, RouterProvider } from "react-router-dom";
+
 import { routes } from "../app/routes";
 import { options } from "./options";
 import { RouterInput } from "./types";

src/src/router/main.tsx.jinja

@@ -1,6 +1,7 @@
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
+
 import { stateStorageKey } from "../constants";
 import { Store, StoreInitializer, StorePersistOptions } from "./types";
 

src/src/store/main.ts

@@ -2,14 +2,14 @@ import { StateCreator } from "zustand";
 import { PersistOptions } from "zustand/middleware";
 
 type StoreState = {
-  color: "red" | "green";
+  color: "green" | "red";
 };
 
 type StoreActions = {
   flipColor: () => void;
 };
 
-export type Store = StoreState & StoreActions;
+export type Store = StoreActions & StoreState;
 
 export type StoreInitializer = StateCreator<Store, [["zustand/immer", never]]>;