chore: update styled components

Author: iacopolea

package.json

@@ -35,7 +35,8 @@
     "react-router-dom": "^6.2.2",
     "react-scripts": "4.0.3",
     "react-scroll": "^1.8.7",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"
@@ -71,6 +72,8 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@craco/craco": "6.4.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
@@ -81,7 +84,6 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-scroll": "^1.8.3",
     "@types/react-transition-group": "^4.4.5",
-    "@types/styled-components": "^5.1.24",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
     "cz-conventional-changelog": "3.3.0",

src/common/components/BugDetail/AnchorButtons.tsx

@@ -43,7 +43,7 @@ export const AnchorButtons = ({
             placement="bottom"
             type="light"
             size="medium"
-            onClick={(e) => {
+            onClick={(e: { stopPropagation: () => void }) => {
               e.stopPropagation();
             }}
           >
@@ -69,7 +69,7 @@ export const AnchorButtons = ({
           placement="bottom"
           type="light"
           size="medium"
-          onClick={(e) => {
+          onClick={(e: { stopPropagation: () => void }) => {
             e.stopPropagation();
           }}
         >
@@ -94,7 +94,7 @@ export const AnchorButtons = ({
           placement="bottom"
           type="light"
           size="medium"
-          onClick={(e) => {
+          onClick={(e: { stopPropagation: () => void }) => {
             e.stopPropagation();
           }}
         >

src/pages/Bugs/Content/BugsTable/utils/mapBugsToTableData.tsx

@@ -14,11 +14,10 @@ import { getCustomStatusInfo } from 'src/common/components/utils/getCustomStatus
 import { BugTitle } from '../components/BugTitle';
 import { TableBugType } from '../../../types';
 
-const AlignmentDiv = styled.div`
+const AlignmentDiv = styled.div<{ alignment?: TextAlign }>`
   height: 2em;
   display: flex;
-  justify-content: ${(props: { alignment?: TextAlign }) =>
-    props.alignment || 'center'};
+  justify-content: ${({ alignment }) => alignment || 'center'};
   align-items: center;
   cursor: pointer;
 `;
@@ -59,7 +58,7 @@ export const mapBugsToTableData = (bugs: TableBugType[]) => {
                   placement="bottom"
                   type="light"
                   size="medium"
-                  onClick={(e) => {
+                  onClick={(e: { stopPropagation: () => void }) => {
                     e.stopPropagation();
                   }}
                 >
@@ -85,7 +84,7 @@ export const mapBugsToTableData = (bugs: TableBugType[]) => {
             placement="bottom"
             type="light"
             size="medium"
-            onClick={(e) => {
+            onClick={(e: { stopPropagation: () => void }) => {
               e.stopPropagation();
             }}
           >