Initial project

.eslintrc

@@ -0,0 +1,39 @@
+{
+    "extends": [
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:react/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:react-hooks/recommended",
+        "prettier"
+    ],
+    "rules": {
+        "react/prop-types": 0,
+        "react/react-in-jsx-scope": 0,
+        "import/no-unresolved": 0,
+        "no-unused-vars": 0
+    },
+    "plugins": [
+        "react",
+        "import",
+        "jsx-a11y"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2021,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "env": {
+        "es6": true,
+        "browser": true,
+        "node": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    }
+}

.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+	"singleQuote": true,
+	"semi": true,
+	"printWidth": 120,
+	"bracketSameLine": true,
+	"jsxSingleQuote": true,
+	"useTabs": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Dan Castro
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+<p align="center">
+  <img width="43%" src="./react-logo-png.png" />
+</p>
+
+# React, TypeScript, and Material-UI boilerplate
+
+## Introduction
+
+Welcome to the first app template built by [Welcome, Developer](https://www.welcomedeveloper.com)! This is a boilerplate app built using React, TypeScript, Material-UI, and uses the concept of CSS-in-JS. It has the purpose of supporting our post exercises, but also to provide our followers with a good start point when building React applications.
+
+Hope you enjoy it, developers!
+
+## Demo
+
+Keen to see the app in action? Check it out the [live demo](https://weldev-react-mui-ts.vercel.app/)!
+
+## Behind-the-scenes
+
+Interested in learning how the app was built from scratch step-by-step on version 1.00? Check [it out](https://www.welcomedeveloper.com/react-typescript-material-design), developers!
+
+The versions that followed the first one, 1.10 and 2.00, consist of adding coding formatting libraries (ESLint and Prettier), and updating the Material-UI library to its latest version (v5.0.1). I highly recommend you to explore the tutorial above to learn how the app was built.
+
+## Features
+
+The following frameworks/libraries have been implemented:
+
+1. [React](https://reactjs.org/)
+2. [TypeScript](https://www.typescriptlang.org/)
+3. [MUI](https://mui.com/)
+4. [React Router](https://reactrouter.com/)
+5. [Prettier](https://prettier.io)
+6. [ESLint](https://eslint.org/)
+
+## Install
+
+To get up and running with the template, you just have to run the _git_ commands below:
+
+```
+git clone https://github.com/danilocastronz/weldev-project-react-mui-ts-bp
+cd weldev-project-react-mui-ts-bp
+yarn install
+```
+
+## Contributions
+
+Contributions are more than welcome to our repository, developers. The goal is to make it a space where we contribute together to make it better! Feel free to create your own _pull request_ with the contribution, or if you prefer, reach out to me with your idea 🙋‍♂️
+
+## Versions
+
+- 1.00 - Admin template with sample pages, top bar, navigation menu, and footer.
+- 1.10 - Added Prettier, ESLint, and a bit of code refactoring.
+- 2.00 - Updated to MUI version 5.0.1.
+
+## Author
+
+- [Dan Castro](https://github.com/danilocastronz)
+
+## Follow Us
+
+Enjoyed the project? Follow us on [LinkedIn](https://www.linkedin.com/company/welcomedeveloper) and [Twitter](https://twitter.com/welcomedevnz).

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "weldev-project-react-mui-ts-bp",
+  "version": "2.0.0",
+  "description": "React TypeScript Material-UI boilerplate by Welcome, Developer.",
+  "author": {
+    "name": "Dan Castro",
+    "url": "https://www.welcomedeveloper.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/danilocastronz/weldev-project-react-mui-ts-bp",
+    "directory": "weldev-project-react-mui-ts-bp"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/material": "^5.0.1",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/d3": "^6.2.0",
+    "@types/jest": "^26.0.15",
+    "@types/material-ui": "^0.21.8",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.53",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-helmet": "^6.1.0",
+    "dotenv": "^8.2.0",
+    "hamburger-react": "^2.4.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.1",
+    "typescript": "^4.0.3",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --quiet"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.6",
+    "@typescript-eslint/parser": "^4.31.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.3.2"
+  }
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="theme-color" content="#000000" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>

public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "weldev-project-react-mui-ts-bp",
+  "name": "React TypeScript Material-UI boilerplate by Welcome, Developer.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.tsx

@@ -0,0 +1,54 @@
+import { useMemo, useState } from 'react';
+import { CssBaseline, ThemeProvider } from '@mui/material';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+
+import { Layout } from './components/Layout';
+import { PageDefault } from './components/PageDefault';
+
+import { AppContext, ThemeModeContext } from './contexts';
+import { AppClient } from './clients';
+import { routes } from './config';
+import { Route as AppRoute } from './types';
+import { getAppTheme } from './styles/theme';
+import { DARK_MODE_THEME, LIGHT_MODE_THEME } from './utils/constants';
+
+function App() {
+	const [mode, setMode] = useState<typeof LIGHT_MODE_THEME | typeof DARK_MODE_THEME>(DARK_MODE_THEME);
+	const appClient = new AppClient();
+
+	const themeMode = useMemo(
+		() => ({
+			toggleThemeMode: () => {
+				setMode((prevMode) => (prevMode === LIGHT_MODE_THEME ? DARK_MODE_THEME : LIGHT_MODE_THEME));
+			},
+		}),
+		[]
+	);
+
+	const theme = useMemo(() => getAppTheme(mode), [mode]);
+
+	const addRoute = (route: AppRoute) => (
+		<Route key={route.key} path={route.path} component={route.component || PageDefault} exact />
+	);
+
+	return (
+		<AppContext.Provider value={appClient}>
+			<ThemeModeContext.Provider value={themeMode}>
+				<ThemeProvider theme={theme}>
+					<CssBaseline />
+					<Router>
+						<Switch>
+							<Layout>
+								{routes.map((route: AppRoute) =>
+									route.subRoutes ? route.subRoutes.map((item: AppRoute) => addRoute(item)) : addRoute(route)
+								)}
+							</Layout>
+						</Switch>
+					</Router>
+				</ThemeProvider>
+			</ThemeModeContext.Provider>
+		</AppContext.Provider>
+	);
+}
+
+export default App;

src/clients/AppClient.ts

@@ -0,0 +1,26 @@
+import { IAppContext } from '../contexts/AppContext';
+
+import { User } from '../types/User';
+
+class AppClient implements IAppContext {
+	user: User;
+
+	/**
+	 * Creates an instance of AppClient.
+	 * @memberof AppClient
+	 */
+	constructor() {
+		this.user = {
+			id: '1',
+			name: 'Dwight Schrute',
+			email: '[email protected]',
+			createdAt: new Date(),
+			updatedAt: new Date(),
+			isAdmin: true,
+			isActive: true,
+			isVerified: true,
+		};
+	}
+}
+
+export default AppClient;

src/clients/index.ts

@@ -0,0 +1,3 @@
+import AppClient from './AppClient';
+
+export { AppClient };

src/components/Actions/ActionIcon/ActionIcon.tsx

@@ -0,0 +1,20 @@
+import { ComponentType } from 'react';
+import { Badge, Icon, useTheme } from '@mui/material';
+
+import { LIGHT_MODE_THEME } from '../../../utils/constants';
+
+interface ActionIconProps {
+	badgeContent?: number;
+	icon: ComponentType;
+}
+
+export const ActionIcon = ({ badgeContent, icon }: ActionIconProps) => {
+	const theme = useTheme();
+	return badgeContent ? (
+		<Badge badgeContent={badgeContent} color={theme.palette.mode === LIGHT_MODE_THEME ? 'error' : 'primary'}>
+			<Icon component={icon} />
+		</Badge>
+	) : (
+		<Icon component={icon} />
+	);
+};

src/components/Actions/ActionIcon/index.tsx

@@ -0,0 +1 @@
+export { ActionIcon } from './ActionIcon';