From cdc0007ea9973834d5660971a79c31a0a9a6af63 Mon Sep 17 00:00:00 2001
From: Huy Nguyen <huy.nguyenkim.h@gmail.com>
Date: Thu, 25 Jan 2024 18:08:33 +0700
Subject: [PATCH 1/4] feat: add common UI components

---
 packages/components/README.md                 |   1 -
 packages/components/__mocks__/styleMock.js    |   1 +
 packages/components/package.json              |   7 +-
 .../src/components/Footer/Footer.tsx          |  29 ++++
 .../components/src/components/Footer/index.ts |   1 +
 .../src/components/Header/Header.tsx          | 144 ++++++++++++++++++
 .../components/src/components/Header/index.ts |   1 +
 .../src/components/Layout/Layout.tsx          |  25 +++
 .../components/src/components/Layout/index.ts |   1 +
 .../components/ToastMessage/ToastMessage.tsx  |   6 +
 .../src/components/ToastMessage/index.ts      |   1 +
 .../__tests__/Footer/Footer.test.tsx          |  15 ++
 .../__tests__/Header/Header.test.tsx          |  96 ++++++++++++
 .../__tests__/Layout/Layout.test.tsx          |  13 ++
 .../ToastMessage/ToastMessage.test.tsx        |  23 +++
 packages/components/src/index.ts              |   6 +
 packages/components/src/models/common.ts      |   6 +
 packages/components/src/models/index.ts       |   1 +
 packages/components/src/utils/toastMessage.ts |  16 ++
 packages/components/stories/Footer.stories.js |  22 +++
 packages/components/stories/Header.stories.js |  31 ++++
 packages/components/stories/Layout.stories.js |  25 +++
 .../stories/ToastMessage.stories.js           |  28 ++++
 pnpm-lock.yaml                                |  45 ++++++
 24 files changed, 541 insertions(+), 3 deletions(-)
 delete mode 100644 packages/components/README.md
 create mode 100644 packages/components/__mocks__/styleMock.js
 create mode 100644 packages/components/src/components/Footer/Footer.tsx
 create mode 100644 packages/components/src/components/Footer/index.ts
 create mode 100644 packages/components/src/components/Header/Header.tsx
 create mode 100644 packages/components/src/components/Header/index.ts
 create mode 100644 packages/components/src/components/Layout/Layout.tsx
 create mode 100644 packages/components/src/components/Layout/index.ts
 create mode 100644 packages/components/src/components/ToastMessage/ToastMessage.tsx
 create mode 100644 packages/components/src/components/ToastMessage/index.ts
 create mode 100644 packages/components/src/components/__tests__/Footer/Footer.test.tsx
 create mode 100644 packages/components/src/components/__tests__/Header/Header.test.tsx
 create mode 100644 packages/components/src/components/__tests__/Layout/Layout.test.tsx
 create mode 100644 packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx
 create mode 100644 packages/components/src/models/common.ts
 create mode 100644 packages/components/src/models/index.ts
 create mode 100644 packages/components/src/utils/toastMessage.ts
 create mode 100644 packages/components/stories/Footer.stories.js
 create mode 100644 packages/components/stories/Header.stories.js
 create mode 100644 packages/components/stories/Layout.stories.js
 create mode 100644 packages/components/stories/ToastMessage.stories.js

diff --git a/packages/components/README.md b/packages/components/README.md
deleted file mode 100644
index c6257c732..000000000
--- a/packages/components/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# Mock app components
diff --git a/packages/components/__mocks__/styleMock.js b/packages/components/__mocks__/styleMock.js
new file mode 100644
index 000000000..f053ebf79
--- /dev/null
+++ b/packages/components/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/packages/components/package.json b/packages/components/package.json
index 923b9f884..ae54b5aca 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -10,7 +10,8 @@
     "build:watch": "tsc -b --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "jest --ci --env=jest-environment-jsdom"
+    "test": "jest --ci --env=jest-environment-jsdom",
+    "coverage": "jest --coverage"
   },
   "eslintConfig": {
     "extends": [
@@ -46,7 +47,9 @@
     "@mui/x-date-pickers": "^6.19.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1"
+    "react-router-dom": "^6.21.3",
+    "react-scripts": "5.0.1",
+    "react-toastify": "^10.0.4"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.7.0",
diff --git a/packages/components/src/components/Footer/Footer.tsx b/packages/components/src/components/Footer/Footer.tsx
new file mode 100644
index 000000000..3727e5708
--- /dev/null
+++ b/packages/components/src/components/Footer/Footer.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+interface IProps {
+  textColor?: string;
+  backgroundColor?: string;
+}
+
+/**
+ * Footer component is used to display the footer
+ */
+export const Footer = ({ textColor = '#000', backgroundColor = '#fff' }: IProps) => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <Box
+      sx={{
+        textAlign: 'center',
+        position: 'fixed',
+        bottom: 0,
+        width: '100%',
+        color: textColor,
+        backgroundColor,
+      }}
+    >
+      <Typography>Copyright © {currentYear}</Typography>
+    </Box>
+  );
+};
diff --git a/packages/components/src/components/Footer/index.ts b/packages/components/src/components/Footer/index.ts
new file mode 100644
index 000000000..65e2506fa
--- /dev/null
+++ b/packages/components/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './Footer';
diff --git a/packages/components/src/components/Header/Header.tsx b/packages/components/src/components/Header/Header.tsx
new file mode 100644
index 000000000..d878d7bc4
--- /dev/null
+++ b/packages/components/src/components/Header/Header.tsx
@@ -0,0 +1,144 @@
+import React, { useState, MouseEvent } from 'react';
+import { AppBar, Toolbar, Typography, Container, Stack, Box, IconButton, Menu, MenuItem, Button } from '@mui/material';
+import { Menu as MenuIcon } from '@mui/icons-material';
+import { BrowserRouter, Link } from 'react-router-dom';
+
+interface IProps {
+  logoTitle?: string;
+  logoTitleColor?: string;
+  backgroundColor?: string;
+  routerLinks: { title: string; path: string }[];
+}
+
+/**
+ * Header component is used to display the header and navigation to other pages
+ */
+export const Header = ({ routerLinks, logoTitle = 'Logo', logoTitleColor = '#000', backgroundColor = '#fff' }: IProps) => {
+  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
+
+  /**
+   * open nav menu on mobile.
+   */
+  const handleOpenNavMenu = (event: MouseEvent<HTMLElement>) => {
+    setAnchorElNav(event.currentTarget);
+  };
+
+  /**
+   * close nav menu on mobile.
+   */
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null);
+  };
+
+  return (
+    <BrowserRouter>
+      <AppBar data-testid="header" sx={{ background: backgroundColor }}>
+        <Container maxWidth="xl">
+          <Toolbar disableGutters>
+            {/* Logo on desktop or tablet */}
+            <Stack
+              component={Link}
+              to="/"
+              sx={{
+                textDecoration: 'none',
+                display: { xs: 'none', md: 'flex' },
+                alignItems: 'center',
+                flexDirection: 'row',
+                mr: 2,
+              }}
+            >
+              <Typography
+                data-testid="logo"
+                variant="h6"
+                sx={{
+                  color: logoTitleColor,
+                }}
+              >
+                {logoTitle}
+              </Typography>
+            </Stack>
+            {/* Menu on mobile */}
+            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }} data-testid="menu">
+              <IconButton
+                data-testid="icon-button"
+                size="small"
+                aria-controls="menu-appbar"
+                aria-haspopup="true"
+                onClick={handleOpenNavMenu}
+                color="inherit"
+              >
+                <MenuIcon sx={{ color: logoTitleColor }} />
+              </IconButton>
+              <Menu
+                data-testid="menu-appbar"
+                id="menu-appbar"
+                anchorEl={anchorElNav}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                keepMounted
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'left',
+                }}
+                open={Boolean(anchorElNav)}
+                onClose={handleCloseNavMenu}
+                sx={{
+                  display: { xs: 'block', md: 'none' },
+                }}
+              >
+                {routerLinks.map((page) => (
+                  <MenuItem key={page.title} onClick={handleCloseNavMenu}>
+                    <Typography
+                      textAlign="center"
+                      component={Link}
+                      to={page.path}
+                      sx={{ textDecoration: 'none', color: 'inherit' }}
+                    >
+                      {page.title}
+                    </Typography>
+                  </MenuItem>
+                ))}
+              </Menu>
+            </Box>
+            {/* Logo on mobile */}
+            <Stack
+              component={Link}
+              to="/"
+              sx={{
+                flexGrow: 1,
+                textDecoration: 'none',
+                display: { xs: 'flex', md: 'none' },
+                flexDirection: 'row',
+                margin: 'auto',
+              }}
+            >
+              <Typography
+                variant="h6"
+                sx={{
+                  color: logoTitleColor,
+                }}
+              >
+                {logoTitle}
+              </Typography>
+            </Stack>
+            {/* Menu item on  desktop or tablet */}
+            <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} data-testid="menu-desktop">
+              {routerLinks.map((page) => (
+                <Button
+                  key={page.title}
+                  component={Link}
+                  to={page.path}
+                  sx={{ color: logoTitleColor, display: 'block' }}
+                >
+                  {page.title}
+                </Button>
+              ))}
+            </Box>
+          </Toolbar>
+        </Container>
+      </AppBar>
+    </BrowserRouter>
+  );
+};
diff --git a/packages/components/src/components/Header/index.ts b/packages/components/src/components/Header/index.ts
new file mode 100644
index 000000000..29429dc97
--- /dev/null
+++ b/packages/components/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { Header } from './Header';
diff --git a/packages/components/src/components/Layout/Layout.tsx b/packages/components/src/components/Layout/Layout.tsx
new file mode 100644
index 000000000..81550f13b
--- /dev/null
+++ b/packages/components/src/components/Layout/Layout.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Container } from '@mui/material';
+
+interface IProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Layout component is used to display the header and navigation to other pages
+ */
+export const Layout = ({ children }: IProps) => {
+  return (
+    <Container
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        mt: '64px',
+        mb: '24px',
+      }}
+    >
+      {children}
+    </Container>
+  );
+};
diff --git a/packages/components/src/components/Layout/index.ts b/packages/components/src/components/Layout/index.ts
new file mode 100644
index 000000000..9fc685e2a
--- /dev/null
+++ b/packages/components/src/components/Layout/index.ts
@@ -0,0 +1 @@
+export { Layout } from './Layout';
diff --git a/packages/components/src/components/ToastMessage/ToastMessage.tsx b/packages/components/src/components/ToastMessage/ToastMessage.tsx
new file mode 100644
index 000000000..712c5d183
--- /dev/null
+++ b/packages/components/src/components/ToastMessage/ToastMessage.tsx
@@ -0,0 +1,6 @@
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export const ToastMessage = () => {
+  return <ToastContainer />;
+};
diff --git a/packages/components/src/components/ToastMessage/index.ts b/packages/components/src/components/ToastMessage/index.ts
new file mode 100644
index 000000000..01b44df3f
--- /dev/null
+++ b/packages/components/src/components/ToastMessage/index.ts
@@ -0,0 +1 @@
+export { ToastMessage } from './ToastMessage';
diff --git a/packages/components/src/components/__tests__/Footer/Footer.test.tsx b/packages/components/src/components/__tests__/Footer/Footer.test.tsx
new file mode 100644
index 000000000..d62959aa1
--- /dev/null
+++ b/packages/components/src/components/__tests__/Footer/Footer.test.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { Footer } from '../../..';
+
+describe('Footer', () => {
+  test('should render Footer component', () => {
+    const currentYear = new Date().getFullYear();
+    const footerText = `Copyright © ${currentYear}`;
+
+    render(<Footer />);
+    expect(screen.getByText(footerText)).toBeInTheDocument();
+  });
+});
diff --git a/packages/components/src/components/__tests__/Header/Header.test.tsx b/packages/components/src/components/__tests__/Header/Header.test.tsx
new file mode 100644
index 000000000..7fa204757
--- /dev/null
+++ b/packages/components/src/components/__tests__/Header/Header.test.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { Header } from '../../../';
+
+describe('Header', () => {
+  // Define an array of router links for testing
+  const routerLinks = [
+    { title: 'Menu 1', path: '/menu-1' },
+    { title: 'Menu 2', path: '/menu-2' },
+    { title: 'Menu 3', path: '/menu-3' },
+  ];
+  // Define a constant for the logo title
+  const logoTitle = 'Logo';
+
+  test('Render header when the screen is large', () => {
+    // Set the screen width to 1024 pixels
+    global.innerWidth = 1024;
+
+    // Render the Header component with specified props
+    render(<Header logoTitle={logoTitle} routerLinks={routerLinks} />);
+
+    // Expect the menu for large screens to be visible
+    expect(screen.getByTestId('menu-desktop')).toBeVisible();
+
+    // Expect at least one element with the text 'Logo' to be present
+    expect(screen.getAllByText(/Logo/i)[0]).not.toBeNull();
+  });
+
+  test('Render menu when the button is clicked on a small screen', () => {
+    // Set the screen width to 600 pixels
+    global.innerWidth = 600;
+
+    // Render the Header component with specified props
+    render(<Header logoTitle={logoTitle} routerLinks={routerLinks} />);
+
+    // Find and expect the mobile menu button to be visible
+    const iconButton = screen.getByTestId('icon-button');
+    expect(iconButton).toBeVisible();
+
+    // Simulate a click on the mobile menu button
+    fireEvent.click(iconButton);
+
+    // Expect the mobile menu to have the style 'display: block'
+    expect(screen.getByTestId('menu-appbar')).toHaveStyle('display: block');
+
+    // Expect at least one element with the text 'Logo' to be present
+    expect(screen.getAllByText(/Logo/i)[0]).not.toBeNull();
+  });
+
+  test('Close mobile menu when a menu item is clicked', async () => {
+    global.innerWidth = 600;
+
+    // Render the Header component with specified props
+    render(<Header logoTitle={logoTitle} routerLinks={routerLinks} />);
+
+    // Simulate clicking the mobile menu icon to open the menu
+    const iconButton = screen.getByTestId('icon-button');
+    fireEvent.click(iconButton);
+
+    // Expect the mobile menu to be visible
+    const mobileMenu = screen.getByTestId('menu-appbar');
+    expect(mobileMenu).toHaveStyle('display: block');
+
+    // Simulate clicking a menu item to close the menu
+    const menuItem = screen.getByRole('link', {
+      name: 'Menu 1',
+    });
+    fireEvent.click(menuItem);
+
+    // Wait for the menu animation to complete and expect the menu to be hidden
+    await waitFor(() => {
+      expect(screen.getByTestId('menu-appbar')).toHaveClass('MuiModal-hidden ');
+    });
+  });
+
+  test('Render header with customized colors', () => {
+    // Set the screen width to 600 pixels
+    global.innerWidth = 600;
+
+    // Define colors for the logo and background
+    const logoTitleColor = '#fff';
+    const backgroundColor = '#000';
+
+    // Render the Header component with specified color props
+    render(<Header logoTitleColor={logoTitleColor} backgroundColor={backgroundColor} routerLinks={routerLinks} />);
+
+    // Expect the header background color to match the specified background color
+    const header = screen.getByTestId('header');
+    expect(header).toHaveStyle(`background-color: ${backgroundColor}`);
+
+    // Expect the logo text color to match the specified logo color
+    const logo = screen.getByTestId('logo');
+    expect(logo).toHaveStyle(`color: ${logoTitleColor}`);
+  });
+});
diff --git a/packages/components/src/components/__tests__/Layout/Layout.test.tsx b/packages/components/src/components/__tests__/Layout/Layout.test.tsx
new file mode 100644
index 000000000..7e79bd2cd
--- /dev/null
+++ b/packages/components/src/components/__tests__/Layout/Layout.test.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Layout } from '../../..';
+
+describe('Layout', () => {
+  test('should render Layout component', () => {
+    const mainLayoutText = 'Main layout';
+
+    render(<Layout>{mainLayoutText}</Layout>);
+    expect(screen.getByText(mainLayoutText)).toBeInTheDocument();
+  });
+});
diff --git a/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx b/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx
new file mode 100644
index 000000000..e849ea9ad
--- /dev/null
+++ b/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+
+import { ToastMessage, toastMessage } from '../../..';
+import { Status } from '../../../models';
+
+describe('Toast Message', () => {
+  test('renders ToastMessage component and triggers toast', async () => {
+    const status = Status.success;
+    const message = 'Test message';
+
+    // Render the component
+    render(<ToastMessage />);
+
+    // Call the toastMessage function
+    toastMessage({ status, message });
+
+    // Check that the toast message is correctly.
+    await waitFor(() => {
+      expect(document.body).toHaveTextContent(message);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 8a8c2711c..c70fb5b0d 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1 +1,7 @@
 export * from './components/index.js';
+export * from './components/Footer/Footer.js';
+export * from './components/Header/Header.js';
+export * from './components/Layout/Layout.js';
+export * from './components/ToastMessage/ToastMessage.js';
+export * from './utils/toastMessage.js'
+export * from './models/common.js'
diff --git a/packages/components/src/models/common.ts b/packages/components/src/models/common.ts
new file mode 100644
index 000000000..f49a56871
--- /dev/null
+++ b/packages/components/src/models/common.ts
@@ -0,0 +1,6 @@
+export enum Status {
+  success = 'success',
+  error = 'error',
+  warning = 'warning',
+  info = 'info',
+}
diff --git a/packages/components/src/models/index.ts b/packages/components/src/models/index.ts
new file mode 100644
index 000000000..d0b932366
--- /dev/null
+++ b/packages/components/src/models/index.ts
@@ -0,0 +1 @@
+export * from './common';
diff --git a/packages/components/src/utils/toastMessage.ts b/packages/components/src/utils/toastMessage.ts
new file mode 100644
index 000000000..e8fdef4eb
--- /dev/null
+++ b/packages/components/src/utils/toastMessage.ts
@@ -0,0 +1,16 @@
+import { toast } from 'react-toastify';
+import { Status } from '../models';
+
+export function toastMessage({ status, message }: {
+  status: Status;
+  message: string;
+}) {
+  toast[status](message, {
+    position: 'top-right',
+    hideProgressBar: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    autoClose: 3000,
+  });
+}
\ No newline at end of file
diff --git a/packages/components/stories/Footer.stories.js b/packages/components/stories/Footer.stories.js
new file mode 100644
index 000000000..9be04e184
--- /dev/null
+++ b/packages/components/stories/Footer.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Footer } from '../src/components/Footer';
+
+export default {
+  title: 'Footer',
+  component: Footer,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+
+export const Default = {
+  args: {},
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '1000px', height: '20vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
diff --git a/packages/components/stories/Header.stories.js b/packages/components/stories/Header.stories.js
new file mode 100644
index 000000000..7b5ecd42b
--- /dev/null
+++ b/packages/components/stories/Header.stories.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Header } from '../src/components/Header';
+
+export default {
+  title: 'Header',
+  component: Header,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export const Default = {
+  args: {
+    logoTitle: 'Logo',
+    logoTitleColor: '#000',
+    backgroundColor: '#fff',
+    routerLinks: [
+      { title: 'Menu 1', path: '/menu-1' },
+      { title: 'Menu 2', path: '/menu-2' },
+      { title: 'Menu 3', path: '/menu-3' },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '500px', height: '20vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
diff --git a/packages/components/stories/Layout.stories.js b/packages/components/stories/Layout.stories.js
new file mode 100644
index 000000000..f686fdacf
--- /dev/null
+++ b/packages/components/stories/Layout.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+
+import { Layout } from '../src/components/Layout';
+
+export default {
+  title: 'Layout',
+  component: Layout,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export const Default = {
+  args: {
+    children: <Typography>Main layout here</Typography>,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '1000px', height: '20vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
diff --git a/packages/components/stories/ToastMessage.stories.js b/packages/components/stories/ToastMessage.stories.js
new file mode 100644
index 000000000..c3d4ffb1f
--- /dev/null
+++ b/packages/components/stories/ToastMessage.stories.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { ToastMessage } from '../src/components/ToastMessage'
+import { toastMessage } from '../src/utils/toastMessage';
+
+export default {
+  title: 'ToastMessage',
+  component: ToastMessage,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+const args =  {
+  status: 'success',
+  message: 'Toast message!',
+};
+
+export const Default = {
+  args,
+  decorators: [
+    (Story) => (
+      <div style={{ minWidth: '500px', height: '40vh' }}>
+          <Story />
+          {toastMessage({ status: args.status, message: args.message })}
+      </div>
+    ),
+  ],
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05d3f8e58..6b6d30825 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,9 +104,15 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-router-dom:
+        specifier: ^6.21.3
+        version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
       react-scripts:
         specifier: 5.0.1
         version: 5.0.1(@babel/plugin-syntax-flow@7.23.3)(@babel/plugin-transform-react-jsx@7.23.4)(@swc/core@1.3.105)(esbuild@0.18.20)(eslint@8.56.0)(react@18.2.0)(ts-node@10.9.2)(typescript@5.1.6)
+      react-toastify:
+        specifier: ^10.0.4
+        version: 10.0.4(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       '@babel/preset-react':
         specifier: ^7.7.0
@@ -4151,6 +4157,11 @@ packages:
       '@babel/runtime': 7.23.8
     dev: true
 
+  /@remix-run/router@1.14.2:
+    resolution: {integrity: sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
   /@rollup/plugin-babel@5.3.1(@babel/core@7.23.7)(rollup@2.79.1):
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -14878,6 +14889,29 @@ packages:
       use-sidecar: 1.1.2(@types/react@18.2.48)(react@18.2.0)
     dev: true
 
+  /react-router-dom@6.21.3(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-kNzubk7n4YHSrErzjLK72j0B5i969GsuCGazRl3G6j1zqZBLjuSlYBdVdkDOgzGdPIffUOc9nmgiadTEVoq91g==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.14.2
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-router: 6.21.3(react@18.2.0)
+    dev: false
+
+  /react-router@6.21.3(react@18.2.0):
+    resolution: {integrity: sha512-a0H638ZXULv1OdkmiK6s6itNhoy33ywxmUFT/xtSoVyf9VnC7n7+VT4LjVzdIHSaF5TIh9ylUgxMXksHTgGrKg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      react: '>=16.8'
+    dependencies:
+      '@remix-run/router': 1.14.2
+      react: 18.2.0
+    dev: false
+
   /react-scripts@5.0.1(@babel/plugin-syntax-flow@7.23.3)(@babel/plugin-transform-react-jsx@7.23.4)(@swc/core@1.3.105)(esbuild@0.18.20)(eslint@8.56.0)(react@18.2.0)(ts-node@10.9.2)(typescript@5.1.6):
     resolution: {integrity: sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==}
     engines: {node: '>=14.0.0'}
@@ -15090,6 +15124,17 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /react-toastify@10.0.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      clsx: 2.1.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:

From 05b170c29b51a4c9651e9a450b3ac5fab184e4be Mon Sep 17 00:00:00 2001
From: Huy Nguyen <huy.nguyenkim.h@gmail.com>
Date: Fri, 26 Jan 2024 10:06:37 +0700
Subject: [PATCH 2/4] feat: add common UI components

---
 packages/components/README.md                 | 35 +++++++++++++++++++
 .../components/ToastMessage/ToastMessage.tsx  | 26 +++++++++++++-
 .../ToastMessage/ToastMessage.test.tsx        |  3 +-
 packages/components/src/index.ts              |  2 --
 packages/components/src/models/common.ts      |  6 ----
 packages/components/src/models/index.ts       |  1 -
 packages/components/src/utils/toastMessage.ts | 16 ---------
 .../stories/ToastMessage.stories.js           |  5 ++-
 8 files changed, 63 insertions(+), 31 deletions(-)
 create mode 100644 packages/components/README.md
 delete mode 100644 packages/components/src/models/common.ts
 delete mode 100644 packages/components/src/models/index.ts
 delete mode 100644 packages/components/src/utils/toastMessage.ts

diff --git a/packages/components/README.md b/packages/components/README.md
new file mode 100644
index 000000000..8f7853f5a
--- /dev/null
+++ b/packages/components/README.md
@@ -0,0 +1,35 @@
+# Mock app components
+
+A collection of reusable React components for general-purpose use.
+
+## Installation
+
+### Install dependencies
+
+Make sure your machine has Node.js version 18 or later installed.
+
+To install the project dependencies, run the following command:
+
+```bash
+pnpm install
+```
+
+## Storybook
+
+Explore and interact with the components using Storybook.
+
+### Run Storybook
+
+```bash
+npm run storybook
+```
+
+Visit http://localhost:6006/ in your browser to view Storybook.
+
+## Unit Testing
+
+Run unit tests using Jest.
+
+```bash
+npm test
+```
\ No newline at end of file
diff --git a/packages/components/src/components/ToastMessage/ToastMessage.tsx b/packages/components/src/components/ToastMessage/ToastMessage.tsx
index 712c5d183..958e0939f 100644
--- a/packages/components/src/components/ToastMessage/ToastMessage.tsx
+++ b/packages/components/src/components/ToastMessage/ToastMessage.tsx
@@ -1,6 +1,30 @@
-import { ToastContainer } from 'react-toastify';
+import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
+// An enumeration for different toast statuses
+export enum Status {
+  success = 'success',
+  error = 'error',
+  warning = 'warning',
+  info = 'info',
+};
+
+// The function for displaying toast messages
+export function toastMessage({ status, message }: {
+  status: Status;
+  message: string;
+}): void {
+  toast[status](message, {
+    position: 'top-right',
+    hideProgressBar: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    autoClose: 3000,
+  });
+}
+
+// ToastMessage component for displaying a ToastContainer
 export const ToastMessage = () => {
   return <ToastContainer />;
 };
diff --git a/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx b/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx
index e849ea9ad..0a4aad9e7 100644
--- a/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx
+++ b/packages/components/src/components/__tests__/ToastMessage/ToastMessage.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 
-import { ToastMessage, toastMessage } from '../../..';
-import { Status } from '../../../models';
+import { ToastMessage, toastMessage, Status } from '../../..';
 
 describe('Toast Message', () => {
   test('renders ToastMessage component and triggers toast', async () => {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index c70fb5b0d..491ef6fc5 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -3,5 +3,3 @@ export * from './components/Footer/Footer.js';
 export * from './components/Header/Header.js';
 export * from './components/Layout/Layout.js';
 export * from './components/ToastMessage/ToastMessage.js';
-export * from './utils/toastMessage.js'
-export * from './models/common.js'
diff --git a/packages/components/src/models/common.ts b/packages/components/src/models/common.ts
deleted file mode 100644
index f49a56871..000000000
--- a/packages/components/src/models/common.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export enum Status {
-  success = 'success',
-  error = 'error',
-  warning = 'warning',
-  info = 'info',
-}
diff --git a/packages/components/src/models/index.ts b/packages/components/src/models/index.ts
deleted file mode 100644
index d0b932366..000000000
--- a/packages/components/src/models/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './common';
diff --git a/packages/components/src/utils/toastMessage.ts b/packages/components/src/utils/toastMessage.ts
deleted file mode 100644
index e8fdef4eb..000000000
--- a/packages/components/src/utils/toastMessage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { toast } from 'react-toastify';
-import { Status } from '../models';
-
-export function toastMessage({ status, message }: {
-  status: Status;
-  message: string;
-}) {
-  toast[status](message, {
-    position: 'top-right',
-    hideProgressBar: true,
-    closeOnClick: true,
-    pauseOnHover: true,
-    draggable: true,
-    autoClose: 3000,
-  });
-}
\ No newline at end of file
diff --git a/packages/components/stories/ToastMessage.stories.js b/packages/components/stories/ToastMessage.stories.js
index c3d4ffb1f..75a10a110 100644
--- a/packages/components/stories/ToastMessage.stories.js
+++ b/packages/components/stories/ToastMessage.stories.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import { ToastMessage } from '../src/components/ToastMessage'
-import { toastMessage } from '../src/utils/toastMessage';
+import { ToastMessage, toastMessage, Status } from '../src/components/ToastMessage/ToastMessage';
 
 export default {
   title: 'ToastMessage',
@@ -11,7 +10,7 @@ export default {
 };
 
 const args =  {
-  status: 'success',
+  status: Status.success,
   message: 'Toast message!',
 };
 

From 89ddc55934ba3916859fbe808058f86b83bde34d Mon Sep 17 00:00:00 2001
From: Huy Nguyen <huy.nguyenkim.h@gmail.com>
Date: Fri, 26 Jan 2024 13:44:11 +0700
Subject: [PATCH 3/4] fix: add ErrorBoundary to Layout component with
 additional unit tests

---
 packages/components/README.md                 |  4 +-
 packages/components/package.json              |  1 +
 .../src/components/Layout/Layout.tsx          | 93 ++++++++++++++++---
 .../__tests__/Layout/Layout.test.tsx          | 60 +++++++++++-
 pnpm-lock.yaml                                | 12 +++
 5 files changed, 153 insertions(+), 17 deletions(-)

diff --git a/packages/components/README.md b/packages/components/README.md
index 8f7853f5a..c84a29643 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -21,7 +21,7 @@ Explore and interact with the components using Storybook.
 ### Run Storybook
 
 ```bash
-npm run storybook
+pnpm run storybook
 ```
 
 Visit http://localhost:6006/ in your browser to view Storybook.
@@ -31,5 +31,5 @@ Visit http://localhost:6006/ in your browser to view Storybook.
 Run unit tests using Jest.
 
 ```bash
-npm test
+pnpm test
 ```
\ No newline at end of file
diff --git a/packages/components/package.json b/packages/components/package.json
index ae54b5aca..53756b1ac 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -47,6 +47,7 @@
     "@mui/x-date-pickers": "^6.19.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.12",
     "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.4"
diff --git a/packages/components/src/components/Layout/Layout.tsx b/packages/components/src/components/Layout/Layout.tsx
index 81550f13b..3c0393fea 100644
--- a/packages/components/src/components/Layout/Layout.tsx
+++ b/packages/components/src/components/Layout/Layout.tsx
@@ -1,25 +1,92 @@
 import React from 'react';
-import { Container } from '@mui/material';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Container, Box, Typography } from '@mui/material';
+import {
+  Done as DoneIcon,
+  CancelOutlined as CancelOutlinedIcon
+} from '@mui/icons-material';
 
-interface IProps {
-  children: React.ReactNode;
-}
+// Enum defining possible statuses for the layout
+export enum LayoutStatus {
+  success = 'success',
+  error = 'error',
+};
 
 /**
- * Layout component is used to display the header and navigation to other pages
- */
-export const Layout = ({ children }: IProps) => {
+  * FallbackErrorContent Component returns a Box component containing the MessageText component with an error status
+  */
+export const FallbackErrorContent = ({ errorMessage }: {
+  errorMessage: string;
+}) => {
   return (
-    <Container
+    <Box
       sx={{
-        display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        mt: '64px',
-        mb: '24px',
+        display: 'flex',
+        flexDirection: 'column',
       }}
     >
-      {children}
-    </Container>
+      <MessageText status={LayoutStatus.error} text={errorMessage} />
+    </Box>
+  );
+};
+
+/**
+  * MessageText Component returns a Box component containing an icon based on the status 
+  * and a Typography component with the provided text
+  */
+export function MessageText({ status, text }: {
+  status?: LayoutStatus;
+  text: string;
+}) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      {status === LayoutStatus.error && (
+        <>
+          <CancelOutlinedIcon color='error' sx={{ marginRight: '10px' }} />
+        </>
+      )}
+      {status === LayoutStatus.success && (
+        <>
+          <DoneIcon color='success' sx={{ marginRight: '10px' }} />
+        </>
+      )}
+      <Typography sx={{ marginBottom: '50px' }}>{text}</Typography>
+    </Box>
+  );
+}
+
+/**
+  * Layout component is used to display the header and navigation to other pages
+  */
+export const Layout = ({ children, errorMessage = 'Something went wrong! Please retry again' }: {
+  children: React.ReactNode;
+  errorMessage?: string;
+}) => {
+  return (
+    /**
+      * The ErrorBoundary component is used to catch errors anywhere in the component tree
+      * and provide a fallback UI in case of an error. In this case, the FallbackComponent is specified
+      * as an inline arrow function that renders the FallbackErrorContent component with the provided errorMessage.
+      */
+    <ErrorBoundary FallbackComponent={() => <FallbackErrorContent errorMessage={errorMessage} />}>
+      <Container
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          mt: '64px',
+          mb: '24px',
+        }}
+      >
+        {children}
+      </Container>
+    </ErrorBoundary>
   );
 };
diff --git a/packages/components/src/components/__tests__/Layout/Layout.test.tsx b/packages/components/src/components/__tests__/Layout/Layout.test.tsx
index 7e79bd2cd..51d8ddbcb 100644
--- a/packages/components/src/components/__tests__/Layout/Layout.test.tsx
+++ b/packages/components/src/components/__tests__/Layout/Layout.test.tsx
@@ -1,13 +1,69 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-import { Layout } from '../../..';
+import { FallbackErrorContent, Layout, LayoutStatus, MessageText } from '../../..';
 
 describe('Layout', () => {
-  test('should render Layout component', () => {
+  test('should render Layout component with children', () => {
     const mainLayoutText = 'Main layout';
 
+    // Render the Layout component with the specified children
     render(<Layout>{mainLayoutText}</Layout>);
+
+    // Expect that the specified text is present in the rendered content
     expect(screen.getByText(mainLayoutText)).toBeInTheDocument();
   });
+
+  test('should render FallbackErrorContent component', () => {
+    const errorMessage = 'Error message';
+
+    // Render the FallbackErrorContent component with the specified error message
+    render(<FallbackErrorContent errorMessage={errorMessage} />);
+
+    // Expect that the specified error message is present in the rendered content
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  test('should render MessageText component with success status', () => {
+    const successMessage = 'Operation successful';
+
+    // Render the MessageText component with success status and specified text
+    render(<MessageText status={LayoutStatus.success} text={successMessage} />);
+
+    // Expect that the specified success message is present in the rendered content
+    expect(screen.getByText(successMessage)).toBeInTheDocument();
+  });
+
+  test('should render MessageText component with error status', () => {
+    const errorMessage = 'Error occurred';
+
+    // Render the MessageText component with error status and specified text
+    render(<MessageText status={LayoutStatus.error} text={errorMessage} />);
+
+    // Expect that the specified error message is present in the rendered content
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  test('should render FallbackErrorContent inside ErrorBoundary for error scenario', () => {
+    // Mock console.error to prevent error messages from being printed during the test
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    // Mock an error scenario by throwing an error inside ErrorBoundary
+    const ErrorThrowingComponent = () => {
+      throw new Error('Simulated error');
+    };
+
+    // Render the Layout component with an error-throwing child
+    render(
+      <Layout>
+        <ErrorThrowingComponent />
+      </Layout>
+    );
+
+    // Expect that the FallbackErrorContent component is rendered for error scenario
+    expect(screen.getByText('Something went wrong! Please retry again')).toBeInTheDocument();
+
+    // Restore the original console.error function
+    consoleErrorSpy.mockRestore();
+  });
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6b6d30825..332b99be4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,6 +104,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      react-error-boundary:
+        specifier: ^4.0.12
+        version: 4.0.12(react@18.2.0)
       react-router-dom:
         specifier: ^6.21.3
         version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
@@ -14829,6 +14832,15 @@ packages:
       react-is: 18.1.0
     dev: true
 
+  /react-error-boundary@4.0.12(react@18.2.0):
+    resolution: {integrity: sha512-kJdxdEYlb7CPC1A0SeUY38cHpjuu6UkvzKiAmqmOFL21VRfMhOcWxTCBgLVCO0VEMh9JhFNcVaXlV4/BTpiwOA==}
+    peerDependencies:
+      react: '>=16.13.1'
+    dependencies:
+      '@babel/runtime': 7.23.8
+      react: 18.2.0
+    dev: false
+
   /react-error-overlay@6.0.11:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
 

From f15eef9e9acbad243eec78fe06ae91a3ebc1536f Mon Sep 17 00:00:00 2001
From: Huy Nguyen <huy.nguyenkim.h@gmail.com>
Date: Fri, 26 Jan 2024 15:49:29 +0700
Subject: [PATCH 4/4] chore: update package.json for build configuration

---
 packages/components/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 53756b1ac..bba42dda0 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,8 +1,8 @@
 {
   "name": "@mock-app/components",
   "version": "1.0.0",
-  "main": "./lib/index.js",
-  "types": "./lib/index.d.ts",
+  "main": "./build/index.js",
+  "types": "./build/index.d.ts",
   "type": "module",
   "scripts": {
     "start": "react-scripts start",