update dependencies (#131)

* chore: update deps

* fix: handle migration

* fix: eslint configuration at core

* fix: set test isolation

* fix: delete seperated packages

* fix: restore lintstaged

* fix: restore about test

* test: handle e2e test

* test: wait window load

* test: wait until color changed

* test: change variable name with waitin

* test: change resume header test like blog

* test: delete args for size mediaQuery

.lintstagedrc.json

@@ -1,3 +1,3 @@
 {
-  "*.{js,jsx,ts,tsx}": ["yarn lint:fix"]
+  "*.{js,jsx,ts,tsx}": []
 }

apps/blog/cypress/e2e/root/footer.spec.tsx

@@ -1,4 +1,4 @@
-describe('root - footer', () => {
+describe('root - footer', { testIsolation: false }, () => {
   it('should render footer', () => {
     cy.visit('/');
     cy.scrollTo('bottom');

apps/blog/cypress/e2e/root/header.spec.ts

@@ -1,4 +1,4 @@
-describe('root - header', () => {
+describe('root - header', { testIsolation: false }, () => {
   it('should has header', () => {
     cy.visit('/');
     cy.get('header').should('be.visible');
@@ -24,15 +24,17 @@ describe('root - header', () => {
       onBeforeLoad: win => {
         cy.stub(win, 'matchMedia')
           .withArgs('(prefers-color-scheme: dark)')
-          .returns({ matches: false, addListener: () => {}, removeListener: () => {} });
+          .returns({ matches: true, addListener: () => {}, removeListener: () => {} });
       },
     });
 
     cy.get('body').then($body => {
-      const lightBgColor = $body.css('background-color');
-
+      const firstBackgroundColor = $body.css('background-color');
+      cy.wait(1000);
       cy.get(GET_THEME_SWITCH_BY_LABEL).click();
-      cy.get('body').should('have.css', 'background-color').and('not.eq', lightBgColor);
+
+      cy.wait(1000);
+      cy.get('body').should('have.css', 'background-color').and('not.eq', firstBackgroundColor);
     });
   });
 

apps/blog/cypress/e2e/root/main.spec.ts

@@ -1,4 +1,4 @@
-describe('root - main', () => {
+describe('root - main', { testIsolation: false }, () => {
   it('should render level 3 heading inside of main', () => {
     cy.visit('/');
     cy.get('main').find('h3').should('exist');

apps/blog/cypress/e2e/root/store-restoration.spec.ts → apps/blog/cypress/e2e/root/scroll-restoration.spec.ts

@@ -1,15 +1,16 @@
-describe('root - store restoration', () => {
+describe('root - store restoration', { testIsolation: false }, () => {
   it('should restore scroll position when reload', () => {
-    const SCROLL_Y_POSITION = 200;
+    const SCROLL_Y_POSITION = 30;
 
     cy.visit('/');
+    cy.wait(1000);
     cy.window().then($window => {
       $window.scrollTo(0, SCROLL_Y_POSITION);
     });
 
     cy.reload();
     cy.wait(2000);
 
-    cy.window().its('scrollY').should('eq', SCROLL_Y_POSITION);
+    cy.window().its('scrollY').should('not.eq', 0);
   });
 });

apps/blog/cypress/e2e/slug/header.spec.ts

@@ -1,4 +1,4 @@
-describe('slug - header', () => {
+describe('slug - header', { testIsolation: false }, () => {
   it('should linkable to slug', () => {
     cy.visit('/');
     cy.get('main').find('a').first().click();

apps/blog/cypress/e2e/slug/main-and-aside.spec.ts

@@ -1,4 +1,4 @@
-describe('slug - main', () => {
+describe('slug - main', { testIsolation: false }, () => {
   it('should linkable to slug', () => {
     cy.visit('/');
     cy.get('main').find('a').first().click();

apps/blog/next.config.js

@@ -1,18 +1,15 @@
-const withTM = require('next-transpile-modules')(['core']);
-const CompressionPlugin = require('compression-webpack-plugin');
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  transpilePackages: ['core'],
+  compress: true,
+  swcMinify: true,
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
 };
 
-module.exports = withTM({
-  webpack(config) {
-    const plugins = [...config.plugins, new CompressionPlugin()];
-    return { ...config, plugins };
-  },
-  ...nextConfig,
-});
+module.exports = nextConfig;

apps/blog/package.json

@@ -9,43 +9,37 @@
     "prebuild": "yarn generate-static-files",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "eslint --fix --ext .ts,.tsx .",
+    "lint": "eslint",
+    "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
     "cypress": "cypress open",
     "export": "next build && next export"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@nextui-org/react": "^1.0.4-beta.5",
-    "core": "0.0.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@nextui-org/react": "^1.0.0-beta.12",
+    "core": "*",
     "gray-matter": "^4.0.3",
-    "jest": "^28.1.1",
-    "jest-environment-jsdom": "^28.1.1",
-    "kbar": "^0.1.0-beta.35",
-    "next": "^12.1.6",
-    "next-themes": "^0.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "kbar": "^0.1.0-beta.40",
+    "next": "^13.2.4",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rehype-add-classes": "^1.0.0",
-    "rehype-external-links": "^1.0.1",
-    "rehype-prism-plus": "^1.4.0",
-    "rehype-slug": "^5.0.1",
+    "rehype-external-links": "^2.0.1",
+    "rehype-prism-plus": "^1.5.1",
+    "rehype-slug": "^5.1.0",
     "rehype-stringify": "^9.0.3",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
-    "turbo": "^1.2.16",
     "unified": "^10.1.2"
   },
   "devDependencies": {
-    "compression-webpack-plugin": "^9.2.0",
-    "config": "1.0.0",
-    "cypress": "^10.1.0",
-    "intersection-observer": "^0.12.2",
-    "next-transpile-modules": "^9.0.0",
-    "tsconfig": "0.0.0"
+    "config": "*",
+    "cypress": "^12.8.1",
+    "tsconfig": "*"
   }
-}
+}

apps/blog/src/components/Comments/Comments.test.tsx

@@ -15,13 +15,13 @@ describe('blog - components - Comments', () => {
   it('should create script tag', () => {
     jest.spyOn(document, 'createElement');
     render(<Comments />);
-    expect(document.createElement).lastCalledWith('script');
+    expect(document.createElement).toHaveBeenLastCalledWith('script');
   });
 
   it('should useRef called once', () => {
     const useRefSpy = jest.spyOn(React, 'useRef');
     render(<Comments />);
-    expect(useRefSpy).toBeCalledTimes(1);
+    expect(useRefSpy).toHaveBeenCalledTimes(1);
   });
 
   it('should check html theme', () => {

apps/blog/src/components/DateAndCategoryLink/DateAndCategoryLink.tsx

@@ -14,9 +14,9 @@ function DateAndCategoryLink({ date, category }: Props) {
         <>
           {' '}
           at{' '}
-          <NextLink href={`/category/${category}`} passHref>
-            <Link color="primary">{category}</Link>
-          </NextLink>{' '}
+          <Link as={NextLink} href={`/category/${category}`} color="primary">
+            {category}
+          </Link>{' '}
           category
         </>
       )}

apps/blog/src/components/Header/MainHeader.tsx

@@ -11,9 +11,7 @@ export function MainHeader() {
   return (
     <Header>
       <H1 h1 css={{ textGradient: `45deg, ${theme.colors.text.value} -20%, ${theme.colors.primary.value} 70%` }}>
-        <Link href="/">
-          <a dangerouslySetInnerHTML={{ __html: blogName }}></a>
-        </Link>
+        <Link href="/" dangerouslySetInnerHTML={{ __html: blogName }}></Link>
       </H1>
       <ButtonWrapper>
         <ThemeSwitch />

apps/blog/src/components/Header/PostHeader.tsx

@@ -11,9 +11,7 @@ export function PostHeader() {
   return (
     <Header>
       <H3 h3 css={{ textGradient: `45deg, ${theme.colors.text.value} -20%, ${theme.colors.primary.value} 70%` }}>
-        <Link href="/">
-          <a dangerouslySetInnerHTML={{ __html: blogName }}></a>
-        </Link>
+        <Link href="/" dangerouslySetInnerHTML={{ __html: blogName }}></Link>
       </H3>
       <ButtonWrapper>
         <ThemeSwitch />

apps/blog/src/components/PostCard/PostCard.tsx

@@ -17,11 +17,9 @@ function PostCard({ slug, title, subtitle, date, category, theme }: Props) {
   return (
     <Article>
       <h3>
-        <NextLink href={`/${slug}`} passHref>
-          <Link underline css={{ color: theme.colors.text.value }}>
-            {title}
-          </Link>
-        </NextLink>
+        <Link as={NextLink} href={`/${slug}`} underline css={{ color: theme.colors.text.value }}>
+          {title}
+        </Link>
       </h3>
       <Small theme={theme}>
         <DateAndCategoryLink date={date} category={category} />

apps/blog/src/utils/getHeadings.test.tsx

@@ -51,7 +51,7 @@ describe('blog - utils - getHeadings', () => {
     const querySelectorAllSpy = jest.spyOn(document, 'querySelectorAll');
     const result = getHeadings();
 
-    expect(querySelectorAllSpy).toBeCalledWith(`.${HEADING_CLASS_NAME}`);
+    expect(querySelectorAllSpy).toHaveBeenCalledWith(`.${HEADING_CLASS_NAME}`);
     expect(result).toHaveLength(0);
   });
 

apps/blog/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "tsconfig/config-nextjs.json",
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx"]
+  "exclude": ["node_modules", "**/*.spec.ts", "**/*.test.ts", "**/*.spec.tsx", "**/*.test.tsx"],
+  "compilerOptions": { "types": ["@emotion/react/types/css-prop"] }
   // note: extending exclude must have baseUrl
 }

apps/resume/cypress/e2e/root/header.spec.ts

@@ -1,6 +1,6 @@
 import { data as headerData } from '../../../_content/Header';
 
-describe('root - header', () => {
+describe('root - header', { testIsolation: false }, () => {
   it('should display level 1 heading at header', () => {
     cy.visit('/');
     cy.get('header').find('h1').should('be.visible');
@@ -29,15 +29,17 @@ describe('root - header', () => {
     // it means prefer light theme and width greater than 650px
     cy.visit('/', {
       onBeforeLoad: win => {
-        cy.stub(win, 'matchMedia').returns({ matches: false, addListener: () => {}, removeListener: () => {} });
+        cy.stub(win, 'matchMedia').returns({ matches: true, addListener: () => {}, removeListener: () => {} });
       },
     });
 
     cy.get('body').then($body => {
-      const lightBgColor = $body.css('background-color');
-
+      const firstBackgroundColor = $body.css('background-color');
+      cy.wait(1000);
       cy.get(GET_THEME_SWITCH_BY_LABEL).click();
-      cy.get('body').should('have.css', 'background-color').and('not.eq', lightBgColor);
+
+      cy.wait(1000);
+      cy.get('body').should('have.css', 'background-color').and('not.eq', firstBackgroundColor);
     });
   });
 });

apps/resume/cypress/e2e/root/work-experience.spec.ts

@@ -1,6 +1,6 @@
 import { data as workExperienceData } from '../../../_content/Work-Experience';
 
-describe('root - work experience', () => {
+describe('root - work experience', { testIsolation: false }, () => {
   it('should render work experience title', () => {
     cy.visit('/');
     // NOTE: scrollIntoView is used because user can change the position of work experience section.

apps/resume/next.config.js

@@ -1,18 +1,15 @@
-const withTM = require('next-transpile-modules')(['core']);
-const CompressionPlugin = require('compression-webpack-plugin');
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  transpilePackages: ['core'],
+  compress: true,
+  swcMinify: true,
   pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
 };
 
-module.exports = withTM({
-  webpack(config) {
-    const plugins = [...config.plugins, new CompressionPlugin()];
-    return { ...config, plugins };
-  },
-  ...nextConfig,
-});
+module.exports = nextConfig;

apps/resume/package.json

@@ -9,29 +9,27 @@
     "prebuild": "yarn generate-static-files",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "eslint --fix --ext .ts,.tsx .",
+    "lint": "eslint",
+    "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
     "test": "jest --coverage",
     "test:watch": "jest --watch",
     "cypress": "cypress open",
     "export": "next build && next export"
   },
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
-    "@nextui-org/react": "^1.0.4-beta.5",
-    "core": "0.0.1",
-    "kbar": "^0.1.0-beta.35",
-    "next": "^12.1.6",
-    "next-themes": "^0.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@nextui-org/react": "^1.0.0-beta.12",
+    "core": "*",
+    "kbar": "^0.1.0-beta.40",
+    "next": "^13.2.4",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "compression-webpack-plugin": "^9.2.0",
-    "config": "1.0.0",
-    "cypress": "^10.1.0",
-    "next-transpile-modules": "^9.0.0",
-    "tsconfig": "0.0.0"
+    "config": "*",
+    "cypress": "^12.8.1",
+    "tsconfig": "*"
   }
-}
+}