Update versions and fix small issues (#63)

* Update README.md * Update NextJS 11 and other deps * Fix prettier issues with the new update * Update code with the new Next conformance via eslint * Add setImmediate polyfill to MSW * Add eslint-next * Use lighter react-docgen inside Storybook until they fix TypeScript compatibility See more: styleguidist/react-docgen-typescript#356
Won-Games · Jun 16, 2021 · aacad9e · aacad9e
1 parent 6f2b518
commit aacad9e
Show file tree

Hide file tree

Showing 17 changed files with 1,980 additions and 1,217 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,7 +15,8 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:@next/next/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {

diff --git a/.jest/server.mock.ts b/.jest/server.mock.ts
@@ -1,3 +1,4 @@
+import 'setimmediate'
 global.fetch = require('node-fetch')
 
 import { server } from '../src/utils/mockServer/server'

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,9 @@
 module.exports = {
   stories: ['../src/components/**/stories.tsx'],
   addons: ['@storybook/addon-essentials'],
+  typescript: {
+    reactDocgen: 'react-docgen'
+  },
   webpackFinal: (config) => {
     config.resolve.modules.push(`${process.cwd()}/src`)
     return config

diff --git a/README.md b/README.md
@@ -16,6 +16,7 @@ This project uses lot of stuff as:
 - [Eslint](https://eslint.org/)
 - [Prettier](https://prettier.io/)
 - [Husky](https://github.com/typicode/husky)
+- [Cypress](https://www.cypress.io/)
 
 ## Getting Started
 

diff --git a/next.config.js b/next.config.js
@@ -9,8 +9,5 @@ module.exports = withPWA({
   },
   images: {
     domains: ['localhost', 'res.cloudinary.com']
-  },
-  future: {
-    webpack5: true
   }
 })
diff --git a/package.json b/package.json
@@ -36,71 +36,74 @@
     ]
   },
   "dependencies": {
-    "@apollo/client": "^3.3.15",
-    "@stripe/react-stripe-js": "^1.4.0",
-    "@stripe/stripe-js": "^1.14.0",
-    "@styled-icons/boxicons-regular": "^10.23.0",
-    "@styled-icons/boxicons-solid": "^10.23.0",
-    "@styled-icons/fa-brands": "^10.26.0",
-    "@styled-icons/material-outlined": "^10.28.0",
+    "@apollo/client": "^3.3.20",
+    "@stripe/react-stripe-js": "^1.4.1",
+    "@stripe/stripe-js": "^1.15.0",
+    "@styled-icons/boxicons-regular": "^10.34.0",
+    "@styled-icons/boxicons-solid": "^10.34.0",
+    "@styled-icons/fa-brands": "^10.34.0",
+    "@styled-icons/material-outlined": "^10.34.0",
     "@styled-icons/remix-fill": "^10.18.0",
     "@types/lodash.xor": "^4.5.6",
-    "dotenv": "^8.2.0",
+    "dotenv": "^10.0.0",
     "graphql": "^15.5.0",
     "joi": "^17.4.0",
     "lodash.xor": "^4.5.0",
-    "next": "10.2.0",
-    "next-auth": "^3.19.2",
-    "next-pwa": "^5.2.15",
-    "next-seo": "^4.24.0",
-    "nextjs-progressbar": "^0.0.9",
-    "polished": "^4.1.2",
+    "next": "11.0.0",
+    "next-auth": "^3.27.0",
+    "next-pwa": "^5.2.21",
+    "next-seo": "^4.25.1",
+    "nextjs-progressbar": "^0.0.10",
+    "polished": "^4.1.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-slick": "^0.28.1",
     "storybook-addon-next-router": "^2.0.4",
-    "styled-components": "5.2.3",
+    "styled-components": "5.3.0",
     "styled-media-query": "^2.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-typescript": "^7.13.0",
-    "@babel/runtime": "^7.13.17",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-typescript": "^7.14.5",
+    "@babel/runtime": "^7.14.6",
     "@jackfranklin/test-data-bot": "^1.3.0",
+    "@next/eslint-plugin-next": "^11.0.0",
     "@storybook/addon-essentials": "6.2.9",
     "@storybook/react": "6.2.9",
     "@testing-library/cypress": "^7.0.6",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.2",
-    "@testing-library/user-event": "^13.1.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^7.0.0",
+    "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.23",
-    "@types/node": "^15.0.1",
-    "@types/react": "^17.0.4",
+    "@types/node": "^15.12.2",
+    "@types/react": "^17.0.11",
     "@types/react-slick": "^0.23.4",
-    "@types/styled-components": "^5.1.9",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "apollo": "^2.32.10",
+    "@types/styled-components": "^5.1.10",
+    "@typescript-eslint/eslint-plugin": "^4.27.0",
+    "@typescript-eslint/parser": "^4.27.0",
+    "apollo": "^2.33.4",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.12.0",
-    "cypress": "^7.2.0",
+    "cypress": "^7.5.0",
     "cypress-plugin-stripe-elements": "^1.0.1",
-    "eslint": "^7.25.0",
+    "eslint": "^7.28.0",
+    "eslint-config-next": "^11.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-cypress": "^2.11.3",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^6.0.0",
-    "jest": "^26.6.3",
+    "jest": "^27.0.4",
     "jest-styled-components": "^7.0.4",
-    "lint-staged": "^10.5.4",
-    "msw": "^0.28.2",
+    "lint-staged": "^11.0.0",
+    "msw": "^0.29.0",
     "node-fetch": "^2.6.1",
     "plop": "^2.7.4",
-    "prettier": "^2.2.1",
-    "start-server-and-test": "^1.12.3",
-    "typescript": "^4.2.4"
+    "prettier": "^2.3.1",
+    "setimmediate": "^1.0.5",
+    "start-server-and-test": "^1.12.5",
+    "typescript": "^4.3.2"
   }
 }
diff --git a/src/components/Banner/__snapshots__/test.tsx.snap b/src/components/Banner/__snapshots__/test.tsx.snap
@@ -72,11 +72,11 @@ exports[`<Banner /> should render correctly 1`] = `
 }
 
 @media (max-width:1170px) {
-  .c0 .sc-bdvvaa {
+  .c0 .sc-bdnxRM {
     right: 0;
   }
 
-  .c0 .sc-bdvvaa::before {
+  .c0 .sc-bdnxRM::before {
     display: none;
   }
 }
@@ -156,4 +156,4 @@ exports[`<Banner /> should render correctly 1`] = `
     </a>
   </div>
 </main>
-`
+`;
diff --git a/src/components/CartList/__snapshots__/test.tsx.snap b/src/components/CartList/__snapshots__/test.tsx.snap
@@ -170,7 +170,9 @@ exports[`<CartList /> should render the cart list 1`] = `
         >
           <img
             alt="Red Dead Redemption 2"
+            height="70"
             src="https://source.unsplash.com/user/willianjusten/151x70"
+            width="150"
           />
         </div>
         <div
@@ -205,7 +207,9 @@ exports[`<CartList /> should render the cart list 1`] = `
         >
           <img
             alt="Borderlands 3"
+            height="70"
             src="https://source.unsplash.com/user/willianjusten/151x70"
+            width="150"
           />
         </div>
         <div

diff --git a/src/components/CartList/index.tsx b/src/components/CartList/index.tsx
@@ -37,7 +37,7 @@ const CartList = ({ hasButton = false }: CartListProps) => {
             <S.Total>{total}</S.Total>
 
             {hasButton && (
-              <Link href="/cart">
+              <Link href="/cart" passHref>
                 <Button as="a">Buy it now</Button>
               </Link>
             )}

diff --git a/src/components/Form/test.tsx b/src/components/Form/test.tsx
@@ -13,52 +13,52 @@ describe('<Form />', () => {
     )
 
     expect(container.parentElement).toMatchInlineSnapshot(`
-      .c0 .sc-jRQAMF {
-        margin: 0.8rem 0;
-      }
+.c0 .sc-jSFjdj {
+  margin: 0.8rem 0;
+}
 
-      .c0 .sc-gKckTs {
-        margin: 3.2rem auto 1.6rem;
-      }
+.c0 .sc-gKAaRy {
+  margin: 3.2rem auto 1.6rem;
+}
 
-      .c1 {
-        font-size: 1.4rem;
-        color: #030517;
-        text-align: center;
-      }
+.c1 {
+  font-size: 1.4rem;
+  color: #030517;
+  text-align: center;
+}
 
-      .c1 a {
-        color: #3CD3C1;
-        -webkit-text-decoration: none;
-        text-decoration: none;
-        border-bottom: 0.1rem solid #3CD3C1;
-        -webkit-transition: color,border,0.1s ease-in-out;
-        transition: color,border,0.1s ease-in-out;
-      }
+.c1 a {
+  color: #3CD3C1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  border-bottom: 0.1rem solid #3CD3C1;
+  -webkit-transition: color,border,0.1s ease-in-out;
+  transition: color,border,0.1s ease-in-out;
+}
 
-      .c1 a:hover {
-        color: #29b3a3;
-        border-bottom: 0.1rem solid #29b3a3;
-      }
+.c1 a:hover {
+  color: #29b3a3;
+  border-bottom: 0.1rem solid #29b3a3;
+}
 
-      <body>
-        <div>
-          <div
-            class="c0"
-          >
-            <div
-              class="c1"
-            >
-              My nice 
-              <a
-                href="#"
-              >
-                link
-              </a>
-            </div>
-          </div>
-        </div>
-      </body>
-    `)
+<body>
+  <div>
+    <div
+      class="c0"
+    >
+      <div
+        class="c1"
+      >
+        My nice 
+        <a
+          href="#"
+        >
+          link
+        </a>
+      </div>
+    </div>
+  </div>
+</body>
+`)
   })
 })
diff --git a/src/components/GameItem/index.tsx b/src/components/GameItem/index.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image'
 import { Download } from '@styled-icons/boxicons-solid/Download'
 import { useCart } from 'hooks/use-cart'
 
@@ -33,7 +34,7 @@ const GameItem = ({
     <S.Wrapper data-cy="game-item">
       <S.GameContent>
         <S.ImageBox>
-          <img src={img} alt={title} />
+          <Image src={img} alt={title} width={150} height={70} />
         </S.ImageBox>
 
         <S.Content>
@@ -64,7 +65,12 @@ const GameItem = ({
           <S.CardInfo>
             <span>{paymentInfo.number}</span>
             {!!paymentInfo.img && !!paymentInfo.flag && (
-              <img src={paymentInfo.img} alt={paymentInfo.flag} />
+              <Image
+                src={paymentInfo.img}
+                alt={paymentInfo.flag}
+                width={38}
+                height={24}
+              />
             )}
           </S.CardInfo>
         </S.PaymentContent>

diff --git a/src/components/GameItem/styles.ts b/src/components/GameItem/styles.ts
@@ -124,8 +124,8 @@ export const CardInfo = styled.div`
     display: flex;
     align-items: center;
 
-    img {
-      margin-left: ${theme.spacings.xxsmall};
+    span {
+      margin-right: ${theme.spacings.xxsmall};
     }
 
     ${media.lessThan('medium')`

diff --git a/src/components/TextContent/test.tsx b/src/components/TextContent/test.tsx
@@ -31,8 +31,9 @@ describe('<TextContent />', () => {
   it('should render the title and content', () => {
     render(<TextContent {...props} />)
 
-    const wrapper = screen.getByRole('heading', { name: /description/i })
-      .parentElement
+    const wrapper = screen.getByRole('heading', {
+      name: /description/i
+    }).parentElement
 
     expect(wrapper).toHaveStyle({
       color: '#FAFAFA' // theme.colors.white

diff --git a/src/hooks/use-wishlist/index.tsx b/src/hooks/use-wishlist/index.tsx
@@ -84,9 +84,10 @@ const WishlistProvider = ({ children }: WishlistProviderProps) => {
     setWishlistId(data?.wishlists[0]?.id)
   }, [data])
 
-  const wishlistIds = useMemo(() => wishlistItems.map((game) => game.id), [
-    wishlistItems
-  ])
+  const wishlistIds = useMemo(
+    () => wishlistItems.map((game) => game.id),
+    [wishlistItems]
+  )
 
   const isInWishlist = (id: string) =>
     wishlistItems.some((game) => game.id === id)

diff --git a/src/templates/Game/test.tsx b/src/templates/Game/test.tsx
@@ -99,8 +99,9 @@ describe('<Game />', () => {
   it('should render the cover image', () => {
     render(<Game {...props} />)
 
-    const cover = screen.getByRole('img', { name: /Borderlands 3/i })
-      .parentElement
+    const cover = screen.getByRole('img', {
+      name: /Borderlands 3/i
+    }).parentElement
 
     expect(cover).toHaveStyleRule('height', '70rem', {
       media: '(min-width: 768px)'

diff --git a/src/utils/apollo.ts b/src/utils/apollo.ts
@@ -46,9 +46,9 @@ export function initializeApollo(
 }
 
 export function useApollo(initialState = null, session?: Session) {
-  const store = useMemo(() => initializeApollo(initialState, session), [
-    initialState,
-    session
-  ])
+  const store = useMemo(
+    () => initializeApollo(initialState, session),
+    [initialState, session]
+  )
   return store
 }