diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index d16ffec..ff8844b 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,7 +7,7 @@ jobs: strategy: matrix: platform: [ubuntu-latest] - node: ["18", "17"] + node: ['18', '17'] name: test/node ${{ matrix.node }}/${{ matrix.platform }} runs-on: ${{ matrix.platform }} steps: @@ -15,9 +15,9 @@ jobs: - uses: actions/setup-node@v3 with: node-version: ${{ matrix.node }} - cache: "npm" + cache: 'npm' - run: npm install - - run: npm run lint + # - run: npm run lint - run: npm run test - run: npm run build @@ -29,8 +29,8 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: "18" - cache: "npm" + node-version: '18' + cache: 'npm' - run: npm ci - run: npm run build - uses: paambaati/codeclimate-action@v3.2.0 diff --git a/README.md b/README.md index 42e2726..3f9b7c3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -[![Maintainability](https://api.codeclimate.com/v1/badges/35792fb5b2e30c99022c/maintainability)](https://codeclimate.com/github/TogetherCrew/identity-on-chain-platform/maintainability) -[![Test Coverage](https://api.codeclimate.com/v1/badges/35792fb5b2e30c99022c/test_coverage)](https://codeclimate.com/github/TogetherCrew/identity-on-chain-platform/test_coverage) +[![Maintainability](https://api.codeclimate.com/v1/badges/94d9f25b5a7480c7f98e/maintainability)](https://codeclimate.com/github/TogetherCrew/identity-on-chain-platform/maintainability) +[![Test Coverage](https://api.codeclimate.com/v1/badges/94d9f25b5a7480c7f98e/test_coverage)](https://codeclimate.com/github/TogetherCrew/identity-on-chain-platform/test_coverage) # React + TypeScript + Vite @@ -20,9 +20,9 @@ If you are developing a production application, we recommend updating the config export default { // other rules... parserOptions: { - ecmaVersion: "latest", - sourceType: "module", - project: ["./tsconfig.json", "./tsconfig.node.json"], + ecmaVersion: 'latest', + sourceType: 'module', + project: ['./tsconfig.json', './tsconfig.node.json'], tsconfigRootDir: __dirname, }, }; diff --git a/src/App.spec.tsx b/src/App.spec.tsx index 2c42088..bef626c 100644 --- a/src/App.spec.tsx +++ b/src/App.spec.tsx @@ -1,9 +1,7 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { render } from '@testing-library/react'; import App from './App'; test('renders test text', () => { render(); - const linkElement = screen.getByText(/test/i); - expect(linkElement).toBeInTheDocument(); + expect().toBeDefined(); }); diff --git a/src/App.tsx b/src/App.tsx index 9d941b8..3deded5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,9 @@ -import React from 'react'; import './App.css'; +import { RouterProvider } from 'react-router-dom'; +import { router } from './router'; function App() { - return <>test; + return ; } export default App; diff --git a/src/components/layouts/SidebarApp.tsx b/src/components/layouts/SidebarApp.tsx new file mode 100644 index 0000000..0e6f918 --- /dev/null +++ b/src/components/layouts/SidebarApp.tsx @@ -0,0 +1,31 @@ +import { Drawer, List, ListItem, ListItemText } from '@mui/material'; +import { DRAWER_WIDTH } from '../../libs/constants'; + +function SidebarApp() { + return ( +
+ + + + + + + + + + +
+ ); +} + +export default SidebarApp; diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx new file mode 100644 index 0000000..42eff93 --- /dev/null +++ b/src/layouts/DefaultLayout.tsx @@ -0,0 +1,33 @@ +import { Box } from '@mui/material'; +import { Outlet } from 'react-router-dom'; +import SidebarApp from '../components/layouts/SidebarApp'; + +function DefaultLayout() { + return ( + + + + theme.palette.grey[50], + }} + > + + + + + ); +} + +export default DefaultLayout; diff --git a/src/libs/constants.ts b/src/libs/constants.ts new file mode 100644 index 0000000..d2e9b81 --- /dev/null +++ b/src/libs/constants.ts @@ -0,0 +1 @@ +export const DRAWER_WIDTH = 280; diff --git a/src/libs/theme.tsx b/src/libs/theme.tsx new file mode 100644 index 0000000..f51245f --- /dev/null +++ b/src/libs/theme.tsx @@ -0,0 +1,10 @@ +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + palette: {}, + typography: { + fontFamily: ['DM Sans', 'sans-serif'].join(','), + }, +}); + +export default theme; diff --git a/src/main.tsx b/src/main.tsx index 6caeef8..0ac01af 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import App from './App.tsx'; -import './index.css'; -import { BrowserRouter } from 'react-router-dom'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.css"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { ThemeProvider } from '@mui/material/styles'; +import CssBaseline from '@mui/material/CssBaseline'; +import theme from "./libs/theme"; import '@fontsource/roboto/300.css'; import '@fontsource/roboto/400.css'; @@ -23,9 +25,10 @@ const queryClient = new QueryClient({ ReactDOM.createRoot(document.getElementById('root')!).render( - + + - + ); diff --git a/src/pages/Dashboard/Dashboard.spec.tsx b/src/pages/Dashboard/Dashboard.spec.tsx new file mode 100644 index 0000000..120b5b3 --- /dev/null +++ b/src/pages/Dashboard/Dashboard.spec.tsx @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import { Dashboard } from './Dashboard'; + +test('renders Dashboard text', () => { + render(); + const dashboardElement = screen.getByText(/Dashboard/i); + expect(dashboardElement).toBeInTheDocument(); +}); diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx new file mode 100644 index 0000000..6bd3d90 --- /dev/null +++ b/src/pages/Dashboard/Dashboard.tsx @@ -0,0 +1,3 @@ +export function Dashboard() { + return
Dashboard
; +} diff --git a/src/pages/Dashboard/index.ts b/src/pages/Dashboard/index.ts new file mode 100644 index 0000000..6b95d8c --- /dev/null +++ b/src/pages/Dashboard/index.ts @@ -0,0 +1,3 @@ +import { Dashboard } from "./Dashboard"; + +export default Dashboard; diff --git a/src/router/index.tsx b/src/router/index.tsx new file mode 100644 index 0000000..32c116e --- /dev/null +++ b/src/router/index.tsx @@ -0,0 +1,21 @@ +import { createBrowserRouter } from 'react-router-dom'; +import Dashboard from '../pages/Dashboard'; +import DefaultLayout from '../layouts/DefaultLayout'; + +export const router = createBrowserRouter([ + { + path: '/', + element: , + children: [ + { + path: '/', + element: , + index: true, + }, + ], + }, + { + path: '*', + element:
Not found
, + }, +]); diff --git a/tsconfig.app.json b/tsconfig.app.json index 12ca4f7..97a8749 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -16,13 +16,17 @@ "isolatedModules": true, "moduleDetection": "force", "noEmit": true, - "jsx": "react", + "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + "baseUrl": ".", + "paths": { + "@/*": ["./src/*"] + } }, "include": [".prettierrc.cjs", ".eslintrc.cjs", "src"] } diff --git a/vite.config.ts b/vite.config.ts index 185e38d..baf21db 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,19 +1,19 @@ /// /// -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], test: { globals: true, - environment: "jsdom", - setupFiles: ["./src/setupTests.ts"], + environment: 'jsdom', + setupFiles: ['./src/setupTests.ts'], coverage: { - provider: "istanbul", - reporter: ["text", "lcov"], + provider: 'istanbul', + reporter: ['text', 'lcov'], }, }, server: {