Merge pull request #6 from karpolan/dev

Release 0.1.5

.env.sample

@@ -1,14 +1,30 @@
-# Minimum level of visible Logs
+# Environment similar to NODE_ENV. 
+# Analytics and public resources are enabled only in "production"
+# How to use: set value to "production" to get fully functional application.  
+NEXT_PUBLIC_ENV = development
+# NEXT_PUBLIC_ENV = preview
+# NEXT_PUBLIC_ENV = production
+
+# Enables additional debug features, no additional debug information if the variable is not set
+# How to use: set value to "true" to get more debugging information, but don't do it on production.  
 NEXT_PUBLIC_DEBUG = true
 
-# Minimum level of visible Logs
-NEXT_PUBLIC_LOG_LEVEL = DEBUG
-# NEXT_PUBLIC_LOG_LEVEL = ERROR
+# Public URL of the application/website. 
+# How to use: Do not set any value until you need custom domain for your application.
+# NEXT_PUBLIC_PUBLIC_URL = https://xxx.com
+# NEXT_PUBLIC_PUBLIC_URL = https://xxx.web.app
+NEXT_PUBLIC_PUBLIC_URL = http://localhost:3000
+
 
 # API/Backend basic URL
-NEXT_PUBLIC_API_URL = http://localhost:3030
+NEXT_PUBLIC_API_URL = http://localhost:5000
 # NEXT_PUBLIC_API_URL = https://dev-api.domain.com
 # NEXT_PUBLIC_API_URL = https://api.domain.com
 
-# Other settings
-NEXT_PUBLIC_GOOGLE_API_CLIENT_ID = _YOUR_CLIENT_ID_HERE_
+# EmailJS configuration for contact form
+NEXT_PUBLIC_EMAILJS_KEY = user-xxxx
+
+# Analytics and Advertising
+NEXT_PUBLIC_GA_ID = G-...
+NEXT_PUBLIC_AMPLITUDE_API_KEY = 69abf7...
+NEXT_PUBLIC_ADSENSE_CLIENT_ID = pub-12345...

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "import/no-cycle": "error"
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-mui-starter-ts",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "_DESCRIPTION_",
   "author": {
     "name": "Anton Karpenko",

src/components/AppIcon/AppIcon.tsx

@@ -2,7 +2,10 @@ import { ComponentType, FunctionComponent, SVGAttributes } from 'react';
 import { APP_ICON_SIZE } from '../config';
 import { IconName, ICONS } from './config';
 
-export interface AppIconProps extends SVGAttributes<SVGElement> {
+/**
+ * Props of the AppIcon component, also can be used for SVG icons
+ */
+export interface Props extends SVGAttributes<SVGElement> {
   color?: string;
   icon?: IconName | string;
   size?: string | number;
@@ -17,7 +20,7 @@ export interface AppIconProps extends SVGAttributes<SVGElement> {
  * @param {string} [title] - title/hint to show when the cursor hovers the icon
  * @param {string | number} [size] - size of the icon, default is ICON_SIZE
  */
-const AppIcon: FunctionComponent<AppIconProps> = ({
+const AppIcon: FunctionComponent<Props> = ({
   color,
   icon = 'default',
   size = APP_ICON_SIZE,

src/components/AppIcon/icons/LogoIcon.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
-import { AppIconProps } from '../AppIcon';
+import { IconProps } from '../utils';
 
-const LogoIcon: FunctionComponent<AppIconProps> = (props) => {
+const LogoIcon: FunctionComponent<IconProps> = (props) => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 36 36" {...props}>
       <path

src/components/AppIcon/utils.ts

@@ -0,0 +1,11 @@
+import { SVGAttributes } from 'react';
+
+/**
+ * Props to use with custom SVG icons, similar to AppIcon's Props
+ */
+export interface IconProps extends SVGAttributes<SVGElement> {
+  color?: string;
+  icon?: string;
+  size?: string | number;
+  title?: string;
+}

src/components/AppIconButton/AppIconButton.tsx

@@ -3,7 +3,7 @@ import { Tooltip, IconButton, IconButtonProps, TooltipProps } from '@mui/materia
 import AppIcon from '../AppIcon';
 import AppLink from '../AppLink';
 import { alpha } from '@mui/material';
-import { AppIconProps } from '../AppIcon/AppIcon';
+import { Props } from '../AppIcon/AppIcon';
 import { IconName } from '../AppIcon/config';
 
 export const MUI_ICON_BUTTON_COLORS = [
@@ -20,7 +20,7 @@ export const MUI_ICON_BUTTON_COLORS = [
 export interface AppIconButtonProps extends Omit<IconButtonProps, 'color'> {
   color?: string; // Not only 'inherit' | 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning',
   icon?: IconName | string;
-  iconProps?: Partial<AppIconProps>;
+  iconProps?: Partial<Props>;
   // Missing props
   component?: ElementType; // Could be RouterLink, AppLink, <a>, etc.
   to?: string; // Link prop

src/layout/BottomBar/BottomBar.tsx

@@ -1,8 +1,8 @@
 import React, { ChangeEvent, FunctionComponent, useCallback } from 'react';
 import { BottomNavigation, BottomNavigationAction } from '@mui/material';
 import { usePathname, useRouter } from 'next/navigation';
-import AppIcon from '../../components/AppIcon';
-import { LinkToPage } from '../../utils/type';
+import AppIcon from '@/components/AppIcon';
+import { LinkToPage } from '@/utils/type';
 
 interface Props {
   items: Array<LinkToPage>;

src/layout/SideBar/SideBar.tsx

@@ -1,10 +1,10 @@
 'use client';
 import { FunctionComponent, useCallback, MouseEvent } from 'react';
 import { Stack, Divider, Drawer, DrawerProps, FormControlLabel, Switch, Tooltip } from '@mui/material';
-import { AppIconButton } from '../../components';
-import { useAppStore } from '../../store/AppStore';
-import { LinkToPage } from '../../utils/type';
-import { useEventLogout, useEventSwitchDarkMode, useOnMobile } from '../../hooks';
+import { AppIconButton } from '@/components';
+import { useAppStore } from '@/store/AppStore';
+import { LinkToPage } from '@/utils/type';
+import { useEventLogout, useEventSwitchDarkMode, useOnMobile } from '@/hooks';
 import SideBarNavList from './SideBarNavList';
 import { SIDEBAR_WIDTH, TOP_BAR_DESKTOP_HEIGHT } from '../config';
 

src/layout/SideBar/SideBarNavItem.tsx

@@ -2,8 +2,8 @@
 import { FunctionComponent, MouseEventHandler } from 'react';
 import { usePathname } from 'next/navigation';
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import { AppIcon, AppLink } from '../../components';
-import { LinkToPage } from '../../utils/type';
+import { AppIcon, AppLink } from '@/components';
+import { LinkToPage } from '@/utils/type';
 
 interface Props extends LinkToPage {
   openInNewTab?: boolean;

src/layout/SideBar/SideBarNavList.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, MouseEventHandler } from 'react';
 import List from '@mui/material/List';
 import SideBarNavItem from './SideBarNavItem';
-import { LinkToPage } from '../../utils/type';
+import { LinkToPage } from '@/utils/type';
 
 interface Props {
   items: Array<LinkToPage>;

src/store/AppReducer.ts

@@ -1,6 +1,6 @@
 import { Reducer } from 'react';
 import { localStorageSet } from '../utils/localStorage';
-import { AppStoreState } from './AppStore';
+import { AppStoreState } from './config';
 
 /**
  * Reducer for global AppStore using "Redux styled" actions

src/store/AppStore.tsx

@@ -12,25 +12,13 @@ import {
 import AppReducer from './AppReducer';
 import { localStorageGet } from '../utils/localStorage';
 import { IS_SERVER } from '../utils/environment';
-
-/**
- * AppState data structure and initial values
- */
-export interface AppStoreState {
-  darkMode: boolean;
-  isAuthenticated: boolean;
-  currentUser?: object | undefined;
-}
-const INITIAL_APP_STATE: AppStoreState = {
-  darkMode: false, // Overridden by useMediaQuery('(prefers-color-scheme: dark)') in AppStore
-  isAuthenticated: false, // Overridden in AppStore by checking auth token
-};
+import { APP_STORE_INITIAL_STATE, AppStoreState } from './config';
 
 /**
  * Instance of React Context for global AppStore
  */
 export type AppContextReturningType = [AppStoreState, Dispatch<any>];
-const AppContext = createContext<AppContextReturningType>([INITIAL_APP_STATE, () => null]);
+const AppContext = createContext<AppContextReturningType>([APP_STORE_INITIAL_STATE, () => null]);
 
 /**
  * Main global Store as HOC with React Context API
@@ -48,7 +36,7 @@ const AppStoreProvider: FunctionComponent<PropsWithChildren> = ({ children }) =>
   // const tokenExists = Boolean(loadToken());
 
   const initialState: AppStoreState = {
-    ...INITIAL_APP_STATE,
+    ...APP_STORE_INITIAL_STATE,
     darkMode: previousDarkMode || prefersDarkMode,
     // isAuthenticated: tokenExists,
   };

src/store/config.ts

@@ -0,0 +1,16 @@
+/**
+ * Data structure of the AppStore state
+ */
+export interface AppStoreState {
+  darkMode: boolean;
+  isAuthenticated: boolean;
+  currentUser?: object | undefined;
+}
+
+/**
+ * Initial values for the AppStore state
+ */
+export const APP_STORE_INITIAL_STATE: AppStoreState = {
+  darkMode: false, // Overridden by useMediaQuery('(prefers-color-scheme: dark)') in AppStore
+  isAuthenticated: false, // Overridden in AppStore by checking auth token
+};