feat: upgrade to styled components v6 (#650)

pluralsh · Oct 7, 2024 · a308e8d · a308e8d
1 parent e5dd70c
commit a308e8d
Show file tree

Hide file tree

Showing 51 changed files with 2,023 additions and 2,034 deletions.
diff --git a/package.json b/package.json
@@ -41,12 +41,9 @@
     "@react-hooks-library/core": "0.6.0",
     "@react-spring/web": "9.7.3",
     "@react-stately/utils": "3.9.0",
-    "@react-types/shared": "3.22.0",
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-table": "8.20.5",
     "@tanstack/react-virtual": "3.0.1",
-    "@types/chroma-js": "2.4.3",
-    "@types/lodash-es": "4.17.12",
     "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
@@ -77,6 +74,7 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@pluralsh/eslint-config-typescript": "2.5.147",
+    "@react-types/shared": "3.22.0",
     "@storybook/addon-actions": "7.6.5",
     "@storybook/addon-docs": "7.6.5",
     "@storybook/addon-essentials": "7.6.5",
@@ -89,10 +87,11 @@
     "@storybook/react-vite": "7.6.5",
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "5.17.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/chroma-js": "2.4.3",
+    "@types/lodash-es": "4.17.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@types/react-transition-group": "4.4.10",
-    "@types/styled-components": "5.1.30",
     "@typescript-eslint/eslint-plugin": "6.14.0",
     "@typescript-eslint/parser": "6.14.0",
     "@vitest/coverage-v8": "1.0.4",
@@ -124,8 +123,8 @@
     "react-transition-group": "4.4.5",
     "rimraf": "5.0.5",
     "storybook": "7.6.5",
-    "styled-components": "5.3.11",
-    "typescript": "^5.4.5",
+    "styled-components": "6.1.13",
+    "typescript": "5.6.2",
     "vite": "5.0.10",
     "vitest": "1.0.4"
   },

diff --git a/src/components/AppIcon.tsx b/src/components/AppIcon.tsx
@@ -108,11 +108,11 @@ export function toInitials(name: string) {
 }
 
 const AppIconSC = styled.div<{
-  $color: ValueOf<typeof hueToColor>
-  $borderColor: ValueOf<typeof hueToBorderColor>
-  $hasBorder: boolean
-  $boxSize: number
-  $clickable: boolean
+  $color?: ValueOf<typeof hueToColor>
+  $borderColor?: ValueOf<typeof hueToBorderColor>
+  $hasBorder?: boolean
+  $boxSize?: number
+  $clickable?: boolean
 }>(({ theme, $color, $borderColor, $hasBorder, $boxSize, $clickable }) => ({
   display: 'flex',
   alignItems: 'center',

diff --git a/src/components/ArrowScroll.tsx b/src/components/ArrowScroll.tsx
@@ -22,7 +22,7 @@ const ComponentWrapperSC = styled.div({
   },
 })
 const ArrowWrapperSC = styled.div<{
-  $direction: 'left' | 'right'
+  $direction?: 'left' | 'right'
 }>(({ theme, $direction }) => ({
   color: theme.colors['icon-light'],
   zIndex: theme.zIndexes.modal,

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -1,17 +1,17 @@
-import { type ReactNode, type Ref, forwardRef } from 'react'
 import { Div, Flex, type FlexProps, Span, type SpanProps } from 'honorable'
+import { type ReactNode, type Ref, forwardRef } from 'react'
 import styled from 'styled-components'
 
 import { type ColorKey, type SeverityExt, sanitizeSeverity } from '../types'
 
 import { FillLevelProvider } from './contexts/FillLevelContext'
-import ErrorIcon from './icons/ErrorIcon'
+import IconFrame from './IconFrame'
+import CheckRoundedIcon from './icons/CheckRoundedIcon'
 import CloseIcon from './icons/CloseIcon'
+import type createIcon from './icons/createIcon'
+import ErrorIcon from './icons/ErrorIcon'
 import InfoIcon from './icons/InfoIcon'
 import WarningIcon from './icons/WarningIcon'
-import CheckRoundedIcon from './icons/CheckRoundedIcon'
-import type createIcon from './icons/createIcon'
-import IconFrame from './IconFrame'
 
 export const BANNER_SEVERITIES = [
   'info',
@@ -53,7 +53,7 @@ const severityToIcon: Record<BannerSeverity, ReturnType<typeof createIcon>> = {
   success: CheckRoundedIcon,
 }
 
-const BannerOuter = styled.div<{
+const BannerOuter: any = styled.div<{
   $borderColorKey: ColorKey
   $fullWidth?: boolean
 }>(({ $borderColorKey, $fullWidth, theme }) => ({
@@ -110,11 +110,7 @@ const Content = styled.p<{ $hasHeading: boolean }>(
   })
 )
 
-const CloseButton = styled(IconFrame).attrs({
-  size: 'medium',
-  clickable: true,
-  icon: <CloseIcon />,
-})(({ theme }) => ({
+const CloseButton = styled(IconFrame)(({ theme }) => ({
   marginLeft: theme.spacing.medium,
 }))
 
@@ -167,7 +163,14 @@ function BannerRef(
         </div>
       </BannerInner>
       <Div flexGrow={1} />
-      {typeof onClose === 'function' && <CloseButton onClick={onClose} />}
+      {typeof onClose === 'function' && (
+        <CloseButton
+          size="medium"
+          clickable
+          icon={<CloseIcon />}
+          onClick={onClose}
+        />
+      )}
     </BannerOuter>
   )
 

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -157,7 +157,7 @@ const CardSC = styled(Div)<{
   $severity: Severity
   $selected: boolean
   $clickable: boolean
-  disabled: boolean
+  $disabled: boolean
 }>(
   ({
     theme,
@@ -166,7 +166,7 @@ const CardSC = styled(Div)<{
     $severity: severity,
     $selected: selected,
     $clickable: clickable,
-    disabled,
+    $disabled: disabled,
   }) => ({
     ...theme.partials.reset.button,
     border: `1px solid ${theme.colors[fillToNeutralBorderC[fillLevel]]}`,
@@ -188,7 +188,7 @@ const CardSC = styled(Div)<{
       !disabled &&
       !selected &&
       severity === 'neutral' && {
-        ':hover': {
+        '&:hover': {
           backgroundColor: theme.colors[fillToNeutralHoverBgC[fillLevel]],
         },
       }),
@@ -230,7 +230,7 @@ const Card = forwardRef(
             type: 'button',
             'data-clickable': 'true',
           })}
-          disabled={clickable && disabled}
+          $disabled={clickable && disabled}
           {...props}
         />
       </FillLevelProvider>

diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
@@ -68,7 +68,7 @@ const HonorableLabelStyled = styled(Label)<{
     : theme.colors['text-light'],
   cursor: $disabled ? 'not-allowed' : 'pointer',
   margin: 0,
-  ':focus': {
+  '&:focus': {
     outline: 'none',
   },
   '.box': {
@@ -78,19 +78,19 @@ const HonorableLabelStyled = styled(Label)<{
     ...($isFocusVisible
       ? { ...theme.partials.focus.outline, border: 'none' }
       : {}),
-    '::before, .icon': {
+    '&::before, .icon': {
       position: 'absolute',
       content: '""',
       top: 0,
       left: 0,
       width: '100%',
       height: '100%',
     },
-    '::before, &': {
+    '&::before, &': {
       borderRadius: theme.borderRadiuses.medium,
     },
     /* before for the border */
-    '::before': {
+    '&::before': {
       zIndex: 0,
       border: theme.borders.input,
       ...($disabled
@@ -114,7 +114,7 @@ const HonorableLabelStyled = styled(Label)<{
   },
   ...(!$disabled
     ? {
-        ':hover': {
+        '&:hover': {
           color: theme.colors.text,
           '.box': {
             backgroundColor: theme.colors['action-input-hover'],
@@ -129,7 +129,7 @@ const HonorableLabelStyled = styled(Label)<{
             backgroundColor: theme.colors['action-primary'],
           },
         },
-        ':hover.checked, :hover.indeterminate': {
+        '&:hover.checked, &:hover.indeterminate': {
           '.box::before': {
             border: 'none',
             backgroundColor: theme.colors['action-primary-hover'],

diff --git a/src/components/ChecklistItem.tsx b/src/components/ChecklistItem.tsx
@@ -27,10 +27,10 @@ const ChecklistItemInner = styled(ChecklistItemInnerUnstyled)(
       alignItems: 'center',
       color: selected ? theme.colors.text : theme.colors['text-light'],
       cursor: 'pointer',
-      ':hover': {
+      '&:hover': {
         background: theme.colors['fill-two-hover'],
       },
-      ':focus': {
+      '&:focus': {
         outline: `${theme.colors['border-outline-focused']} solid 1px`,
       },
 

diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx
@@ -1,25 +1,22 @@
 import { type FlexProps } from 'honorable'
 import {
   type ComponentProps,
+  type ComponentPropsWithRef,
   type ReactElement,
   type Ref,
   forwardRef,
 } from 'react'
-import styled, {
-  type DefaultTheme,
-  type StyledComponent,
-  useTheme,
-} from 'styled-components'
+import styled, { type DefaultTheme, useTheme } from 'styled-components'
 
 import { type SEVERITIES } from '../types'
 
-import { Spinner } from './Spinner'
 import Card, {
   type BaseCardProps,
   type CardFillLevel,
   useDecideFillLevel,
 } from './Card'
 import CloseIcon from './icons/CloseIcon'
+import { Spinner } from './Spinner'
 import Tooltip from './Tooltip'
 
 export const CHIP_CLOSE_ATTR_KEY = 'data-close-button' as const
@@ -36,7 +33,7 @@ export type ChipProps = Omit<FlexProps, 'size'> &
     icon?: ReactElement
     loading?: boolean
     closeButton?: boolean
-    closeButtonProps?: ComponentProps<StyledComponent<'button', DefaultTheme>>
+    closeButtonProps?: ComponentPropsWithRef<'div'>
     clickable?: boolean
     truncateWidth?: number
     truncateEdge?: 'start' | 'end'
@@ -179,9 +176,8 @@ function ChipRef(
     disabled,
     tooltip,
     tooltipProps,
-    as,
     ...props
-  }: ChipProps & { as?: ComponentProps<typeof ChipCardSC>['forwardedAs'] },
+  }: ChipProps,
   ref: Ref<any>
 ) {
   fillLevel = useDecideFillLevel({ hue, fillLevel })
@@ -202,7 +198,6 @@ function ChipRef(
       $severity={severity}
       $truncateWidth={truncateWidth}
       $truncateEdge={truncateEdge}
-      {...(as ? { forwardedAs: as } : {})}
       {...props}
     >
       {loading && (
@@ -224,7 +219,6 @@ function ChipRef(
         <CloseButtonSC
           disabled={disabled}
           $fillLevel={fillLevel}
-          $severity={severity}
           {...{
             [CHIP_CLOSE_ATTR_KEY]: '',
           }}

diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -124,12 +124,12 @@ function CopyButtonBase({
     </Button>
   )
 }
-const CopyButton = styled(CopyButtonBase)<{ verticallyCenter: boolean }>(
-  ({ verticallyCenter, theme }) => ({
+const CopyButton = styled(CopyButtonBase)<{ $verticallyCenter: boolean }>(
+  ({ $verticallyCenter, theme }) => ({
     position: 'absolute',
     right: theme.spacing.medium,
-    top: verticallyCenter ? '50%' : theme.spacing.medium,
-    transform: verticallyCenter ? 'translateY(-50%)' : 'none',
+    top: $verticallyCenter ? '50%' : theme.spacing.medium,
+    transform: $verticallyCenter ? 'translateY(-50%)' : 'none',
     boxShadow: theme.boxShadows.slight,
   })
 )
@@ -184,7 +184,7 @@ const TabsDropdownButton = styled(
       />
     )
   })
-)<{ isOpen?: boolean }>(({ isOpen = false, theme }) => ({
+)<{ $isOpen?: boolean }>(({ $isOpen: isOpen = false, theme }) => ({
   '.dropdownIcon': {
     transform: isOpen ? 'scaleY(-1)' : 'scaleY(1)',
     transition: 'transform 0.1s ease',
@@ -334,7 +334,7 @@ function CodeContent({
       <CopyButton
         copied={copied}
         handleCopy={handleCopy}
-        verticallyCenter={!multiLine}
+        $verticallyCenter={!multiLine}
       />
       <Div
         paddingHorizontal="medium"

diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx
@@ -76,22 +76,6 @@ type ComboBoxProps = Exclude<ComboBoxInputProps, 'children'> & {
     'onLoadMore' | 'isLoading' | 'validationState' | 'placeholder'
   >
 
-export const ComboBoxInputInner = styled.div<{ isOpen: boolean }>(
-  ({ theme, isOpen }) => ({
-    '.arrow': {
-      transition: 'transform 0.1s ease',
-      display: 'flex',
-      marginLeft: theme.spacing.medium,
-      alignItems: 'center',
-      ...(isOpen
-        ? {
-            transform: 'scaleY(-100%)',
-          }
-        : {}),
-    },
-  })
-)
-
 type ComboBoxInputProps = {
   showArrow?: boolean
   isOpen?: boolean
@@ -538,7 +522,6 @@ function ComboBox({
         prefix={prefix}
         titleContent={titleContent}
         showClearButton={showClearButton}
-        setIsOpen={setIsOpen}
         startIcon={startIcon}
         endIcon={endIcon}
         outerInputProps={outerInputProps}

diff --git a/src/components/DateField.tsx b/src/components/DateField.tsx
@@ -35,7 +35,7 @@ const DateSegmentSC = styled.div(({ theme }) => {
     },
 
     textTransform: 'uppercase',
-    ':focus-visible': {
+    '&:focus-visible': {
       background: theme.colors['fill-three-selected'],
       borderRadius: theme.borderRadiuses.medium,
     },