feat: upgrade styled components

Author: Lee Zhen Jie

package.json

@@ -79,7 +79,6 @@
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/styled-components": "^5.1.1",
     "@types/styled-system": "^5.1.10",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
@@ -117,7 +116,6 @@
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "start-server-and-test": "^1.15.2",
-    "styled-components": "^5.1.1",
     "stylelint": "^10.0.1",
     "stylelint-config-recommended": "^2.2.0",
     "stylelint-config-styled-components": "^0.1.1",
@@ -135,13 +133,14 @@
     "moment": "^2.24.0",
     "polaris-glints": "^15.12.0",
     "react-id-generator": "^3.0.1",
-    "styled-system": "^5.1.5"
+    "styled-components": "^6.0.3",
+    "styled-system": "^5.1.5",
+    "stylis": "^4.3.0"
   },
   "peerDependencies": {
     "lodash-es": "^4.0.0",
     "react": "^16.3.0 || ^17",
-    "react-dom": "^16.3.0 || ^17",
-    "styled-components": "^4.0.0 || ^5.0.0"
+    "react-dom": "^16.3.0 || ^17"
   },
   "jest": {
     "moduleNameMapper": {

src/@next/ActionList/ActionItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
 import { Item } from './ActionList';
@@ -10,11 +10,12 @@ import {
 
 export const ActionItem = ({ content, description, icon, action }: Item) => {
   const hasDescription = !!description;
+
   return (
     <StyledActionListItemWrapper
       tabIndex={0}
       role="button"
-      onMouseUp={e => e.currentTarget.blur()}
+      onMouseUp={(e: MouseEvent<HTMLDivElement>) => e.currentTarget.blur()}
       onClick={() => action?.()}
     >
       <StyledActionListItem>

src/@next/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { Spinner } from '../Spinner/Spinner';
 import { Typography } from '../Typography';
 import { StyledButton } from './ButtonStyle';
@@ -53,7 +53,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         data-loading={loading}
         data-icon={!!icon}
         {...otherProps}
-        onMouseUp={e => e.currentTarget.blur()}
+        onMouseUp={(e: MouseEvent<HTMLButtonElement>) => e.currentTarget.blur()}
       >
         {loading && <Spinner />}
         {renderIcon('left')}

src/@next/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { MouseEvent, useEffect } from 'react';
 import { ComponentAction } from '../../types/componentAction';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
@@ -124,7 +124,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         >
           <StyledModalContainer
             ref={ref}
-            onClick={e => e.stopPropagation()}
+            onClick={(e: MouseEvent<HTMLDivElement>) => e.stopPropagation()}
             {...props}
           >
             {header && (

src/@next/Pagination/SimplePagination.tsx

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import { Typography } from '../Typography';
 import {
+  SimplePaginationStyledNav,
   StyledActiveSimplePaginationButton,
-  StyledSimplePaginationInput,
   StyledSimplePaginationButton,
-  SimplePaginationStyledNav,
+  StyledSimplePaginationInput,
 } from './PaginationStyle';
+import { NextStepper, PreviousStepper } from './Stepper';
 import {
+  PaginationProps,
   defaultPageSize,
   getAllPages,
-  PaginationProps,
 } from './paginationUtils';
-import { NextStepper, PreviousStepper } from './Stepper';
 
 export const SimplePagination = React.forwardRef<HTMLElement, PaginationProps>(
   function SimplePagination(
@@ -76,7 +76,7 @@ export const SimplePagination = React.forwardRef<HTMLElement, PaginationProps>(
               data-testid="current-page-input"
               autoFocus
               onFocus={handleFocus}
-              onChange={e => {
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
                 handlePageNumberChange(Number(e.currentTarget.value));
               }}
               onBlur={() => setEditMode(false)}

src/@next/RadioButton/RadioButton.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
+import { Colors } from '..';
+import { Typography } from '../Typography';
 import {
   LabelWrapper,
   RadioButtonInput,
   RadioButtonWrapper,
 } from './RadioButtonStyle';
-import { Typography } from '../Typography';
-import { Colors } from '..';
 
 export interface RadioButtonProps
   extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
@@ -45,7 +45,7 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
           value={value}
           type="radio"
           onChange={onChange}
-          onMouseDown={e => e.preventDefault()}
+          onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}
           {...props}
         />
         <LabelWrapper data-disabled={disabled}>

src/@next/Select/components/Activator/ActivatorTextInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 
 import { Icon } from '../../../Icon';
 import { Option } from '../../../Menu';
@@ -80,7 +80,9 @@ export const ActivatorTextInput = ({
           className="select-input"
           ref={activatorRef}
           prefix={prefix}
-          onChange={value => handleChange({ value })}
+          onChange={(value: ChangeEvent<HTMLInputElement>) =>
+            handleChange({ value })
+          }
           onFocus={onFocus}
           error={hasError}
           disabled={disabled}

src/@next/SideSheet/SideSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, MouseEvent } from 'react';
 import { Button, PrimaryButton } from '../Button';
 import { ButtonGroup } from '../ButtonGroup';
 import { ComponentAction } from '../../types/componentAction';
@@ -91,7 +91,7 @@ const SideSheet = React.forwardRef<HTMLDivElement, SideSheetProps>(
               <StyledSideSheetContainer
                 className={`${isClosedAnimation ? 'closed' : ''}`}
                 ref={ref}
-                onClick={e => e.stopPropagation()}
+                onClick={(e: MouseEvent<HTMLDivElement>) => e.stopPropagation()}
                 {...props}
               >
                 <StyledSideSheetHeader>

tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "alwaysStrict": true,
+    "skipLibCheck": true,
     "declaration": true,
     "emitDeclarationOnly": true,
     "jsx": "preserve",
@@ -18,7 +19,6 @@
       "node",
       "react",
       "react-dom",
-      // "storybook__react",
       "styled-components"
     ]
   },