chore(ws): enforce named imports for react hooks (#414)

Signed-off-by: paulovmr <[email protected]>

Author: paulovmr

workspaces/frontend/.eslintrc renamed to workspaces/frontend/.eslintrc.js

@@ -1,4 +1,6 @@
-{
+const noReactHookNamespace = require('./eslint-local-rules/no-react-hook-namespace');
+
+module.exports = {
   "parser": "@typescript-eslint/parser",
   "env": {
     "browser": true,
@@ -216,7 +218,8 @@
     "no-useless-return": "error",
     "symbol-description": "error",
     "yoda": "error",
-    "func-names": "warn"
+    "func-names": "warn",
+    "no-react-hook-namespace": "error"
   },
   "overrides": [
     {
@@ -262,6 +265,12 @@
           }
         ]
       }
+    },
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      rules: {
+        'no-react-hook-namespace': 'error',
+      },
     }
   ]
-}
+};

workspaces/frontend/eslint-local-rules/no-react-hook-namespace.js

@@ -0,0 +1,34 @@
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow using React hooks through React namespace',
+    },
+    messages: {
+      avoidNamespaceHook: 'Import React hook "{{hook}}" directly instead of using React.{{hook}}.',
+    },
+    schema: [],
+  },
+  create(context) {
+    const hooks = new Set([
+      'useState', 'useEffect', 'useContext', 'useReducer',
+      'useCallback', 'useMemo', 'useRef', 'useLayoutEffect',
+      'useImperativeHandle', 'useDebugValue', 'useDeferredValue',
+      'useTransition', 'useId', 'useSyncExternalStore',
+    ]);
+    return {
+      MemberExpression(node) {
+        if (
+          node.object?.name === 'React' &&
+          hooks.has(node.property?.name)
+        ) {
+          context.report({
+            node,
+            messageId: 'avoidNamespaceHook',
+            data: { hook: node.property.name },
+          });
+        }
+      },
+    };
+  },
+};

workspaces/frontend/package.json

@@ -24,8 +24,8 @@
     "test:unit": "npm run test:jest -- --silent",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:fix": "eslint --ext .js,.ts,.jsx,.tsx ./src --fix",
-    "test:lint": "eslint --max-warnings 0 --ext .js,.ts,.jsx,.tsx ./src",
+    "test:fix": "eslint --rulesdir eslint-local-rules --ext .js,.ts,.jsx,.tsx ./src --fix",
+    "test:lint": "eslint --rulesdir eslint-local-rules --max-warnings 0 --ext .js,.ts,.jsx,.tsx ./src",
     "cypress:open": "cypress open --project src/__tests__/cypress",
     "cypress:open:mock": "CY_MOCK=1 CY_WS_PORT=9002 npm run cypress:open -- ",
     "cypress:run": "cypress run -b chrome --project src/__tests__/cypress",

workspaces/frontend/src/__tests__/unit/testUtils/hooks.spec.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createComparativeValue, renderHook, standardUseFetchState, testHook } from './hooks';
 
 const useSayHello = (who: string, showCount = false) => {
-  const countRef = React.useRef(0);
+  const countRef = useRef(0);
   countRef.current++;
   return `Hello ${who}!${showCount && countRef.current > 1 ? ` x${countRef.current}` : ''}`;
 };
 
 const useSayHelloDelayed = (who: string, delay = 0) => {
-  const [speech, setSpeech] = React.useState('');
-  React.useEffect(() => {
+  const [speech, setSpeech] = useState('');
+  useEffect(() => {
     const handle = setTimeout(() => setSpeech(`Hello ${who}!`), delay);
     return () => clearTimeout(handle);
   }, [who, delay]);

workspaces/frontend/src/app/App.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useEffect } from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
 import './app.css';
 import {
@@ -26,7 +26,7 @@ import { isMUITheme, Theme } from './const';
 import { BrowserStorageContextProvider } from './context/BrowserStorageContext';
 
 const App: React.FC = () => {
-  React.useEffect(() => {
+  useEffect(() => {
     // Apply the theme based on the value of STYLE_THEME
     if (isMUITheme()) {
       document.documentElement.classList.add(Theme.MUI);

workspaces/frontend/src/app/AppRoutes.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Route, Routes, Navigate } from 'react-router-dom';
 import { AppRoutePaths } from '~/app/routes';
 import { WorkspaceForm } from '~/app/pages/Workspaces/Form/WorkspaceForm';

workspaces/frontend/src/app/EnsureAPIAvailability.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useNotebookAPI } from './hooks/useNotebookAPI';
 

workspaces/frontend/src/app/NavSidebar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import {
   Brand,
@@ -29,7 +29,7 @@ const NavHref: React.FC<{ item: NavDataHref }> = ({ item }) => {
 
 const NavGroup: React.FC<{ item: NavDataGroup }> = ({ item }) => {
   const { children } = item;
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
 
   return (
     <NavExpandable

workspaces/frontend/src/app/components/ThemeAwareSearchInput.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { SearchInput, SearchInputProps, TextInput } from '@patternfly/react-core';
 import FormFieldset from 'app/components/FormFieldset';
 import { isMUITheme } from 'app/const';

workspaces/frontend/src/app/context/BrowserStorageContext.tsx

@@ -1,4 +1,12 @@
-import React, { createContext, useCallback, useContext, useEffect } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 export interface BrowserStorageContextType {
   getValue: (key: string) => unknown;
@@ -17,8 +25,8 @@ const BrowserStorageContext = createContext<BrowserStorageContextType>({
 export const BrowserStorageContextProvider: React.FC<BrowserStorageContextProviderProps> = ({
   children,
 }) => {
-  const [values, setValues] = React.useState<{ [key: string]: unknown }>({});
-  const valuesRef = React.useRef(values);
+  const [values, setValues] = useState<{ [key: string]: unknown }>({});
+  const valuesRef = useRef(values);
   useEffect(() => {
     valuesRef.current = values;
   }, [values]);
@@ -49,7 +57,7 @@ export const BrowserStorageContextProvider: React.FC<BrowserStorageContextProvid
   );
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const contextValue = React.useMemo(() => ({ getValue, setValue }), [getValue, setValue, values]);
+  const contextValue = useMemo(() => ({ getValue, setValue }), [getValue, setValue, values]);
 
   return (
     <BrowserStorageContext.Provider value={contextValue}>{children}</BrowserStorageContext.Provider>