chore: finish frontend ESLint migration #18
Enable every plugin recommended preset and replace Biome with ESLint formatting. Preserve API contracts and JSX whitespace; verify source, tests, builds and tooling.
This commit is contained in:
@@ -1,8 +1,11 @@
|
||||
import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
|
||||
import type { FC, ReactNode } from "react";
|
||||
|
||||
import { AppShell as MantineAppShell, NavLink, Text } from "@mantine/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Outlet, NavLink as RouterNavLink, useLocation } from "react-router";
|
||||
|
||||
import { bindIconAnimation } from "@/shared/lib";
|
||||
|
||||
import classes from "./AppShell.module.css";
|
||||
|
||||
type AppShellProps = {
|
||||
@@ -15,9 +18,6 @@ const AppShell: FC<AppShellProps> = (props) => {
|
||||
const { pathname } = useLocation();
|
||||
const items = [
|
||||
{
|
||||
to: "/accounts",
|
||||
label: t("navigation.accounts"),
|
||||
iconClassName: classes.portfolioIcon,
|
||||
icon: (
|
||||
<>
|
||||
<path d="M3 10v9h18v-9" />
|
||||
@@ -32,11 +32,11 @@ const AppShell: FC<AppShellProps> = (props) => {
|
||||
/>
|
||||
</>
|
||||
),
|
||||
iconClassName: classes.portfolioIcon,
|
||||
label: t("navigation.accounts"),
|
||||
to: "/accounts",
|
||||
},
|
||||
{
|
||||
to: "/cards",
|
||||
label: t("navigation.cards"),
|
||||
iconClassName: classes.cardsIcon,
|
||||
icon: (
|
||||
<>
|
||||
<path d="M3 5h18v14H3V5Zm0 4h18M6 15h4" />
|
||||
@@ -47,42 +47,42 @@ const AppShell: FC<AppShellProps> = (props) => {
|
||||
</g>
|
||||
</>
|
||||
),
|
||||
iconClassName: classes.cardsIcon,
|
||||
label: t("navigation.cards"),
|
||||
to: "/cards",
|
||||
},
|
||||
{
|
||||
to: "/stocks",
|
||||
label: t("navigation.stocks"),
|
||||
iconClassName: classes.stocksIcon,
|
||||
icon: (
|
||||
<>
|
||||
<path d="M3 3v18h18" />
|
||||
<path
|
||||
className={classes.drawStroke}
|
||||
pathLength={1}
|
||||
d="M7 14l5-5 4 3 5-7"
|
||||
pathLength={1}
|
||||
/>
|
||||
<path className={classes.stockArrow} d="M16 5h5v5" />
|
||||
</>
|
||||
),
|
||||
iconClassName: classes.stocksIcon,
|
||||
label: t("navigation.stocks"),
|
||||
to: "/stocks",
|
||||
},
|
||||
{
|
||||
to: "/bonds",
|
||||
label: t("navigation.bonds"),
|
||||
iconClassName: classes.bondsIcon,
|
||||
icon: (
|
||||
<>
|
||||
<path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3Z" />
|
||||
<g className={classes.couponLines}>
|
||||
<path pathLength={1} d="M9 7h6" />
|
||||
<path pathLength={1} d="M9 11h6" />
|
||||
<path pathLength={1} d="M9 15h3" />
|
||||
<path d="M9 7h6" pathLength={1} />
|
||||
<path d="M9 11h6" pathLength={1} />
|
||||
<path d="M9 15h3" pathLength={1} />
|
||||
</g>
|
||||
</>
|
||||
),
|
||||
iconClassName: classes.bondsIcon,
|
||||
label: t("navigation.bonds"),
|
||||
to: "/bonds",
|
||||
},
|
||||
{
|
||||
to: "/settings",
|
||||
label: t("navigation.settings"),
|
||||
iconClassName: classes.settingsIcon,
|
||||
icon: (
|
||||
<>
|
||||
<path d="M4 7h16M4 17h16" />
|
||||
@@ -90,48 +90,51 @@ const AppShell: FC<AppShellProps> = (props) => {
|
||||
<path className={classes.bottomSlider} d="M10 14v6h4v-6h-4Z" />
|
||||
</>
|
||||
),
|
||||
iconClassName: classes.settingsIcon,
|
||||
label: t("navigation.settings"),
|
||||
to: "/settings",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<MantineAppShell
|
||||
header={{ height: 60 }}
|
||||
navbar={{ width: 220, breakpoint: "sm", collapsed: { mobile: true } }}
|
||||
navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
|
||||
padding="md"
|
||||
>
|
||||
<MantineAppShell.Header className={classes.header}>
|
||||
<Text fw={700}>{t("appName")}</Text>
|
||||
</MantineAppShell.Header>
|
||||
<MantineAppShell.Navbar p="sm">
|
||||
{items.map((item) => (
|
||||
{items.map(item => (
|
||||
<NavLink
|
||||
component={RouterNavLink}
|
||||
active={pathname.startsWith(item.to)}
|
||||
className={classes.navLink}
|
||||
component={RouterNavLink}
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
label={item.label}
|
||||
leftSection={
|
||||
leftSection={(
|
||||
<span
|
||||
className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
|
||||
>
|
||||
<svg
|
||||
ref={bindIconAnimation}
|
||||
width={20}
|
||||
height={20}
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height={20}
|
||||
ref={bindIconAnimation}
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
strokeWidth="1.5"
|
||||
viewBox="0 0 24 24"
|
||||
width={20}
|
||||
>
|
||||
{item.icon}
|
||||
</svg>
|
||||
</span>
|
||||
}
|
||||
active={pathname.startsWith(item.to)}
|
||||
)}
|
||||
to={item.to}
|
||||
/>
|
||||
))}
|
||||
</MantineAppShell.Navbar>
|
||||
@@ -141,11 +144,11 @@ const AppShell: FC<AppShellProps> = (props) => {
|
||||
<Outlet />
|
||||
</div>
|
||||
</MantineAppShell.Main>
|
||||
<nav className={classes.bottomNav} aria-label={t("appName")}>
|
||||
{items.map((item) => (
|
||||
<nav aria-label={t("appName")} className={classes.bottomNav}>
|
||||
{items.map(item => (
|
||||
<RouterNavLink
|
||||
className={
|
||||
pathname.startsWith(item.to) ? classes.active : undefined
|
||||
(pathname.startsWith(item.to)) ? (classes.active) : undefined
|
||||
}
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
|
||||
Reference in New Issue
Block a user