chore(web/ui): use named imports for React (#972)

Signed-off-by: hainenber <dotronghai96@gmail.com>
grafana · Jun 4, 2024 · 0508244 · 0508244
1 parent 42cb22e
commit 0508244
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 14 deletions.
diff --git a/internal/web/ui/src/Router.tsx b/internal/web/ui/src/Router.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Navbar from './features/layout/Navbar';

diff --git a/internal/web/ui/src/contexts/PathPrefixContext.tsx b/internal/web/ui/src/contexts/PathPrefixContext.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { createContext, useContext } from 'react';
 
 /**
  * PathPrefixContext propagates the base URL throughout the component tree where
  * the application is hosted.
  */
-const PathPrefixContext = React.createContext('');
+const PathPrefixContext = createContext('');
 
 /**
  * usePathPrefix retrieves the current base URL where the application is
@@ -14,7 +14,7 @@ const PathPrefixContext = React.createContext('');
  * The returned path prefix will always end in a `/`.
  */
 function usePathPrefix(): string {
-  const prefix = React.useContext(PathPrefixContext);
+  const prefix = useContext(PathPrefixContext);
   if (prefix === '') {
     return '/';
   }

diff --git a/internal/web/ui/src/features/clustering/Table.tsx b/internal/web/ui/src/features/clustering/Table.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 import styles from './Table.module.css';
 
 interface Props {
   tableHeaders: string[];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   renderTableData: () => JSX.Element[];
 }
 

diff --git a/internal/web/ui/src/features/component/ComponentBody.tsx b/internal/web/ui/src/features/component/ComponentBody.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 import { alloyStringify } from '../alloy-syntax-js/stringify';

diff --git a/internal/web/ui/src/features/component/Table.tsx b/internal/web/ui/src/features/component/Table.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 import TableHead from './TableHead';
 import { SortOrder } from './types';
@@ -7,7 +7,7 @@ import styles from './Table.module.css';
 
 interface Props {
   tableHeaders: string[];
-  style?: React.CSSProperties;
+  style?: CSSProperties;
   handleSorting?: (sortField: string, sortOrder: SortOrder) => void;
   renderTableData: () => JSX.Element[];
 }

diff --git a/internal/web/ui/src/features/component/style.ts b/internal/web/ui/src/features/component/style.ts
@@ -1,8 +1,8 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 
 // Object for react-syntax-highlighter's custom theme
 export const style: {
-  [key: string]: React.CSSProperties;
+  [key: string]: CSSProperties;
 } = {
   'code[class*="language-"]': {
     color: 'black',

diff --git a/internal/web/ui/src/index.tsx b/internal/web/ui/src/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 
 import App from './App';
@@ -8,7 +8,7 @@ import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <React.StrictMode>
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );