Merge pull request #15 from karpolan/dev

Ver 0.5.55 - React 19

Author: karpolan

package-lock.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "react-mui-vite-ts",
-  "version": "0.4.41",
+  "version": "0.5.55",
   "description": "Starter project for Vite with React + MUI using TypeScript",
   "author": {
     "name": "Anton Karpenko",
@@ -26,8 +26,8 @@
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
     "copy-to-clipboard": "latest",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^19",
+    "react-dom": "^19",
     "react-router-dom": "latest"
   },
   "devDependencies": {

package.json

@@ -1,7 +1,7 @@
-import { ThemeProvider } from '@/theme';
-import StoreProvider from '@/store';
 import { ErrorBoundary } from '@/components';
 import Routes from '@/routes';
+import StoreProvider from '@/store';
+import { ThemeProvider } from '@/theme';
 
 /**
  * Root Application Component

src/App.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { FunctionComponent, useMemo } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router-dom';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
 import { APP_LINK_COLOR, APP_LINK_UNDERLINE } from '@/components/config';
@@ -19,58 +19,53 @@ export interface AppLinkProps extends MuiLinkProps {
  * @param {string} [href] - external link URI
  * @param {boolean} [openInNewTab] - link will be opened in new tab when true
  */
-// eslint-disable-next-line  @typescript-eslint/no-explicit-any
-const AppLink = forwardRef<any, AppLinkProps>(
-  (
-    {
-      activeClassName = 'active', // This class is applied to the Link component when the router.pathname matches the href/to prop
-      children,
-      color = APP_LINK_COLOR,
-      className: customClassName,
-      underline = APP_LINK_UNDERLINE,
-      to,
-      href,
-      openInNewTab, // Note: all external links are open in new Tab by default
-      ...restOfProps
-    },
-    ref
-  ) => {
-    const location = useLocation();
-    const currentPath = location.pathname;
-    const destination = to || href || ''; // Note: Don't use ?? here!!!
+const AppLink: FunctionComponent<AppLinkProps> = ({
+  activeClassName = 'active', // This class is applied to the Link component when the router.pathname matches the href/to prop
+  children,
+  color = APP_LINK_COLOR,
+  className: customClassName,
+  underline = APP_LINK_UNDERLINE,
+  to,
+  href,
+  openInNewTab, // Note: all external links are open in new Tab by default
+  ref,
+  ...restOfProps
+}) => {
+  const location = useLocation();
+  const currentPath = location.pathname;
+  const destination = to || href || ''; // Note: Don't use ?? here!!!
 
-    const className = useMemo(
-      () => [customClassName, destination == currentPath && activeClassName].filter(Boolean).join(' '),
-      [customClassName, activeClassName, destination, currentPath]
-    );
+  const className = useMemo(
+    () => [customClassName, destination == currentPath && activeClassName].filter(Boolean).join(' '),
+    [customClassName, activeClassName, destination, currentPath]
+  );
 
-    const isExternal = useMemo(
-      () =>
-        destination.startsWith('http') ||
-        destination.startsWith('//') ||
-        destination.startsWith('mailto:') ||
-        destination.startsWith('tel:'),
-      [destination]
-    );
+  const isExternal = useMemo(
+    () =>
+      destination.startsWith('http') ||
+      destination.startsWith('//') ||
+      destination.startsWith('mailto:') ||
+      destination.startsWith('tel:'),
+    [destination]
+  );
 
-    const propsToRender = {
-      className,
-      color,
-      underline, // 'hover' | 'always' | 'none'
-      ...((openInNewTab || (isExternal && openInNewTab !== false)) && EXTERNAL_LINK_PROPS), // Open external links in new tab
-      ...restOfProps,
-    };
+  const propsToRender = {
+    className,
+    color,
+    underline, // 'hover' | 'always' | 'none'
+    ...((openInNewTab || (isExternal && openInNewTab !== false)) && EXTERNAL_LINK_PROPS), // Open external links in new tab
+    ...restOfProps,
+  };
 
-    return isExternal ? (
-      <MuiLink ref={ref} href={destination} {...propsToRender}>
-        {children}
-      </MuiLink>
-    ) : (
-      <MuiLink ref={ref} component={RouterLink} to={destination} {...propsToRender}>
-        {children}
-      </MuiLink>
-    );
-  }
-);
+  return isExternal ? (
+    <MuiLink ref={ref} href={destination} {...propsToRender}>
+      {children}
+    </MuiLink>
+  ) : (
+    <MuiLink ref={ref} component={RouterLink} to={destination} {...propsToRender}>
+      {children}
+    </MuiLink>
+  );
+};
 
 export default AppLink;

src/components/common/AppLink/AppLink.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
 import MainApp from './App.tsx';
 import './default.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+  <StrictMode>
     <MainApp />
-  </React.StrictMode>
+  </StrictMode>
 );

src/main.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, PropsWithChildren, useReducer } from 'react';
+import { AppStoreState, INITIAL_APP_STORE_STATE } from './config';
 import { AppContextReturningType, AppStoreContext } from './AppStore';
 import AppStoreReducer from './AppStoreReducer';
-import { AppStoreState, INITIAL_APP_STORE_STATE } from './config';
 
 /**
  * Main global Store as HOC with React Context API
@@ -21,7 +21,7 @@ const AppStoreProvider: FunctionComponent<PropsWithChildren> = ({ children }) =>
   };
   const value: AppContextReturningType = useReducer(AppStoreReducer, initialState);
 
-  return <AppStoreContext.Provider value={value}>{children}</AppStoreContext.Provider>;
+  return <AppStoreContext value={value}>{children}</AppStoreContext>;
 };
 
 export default AppStoreProvider;

src/store/AppStoreProvider.tsx

@@ -96,8 +96,8 @@ const DemoDialogs = () => {
     );
   };
 
-  const onEditEmailDialogClose = useCallback((data: unknown) => {
-    console.info('onEditEmailDialogClose() - data:', data);
+  const onEditEmailDialogClose = useCallback(() => {
+    console.info('onEditEmailDialogClose() - email:', email);
     setOpenEmailDialog(false);
   }, []);