Major dependency upgradation - inprogress

.babelrc

@@ -1,5 +1,4 @@
 {
-  "presets": ["next/babel"],
   "env": {
     "development": {
       "plugins": [["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]],
@@ -19,6 +18,20 @@
           }
         ]
       ]
+    },
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "targets": {
+              "node": "current"
+            }
+          }
+        ],
+        "@babel/preset-react",
+        "@babel/preset-typescript"
+      ]
     }
   },
   "plugins": [["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]]

.github/workflows/ci.yml

@@ -1,6 +1,6 @@
 name: Next.js Template CI
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - master
 
@@ -13,10 +13,10 @@ jobs:
         node-version: [20.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
@@ -28,7 +28,7 @@ jobs:
         run: yarn lint
 
       - name: Test and generate coverage report
-        uses: artiomtr/jest-coverage-report-action@v2.0-rc.1
+        uses: artiomtr/jest-coverage-report-action@v2.3.0
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           threshold: 80

.stylelintrc.json

@@ -0,0 +1,24 @@
+{
+  "customSyntax": "postcss-styled-syntax",
+  "extends": [
+    "stylelint-config-recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["**/*.scss"],
+      "customSyntax": "postcss-scss",
+      "rules": {
+        "at-rule-no-unknown": null
+      }
+    },
+    {
+      "files": ["**/*.{js,ts}"],
+      "rules": {
+        "at-rule-no-unknown": null
+      }
+    }
+  ],
+  "rules": {
+    "at-rule-no-unknown": null
+  }
+}

app/components/Clickable/tests/index.test.js

@@ -4,32 +4,34 @@
  *
  */
 
-import React from 'react';
-import { fireEvent } from '@testing-library/dom';
-import { renderProvider } from '@utils/testUtils';
-import Clickable from '../index';
+import React from 'react'
+import { fireEvent } from '@testing-library/dom'
+import { renderProvider } from '@utils/testUtils'
+import Clickable from '../index'
 
 describe('<Clickable /> component tests', () => {
   it('should render and match the snapshot', () => {
-    const { baseElement } = renderProvider(<Clickable />);
-    expect(baseElement).toMatchSnapshot();
-  });
+    const { baseElement } = renderProvider(<Clickable />)
+    expect(baseElement).toMatchSnapshot()
+  })
 
   it('should contain 1 Clickable component', () => {
-    const { getAllByTestId } = renderProvider(<Clickable />);
-    expect(getAllByTestId('clickable').length).toBe(1);
-  });
+    const { getAllByTestId } = renderProvider(<Clickable />)
+    expect(getAllByTestId('clickable').length).toBe(1)
+  })
 
   it('should contain render the text according to the textId', () => {
-    const { getAllByText } = renderProvider(<Clickable textId="repo_list" />);
-    expect(getAllByText(/Repository List/).length).toBe(1);
-  });
+    const { getAllByText } = renderProvider(<Clickable textId='repo_list' />)
+    expect(getAllByText(/Repository List/).length).toBe(1)
+  })
 
   it('should call the prop onClick when the clickable component is clicked', () => {
-    const clickSpy = jest.fn();
-    const { getAllByText, queryByText } = renderProvider(<Clickable onClick={clickSpy} textId="repo_list" />);
-    expect(getAllByText(/Repository List/).length).toBe(1);
-    fireEvent.click(queryByText(/Repository List/));
-    expect(clickSpy).toBeCalled();
-  });
-});
+    const clickSpy = jest.fn()
+    const { getAllByText, queryByText } = renderProvider(
+      <Clickable onClick={clickSpy} textId='repo_list' />
+    )
+    expect(getAllByText(/Repository List/).length).toBe(1)
+    fireEvent.click(queryByText(/Repository List/))
+    expect(clickSpy).toHaveBeenCalled()
+  })
+})

app/components/ErrorState/tests/__snapshots__/index.test.js.snap

@@ -7,14 +7,14 @@ exports[`<ErrorState /> should render and match the snapshot 1`] = `
   color: grey;
 }
 
-.emotion-1 {
+.emotion-2 {
   white-space: pre-line;
 }
 
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered emotion-0"
+      class="ant-card ant-card-bordered emotion-0 emotion-1"
       color="grey"
       data-testid="error-state"
     >
@@ -35,7 +35,7 @@ exports[`<ErrorState /> should render and match the snapshot 1`] = `
         class="ant-card-body"
       >
         <span
-          class="emotion-1"
+          class="emotion-2"
           data-testid="text"
         >
           Search for a repository by entering it's name in the search box

app/components/ErrorState/tests/index.test.js

@@ -4,19 +4,21 @@
  *
  */
 
-import React from 'react';
+import React from 'react'
 // import { fireEvent } from '@testing-library/dom'
-import { renderProvider } from '@utils/testUtils';
-import ErrorState from '../index';
+import { renderProvider } from '@utils/testUtils'
+import ErrorState from '../index'
 
 describe('<ErrorState />', () => {
   it('should render and match the snapshot', () => {
-    const { baseElement } = renderProvider(<ErrorState />);
-    expect(baseElement).toMatchSnapshot();
-  });
+    const { baseElement } = renderProvider(<ErrorState />)
+    expect(baseElement).toMatchSnapshot()
+  })
 
   it('should contain 1 ErrorState component', () => {
-    const { getAllByTestId } = renderProvider(<ErrorState repoError="failure" />);
-    expect(getAllByTestId('error-state').length).toBe(1);
-  });
-});
+    const { getAllByTestId } = renderProvider(
+      <ErrorState repoError='failure' />
+    )
+    expect(getAllByTestId('error-state').length).toBe(1)
+  })
+})

app/components/If/index.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line
 import Proptypes from 'prop-types';
 const If = (props) => (props.condition ? props.children : props.otherwise);
 If.propsTypes = {

app/components/If/tests/index.test.js

@@ -1,36 +1,36 @@
-import React from 'react';
-import If from '../index';
-import { renderProvider } from '@utils/testUtils';
+import React from 'react'
+import If from '../index'
+import { renderProvider } from '@utils/testUtils'
 
 describe('<If />', () => {
   it('Should renderProvider and match the snapshot', () => {
-    const { baseElement } = renderProvider(<If />);
-    expect(baseElement).toMatchSnapshot();
-  });
+    const { baseElement } = renderProvider(<If />)
+    expect(baseElement).toMatchSnapshot()
+  })
 
   it('should enter the true branch', () => {
     const { container } = renderProvider(
       <If condition={true} otherwise={<div />}>
         <span />
       </If>
-    );
+    )
     expect(container).toMatchInlineSnapshot(`
       <div>
         <span />
       </div>
-    `);
-  });
+    `)
+  })
 
   it('should enter the false branch', () => {
     const { container } = renderProvider(
       <If condition={false} otherwise={<div />}>
         <span />
       </If>
-    );
+    )
     expect(container).toMatchInlineSnapshot(`
       <div>
         <div />
       </div>
-    `);
-  });
-});
+    `)
+  })
+})

app/components/Meta/tests/index.test.js

@@ -4,13 +4,13 @@
  *
  */
 
-import React from 'react';
-import { renderProvider } from '@utils/testUtils';
-import Meta from '../index';
+import React from 'react'
+import { renderProvider } from '@utils/testUtils'
+import Meta from '../index'
 
 describe('<Meta />', () => {
   it('should render and match the snapshot', () => {
-    const { baseElement } = renderProvider(<Meta />);
-    expect(baseElement).toMatchSnapshot();
-  });
-});
+    const { baseElement } = renderProvider(<Meta />)
+    expect(baseElement).toMatchSnapshot()
+  })
+})