Merge pull request #83 from world-wide-weights/feature/74-update-pack…

…ages-frontend

Feature/74 update packages frontend

frontend/cypress.d.ts

@@ -1,19 +1,15 @@
-// Code stolen from cypress docs
-// https://docs.cypress.io/api/commands/mount#Creating-a-New-cy-mount-Command
-
-
-// TODO: Move in cypress/
-
-import { mount } from "cypress/react";
-
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount;
-      dataCy(dataCy: string, customSelector?: string): Chainable<void>
-      visitLocalPage(path?: string, options?: Partial<Cypress.VisitOptions>): Chainable<void>
-      check404(): Chainable<void>
-      checkCurrentActivePage(activePageNumber: number): Chainable<void>
-    }
-  }
-}
+// Code stolen from cypress docs
+// https://docs.cypress.io/api/commands/mount#Creating-a-New-cy-mount-Command
+import { mount } from "cypress/react";
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+      dataCy(dataCy: string, customSelector?: string): Chainable<void>
+      visitLocalPage(path?: string, options?: Partial<Cypress.VisitOptions>): Chainable<void>
+      check404(): Chainable<void>
+      checkCurrentActivePage(activePageNumber: number): Chainable<void>
+    }
+  }
+}

frontend/package.json

@@ -11,11 +11,11 @@
     "test": "npx cypress open",
     "test:cli": "npx cypress run",
     "test-components:cli": "npx cypress run --component",
-    "mock-server": "json-server --watch mock/db.json --port=3004 --routes mock/routes.json --id slug"
+    "mock-server": "json-server --watch ./src/mock/db.json --port=3004 --routes ./src/mock/routes.json --id slug"
   },
   "dependencies": {
     "@next/font": "^13.0.3",
-    "material-symbols": "^0.2.15",
+    "material-symbols": "^0.4.0",
     "next": "^13.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
@@ -24,7 +24,7 @@
     "@svgr/webpack": "^6.5.1",
     "@types/node": "^18.11.9",
     "@types/react": "^18.0.25",
-    "@types/react-dom": "18.0.8",
+    "@types/react-dom": "^18.0.9",
     "autoprefixer": "^10.4.13",
     "concurrently": "^7.6.0",
     "cypress": "^11.0.1",
@@ -34,6 +34,6 @@
     "json-server": "^0.17.1",
     "postcss": "^8.4.19",
     "tailwindcss": "^3.2.3",
-    "typescript": "4.8.4"
+    "typescript": "^4.9.3"
   }
 }

frontend/components/Navbar/Navbar.tsx → frontend/src/components/Navbar/Navbar.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
-import logo from '../../public/logo.png'
+import logo from '../../../public/logo.png'
 import { routes } from '../../services/routes/routes'
 import { Button } from '../Button/Button'
 import { IconButton } from '../Button/IconButton'

frontend/index.d.ts → frontend/src/index.d.ts

@@ -1,7 +1,5 @@
 import "react";
 
-// TODO: move to src/
-
 declare module 'react' {
     export interface HTMLAttributes<T> {
         datacy?: string

frontend/pages/index.tsx → frontend/src/pages/index.tsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
-import { Button } from "../components/Button/Button";
 import { routes } from "../services/routes/routes";
+import { Button } from "../components/Button/Button";
 
 const Home = () => {
   return (

frontend/pages/weights/[slug].tsx → frontend/src/pages/weights/[slug].tsx

@@ -4,15 +4,6 @@ import Image from "next/image";
 import { Item } from ".";
 import { Tag } from "../../components/Tag/Tag";
 
-// TODO (Zoe-Bot): Adjust types when list page merged and when using weights of course xD
-type Todo = {
-    userId: number
-    id: number
-    title: string
-    completed: boolean
-}
-
-// TODO (Zoe-Bot): Adjust types when list page merged
 type WeightsSingleProps = {
     item: Item
 }
@@ -50,7 +41,7 @@ export default function WeightsSingle({ item }: InferGetServerSidePropsType<type
                 {/* Weights Image */}
                 < div className="row-start-1 lg:row-end-3 lg:flex lg:justify-end" >
                     {/* No better way yet: https://github.com/vercel/next.js/discussions/21379 Let's take a look at this when we got problems with it */}
-                    < Image src="https://picsum.photos/1200" priority className="sm:hidden rounded-xl" alt={item.name} width={120} height={120} />
+                    <Image src="https://picsum.photos/1200" priority className="sm:hidden rounded-xl" alt={item.name} width={120} height={120} />
                     <Image src="https://picsum.photos/1200" priority className="hidden sm:block rounded-xl" alt={item.name} width={230} height={230} />
                 </div >
             </div >

frontend/pages/weights/index.tsx → frontend/src/pages/weights/index.tsx

@@ -9,14 +9,6 @@ const DEFAULT_ITEMS_PER_PAGE = 16
 const ITEMS_PER_PAGE_MAXIMUM = 100
 const FIRST_PAGE = 1
 
-// As long as we do not have a weight. Let's work with Todo
-type Todo = {
-    userId: number
-    id: number
-    title: string
-    completed: boolean
-}
-
 export type Item = {
     id: number, // TODO: Change
     name: string

frontend/services/pagination/pagination.ts → frontend/src/services/pagination/pagination.ts

@@ -1,5 +1,5 @@
-import { RoutePagination } from "../routes/routes"
 import { range } from "../utils/range"
+import { RoutePagination } from "../routes/routes"
 
 export const Ellipsis = '...'
 

frontend/tailwind.config.js

@@ -2,7 +2,10 @@ const { fontFamily } = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}"],
+  content: [
+    "src/pages/**/*.{ts,tsx}",
+    "src/components/**/*.{ts,tsx}"
+  ],
   safelist: [
     {
       pattern: /bg-(.*)-(100|200|500)/,