Skip to content

Commit

Permalink
Merge pull request #3 from CS3219-AY2324S1/frontend-setup
Browse files Browse the repository at this point in the history
  • Loading branch information
chownces authored Sep 6, 2023
2 parents 8e5aef7 + ff78df4 commit 7185ca8
Show file tree
Hide file tree
Showing 24 changed files with 3,149 additions and 19 deletions.
28 changes: 28 additions & 0 deletions .github/workflows/ci-frontend-test.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
name: ci-frontend-test

on:
pull_request:
push:
branches:
- master

jobs:
test:
name: Frontend Tests
runs-on: ubuntu-latest

strategy:
matrix:
commands: ['format:ci', 'lint:ci', build, test]

steps:
- name: Check out repository code
uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v2-beta
with:
node-version: '18'
- name: Install frontend dependencies
run: cd frontend; yarn install --frozen-lockfile;
- name: Run frontend tests
run: cd frontend; yarn run ${{ matrix.commands }}
1 change: 0 additions & 1 deletion css/styles.css

This file was deleted.

19 changes: 19 additions & 0 deletions frontend/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
24 changes: 24 additions & 0 deletions frontend/.gitignore
Original file line number Diff line number Diff line change
@@ -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?
4 changes: 4 additions & 0 deletions frontend/.husky/pre-commit
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

cd frontend; yarn lint; yarn format; yarn test;
6 changes: 6 additions & 0 deletions frontend/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2
}
44 changes: 44 additions & 0 deletions frontend/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Installation

```bash
$ yarn install
```

# Running the app in development mode

```bash
# development
$ yarn dev

# production mode
$ yarn build
$ yarn preview
```

# 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
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
13 changes: 13 additions & 0 deletions frontend/index.html
Original file line number Diff line number Diff line change
@@ -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>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx src/ test/",
"lint:ci": "eslint --ext .js,.jsx,.ts,.tsx src/ test/",
"format": "prettier --write \"(src|test)/**/*.(js|jsx|json|ts|tsx)\"",
"format:ci": "prettier --list-different \"(src|test)/**/*.(js|jsx|json|ts|tsx)\"",
"prepare": "cd .. && husky install frontend/.husky",
"preview": "vite preview",
"test": "vitest run",
"test:watch": "vitest watch",
"test:cov": "vitest run --coverage"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.7",
"localforage": "^1.10.0",
"match-sorter": "^6.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"sort-by": "^1.2.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"husky": "^8.0.3",
"prettier": "3.0.3",
"typescript": "^5.0.2",
"vite": "^4.4.5",
"vite-plugin-checker": "^0.6.2",
"vitest": "^0.34.3"
}
}
1 change: 1 addition & 0 deletions frontend/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Router from './routes';
import { RouterProvider } from 'react-router-dom';

function App() {
return <RouterProvider router={Router} />;
}

export default App;
1 change: 1 addition & 0 deletions frontend/src/assets/react.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions frontend/src/main.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
64 changes: 64 additions & 0 deletions frontend/src/pages/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import {
Box,
Button,
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
Typography,
} from '@mui/material';

// TODO: Replace this with a real table
function createData(
id: number,
title: string,
description: string,
category: string,
complexity: string,
) {
return { id, title, description, category, complexity };
}

const rows = [
createData(1, 'Reverse a String', 'Description 1', 'Strings, Algorithms', 'Easy'),
createData(1, 'Repeated DNA Sequences', 'Description 2', 'Data Structures, Algorithms', 'Medium'),
createData(1, 'Sliding Window Maximum', 'Description 3', 'Arrays, Algorithms', 'Hard'),
];

export default function Dashboard() {
return (
<Box>
<Typography variant="h2">PeerPrep Dashboard</Typography>
<Button href={`/login`}>Log out</Button>
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell align="left">Title</TableCell>
<TableCell align="left">Category&nbsp;(g)</TableCell>
<TableCell align="left">Complexity&nbsp;(g)</TableCell>
{/* <TableCell align="right">Protein&nbsp;(g)</TableCell> */}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow key={row.id} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<TableCell component="th" scope="row">
{row.id}
</TableCell>
<TableCell align="left">{row.title}</TableCell>
<TableCell align="left">{row.category}</TableCell>
<TableCell align="left">{row.complexity}</TableCell>
{/* <TableCell align="right">{row.protein}</TableCell> */}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Box>
);
}
24 changes: 24 additions & 0 deletions frontend/src/pages/Login.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Box, Button, TextField, Typography } from '@mui/material';

export default function Login() {
return (
<>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Typography variant="h1" gutterBottom>
PeerPrep
</Typography>
<TextField id="outlined-basic" label="Username" variant="outlined" />
<TextField id="outlined-basic" label="Password" variant="outlined" />
<Button href={`/dashboard`} variant="contained">
Log in
</Button>
</Box>
</>
);
}
15 changes: 15 additions & 0 deletions frontend/src/routes/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { Navigate, createBrowserRouter } from 'react-router-dom';
import Login from '../pages/Login';
import Dashboard from '../pages/Dashboard';

export default createBrowserRouter([

Check warning on line 5 in frontend/src/routes/index.tsx

View workflow job for this annotation

GitHub Actions / Frontend Tests (lint:ci)

Fast refresh can't handle anonymous components. Add a name to your export

Check warning on line 5 in frontend/src/routes/index.tsx

View workflow job for this annotation

GitHub Actions / Frontend Tests (lint:ci)

Fast refresh can't handle anonymous components. Add a name to your export
{
path: '/login',
element: <Login />,
},
{
path: '/dashboard',
element: <Dashboard />,
},
{ path: '*', element: <Navigate to="/login" replace /> },
]);
1 change: 1 addition & 0 deletions frontend/src/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
21 changes: 21 additions & 0 deletions frontend/test/example.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { assert, expect, test } from 'vitest';

// Edit an assertion and save to see HMR in action

test('Math.sqrt()', () => {
expect(Math.sqrt(4)).toBe(2);
expect(Math.sqrt(144)).toBe(12);
expect(Math.sqrt(2)).toBe(Math.SQRT2);
});

test('JSON', () => {
const input = {
foo: 'hello',
bar: 'world',
};

const output = JSON.stringify(input);

expect(output).eq('{"foo":"hello","bar":"world"}');
assert.deepEqual(JSON.parse(output), input, 'matches original');
});
25 changes: 25 additions & 0 deletions frontend/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,

/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",

/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
10 changes: 10 additions & 0 deletions frontend/tsconfig.node.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
Loading

0 comments on commit 7185ca8

Please sign in to comment.