Merge pull request #8 from karpolan/dev

Release 0.2.7

Author: karpolan

next.config.mjs

@@ -14,19 +14,6 @@ const nextConfig = {
 
   reactStrictMode: true,
   // reactStrictMode: false,
-
-  // Note: redirects() is not working with "next export" :(
-  // async redirects() {
-  //   const articleRedirects = ARTICLES.map((article) => {
-  //     const slug = article.replace(/ /g, '-');
-  //     return {
-  //       source: `/articles/${slug}`,
-  //       destination: `/article/${slug}`,
-  //       permanent: true,
-  //     };
-  //   });
-  //   return [...articleRedirects];
-  // },
 };
 
 export default nextConfig;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs-mui-starter-ts",
-  "version": "0.1.5",
+  "version": "0.2.7",
   "description": "_DESCRIPTION_",
   "author": {
     "name": "Anton Karpenko",
@@ -37,6 +37,7 @@
     "@emotion/styled": "latest",
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
+    "@mui/material-nextjs": "latest",
     "clsx": "latest",
     "copy-to-clipboard": "latest",
     "next": "latest",

package.json

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
 import { Card, CardContent, CardHeader, Snackbar } from '@mui/material';
 import { AppButton } from '@/components';
-import { AppButtonProps } from '@/components/AppButton/AppButton';
+import { AppButtonProps } from '@/components/common/AppButton/AppButton';
 
 /**
  * Same as AppButton but with onClick handler that copies JSX code to Clipboard

src/app/dev/components/DemoAppButton.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
 import { Box, Card, CardContent, CardHeader, Snackbar } from '@mui/material';
 import { AppIconButton } from '@/components';
-import { ICONS } from '@/components/AppIcon/config';
+import { ICONS } from '@/components/common/AppIcon/config';
 
 /**
  * Renders "Demo Section" for AppIcon component

src/app/dev/components/DemoAppIcon.tsx

@@ -2,7 +2,7 @@
 import { useState } from 'react';
 import copyToClipboard from 'copy-to-clipboard';
 import { Box, Card, CardContent, CardHeader, Snackbar, Tooltip } from '@mui/material';
-import AppIconButton, { AppIconButtonProps } from '@/components/AppIconButton/AppIconButton';
+import AppIconButton, { AppIconButtonProps } from '@/components/common/AppIconButton/AppIconButton';
 
 /**
  * Same as AppIconButton but with onClick handler that copies JSX code to Clipboard

src/app/dev/components/DemoAppIconButton.tsx

@@ -1,6 +1,7 @@
 import { NextPage } from 'next';
 import { redirect } from 'next/navigation';
 import { Stack, Typography } from '@mui/material';
+import { IS_DEBUG } from '@/config';
 import DemoAppAlert from './components/DemoAppAlerts';
 import DemoAppButton from './components/DemoAppButton';
 import DemoAppIcon from './components/DemoAppIcon';
@@ -12,9 +13,8 @@ import DemoAppImage from './components/DemoAppImage';
  * @page Dev
  */
 const DevPage: NextPage = () => {
-  if (!process.env.NEXT_PUBLIC_DEBUG) {
+  if (!IS_DEBUG) {
     redirect('/');
-    return null; // Hide this page on when env.NEXT_PUBLIC_DEBUG is not set
   }
 
   return (

src/app/dev/page.tsx

@@ -0,0 +1,18 @@
+import { Stack } from '@mui/material';
+import { NextPage } from 'next';
+import { AppAlert, UserInfo } from '../../components';
+
+/**
+ * Renders User Profile Page
+ * @page Me
+ */
+const MeAkaProfilePage: NextPage = () => {
+  return (
+    <Stack spacing={2} padding={2}>
+      <AppAlert severity="warning">This page is under construction</AppAlert>
+      <UserInfo showAvatar />
+    </Stack>
+  );
+};
+
+export default MeAkaProfilePage;

src/app/me/page.tsx

@@ -0,0 +1,44 @@
+import { Avatar, Stack, Typography } from '@mui/material';
+import { AppLink } from '../common';
+
+interface UserInfoProps {
+  className?: string;
+  showAvatar?: boolean;
+  user?: any;
+}
+
+/**
+ * Renders User info with Avatar
+ * @component UserInfo
+ * @param {boolean} [showAvatar] - user's avatar picture is shown when true
+ * @param {object} [user] - logged user data {name, email, avatar...}
+ */
+const UserInfo = ({ showAvatar = false, user, ...restOfProps }: UserInfoProps) => {
+  const fullName = user?.name || [user?.nameFirst || '', user?.nameLast || ''].join(' ').trim();
+  const srcAvatar = user?.avatar ? user?.avatar : undefined;
+  const userPhoneOrEmail = user?.phone || (user?.email as string);
+
+  return (
+    <Stack alignItems="center" minHeight="fit-content" marginBottom={2} {...restOfProps}>
+      {showAvatar ? (
+        <AppLink to="/me" underline="none">
+          <Avatar
+            sx={{
+              width: 64,
+              height: 64,
+              fontSize: '3rem',
+            }}
+            alt={fullName || 'User Avatar'}
+            src={srcAvatar}
+          />
+        </AppLink>
+      ) : null}
+      <Typography sx={{ mt: 1 }} variant="h6">
+        {fullName || 'Current User'}
+      </Typography>
+      <Typography variant="body2">{userPhoneOrEmail || 'Loading...'}</Typography>
+    </Stack>
+  );
+};
+
+export default UserInfo;