meiroio · zpectah · May 24, 2024 · May 24, 2024 · May 25, 2024 · May 26, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+
+.idea/*
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/backend/package-lock.json b/backend/package-lock.json
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120
+}
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+};
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
@@ -0,0 +1,10 @@
+import eslint from '@eslint/js';
+import tslint from 'typescript-eslint';
+
+export default [
+  eslint.configs.recommended,
+  ...tslint.configs.recommended,
+  {
+    ignores: ['node_modules', 'dist'],
+  },
+];
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>meiro - FE test scenario</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "format:check": "prettier --check .",
+    "format:fix": "prettier --write ."
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@fontsource/open-sans": "^5.0.28",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
+    "@tanstack/react-query": "^5.37.1",
+    "axios": "^1.7.2",
+    "dayjs": "^1.11.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.3.0",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.0.1",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "prettier": "^3.2.5",
+    "typescript": "^5.2.2",
+    "typescript-eslint": "^7.10.0",
+    "vite": "^5.2.0"
+  }
+}
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App/App.tsx b/frontend/src/App/App.tsx
@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { theme } from '../styles';
+import AppRouter from './AppRouter';
+
+import '@fontsource/open-sans/300.css';
+import '@fontsource/open-sans/500.css';
+import '@fontsource/open-sans/700.css';
+import '@fontsource/open-sans/800.css';
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <AppRouter />
+    </ThemeProvider>
+  </QueryClientProvider>
+);
+
+export default App;
diff --git a/frontend/src/App/AppRouter.tsx b/frontend/src/App/AppRouter.tsx
@@ -0,0 +1,43 @@
+import { lazy } from 'react';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { ROUTES } from '../constants';
+import { PageLayout, PagePreloader } from '../components';
+
+const Error = lazy(() => import('../modules/Error/Error'));
+const Home = lazy(() => import('../modules/Home/Home'));
+const Attributes = lazy(() => import('../modules/Attributes/Attributes'));
+
+const AppRouter = () => {
+  const router = createBrowserRouter(
+    [
+      {
+        path: '*',
+        element: <Error />,
+      },
+      {
+        element: <PageLayout />,
+        children: [
+          {
+            path: ROUTES.home.path,
+            element: <Home />,
+          },
+          {
+            path: ROUTES.attributes.path,
+            element: <Attributes />,
+            children: [
+              {
+                path: `${ROUTES.attributes.path}/:id`,
+                element: <Attributes />,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+    { basename: '' }
+  );
+
+  return <RouterProvider router={router} fallbackElement={<PagePreloader />} />;
+};
+
+export default AppRouter;
diff --git a/frontend/src/App/index.ts b/frontend/src/App/index.ts
@@ -0,0 +1 @@
+export { default as App } from './App';
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
diff --git a/frontend/src/components/ConfirmDialog/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Button } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { WithChildren } from '../../types';
+
+export interface ConfirmDialogProps extends WithChildren {
+  title?: ReactNode;
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+const ConfirmDialog = ({ children, title, open, onClose, onConfirm }: ConfirmDialogProps) => {
+  const confirmHandler = () => {
+    onClose();
+    onConfirm();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      {title && <DialogTitle>{title}</DialogTitle>}
+      <IconButton
+        aria-label="close"
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: (theme) => theme.palette.grey[500],
+        }}
+        onClick={onClose}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogContent dividers>{children}</DialogContent>
+      <DialogActions>
+        <Button variant="outlined" onClick={confirmHandler}>
+          Confirm
+        </Button>
+        <Button onClick={onClose}>Cancel</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmDialog;
diff --git a/frontend/src/components/ConfirmDialog/index.ts b/frontend/src/components/ConfirmDialog/index.ts
@@ -0,0 +1,2 @@
+export { default as ConfirmDialog } from './ConfirmDialog';
+export type { ConfirmDialogProps } from './ConfirmDialog';
diff --git a/frontend/src/components/Footer/Footer.tsx b/frontend/src/components/Footer/Footer.tsx
@@ -0,0 +1,27 @@
+import { styled, Box, Container, Typography, Stack, BoxProps } from '@mui/material';
+import { PROJECT } from '../../config';
+import { CONTAINER_MAX_WIDTH_DEFAULT } from '../../constants';
+
+const Wrapper = styled(Box)(({ theme: { spacing } }) => ({
+  padding: spacing(2),
+}));
+
+interface FooterProps {
+  wrapperProps?: Partial<Omit<BoxProps, 'component'>>;
+}
+
+const Footer = ({ wrapperProps }: FooterProps) => {
+  return (
+    <Wrapper component="footer" {...wrapperProps}>
+      <Container maxWidth={CONTAINER_MAX_WIDTH_DEFAULT}>
+        <Stack>
+          <Typography variant="caption" sx={{ textAlign: 'center' }}>
+            {PROJECT.meta.name} - {PROJECT.meta.description} ({PROJECT.meta.year})
+          </Typography>
+        </Stack>
+      </Container>
+    </Wrapper>
+  );
+};
+
+export default Footer;
diff --git a/frontend/src/components/Footer/index.ts b/frontend/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { default as Footer } from './Footer';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as ConfirmDialog } from './ConfirmDialog';
		export type { ConfirmDialogProps } from './ConfirmDialog';