karpolan · karpolan · Jul 28, 2023 · Jul 27, 2023 · Jul 27, 2023 · Jul 27, 2023
diff --git a/.env.sample b/.env.sample
@@ -1,2 +1,9 @@
+
+# Debug mode 
+REACT_APP_DEBUG = true
+
+# API/Backend basic URL
+REACT_APP_URL_API = http://localhost:3030/api
+
+# Runtime helpers
 REACT_APP_VERSION = $npm_package_version
-REACT_APP_URL_API = http://localhost:3030/api
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-typescript-material",
-  "version": "2.0.15",
+  "version": "2.1.19",
   "description": "_DESCRIPTION_",
   "author": {
     "name": "Anton Karpenko",
@@ -21,7 +21,8 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "dev": "npm i && react-scripts start",
+    "dev": "react-scripts start",
+    "dev:update": "npm i && react-scripts start",
     "format": "prettier ./src --write",
     "format:all": "prettier . --write",
     "lint": "eslint ./src --ext .js,.ts,.tsx",

diff --git a/public/browserconfig.xml b/public/browserconfig.xml
diff --git a/public/img/favicon/favicon-16x16.png → public/img/favicon/16x16.png b/public/img/favicon/favicon-16x16.png → public/img/favicon/16x16.png
diff --git a/public/img/favicon/apple-touch-icon.png → public/img/favicon/180x180.png b/public/img/favicon/apple-touch-icon.png → public/img/favicon/180x180.png
diff --git a/...ic/img/favicon/android-chrome-192x192.png → public/img/favicon/192x192.png b/...ic/img/favicon/android-chrome-192x192.png → public/img/favicon/192x192.png
diff --git a/public/img/favicon/favicon-32x32.png → public/img/favicon/32x32.png b/public/img/favicon/favicon-32x32.png → public/img/favicon/32x32.png
diff --git a/...ic/img/favicon/android-chrome-512x512.png → public/img/favicon/512x512.png b/...ic/img/favicon/android-chrome-512x512.png → public/img/favicon/512x512.png
diff --git a/public/img/favicon/favicon.svg b/public/img/favicon/favicon.svg
diff --git a/public/img/favicon/mstile-144x144.png b/public/img/favicon/mstile-144x144.png
diff --git a/public/img/favicon/mstile-150x150.png b/public/img/favicon/mstile-150x150.png
diff --git a/public/img/favicon/mstile-310x150.png b/public/img/favicon/mstile-310x150.png
diff --git a/public/img/favicon/mstile-310x310.png b/public/img/favicon/mstile-310x310.png
diff --git a/public/img/favicon/mstile-70x70.png b/public/img/favicon/mstile-70x70.png
diff --git a/public/img/favicon/safari-pinned-tab.svg b/public/img/favicon/safari-pinned-tab.svg
diff --git a/public/index.html b/public/index.html
@@ -5,15 +5,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>_TITLE_</title>
     <meta name="description" content="_DESCRIPTION_" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="theme-color" content="#ffffff" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
-    <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-config" content="/browserconfig.xml" />
-    <meta name="msapplication-TileColor" content="#da532c" />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/180x180.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/16x16.png" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
   </head>
   <body>

diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,22 @@
+{
+  "name": "_TITLE_",
+  "short_name": "_TITLE_",
+  "description": "_DESCRIPTION_",
+  "start_url": ".",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "display": "standalone",
+  "orientation": "portrait",
+  "icons": [
+    {
+      "src": "favicon.ico?v=1.0",
+      "sizes": "48x48 32x32 16x16",
+      "type": "image/x-icon"
+    },
+    { "src": "img/favicon/16x16.png?v=1.0", "sizes": "16x16", "type": "image/png" },
+    { "src": "img/favicon/32x32.png?v=1.0", "sizes": "32x32", "type": "image/png" },
+    { "src": "img/favicon/180x180.png?v=1.0", "sizes": "180x180", "type": "image/png" },
+    { "src": "img/favicon/192x192.png?v=1.0", "sizes": "192x192", "type": "image/png" },
+    { "src": "img/favicon/512x512.png?v=1.0", "sizes": "512x512", "type": "image/png" }
+  ]
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,22 @@
-import { AppStore } from './store';
 import { AppThemeProvider } from './theme';
-import Routes from './routes';
-import Layout from './layout';
+import { AppStore } from './store';
 import { ErrorBoundary } from './components';
-import { BrowserRouter } from 'react-router-dom';
+import Routes from './routes';
 
 /**
  * Root Application Component
+ * @component MainApp
  */
-const App = () => {
+const MainApp = () => {
   return (
     <ErrorBoundary name="App">
       <AppStore>
         <AppThemeProvider>
-          <BrowserRouter>
-            <Layout>
-              <Routes />
-            </Layout>
-          </BrowserRouter>
+          <Routes />
         </AppThemeProvider>
       </AppStore>
     </ErrorBoundary>
   );
 };
 
-export default App;
+export default MainApp;
diff --git a/src/components/AppAlert/AppAlert.test.tsx b/src/components/AppAlert/AppAlert.test.tsx
@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import AppAlert from './AppAlert';
+import { capitalize, randomText } from '../../utils';
+import { AlertProps } from '@mui/material';
+
+const ComponentToTest = AppAlert;
+
+/**
+ * Tests for <AppAlert/> component
+ */
+describe('<AppAlert/> component', () => {
+  it('renders itself', () => {
+    const testId = randomText(8);
+    render(<ComponentToTest data-testid={testId} />);
+    const alert = screen.getByTestId(testId);
+    expect(alert).toBeDefined();
+    expect(alert).toHaveAttribute('role', 'alert');
+    expect(alert).toHaveClass('MuiAlert-root');
+  });
+
+  it('supports .severity property', () => {
+    const SEVERITIES = ['error', 'info', 'success', 'warning'];
+    for (const severity of SEVERITIES) {
+      const testId = randomText(8);
+      const severity = 'success';
+      render(
+        <ComponentToTest
+          data-testid={testId}
+          severity={severity}
+          variant="filled" // Needed to verify exact MUI classes
+        />
+      );
+      const alert = screen.getByTestId(testId);
+      expect(alert).toBeDefined();
+      expect(alert).toHaveClass(`MuiAlert-filled${capitalize(severity)}`);
+    }
+  });
+
+  it('supports .variant property', () => {
+    const VARIANTS = ['filled', 'outlined', 'standard'];
+    for (const variant of VARIANTS) {
+      const testId = randomText(8);
+      render(
+        <ComponentToTest
+          data-testid={testId}
+          variant={variant as AlertProps['variant']}
+          severity="warning" // Needed to verify exact MUI classes
+        />
+      );
+      const alert = screen.getByTestId(testId);
+      expect(alert).toBeDefined();
+      expect(alert).toHaveClass(`MuiAlert-${variant}Warning`);
+    }
+  });
+});
diff --git a/src/components/AppButton/AppButton.test.tsx b/src/components/AppButton/AppButton.test.tsx
@@ -1,17 +1,9 @@
 import { FunctionComponent } from 'react';
 import { render, screen, within } from '@testing-library/react';
-import createCache from '@emotion/cache';
-import { AppThemeProvider } from '../../theme';
+import { AppThemeProvider, createEmotionCache } from '../../theme';
 import AppButton, { AppButtonProps } from './AppButton';
 import DefaultIcon from '@mui/icons-material/MoreHoriz';
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-function createEmotionCache() {
-  return createCache({ key: 'css', prepend: true });
-}
+import { randomText, capitalize } from '../../utils';
 
 /**
  * AppButton wrapped with Theme Provider
@@ -30,20 +22,19 @@ const ComponentToTest: FunctionComponent<AppButtonProps> = (props) => (
  */
 function testButtonColor(colorName: string, ignoreClassName = false, expectedClassName = colorName) {
   it(`supports "${colorName}" color`, () => {
+    const testId = randomText(8);
     let text = `${colorName} button`;
     render(
       <ComponentToTest
         color={colorName}
+        data-testid={testId}
         variant="contained" // Required to get correct CSS class name
       >
         {text}
       </ComponentToTest>
     );
 
-    let span = screen.getByText(text); // <span> with specific text
-    expect(span).toBeDefined();
-
-    let button = span.closest('button'); // parent <button> element
+    let button = screen.getByTestId(testId);
     expect(button).toBeDefined();
     // console.log('button.className:', button?.className);
     if (!ignoreClassName) {
@@ -54,27 +45,38 @@ function testButtonColor(colorName: string, ignoreClassName = false, expectedCla
   });
 }
 
-describe('AppButton component', () => {
+describe('<AppButton/> component', () => {
   //   beforeEach(() => {});
 
   it('renders itself', () => {
     let text = 'sample button';
-    render(<ComponentToTest>{text}</ComponentToTest>);
-    let span = screen.getByText(text);
-    expect(span).toBeDefined();
-    expect(span).toHaveTextContent(text);
-    let button = span.closest('button'); // parent <button> element
+    const testId = randomText(8);
+    render(<ComponentToTest data-testid={testId}>{text}</ComponentToTest>);
+    const button = screen.getByTestId(testId);
     expect(button).toBeDefined();
+    expect(button).toHaveAttribute('role', 'button');
     expect(button).toHaveAttribute('type', 'button'); // not "submit" or "input" by default
   });
 
+  it('has .margin style by default', () => {
+    let text = 'button with default margin';
+    const testId = randomText(8);
+    render(<ComponentToTest data-testid={testId}>{text}</ComponentToTest>);
+    const button = screen.getByTestId(testId);
+    expect(button).toBeDefined();
+    expect(button).toHaveStyle('margin: 8px'); // Actually it is theme.spacing(1) value
+  });
+
   it('supports .className property', () => {
     let text = 'button with specific class';
     let className = 'someClassName';
-    render(<ComponentToTest className={className}>{text}</ComponentToTest>);
-    let span = screen.getByText(text);
-    expect(span).toBeDefined();
-    let button = span.closest('button'); // parent <button> element
+    const testId = randomText(8);
+    render(
+      <ComponentToTest data-testid={testId} className={className}>
+        {text}
+      </ComponentToTest>
+    );
+    const button = screen.getByTestId(testId);
     expect(button).toBeDefined();
     expect(button).toHaveClass(className);
   });

diff --git a/src/components/AppButton/AppButton.tsx b/src/components/AppButton/AppButton.tsx
@@ -6,6 +6,10 @@ import { APP_BUTTON_VARIANT } from '../config';
 
 const MUI_BUTTON_COLORS = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
 
+const DEFAULT_SX_VALUES = {
+  margin: 1, // By default the AppButton has theme.spacing(1) margin on all sides
+};
+
 export interface AppButtonProps extends Omit<ButtonProps, 'color' | 'endIcon' | 'startIcon'> {
   color?: string; // Not only 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
   endIcon?: string | ReactNode;
@@ -20,10 +24,6 @@ export interface AppButtonProps extends Omit<ButtonProps, 'color' | 'endIcon' |
   underline?: 'none' | 'hover' | 'always'; // Link prop
 }
 
-const DEFAULT_SX_VALUES = {
-  margin: 1, // By default the AppButton has theme.spacing(1) margin on all sides
-};
-
 /**
  * Application styled Material UI Button with Box around to specify margins using props
  * @component AppButton
@@ -47,7 +47,7 @@ const AppButton: FunctionComponent<AppButtonProps> = ({
   endIcon,
   label,
   startIcon,
-  sx: propSx,
+  sx: propSx = DEFAULT_SX_VALUES,
   text,
   underline = 'none',
   variant = APP_BUTTON_VARIANT,
@@ -70,7 +70,6 @@ const AppButton: FunctionComponent<AppButtonProps> = ({
 
   const colorToRender = isMuiColor ? (propColor as ButtonProps['color']) : 'inherit';
   const sxToRender = {
-    ...DEFAULT_SX_VALUES,
     ...propSx,
     ...(isMuiColor ? {} : { color: propColor }),
   };