Merge branch 'using-react' into devel

70cfc3f5 · Bernard Roland (Student Com20) · c0f2e85d · 3a4126a9 · 70cfc3f5 · 70cfc3f5
Commit 70cfc3f5 authored 3 years ago by Bernard Roland (Student Com20)
--- a/.gitignore
+++ b/.gitignore
+# vim / vscode workspace config
+.vim
+.vscode
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/client/.gitignore
+++ b/client/.gitignore
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+# testing
+/coverage
+# production
+/build
--- a/client/package.json
+++ b/client/package.json
+{
+    "name": "ryoko",
+    "version": "0.1.0",
+    "description": "Ryoko is a project planning tool build with developers in mind",
+    "repository": "https://gitlab.inf.unibz.it/Roland.Bernard/wie_202021_csbillero11.git/",
+    "author": "Roland Bernard <rolbernard@unibz.it>",
+    "license": "MIT",
+    "private": true,
+    "dependencies": {
+        "@testing-library/jest-dom": "^5.11.4",
+        "@testing-library/react": "^11.1.0",
+        "@testing-library/user-event": "^12.1.10",
+        "@types/jest": "^26.0.15",
+        "@types/node": "^12.0.0",
+        "@types/react": "^16.9.53",
+        "@types/react-dom": "^16.9.8",
+        "@types/react-router-dom": "^5.1.7",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-router-dom": "^5.2.0",
+        "react-scripts": "4.0.3",
+        "sass": "^1.32.8",
+        "typescript": "^4.0.3",
+        "web-vitals": "^0.2.4",
+        "workbox-background-sync": "^5.1.3",
+        "workbox-broadcast-update": "^5.1.3",
+        "workbox-cacheable-response": "^5.1.3",
+        "workbox-core": "^5.1.3",
+        "workbox-expiration": "^5.1.3",
+        "workbox-google-analytics": "^5.1.3",
+        "workbox-navigation-preload": "^5.1.3",
+        "workbox-precaching": "^5.1.3",
+        "workbox-range-requests": "^5.1.3",
+        "workbox-routing": "^5.1.3",
+        "workbox-strategies": "^5.1.3",
+        "workbox-streams": "^5.1.3"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}
--- a/client/public/favicon.ico
+++ b/client/public/favicon.ico
--- a/client/public/index.html
+++ b/client/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta name="theme-color" content="#000000" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description"
+        content="ryoko is a project planning tool created for developers to organize their tasks effectively">
+    <meta name="name" content="ryoko | plan your projects like a journey">
+    <meta property="og:title" content="Try planning your next project with ryoko!">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
+    <title>ryoko | plan your projects like a journey</title>
+</head>
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+</body>
+</html>
--- a/client/public/logo192.png
+++ b/client/public/logo192.png
--- a/client/public/logo192_maskable.png
+++ b/client/public/logo192_maskable.png
--- a/client/public/logo512.png
+++ b/client/public/logo512.png
--- a/client/public/manifest.json
+++ b/client/public/manifest.json
+{
+    "short_name": "ryoko",
+    "name": "ryoko | plan your projects like a journey",
+    "icons": [
+        {
+            "src": "favicon.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        },
+        {
+            "src": "logo192.png",
+            "type": "image/png",
+            "sizes": "192x192"
+        },
+        {
+            "src": "logo512.png",
+            "type": "image/png",
+            "sizes": "512x512"
+        },
+        {
+            "src": "logo192_maskable.png",
+            "type": "image/png",
+            "sizes": "192x192",
+            "purpose": "any maskable"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+}
--- a/client/public/robots.txt
+++ b/client/public/robots.txt
+User-agent: *
+Disallow:
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
+import { Suspense, lazy } from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { isLoggedIn } from 'adapters/api';
+const Home = lazy(() => import('pages/Home'));
+const Login = lazy(() => import('pages/Login'));
+const Register = lazy(() => import('pages/Register'));
+const Tasks = lazy(() => import('pages/Tasks'));
+const Navigation = lazy(() => import('components/ui/Navigation'));
+export default function App() {
+    return (
+        <Router>
+            <Suspense fallback={false}>
+                {isLoggedIn() && <Navigation />}
+                <Switch>
+                    {!isLoggedIn() && <Route path="/register" component={Register} />}
+                    {!isLoggedIn() && <Route exact path="/" component={Home} />}
+                    {!isLoggedIn() && <Route path="/" component={Login} />}
+                    <Route path="/" component={Tasks} />
+                </Switch>
+            </Suspense>
+        </Router>
+    );
+}
--- a/client/src/adapters/api.ts
+++ b/client/src/adapters/api.ts
+export const isLoggedIn = (): boolean => false;
--- a/client/src/adapters/constants.ts
+++ b/client/src/adapters/constants.ts
+export const DEMO_CONSTANT = 42;
--- a/client/src/components/graphs/CircularProgress/circular-progress.scss
+++ b/client/src/components/graphs/CircularProgress/circular-progress.scss
+.circular-progress {
+    path {
+        stroke-width: 8;
+        stroke-linecap: round;
+        stroke: url(#gradient);
+        fill: none;
+    }
+    circle {
+        fill: none;
+        stroke: #dcdcdc;
+        stroke-width: 8;
+    }
+}
--- a/client/src/components/graphs/CircularProgress/index.tsx
+++ b/client/src/components/graphs/CircularProgress/index.tsx
+import './circular-progress.scss';
+const CIRCLE_RADUIS = 30;
+const CIRCLE_CENTER = [ 35, 35 ];
+interface Props {
+    percent: number
+}
+export default function CircularProgress({ percent }: Props) {
+    const angle = Math.min(Math.max(percent / 100, 0), 0.99) * 2 * Math.PI;
+    const largeFlag = angle > Math.PI ? 1 : 0;
+    const xEndPosition = CIRCLE_CENTER[0] + CIRCLE_RADUIS * Math.cos(angle - Math.PI / 2);
+    const yEndPosition = CIRCLE_CENTER[1] + CIRCLE_RADUIS * Math.sin(angle - Math.PI / 2);
+    return (
+        <div className="circular-progress">
+            <span className="percent">{percent} %</span>
+            <svg>
+                <circle cx={CIRCLE_CENTER[0]} cy={CIRCLE_CENTER[1]} r={CIRCLE_RADUIS} />
+                <path d={
+                    `M ${CIRCLE_CENTER[0]} ${CIRCLE_CENTER[1] - CIRCLE_RADUIS}`
+                    + `A ${CIRCLE_RADUIS} ${CIRCLE_RADUIS} 0 ${largeFlag} 1 ${xEndPosition} ${yEndPosition}`
+                }></path>
+                <defs>
+                    <linearGradient xmlns="http://www.w3.org/2000/svg" id="gradient"
+                        x1="37.0361" y1="73.1719" x2="36.5" y2="0.500001"
+                        gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#AC42FF" />
+                        <stop offset="1" stopColor="#F15154" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </div>
+    );
+}
--- a/client/src/components/ui/Button/button.scss
+++ b/client/src/components/ui/Button/button.scss
+@use 'styles/settings';
+@use 'styles/functions';
+.button {
+    padding: 14px 50px;
+    font-size: functions.toRem(18);
+    font-weight: settings.$weight-bold;
+    background: radial-gradient(60% 100% at 50% 0%, #D298FF 0%, settings.$primary 100%);
+    box-shadow: 0px 5px 15px rgba(settings.$primary, 0.25);
+    border-radius: 25px;
+    display: inline-block;
+    color: settings.$white;
+    text-transform: uppercase;
+    user-select: none;
+    appearance: none;
+    border: none;
+    &:hover,
+    &:focus {
+        box-shadow: 0px 10px 25px rgba(settings.$primary, 0.35);
+        cursor: pointer;
+        color: settings.$white;
+        transform: translateY(-5%);
+    }
+    &:active {
+        transform: scale(0.9);
+    }
+}
--- a/client/src/components/ui/Button/index.tsx
+++ b/client/src/components/ui/Button/index.tsx
+import { ReactNode } from "react";
+import './button.scss';
+interface Props {
+    children: ReactNode;
+    type?: "button" | "submit" | "reset";
+    className?: string;
+}
+export default function Button({children, type, className}: Props) {
+    return (
+        <button className={"button " + (className || '')} type={type}>
+            {children}
+        </button>
+    );
+}
--- a/client/src/components/ui/ButtonLink/button-link.scss
+++ b/client/src/components/ui/ButtonLink/button-link.scss
+@use 'styles/settings';
+.button.button-link {
+    padding: 0;
+    a {
+        display: inline-block;
+        padding: 14px 50px;
+        &, &:hover, &:active, &:focus {
+            color: settings.$white;
+        }
+    }
+}
--- a/client/src/components/ui/ButtonLink/index.tsx
+++ b/client/src/components/ui/ButtonLink/index.tsx
+import { ReactNode } from "react";
+import {Link} from "react-router-dom";
+import './button-link.scss';
+import Button from "../Button";
+interface Props {
+    children: ReactNode;
+    href: string;
+    routing?: boolean;
+}
+export default function ButtonLink({children, href, routing}: Props) {
+    return (
+        <Button className="button-link">
+            { routing
+                ? <Link to={href}>{children}</Link>
+                : <a href={href}>{children}</a>
+            }
+        </Button>
+    );
+}
--- a/client/src/components/ui/Navigation/index.tsx
+++ b/client/src/components/ui/Navigation/index.tsx
+import './navigation.scss';
+export default function Navigation() {
+    return (
+        <main>
+            <h1>Navigation</h1>
+        </main>
+    );
+}
\ No newline at end of file