Update deps and cleanup - Next.js v14 Prep (#203)

* Most deps bumped to latest
* Node updated to use v20

.env

@@ -38,3 +38,4 @@ NEXT_PUBLIC_RECAPTCHA_SITE_KEY='6LdArl4gAAAAADf30J5nPO2hStNG8_IYrnl43RlT'
 NEXT_PUBLIC_SENTRY_DSN='https://b3dadbce4879487b90076bf1350f8534@o4504254488313856.ingest.sentry.io/4504254630461440'
 SENTRY_ORG='penny-bz'
 SENTRY_PROJECT='penny'
+SENTRY_IGNORE_API_RESOLUTION_ERROR='1'

.env-example

@@ -48,6 +48,4 @@ NEXT_PUBLIC_RECAPTCHA_SITE_KEY=''
 NEXT_PUBLIC_SENTRY_DSN=''
 SENTRY_ORG=''
 SENTRY_PROJECT=''
-
-# Suppresses some Sentry warnings that will be removed in future version - 1 or 0
 SENTRY_IGNORE_API_RESOLUTION_ERROR='1'

.env.local-example

@@ -16,6 +16,9 @@ NEXT_PUBLIC_SENTRY_DSN=''
 # Shopify Multipass
 SHOPIFY_MULTIPASS_SECRET=''
 
+# Sentry
+SENTRY_AUTH_TOKEN=''
+
 # Playwright URL for local runs
 PLAYWRIGHT_TEST_BASE_URL='http://127.0.0.1:3000'
 # Set a product name to use in your own tests

.eslintignore

@@ -2,9 +2,15 @@ src/types/takeshape.ts
 src/types/storefront.ts
 tsconfig.json
 package-lock.json
+public
+LICENSE
+.next
+playwright-report
+storybook-static
+countries.json
 !.takeshape
 !.storybook
 !.lighthouse
 !.jest
-public/sw.*
-public/workbox-*
+worker
+mocks

.eslintrc.json

@@ -3,55 +3,81 @@
     "json-format"
   ],
   "extends": [
+    "eslint:recommended",
     "next/core-web-vitals",
     "plugin:prettier/recommended"
   ],
-  "rules": {
-    "no-unreachable": "error",
-    "no-console": "error"
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "project": "tsconfig.json",
+    "sourceType": "module"
   },
   "overrides": [
     {
       "files": [
-        "**/*.test.*"
+        "**/*.{ts,tsx}"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "next/core-web-vitals",
+        "plugin:@typescript-eslint/recommended-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+        "plugin:prettier/recommended"
       ],
       "rules": {
-        "no-console": "off"
+        "@typescript-eslint/consistent-type-definitions": [
+          "error",
+          "type"
+        ],
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/prefer-nullish-coalescing": [
+          "error",
+          {
+            "ignoreTernaryTests": false,
+            "ignoreConditionalTests": true,
+            "ignoreMixedLogicalExpressions": true
+          }
+        ],
+        "@typescript-eslint/ban-ts-comment": "off"
       }
     },
     {
       "files": [
-        "scripts/**/*"
+        "**/*.stories.{ts,tsx}"
+      ],
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
+        "plugin:@typescript-eslint/stylistic-type-checked",
+        "plugin:prettier/recommended",
+        "plugin:storybook/recommended"
       ],
       "rules": {
-        "no-console": "off"
+        "@typescript-eslint/consistent-type-definitions": [
+          "error",
+          "type"
+        ],
+        "@typescript-eslint/no-explicit-any": "off"
       }
     },
     {
+      "files": [
+        "**/*.{md,mdx}"
+      ],
       "extends": [
+        "eslint:recommended",
+        "plugin:prettier/recommended",
         "plugin:mdx/recommended"
       ],
-      "files": [
-        "**/*.{mdx,md}"
-      ],
-      "rules": {
-        "indent": "off"
-      },
       "settings": {
-        "mdx/code-blocks": true,
+        "mdx/code-blocks": false,
         "mdx/language-mapper": {}
       }
-    },
-    {
-      "extends": [
-        "plugin:storybook/recommended"
-      ],
-      "files": [
-        "**/*.stories.*"
-      ]
     }
-  ],
-  "parserOptions": {
-    "ecmaVersion": 12
-  }
+  ]
 }

.gitignore

@@ -40,10 +40,6 @@ yarn-error.log*
 .takeshaperc
 .current-branch-url
 
-# cypress
-/cypress/videos
-/cypress/screenshots
-
 # build cache
 *.cache
 
@@ -65,6 +61,11 @@ src/types/storefront.ts
 /public/sw.*
 /public/workbox-*
 /public/worker-*
+
+# Playwright
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+# Sentry Config File
+.sentryclirc

.jest/jest.setup.js

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';

.node-version

@@ -1 +1 @@
-v18
+v20

.storybook/decorators/jotai/withJotai.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { AnyWritableAtom, InitialValues, JotaiTestProvider } from './JotaiTestProvider';
 
-export function withJotai(StoryFn, context) {
+export function withJotai(StoryFn: any, context: any) {
   const {
     parameters: { jotai }
   } = context;

.storybook/main.js

@@ -1,4 +1,5 @@
 const cwd = process.cwd();
+
 module.exports = {
   stories: ['../src/**/*.stories.@(tsx|mdx)'],
   addons: [

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 TakeShape Inc.
+Copyright (c) 2024 TakeShape Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -655,24 +655,29 @@ project name.
 
 ![A screenshot of the sentry settings page with the Client Keys (DSN) panel open](/readme-images/sentry/dsn-sentry.png)
 
-- Save your DSN. You can set it in your `.env.local` or your hosting provider's UI as the `NEXT_PUBLIC_SENTRY_DSN`
-  variable.
+- Save your DSN. You can set it in your `.env` or `.env.local` or your hosting provider's UI as
+  `NEXT_PUBLIC_SENTRY_DSN`.
 
-2. Find your sentry org slug.
+2. Create a Sentry auth token.
+
+- Head to **Settings**, then **Auth Tokens**.
+
+- Set the `SENTRY_AUTH_TOKEN` value in your `.env.local` or in your hosting provider's UI.
+
+3. Find your sentry org slug.
 
 - Head to **Settings**, then **General Settings**. At the top of the page you should see **Organization Slug**. Copy the
   value there.
 
-- Set this value in your `.env.local` or your hosting provider's UI as the `SENTRY_ORG` variable.
+- Set this value in your checked in `.env` file.
 
-3. Find your sentry project name.
+4. Find your sentry project name.
 
 - Head to **Settings**, then **Projects**. You'll see a list of projects. Select the Next.js project you want to use.
 
 - Under the **Project Details** section on the next page, you'll see a **Name** field. Copy that value.
 
-- Set the value from the **Name** field to the `SENTRY_PROJECT` variable in your `.env.local` or your hosting provider's
-  UI.
+- Set the value from the **Name** field to the `SENTRY_PROJECT` variable in your checked in `.env` file.
 
 ## Multipass
 
@@ -706,15 +711,21 @@ You can run and develop your Playwright tests locally using the following proces
 1. Work within the Playwright UI to run and debug your tests.
 
 ### CI
+
 Make sure you have set these environment variables in your repository:
+
 - `PLAYWRIGHT_TEST_BASE_URL` - this will be set automatically by the GitHub Actions workflow;
-- `PLAYWRIGHT_PRODUCT_NAME_INSTOCK`  - a product name to find in a collection and use in tests;
-- `PLAYWRIGHT_PRODUCT_SIZE_INSTOCK` and `PLAYWRIGHT_PRODUCT_COLOR_INSTOCK` - should be the combination of size and color for your `PLAYWRIGHT_PRODUCT_NAME_INSTOCK` product;
-- `PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK`  - a product name to find in a collection and use in tests;
-- `PLAYWRIGHT_PRODUCT_SIZE_OUTOFSTOCK` and `PLAYWRIGHT_PRODUCT_COLOR_OUTOFSTOCK` - should be the combination of size and color for your `PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK` product;
-- `PLAYWRIGHT_COLLECTION_NAME` - the name of the collection that your `PLAYWRIGHT_PRODUCT_NAME_INSTOCK` and `PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK` relate to;
+- `PLAYWRIGHT_PRODUCT_NAME_INSTOCK` - a product name to find in a collection and use in tests;
+- `PLAYWRIGHT_PRODUCT_SIZE_INSTOCK` and `PLAYWRIGHT_PRODUCT_COLOR_INSTOCK` - should be the combination of size and color
+  for your `PLAYWRIGHT_PRODUCT_NAME_INSTOCK` product;
+- `PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK` - a product name to find in a collection and use in tests;
+- `PLAYWRIGHT_PRODUCT_SIZE_OUTOFSTOCK` and `PLAYWRIGHT_PRODUCT_COLOR_OUTOFSTOCK` - should be the combination of size and
+  color for your `PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK` product;
+- `PLAYWRIGHT_COLLECTION_NAME` - the name of the collection that your `PLAYWRIGHT_PRODUCT_NAME_INSTOCK` and
+  `PLAYWRIGHT_PRODUCT_NAME_OUTOFSTOCK` relate to;
 - `PLAYWRIGHT_BRAND_NAME` - any brand name in your store;
-- `PLAYWRIGHT_USER_EMAIL` - test user email already registered in the system, it's used for authenticated feature testing like account settings, etc.;
+- `PLAYWRIGHT_USER_EMAIL` - test user email already registered in the system, it's used for authenticated feature
+  testing like account settings, etc.;
 - `PLAYWRIGHT_USER_PASSWORD` - test user password.
 
 # Deploying to production

codegen.storefront.config.js → codegen.storefront.config.ts

@@ -1,9 +1,17 @@
-require('dotenv').config();
+import { CodegenConfig } from '@graphql-codegen/cli';
+import dotenv from 'dotenv';
+import assert from 'node:assert';
+
+dotenv.config({ path: `.env` });
+dotenv.config({ path: `.env.local` });
 
 const shopifyStorefrontUrl = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_URL;
 const shopifyStorefrontToken = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN;
 
-module.exports = {
+assert(shopifyStorefrontUrl, 'NEXT_PUBLIC_SHOPIFY_STOREFRONT_URL is required');
+assert(shopifyStorefrontToken, 'NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN is required');
+
+const config: CodegenConfig = {
   overwrite: true,
   documents: 'src/**/queries.storefront.ts',
   schema: {
@@ -30,3 +38,5 @@ module.exports = {
     }
   }
 };
+
+export default config;

codegen.takeshape.config.js → codegen.takeshape.config.ts

@@ -1,9 +1,17 @@
-require('dotenv').config();
+import { CodegenConfig } from '@graphql-codegen/cli';
+import dotenv from 'dotenv';
+import assert from 'node:assert';
 
-const takeshapeApiUrl = process.env.NEXT_PUBLIC_BRANCH_TAKESHAPE_API_URL || process.env.NEXT_PUBLIC_TAKESHAPE_API_URL;
+dotenv.config({ path: `.env` });
+dotenv.config({ path: `.env.local` });
+
+const takeshapeApiUrl = process.env.NEXT_PUBLIC_BRANCH_TAKESHAPE_API_URL ?? process.env.NEXT_PUBLIC_TAKESHAPE_API_URL;
 const takeshapeAnonymousApiKey = process.env.NEXT_PUBLIC_TAKESHAPE_ANONYMOUS_API_KEY;
 
-module.exports = {
+assert(takeshapeApiUrl, 'NEXT_PUBLIC_TAKESHAPE_API_URL is required');
+assert(takeshapeAnonymousApiKey, 'NEXT_PUBLIC_TAKESHAPE_ANONYMOUS_API_KEY is required');
+
+const config: CodegenConfig = {
   overwrite: true,
   documents: ['src/**/queries.ts', 'src/**/queries.takeshape.ts'],
   schema: {
@@ -30,3 +38,5 @@ module.exports = {
     }
   }
 };
+
+export default config;

e2e/page-objects/account-page.ts

@@ -53,13 +53,13 @@ export class AccountPage {
     for (const item of navigationItems) {
       await expect(this.getNavigationItem(item)).toBeVisible();
     }
-    await expect(this.page.url()).toContain(ACCOUNT_PAGE_ENDPOINT);
+    expect(this.page.url()).toContain(ACCOUNT_PAGE_ENDPOINT);
   }
 
   async navigateToAccountPage() {
     await this.page.goto(ACCOUNT_PAGE_ENDPOINT);
     await expect(this.profileSection()).toBeVisible();
-    await expect(this.page.url()).toContain(ACCOUNT_PAGE_ENDPOINT);
+    expect(this.page.url()).toContain(ACCOUNT_PAGE_ENDPOINT);
   }
 
   async clearAllRequiredFieldsForProfile() {
@@ -75,7 +75,7 @@ export class AccountPage {
   async verifyPhoneNumberInputValue(text: string) {
     const inputValue = await this.profilePhoneNumberInput().getAttribute('value');
     if (inputValue) {
-      await expect(text).toBe(inputValue.replace(/\D/g, ''));
+      expect(text).toBe(inputValue.replace(/\D/g, ''));
     } else {
       throw new Error('Value is not defined.');
     }

e2e/tests/account-settings.spec.ts

@@ -1,7 +1,7 @@
-import { test } from '../fixtures';
 import { expect } from 'playwright/test';
 import { USER_EMAIL, USER_PASSWORD } from '../constants';
 import { getPassword } from '../fake-data-generation';
+import { test } from '../fixtures';
 
 test.describe('Account settings', () => {
   test.beforeEach('Sign in', async ({ signInPage }) => {
@@ -121,7 +121,7 @@ test.describe('Account settings', () => {
     });
 
     // TODO: need to register a new user for it
-    test.fixme('Verify the password can be changed successfully', async ({ accountPage, signInPage, page }) => {
+    test.fixme('Verify the password can be changed successfully', async ({ accountPage, signInPage }) => {
       const newPassword = getPassword();
 
       await test.step('Change password and sign in', async () => {

e2e/tests/home-page.spec.ts

@@ -1,6 +1,6 @@
+import { siteCopyrightText } from '@/config';
 import { expect, test } from '@playwright/test';
 import { HOMEPAGE_ENDPOINT } from '../constants';
-import { siteCopyrightText } from 'config';
 
 test.describe('Homepage', () => {
   test('Should load the homepage', async ({ page }) => {

e2e/tests/product-page.spec.ts

@@ -1,6 +1,4 @@
-import { test } from '../fixtures';
 import { expect } from 'playwright/test';
-import { getCollectionEndpoint } from '../utils';
 import {
   COLLECTION_NAME,
   PRODUCT_COLOR_INSTOCK,
@@ -10,9 +8,11 @@ import {
   USER_PASSWORD
 } from '../constants';
 import { getTextMessage } from '../fake-data-generation';
+import { test } from '../fixtures';
+import { getCollectionEndpoint } from '../utils';
 
 test.describe('Product page', () => {
-  test.beforeEach('Navigate to the product', async ({ page, productPage, collectionsPage }) => {
+  test.beforeEach('Navigate to the product', async ({ page, collectionsPage }) => {
     if (!COLLECTION_NAME) {
       test.skip(!COLLECTION_NAME, 'PLAYWRIGHT_COLLECTION_NAME was not defined');
       return;