add tailwind eslint plugin, fix MAL import

hikka-io · Mar 17, 2024 · 5c58799 · 5c58799
1 parent fa3a992
commit 5c58799
Show file tree

Hide file tree

Showing 137 changed files with 437 additions and 383 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,31 +1,58 @@
 {
-    "extends": ["next", "next/core-web-vitals", "prettier"],
-    "rules": {
-        "react-hooks/rules-of-hooks": "off",
-        "no-use-before-define": "off",
-        "linebreak-style": "off",
-        "import/no-cycle": "off",
-        "react/require-default-props": "off",
-        "react/jsx-props-no-spreading": "off",
-        "react/no-array-index-key": "off",
-        "react/no-unused-prop-types": "off",
-        "jsx-a11y/click-events-have-key-events": "off",
-        "import/prefer-default-export": "off",
-        "react-hooks/exhaustive-deps": "off",
-        "no-restricted-globals": "off",
-        "no-bitwise": "off",
-        "no-param-reassign": "off",
-        "@typescript-eslint/indent": "off",
-        "react/prop-types": "off",
-        "react/display-name": "off",
-        "@tanstack/query/exhaustive-deps": "error",
-        "@tanstack/query/prefer-query-object-syntax": "error",
-        "react/jsx-filename-extension": [
-            1,
-            {
-                "extensions": [".js", ".jsx", ".ts", ".tsx"]
-            }
-        ]
+  "extends": [
+    "next",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ],
+  "settings": {
+    "tailwindcss": {
+      "callees": [
+        "cn"
+      ],
+      "config": "tailwind.config.js"
     },
-    "plugins": ["@tanstack/query", "import"]
+    "next": {
+      "rootDir": [
+        "./"
+      ]
+    }
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "off",
+    "no-use-before-define": "off",
+    "linebreak-style": "off",
+    "import/no-cycle": "off",
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/no-array-index-key": "off",
+    "react/no-unused-prop-types": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "import/prefer-default-export": "off",
+    "react-hooks/exhaustive-deps": "off",
+    "no-restricted-globals": "off",
+    "no-bitwise": "off",
+    "no-param-reassign": "off",
+    "@typescript-eslint/indent": "off",
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "@tanstack/query/exhaustive-deps": "error",
+    "@tanstack/query/prefer-query-object-syntax": "error",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    ]
+  },
+  "plugins": [
+    "tailwindcss",
+    "@tanstack/query",
+    "import"
+  ]
 }
diff --git a/app/(pages)/anime/(animeList)/_components/anime-list/anime-list.tsx b/app/(pages)/anime/(animeList)/_components/anime-list/anime-list.tsx
@@ -90,8 +90,8 @@ const Component = () => {
                 </Button>
             )}
             {list && pagination && pagination.pages > 1 && (
-                <div className="sticky z-10 bottom-2 flex items-center justify-center">
-                    <div className="bg-background border p-2 border-secondary/60 rounded-lg shadow w-fit">
+                <div className="sticky bottom-2 z-10 flex items-center justify-center">
+                    <div className="w-fit rounded-lg border border-secondary/60 bg-background p-2 shadow">
                         <Pagination
                             page={Number(iPage)}
                             pages={pagination.pages}

diff --git a/app/(pages)/anime/(animeList)/_components/navbar/_components/search.tsx b/app/(pages)/anime/(animeList)/_components/navbar/_components/search.tsx
@@ -27,7 +27,7 @@ const Component = () => {
     };
 
     return (
-        <div className="flex flex-col gap-4 flex-1">
+        <div className="flex flex-1 flex-col gap-4">
             <Input
                 value={search || ''}
                 onChange={(event) => handleChangeSearch(event.target.value)}

diff --git a/app/(pages)/anime/(animeList)/layout.tsx b/app/(pages)/anime/(animeList)/layout.tsx
@@ -16,7 +16,7 @@ const Component = async ({ children }: Props) => {
                     <NavBar />
                     {children}
                 </div>
-                <div className="order-1 hidden w-full lg:order-2 lg:block bg-secondary/30 border border-secondary/60 rounded-md sticky top-20 opacity-60 hover:opacity-100 transition-opacity">
+                <div className="sticky top-20 order-1 hidden w-full rounded-md border border-secondary/60 bg-secondary/30 opacity-60 transition-opacity hover:opacity-100 lg:order-2 lg:block">
                     <Filters type="anime" className="px-4" />
                 </div>
             </div>

diff --git a/app/(pages)/anime/[slug]/_components/actions/_components/watch-stats.tsx b/app/(pages)/anime/[slug]/_components/actions/_components/watch-stats.tsx
@@ -86,7 +86,7 @@ const Component = () => {
             </div>
             <div className="rounded-lg border border-secondary/60 bg-secondary/30 p-4">
                 <div className="flex justify-between gap-2 overflow-hidden">
-                    <Label className="min-h-[24px] overflow-hidden overflow-ellipsis">
+                    <Label className="min-h-[24px] overflow-hidden text-ellipsis">
                         Епізоди
                     </Label>
                     <div className="inline-flex">
@@ -115,7 +115,7 @@ const Component = () => {
                     </Label>
                 </H3>
                 <Progress
-                    className="h-2 mt-2"
+                    className="mt-2 h-2"
                     max={watch.anime.episodes_total || watch.episodes}
                     value={watch.episodes}
                 />

diff --git a/app/(pages)/anime/[slug]/_components/links.tsx b/app/(pages)/anime/[slug]/_components/links.tsx
@@ -23,12 +23,12 @@ const ExternalLink = ({ link }: { link: API.External }) => {
             <Link
                 href={link.url}
                 target="_blank"
-                className="flex h-auto flex-col items-center justify-center text-center gap-2 overflow-hidden rounded-lg"
+                className="flex h-auto flex-col items-center justify-center gap-2 overflow-hidden rounded-lg text-center"
             >
-                <H4 className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
+                <H4 className="w-full truncate">
                     {link.text}
                 </H4>
-                <P className="text-xs lowercase w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
+                <P className="w-full truncate text-xs lowercase">
                     {link.url}
                 </P>
             </Link>

diff --git a/app/(pages)/anime/[slug]/_components/media.tsx b/app/(pages)/anime/[slug]/_components/media.tsx
@@ -97,7 +97,7 @@ const Component = ({ extended }: Props) => {
                                 OST[ost.ost_type].title_en
                             }
                         >
-                            <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-4xl">
+                            <div className="absolute left-0 top-0 flex size-full items-center justify-center text-4xl">
                                 <IcBaselineLibraryMusic className="text-muted-foreground" />
                             </div>
                         </BaseCard>
@@ -120,7 +120,7 @@ const Component = ({ extended }: Props) => {
                                 }
                             >
                                 {!thumb && (
-                                    <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center text-4xl">
+                                    <div className="absolute left-0 top-0 flex size-full items-center justify-center text-4xl">
                                         <IcBaselineOndemandVideo className="text-muted-foreground" />
                                     </div>
                                 )}

diff --git a/app/(pages)/anime/[slug]/_components/title.tsx b/app/(pages)/anime/[slug]/_components/title.tsx
@@ -101,7 +101,7 @@ const Component = () => {
                 </div>
                 <div className="flex flex-col gap-2">
                     {data.score > 0 && (
-                        <div className="flex gap-2 items-start">
+                        <div className="flex items-start gap-2">
                             <div className="font-display text-4xl font-bold">
                                 {data.score}
                             </div>

diff --git a/app/(pages)/anime/[slug]/_components/watchlist-stats.tsx b/app/(pages)/anime/[slug]/_components/watchlist-stats.tsx
@@ -45,22 +45,22 @@ const Component = () => {
                                 <Tooltip key={stat} delayDuration={0}>
                                     <TooltipTrigger>
                                         <div className="flex items-center justify-between gap-2">
-                                            <div className="flex items-center gap-2 w-full flex-1">
+                                            <div className="flex w-full flex-1 items-center gap-2">
                                                 <div className="rounded-md bg-secondary p-1">
                                                     {createElement(
                                                         status.icon!,
                                                     )}
                                                 </div>
                                                 <div className="relative h-2 w-full overflow-hidden rounded-md">
                                                     <div
-                                                        className="absolute bottom-0 left-0 h-full w-full opacity-10"
+                                                        className="absolute bottom-0 left-0 size-full opacity-10"
                                                         style={{
                                                             backgroundColor:
                                                             status.color,
                                                         }}
                                                     />
                                                     <div
-                                                        className="absolute bottom-0 left-0 flex w-full items-end justify-center h-2"
+                                                        className="absolute bottom-0 left-0 flex h-2 w-full items-end justify-center"
                                                         style={{
                                                             backgroundColor:
                                                             status.color,
@@ -70,7 +70,7 @@ const Component = () => {
                                                 </div>
 
                                             </div>
-                                            <Small className="text-muted-foreground w-14 text-right">
+                                            <Small className="w-14 text-right text-muted-foreground">
                                                 <NumericFormat
                                                     thousandSeparator
                                                     displayType="text"

diff --git a/app/(pages)/anime/[slug]/layout.tsx b/app/(pages)/anime/[slug]/layout.tsx
@@ -136,7 +136,7 @@ const Component = async ({ params: { slug }, children }: Props) => {
                 <Breadcrumbs>
                     <div className="flex w-auto items-center gap-4 overflow-hidden whitespace-nowrap">
                         <div
-                            className="h-2 w-2 rounded-full bg-white"
+                            className="size-2 rounded-full bg-white"
                             style={{
                                 backgroundColor:
                                     RELEASE_STATUS[anime?.status as API.Status]
@@ -145,7 +145,7 @@ const Component = async ({ params: { slug }, children }: Props) => {
                         />
                         <Link
                             href={'/anime/' + anime?.slug}
-                            className="flex-1 overflow-hidden overflow-ellipsis text-sm font-bold hover:underline"
+                            className="flex-1 overflow-hidden text-ellipsis text-sm font-bold hover:underline"
                         >
                             {anime?.title_ua ||
                                 anime?.title_en ||

diff --git a/app/(pages)/characters/[slug]/_components/description.tsx b/app/(pages)/characters/[slug]/_components/description.tsx
@@ -22,7 +22,7 @@ const Component = () => {
     return (
         <div className="flex flex-col gap-8">
             <SubHeader title="Опис">
-                <div className="flex gap-4 flex-wrap">
+                <div className="flex flex-wrap gap-4">
                     {character.description_ua && (
                         <Button
                             size="badge"
@@ -33,7 +33,7 @@ const Component = () => {
                             }
                             onClick={() => setActive('description_ua')}
                         >
-                            <span className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap">
+                            <span className="w-full truncate">
                                 UA
                             </span>
                         </Button>

diff --git a/app/(pages)/characters/[slug]/_components/voices.tsx b/app/(pages)/characters/[slug]/_components/voices.tsx
@@ -55,8 +55,8 @@ const Component = ({ extended }: Props) => {
                         disableChildrenLink
                         leftSubtitle={ch.language.toUpperCase()}
                     >
-                        <div className="absolute left-0 bottom-0 z-0 h-16 w-full bg-gradient-to-t from-black to-transparent" />
-                        <div className="absolute transition-all w-16 hover:w-28 h-auto z-[1] shadow-lg rounded-lg border-secondary/60 border flex right-2 bottom-2">
+                        <div className="absolute bottom-0 left-0 z-0 h-16 w-full bg-gradient-to-t from-black to-transparent" />
+                        <div className="absolute bottom-2 right-2 z-[1] flex h-auto w-16 rounded-lg border border-secondary/60 shadow-lg transition-all hover:w-28">
                             <BaseCard
                                 href={`/anime/${ch.anime.slug}`}
                                 poster={ch.anime.poster}

diff --git a/app/(pages)/characters/[slug]/layout.tsx b/app/(pages)/characters/[slug]/layout.tsx
@@ -110,7 +110,7 @@ const Component = async ({ params: { slug }, children }: Props) => {
                     <div className="flex w-auto items-center gap-4 overflow-hidden whitespace-nowrap">
                         <Link
                             href={'/characters/' + character?.slug}
-                            className="flex-1 overflow-hidden overflow-ellipsis text-sm font-bold hover:underline"
+                            className="flex-1 overflow-hidden text-ellipsis text-sm font-bold hover:underline"
                         >
                             {character?.name_ua ||
                                 character?.name_en ||

diff --git a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
@@ -40,7 +40,7 @@ const Component = ({ collection }: Props) => {
                     </Avatar>
                 </Link>
                 <div className="flex flex-col gap-2">
-                    <div className="flex gap-4 items-center">
+                    <div className="flex items-center gap-4">
                         <button
                             className={cn('text-left', spoiler && 'blur-sm')}
                             onClick={(e) => {
@@ -69,7 +69,7 @@ const Component = ({ collection }: Props) => {
                             <Badge variant="destructive">+18</Badge>
                         )}
                     </div>
-                    <div className="inline-flex gap-2 items-center text-muted-foreground text-xs">
+                    <div className="inline-flex items-center gap-2 text-xs text-muted-foreground">
                         <div className="flex gap-1">
                             <MaterialSymbolsGridViewRounded />
                             <Small>{collection.entries}</Small>
@@ -88,14 +88,14 @@ const Component = ({ collection }: Props) => {
                             key={tag}
                             onClick={() => setSpoiler(false)}
                             variant="secondary"
-                            className={cn(spoiler && 'blur-sm cursor-pointer')}
+                            className={cn(spoiler && 'cursor-pointer blur-sm')}
                         >
                             {tag.toLowerCase()}
                         </Badge>
                     ))}
                 </div>
             )}
-            <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4 lg:gap-8 flex-nowrap">
+            <div className="grid grid-cols-3 flex-nowrap gap-4 md:grid-cols-5 lg:grid-cols-7 lg:gap-8">
                 {collection.collection.map((item, index) => (
                     <AnimeCard
                         containerClassName={cn(
@@ -120,7 +120,7 @@ const Component = ({ collection }: Props) => {
                 <BaseCard
                     href={`/collections/${collection.reference}`}
                     poster={
-                        <MaterialSymbolsMoreHoriz className="text-muted-foreground text-4xl" />
+                        <MaterialSymbolsMoreHoriz className="text-4xl text-muted-foreground" />
                     }
                 />
             </div>

diff --git a/app/(pages)/collections/[reference]/_components/collection-info.tsx b/app/(pages)/collections/[reference]/_components/collection-info.tsx
@@ -51,14 +51,14 @@ const Component = () => {
         loggedUser?.role === 'moderator';
 
     return (
-        <div className="flex flex-col items-start gap-8 w-full">
+        <div className="flex w-full flex-col items-start gap-8">
             <SubHeader title="Деталі" />
-            <div className="flex p-4 flex-col gap-6 bg-secondary/30 border border-secondary/60 rounded-md w-full">
+            <div className="flex w-full flex-col gap-6 rounded-md border border-secondary/60 bg-secondary/30 p-4">
                 <div className="flex flex-col gap-4">
                     <Label className="text-muted-foreground">Автор</Label>
                     <div className="flex w-full gap-4">
                         <Link href={`/u/${collection?.author.username}`}>
-                            <Avatar className="rounded-md w-12 h-12">
+                            <Avatar className="size-12 rounded-md">
                                 <AvatarImage
                                     className="rounded-md"
                                     src={collection?.author.avatar}
@@ -85,13 +85,13 @@ const Component = () => {
                         ))}
                     </div>
                 )}
-                <div className="flex justify-between items-center gap-4">
+                <div className="flex items-center justify-between gap-4">
                     <Label htmlFor="nsfw" className="text-muted-foreground">
                         Контент +18
                     </Label>
                     <Switch checked={nsfw} id="nsfw" />
                 </div>
-                <div className="flex justify-between items-center gap-4">
+                <div className="flex items-center justify-between gap-4">
                     <Label htmlFor="spoiler" className="text-muted-foreground">
                         Спойлери
                     </Label>

diff --git a/app/(pages)/collections/[reference]/page.tsx b/app/(pages)/collections/[reference]/page.tsx
@@ -59,7 +59,7 @@ const Component = async ({
                         <div className="flex w-auto items-center gap-4 overflow-hidden whitespace-nowrap">
                             <Link
                                 href={'/collections/' + reference}
-                                className="flex-1 overflow-hidden overflow-ellipsis text-sm font-bold hover:underline"
+                                className="flex-1 overflow-hidden text-ellipsis text-sm font-bold hover:underline"
                             >
                                 {collection?.title}
                             </Link>
@@ -69,7 +69,7 @@ const Component = async ({
                         <div className="flex flex-col gap-12">
                             <div className="flex flex-col gap-8">
                                 <CollectionTitle />
-                                <div className="lg:hidden block">
+                                <div className="block lg:hidden">
                                     <CollectionInfo />
                                 </div>
                                 <CollectionGroups />

diff --git a/app/(pages)/collections/[reference]/update/page.tsx b/app/(pages)/collections/[reference]/update/page.tsx
@@ -14,13 +14,13 @@ const Component = () => {
                 <div className="grid grid-cols-1 justify-center lg:grid-cols-[1fr_25%] lg:items-start lg:justify-between lg:gap-16">
                     <div className="flex flex-col gap-8">
                         <CollectionTitle />
-                        <div className="block lg:hidden bg-secondary/30 border border-secondary/60 rounded-md">
+                        <div className="block rounded-md border border-secondary/60 bg-secondary/30 lg:hidden">
                             <CollectionSettings mode="edit"  />
                         </div>
                         <CollectionGroups mode="edit" />
                     </div>
                     <div
-                        className="order-1 hidden w-full lg:order-2 lg:block bg-secondary/30 border border-secondary/60 rounded-md sticky top-20">
+                        className="sticky top-20 order-1 hidden w-full rounded-md border border-secondary/60 bg-secondary/30 lg:order-2 lg:block">
                         <CollectionSettings mode="edit" />
                     </div>
                 </div>