Merge pull request #76 from dipiash/migrate-to-v2-eslint-numbus-plugin

Migrate to eslint numbus v2
dipiash · Nov 21, 2024 · 70dc2f2 · 70dc2f2
2 parents c4d4ef8 + 08961ac
commit 70dc2f2
Show file tree

Hide file tree

Showing 47 changed files with 1,865 additions and 752 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -49,8 +49,28 @@
       "plugins": ["react-refresh"],
       "rules": {
         "react-refresh/only-export-components": "error",
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
+        "no-extra-semi": "off",
+        // https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/filename-case.md
+        "unicorn/filename-case": [
+          "error",
+          {
+            "cases": {
+              "pascalCase": true,
+              "camelCase": true
+            },
+            "ignore": [
+              "next-env.d.ts",
+              "vite(st)?.config.ts",
+              "vite-environment.d.ts",
+              "\\.spec.ts(x)?",
+              "\\.types.ts(x)?",
+              "\\.stories.ts(x)?",
+              "\\.styled.ts(x)?",
+              "\\.styles.ts(x)?",
+              "i18n-config.ts"
+            ]
+          }
+        ]
       }
     },
     {

diff --git a/apps/main/src/App.tsx b/apps/main/src/App.tsx
@@ -1,6 +1,5 @@
-import React, { FC } from 'react'
-
 import { ThemeProvider } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
+import React, { FC } from 'react'
 
 import { GithubApp } from './GithubApp'
 

diff --git a/apps/main/src/GithubApp/GithubApp.tsx b/apps/main/src/GithubApp/GithubApp.tsx
@@ -1,18 +1,16 @@
-import React from 'react'
-
 import { useForm } from '@mantine/form'
 import { useDebouncedValue } from '@mantine/hooks'
 import { Button } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
-
-import { useInputTokenForGraphql } from './hooks/useInputTokenForGraphql'
+import React from 'react'
 
 import { Header } from './componets/Header'
 import { RepositoriesTable } from './componets/RepositoriesTable'
+import { useInputTokenForGraphql } from './hooks/useInputTokenForGraphql'
 import { ApolloProviderWrapper } from './providers/ApolloProviderWrapper'
 import { getDateCondition, getLanguageCondition, getLicenseCondition, getRepositoryNameCondition, getSortCondition } from './utils'
 
 export const GithubApp = () => {
-  const { handleUpdateToken, isTokenExist } = useInputTokenForGraphql()
+  const { isTokenExist, handleUpdateToken } = useInputTokenForGraphql()
 
   const form = useForm({
     initialValues: {
@@ -40,7 +38,7 @@ export const GithubApp = () => {
       {isTokenExist && (
         <>
           <Header form={form} />
-          <RepositoriesTable queryString={queryString} limit={10} />
+          <RepositoriesTable limit={10} queryString={queryString} />
         </>
       )}
     </ApolloProviderWrapper>

diff --git a/apps/main/src/GithubApp/componets/Header/Header.tsx b/apps/main/src/GithubApp/componets/Header/Header.tsx
@@ -1,10 +1,8 @@
-import React, { FC, memo } from 'react'
-import cx from 'clsx'
-
 import { Input } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
+import cx from 'clsx'
+import React, { FC, memo } from 'react'
 
 import { HeaderPropertiesInterface } from './Header.types'
-
 import { LicenseSelect } from './LicenseSelect'
 
 import classes from './Header.module.css'
@@ -14,9 +12,9 @@ export const Header: FC<HeaderPropertiesInterface> = memo(({ form }) => (
     <div className={cx(classes.headerItem, classes.headerItemLeft)}>
       <Input
         label="Search by repo name"
-        data-testid="search-by-name"
-        className={classes.headerField}
         name="search"
+        className={classes.headerField}
+        data-testid="search-by-name"
         placeholder="Search by repository name"
         {...form.getInputProps('repositoryName')}
       />

diff --git a/apps/main/src/GithubApp/componets/Header/Header.types.ts b/apps/main/src/GithubApp/componets/Header/Header.types.ts
@@ -2,7 +2,7 @@ import { UseFormReturnType } from '@mantine/form'
 
 export interface HeaderPropertiesInterface {
   form: UseFormReturnType<{
-    repositoryName: string
     license: string
+    repositoryName: string
   }>
 }
diff --git a/apps/main/src/GithubApp/componets/Header/LicenseSelect/LicenseSelect.tsx b/apps/main/src/GithubApp/componets/Header/LicenseSelect/LicenseSelect.tsx
@@ -1,7 +1,6 @@
-import React, { FC, useMemo } from 'react'
-
 import { useListLicensesQuery } from '@nx-vite-react-ts-mantine-boilerplate/graphql'
-import { ComboboxItem, Error, Loader, Select } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
+import { ComboboxItem, ErrorBlock, Loader, Select } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
+import React, { FC, useMemo } from 'react'
 
 import { LicenseSelectPropertiesInterface } from './LicenseSelect.types'
 
@@ -27,27 +26,18 @@ export const LicenseSelect: FC<LicenseSelectPropertiesInterface> = ({ ...rest })
   }, [data])
 
   if (error) {
-    return <Error text="Licenses loading error." />
+    return <ErrorBlock text="Licenses loading error." />
   }
 
   return (
-    <Loader loading={loading} data-testid="licenses-select-loading">
+    <Loader data-testid="licenses-select-loading" loading={loading}>
       <Select
-        searchable
-        data-testid="licenses-select"
-        nothingFoundMessage="Nothing found"
         label="License type"
         data={preparedLicenses}
+        data-testid="licenses-select"
         defaultValue=" "
-        filter={({ options, search }) => {
-          const splittedSearch = search.toLowerCase().trim().split(' ')
-
-          return (options as ComboboxItem[]).filter((option) => {
-            const words = option.label.toLowerCase().trim().split(' ')
-
-            return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)))
-          })
-        }}
+        nothingFoundMessage="Nothing found"
+        searchable
         {...rest}
       />
     </Loader>

diff --git a/apps/main/src/GithubApp/componets/Header/LicenseSelect/LicenseSelect.types.ts b/apps/main/src/GithubApp/componets/Header/LicenseSelect/LicenseSelect.types.ts
@@ -1,4 +1,4 @@
 export interface LicenseSelectPropertiesInterface {
-  onChange: (value: string | null) => void
   className?: string
+  onChange: (value: null | string) => void
 }
diff --git a/apps/main/src/GithubApp/componets/Header/__tests__/Header.spec.tsx b/apps/main/src/GithubApp/componets/Header/__tests__/Header.spec.tsx
@@ -1,20 +1,18 @@
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
 import { MockedProvider, MockedResponse } from '@apollo/react-testing'
 import { useForm } from '@mantine/form'
 import { ListLicensesDocument } from '@nx-vite-react-ts-mantine-boilerplate/graphql'
 import { ThemeProvider } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
 import { act, fireEvent, render, renderHook, screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
 
 import { Header } from '../index'
-
 import licensesListMockDataSuccess from './mocks/result.success.json'
 
 const mocks: {
-  success: readonly MockedResponse[]
   error: readonly MockedResponse[]
+  success: readonly MockedResponse[]
 } = {
   error: [
     {
@@ -42,8 +40,8 @@ describe('Header', () => {
 
     const { result: formHookReference } = renderHook(() =>
       useForm<{
-        repositoryName: string
         license: string
+        repositoryName: string
       }>({
         initialValues: {
           license: '',
@@ -90,8 +88,8 @@ describe('Header', () => {
   it('error render', async () => {
     const { result: formHookReference } = renderHook(() =>
       useForm<{
-        repositoryName: string
         license: string
+        repositoryName: string
       }>({
         initialValues: {
           license: '',
@@ -110,7 +108,7 @@ describe('Header', () => {
 
     await act(() => new Promise((resolve) => setTimeout(resolve, 0))) // wait for response
 
-    screen.getByText('Search by repo name')
-    screen.getByText('Licenses loading error.')
+    expect(screen.getByText('Search by repo name')).toBeVisible()
+    expect(screen.getByText('Licenses loading error.')).toBeVisible()
   })
 })
diff --git a/apps/main/src/GithubApp/componets/RepositoriesTable/RepositoriesTable.tsx b/apps/main/src/GithubApp/componets/RepositoriesTable/RepositoriesTable.tsx
@@ -1,10 +1,8 @@
-import React, { FC, useMemo } from 'react'
-
 import { SearchResultItemEdge, useListRepositoriesQuery } from '@nx-vite-react-ts-mantine-boilerplate/graphql'
-import { Error, Loader, Pagination, Space, Table } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
+import { ErrorBlock, Loader, Pagination, Space, Table } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
+import React, { FC, useMemo } from 'react'
 
 import { RepositoriesTablePropertiesInterface, RepositoryDataInterface } from './RepositoriesTable.types'
-
 import { enhancedFetchMore, getPaginationParameters } from './utils'
 
 export const RepositoriesTable: FC<RepositoriesTablePropertiesInterface> = ({ limit = 10, queryString }) => {
@@ -18,9 +16,9 @@ export const RepositoriesTable: FC<RepositoriesTablePropertiesInterface> = ({ li
   const resultData = useMemo(() => (data?.search.edges || []) as SearchResultItemEdge[], [data])
 
   const tableColumns = {
+    name: 'Name',
     date: 'Date',
     license: 'License',
-    name: 'Name',
     stars: 'Stars',
   }
 
@@ -30,45 +28,45 @@ export const RepositoriesTable: FC<RepositoriesTablePropertiesInterface> = ({ li
         .map(({ node }) =>
           node?.__typename === 'Repository'
             ? {
+                name: node?.name,
                 date: node?.createdAt,
                 key: node?.id,
-                license: node?.licenseInfo && node?.licenseInfo.name,
-                name: node?.name,
-                stars: node?.stargazers && node?.stargazers.totalCount,
+                license: node?.licenseInfo?.name,
+                stars: node?.stargazers?.totalCount,
               }
             : (undefined as unknown as RepositoryDataInterface),
         )
-        .filter((node): node is RepositoryDataInterface => node !== undefined),
+        .filter((node): node is RepositoryDataInterface => node != undefined),
     [resultData],
   )
 
-  const tableError = error ? <Error text="Repositories list loading error." /> : false
+  const tableError = error ? <ErrorBlock text="Repositories list loading error." /> : false
 
   const paginationParameters = getPaginationParameters(data?.search.pageInfo)
 
   return (
-    <Loader loading={loading} data-testid="repositories-list-loading">
+    <Loader data-testid="repositories-list-loading" loading={loading}>
       <Table columns={tableColumns} data={tableData} error={tableError} />
       <Space h={10} />
       <Pagination
-        onPrevClick={() =>
+        isNextDisabled={paginationParameters.isNextDisabled}
+        isPrevDisabled={paginationParameters.isPreviousDisabled}
+        onNextClick={() =>
           enhancedFetchMore({
-            cursorBefore: paginationParameters.cursorBefore,
-            fetchMore,
+            cursorAfter: paginationParameters.cursorAfter,
             limit,
             queryString,
+            fetchMore,
           })
         }
-        onNextClick={() =>
+        onPrevClick={() =>
           enhancedFetchMore({
-            cursorAfter: paginationParameters.cursorAfter,
-            fetchMore,
+            cursorBefore: paginationParameters.cursorBefore,
             limit,
             queryString,
+            fetchMore,
           })
         }
-        isPrevDisabled={paginationParameters.isPreviousDisabled}
-        isNextDisabled={paginationParameters.isNextDisabled}
       />
     </Loader>
   )

diff --git a/apps/main/src/GithubApp/componets/RepositoriesTable/RepositoriesTable.types.ts b/apps/main/src/GithubApp/componets/RepositoriesTable/RepositoriesTable.types.ts
@@ -1,14 +1,14 @@
 import { Scalars } from '@nx-vite-react-ts-mantine-boilerplate/graphql'
 
 export interface RepositoriesTablePropertiesInterface {
-  queryString: string
   limit: number
+  queryString: string
 }
 
 export interface RepositoryDataInterface {
+  date: Scalars['DateTime']
   key: Scalars['ID']
+  license: string
   name: string
   stars: number
-  license: string
-  date: Scalars['DateTime']
 }
diff --git a/apps/main/src/GithubApp/componets/RepositoriesTable/__tests__/RepositoriesTable.spec.tsx b/apps/main/src/GithubApp/componets/RepositoriesTable/__tests__/RepositoriesTable.spec.tsx
@@ -1,14 +1,12 @@
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
 import { MockedProvider } from '@apollo/client/testing'
 import { ListRepositoriesDocument } from '@nx-vite-react-ts-mantine-boilerplate/graphql'
 import { ThemeProvider } from '@nx-vite-react-ts-mantine-boilerplate/ui-kit'
 import { act, render, screen } from '@testing-library/react'
+import React from 'react'
+import { describe, expect, it } from 'vitest'
 
 import { getDateCondition, getLanguageCondition, getLicenseCondition, getRepositoryNameCondition, getSortCondition } from '../../../utils'
 import { RepositoriesTable } from '../index'
-
 import repositoriesListMockDataEmpty from './mocks/empty.success.json'
 import repositoriesListMockDataSuccess from './mocks/result.success.json'
 
@@ -65,7 +63,7 @@ describe('RepositoriesTable', () => {
     render(
       <ThemeProvider>
         <MockedProvider mocks={[]}>
-          <RepositoriesTable queryString={queryString} limit={limitItems} />
+          <RepositoriesTable limit={limitItems} queryString={queryString} />
         </MockedProvider>
       </ThemeProvider>,
     )
@@ -77,7 +75,7 @@ describe('RepositoriesTable', () => {
     render(
       <ThemeProvider>
         <MockedProvider mocks={mocks.empty}>
-          <RepositoriesTable queryString={queryString} limit={limitItems} />
+          <RepositoriesTable limit={limitItems} queryString={queryString} />
         </MockedProvider>
       </ThemeProvider>,
     )
@@ -91,7 +89,7 @@ describe('RepositoriesTable', () => {
     render(
       <ThemeProvider>
         <MockedProvider mocks={mocks.success}>
-          <RepositoriesTable queryString={queryString} limit={limitItems} />
+          <RepositoriesTable limit={limitItems} queryString={queryString} />
         </MockedProvider>
       </ThemeProvider>,
     )
@@ -105,7 +103,7 @@ describe('RepositoriesTable', () => {
     render(
       <ThemeProvider>
         <MockedProvider mocks={mocks.error}>
-          <RepositoriesTable queryString={queryString} limit={limitItems} />
+          <RepositoriesTable limit={limitItems} queryString={queryString} />
         </MockedProvider>
       </ThemeProvider>,
     )