Merge pull request #2422 from oasisprotocol/mz/lintWarnings-3

Fix lint warnings around components

Author: buberdds

.changelog/2422.trivial.md

@@ -0,0 +1 @@
+Fix lint warnings around components

.eslintrc.js

@@ -62,7 +62,7 @@ const config = {
     'react/display-name': 'off', // TODO: Maybe enable
     'react/self-closing-comp': ['error', { component: true, html: true }],
 
-    'react-refresh/only-export-components': ['warn', { allowConstantExport: true /* vite */ }],
+    'react-refresh/only-export-components': ['error', { allowConstantExport: true /* vite */ }],
 
     '@typescript-eslint/no-empty-function': 'off', // Allow empty reducers for saga
     '@typescript-eslint/no-non-null-assertion': 'off',

package.json

@@ -11,7 +11,7 @@
     "clean": "rm -rf build/ node_modules/.vite/",
     "start": "vite",
     "checkTs": "tsc --noEmit",
-    "lint": "eslint --ext js,ts,tsx ./",
+    "lint": "eslint --ext js,ts,tsx ./  --max-warnings 0",
     "lint:fix": "yarn run lint --fix",
     "lint-git": "node ./internals/scripts/gitlint.js",
     "lint-docs": "markdownlint --ignore '**/node_modules/**' '**/*.md'",

src/app/components/HighlightedText/HighlightedTrimmedText.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 
 import { HighlightedText, HighlightOptions } from './index'
-import { useHighlightPattern } from '../PatternHighlightingContext'
+import { useHighlightPattern } from '../PatternHighlightingContext/hooks'
 import { trimAroundMatch } from './text-trimming'
 
 type HighlightedTrimmedTextProps = {

src/app/components/HighlightedText/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { findTextMatches, NormalizerOptions, PositiveMatchInfo } from './text-matching'
 import { FC, ReactNode } from 'react'
-import { useHighlightPattern } from '../PatternHighlightingContext'
+import { useHighlightPattern } from '../PatternHighlightingContext/hooks'
 
 export interface HighlightOptions {
   /**
@@ -12,8 +12,6 @@ export interface HighlightOptions {
 
 export type HighlightPattern = string[]
 
-export const NoHighlights: HighlightPattern = []
-
 interface HighlightedTextProps {
   /**
    * The text to display

src/app/components/HoverHighlightingContext/WithHoverHighlighting.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode, useEffect } from 'react'
-import { useHoverHighlighting } from './index'
+import { useHoverHighlighting } from './hooks'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 

src/app/components/HoverHighlightingContext/context.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+export interface HoverHighlightingContextInfo {
+  shouldHighlight: (address: string) => boolean
+  selectAddress: (value: string) => void
+  releaseAddress: (value: string) => void
+}
+
+export const HoverHighlightingContext = createContext<HoverHighlightingContextInfo | null>(null)

src/app/components/HoverHighlightingContext/hooks.ts

@@ -0,0 +1,17 @@
+import { useContext } from 'react'
+import { HoverHighlightingContext, HoverHighlightingContextInfo } from './context'
+
+const noContext: HoverHighlightingContextInfo = {
+  shouldHighlight: () => false,
+  selectAddress: () => {},
+  releaseAddress: () => {},
+}
+
+export const useHoverHighlighting = () => {
+  const context = useContext(HoverHighlightingContext)
+  if (!context) {
+    console.log('Warning: highlighting context is not provided!')
+    return noContext
+  }
+  return context
+}

src/app/components/HoverHighlightingContext/index.tsx

@@ -1,20 +1,7 @@
-import { createContext, FC, ReactNode, useContext, useState } from 'react'
+import { FC, ReactNode, useState } from 'react'
+import { HoverHighlightingContext } from './context'
 import { getEvmBech32Address, isValidEthAddress } from '../../utils/helpers'
 
-interface HoverHighlightingContextInfo {
-  shouldHighlight: (address: string) => boolean
-  selectAddress: (value: string) => void
-  releaseAddress: (value: string) => void
-}
-
-const HoverHighlightingContext = createContext<HoverHighlightingContextInfo | null>(null)
-
-const noContext: HoverHighlightingContextInfo = {
-  shouldHighlight: () => false,
-  selectAddress: () => {},
-  releaseAddress: () => {},
-}
-
 /**
  * Convert highlight address to a uniform format:
  */
@@ -43,12 +30,3 @@ export const HoverHighlightingContextProvider: FC<{ children: ReactNode }> = ({
     </HoverHighlightingContext.Provider>
   )
 }
-
-export const useHoverHighlighting = () => {
-  const context = useContext(HoverHighlightingContext)
-  if (!context) {
-    console.log('Warning: highlighting context is not provided!')
-    return noContext
-  }
-  return context
-}

src/app/components/PatternHighlightingContext/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react'
+import { HighlightPattern } from '../HighlightedText'
+
+export const PatternHighlightingContext = createContext<{
+  readonly highlightPattern: HighlightPattern
+} | null>(null)