update: Rect Router v6+

refactor: theme and colors
refactor: Layout is outside Routes
feat: more utils
feat: env.sample

Author: karpolan

.env.sample

@@ -0,0 +1,2 @@
+REACT_APP_VERSION = $npm_package_version
+REACT_APP_URL_API = http://localhost:3030/api

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-typescript-material",
-  "version": "1.2.7",
+  "version": "1.3.8",
   "description": "React + Material UI + Auth starter using TypeScript",
   "author": {
     "name": "Anton Karpenko",
@@ -18,6 +18,14 @@
     "type": "git",
     "url": "https://github.com/karpolan/react-typescript-material-ui-with-auth-starter.git"
   },
+  "scripts": {
+    "start": "react-scripts start",
+    "dev": "npm i --force && react-scripts start",
+    "build": "react-scripts build",
+    "type": "tsc",
+    "format": "node_modules/.bin/prettier src --write",
+    "test": "react-scripts test"
+  },
   "dependencies": {
     "@emotion/react": "latest",
     "@emotion/styled": "latest",
@@ -29,7 +37,6 @@
     "react-dom": "latest",
     "react-router-dom": "latest",
     "react-scripts": "latest",
-    "typescript": "latest",
     "validate.js": "latest",
     "web-vitals": "latest"
   },
@@ -42,15 +49,8 @@
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@types/react-router-dom": "latest",
-    "prettier": "latest"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "dev": "yarn -s && react-scripts start",
-    "build": "react-scripts build",
-    "type": "tsc",
-    "format": "node_modules/.bin/prettier src --write",
-    "test": "react-scripts test"
+    "prettier": "latest",
+    "typescript": "latest"
   },
   "eslintConfig": {
     "extends": [

package.json

@@ -1,20 +1,23 @@
 import { AppStore } from './store';
-import { AppRouter, Routes } from './routes';
-import { ErrorBoundary } from './components';
 import { AppThemeProvider } from './theme';
+import Routes from './routes';
+import Layout from './layout';
+import { ErrorBoundary } from './components';
+import { BrowserRouter } from 'react-router-dom';
 
 /**
  * Root Application Component
- * @class App
  */
 const App = () => {
   return (
     <ErrorBoundary name="App">
       <AppStore>
         <AppThemeProvider>
-          <AppRouter>
-            <Routes />
-          </AppRouter>
+          <BrowserRouter>
+            <Layout>
+              <Routes />
+            </Layout>
+          </BrowserRouter>
         </AppThemeProvider>
       </AppStore>
     </ErrorBoundary>

src/App.tsx

@@ -38,7 +38,6 @@ interface Props extends Omit<ButtonProps, 'color'> {
 
 /**
  * Application styled Material UI Button with Box around to specify margins using props
- * @class AppButton
  * @param {string} [color] - name of color from Material UI palette 'primary', 'secondary', 'warning', and so on
  * @param {string} [children] - content to render, overrides .label and .text
  * @param {string} [label] - text to render, alternate to .text

src/components/AppButton/AppButton.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AppLink from './AppLink';
-import { AppRouter } from '../../routes/';
+import { BrowserRouter } from 'react-router-dom';
 
 describe('AppLink component', () => {
   it('renders itself', async () => {
     const text = 'sample text';
     const url = 'https://example.com/';
     await render(
-      <AppRouter>
+      <BrowserRouter>
         <AppLink href={url}>{text}</AppLink>
-      </AppRouter>
+      </BrowserRouter>
     );
     const link = await screen.getByText(text);
     expect(link).toBeDefined();
@@ -22,9 +22,9 @@ describe('AppLink component', () => {
     const text = 'external link';
     const url = 'https://example.com/';
     await render(
-      <AppRouter>
+      <BrowserRouter>
         <AppLink href={url}>{text}</AppLink>
-      </AppRouter>
+      </BrowserRouter>
     );
     const link = await screen.getByText(text);
     expect(link).toBeDefined();
@@ -41,9 +41,9 @@ describe('AppLink component', () => {
     const text = 'internal link';
     const url = '/internal-link';
     await render(
-      <AppRouter>
+      <BrowserRouter>
         <AppLink to={url}>{text}</AppLink>
-      </AppRouter>
+      </BrowserRouter>
     );
     const link = await screen.getByText(text);
     expect(link).toBeDefined();
@@ -58,11 +58,11 @@ describe('AppLink component', () => {
     let text = 'external link in same tab';
     let url = 'https://example.com/';
     await render(
-      <AppRouter>
+      <BrowserRouter>
         <AppLink href={url} openInNewTab={false}>
           {text}
         </AppLink>
-      </AppRouter>
+      </BrowserRouter>
     );
     let link = await screen.getByText(text);
     expect(link).toBeDefined();
@@ -75,11 +75,11 @@ describe('AppLink component', () => {
     text = 'internal link in new tab';
     url = '/internal-link-in-new-tab';
     await render(
-      <AppRouter>
+      <BrowserRouter>
         <AppLink to={url} openInNewTab>
           {text}
         </AppLink>
-      </AppRouter>
+      </BrowserRouter>
     );
     link = await screen.getByText(text);
     expect(link).toBeDefined();
@@ -97,11 +97,11 @@ describe('AppLink component', () => {
     let url = '/internal-link-with-class';
     let className = 'someClassName';
     await render(
-      <AppRouter>
+      <BrowserRouter>
         <AppLink to={url} className={className}>
           {text}
         </AppLink>
-      </AppRouter>
+      </BrowserRouter>
     );
     let link = await screen.getByText(text);
     expect(link).toBeDefined();

src/components/AppLink/AppLink.test.tsx

@@ -14,7 +14,6 @@ interface Props extends MuiLinkProps {
 
 /**
  * Restyled Link for navigation in the App, support internal links by "to" prop and external links by "href" prop
- * @class AppLink
  * @param {object|function} children - content to wrap with <a> tag
  * @param {string} [to] - internal link URI
  * @param {string} [href] - external link URI

src/components/AppLink/AppLink.tsx

@@ -11,7 +11,7 @@ import { useAppStore } from '../../store/AppStore';
 import { AppIconButton } from '../../components';
 import UserInfo from '../UserInfo/UserInfo';
 import SideBarNavigation from './SideBarNavigation';
-import { SIDEBAR_WIDTH } from '../../routes/Layout/PrivateLayout';
+import { SIDEBAR_WIDTH } from '../../layout/PrivateLayout';
 import { LinkToPage } from '../../utils/type';
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -45,7 +45,6 @@ const useStyles = makeStyles((theme: Theme) => ({
 /**
  * Renders SideBar with Menu and User details
  * Actually for Authenticated users only, rendered in "Private Layout"
- * @class SideBar
  * @param {string} [prop.anchor] - 'left' or 'right'
  * @param {string} [prop.className] - optional className for <div> tag
  * @param {boolean} props.open - the Drawer is visible when true

src/components/SideBar/SideBar.tsx

@@ -25,7 +25,11 @@ const SideBarLink = forwardRef<any, NavLinkProps>(({ className, ...restOfProps }
   const classLink = clsx(className, classes.link);
   return (
     <div ref={ref} className={classes.root}>
-      <NavLink exact className={classLink} activeClassName={classes.linkActive} {...restOfProps} />
+      <NavLink
+        end
+        className={({ isActive }) => classLink + (isActive ? ` ${classes.linkActive}` : '')}
+        {...restOfProps}
+      />
     </div>
   );
 });

src/components/SideBar/SideBarLink.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals(console.log);
+reportWebVitals();