upgrade react 18

.github/workflows/test-storybook.yml

@@ -11,7 +11,7 @@ jobs:
   prepare-base-branch:
     name: Prepare base branch image snapshots
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     steps:
       - name: Checkout base branch
         uses: actions/checkout@v4
@@ -62,7 +62,7 @@ jobs:
   test-storybook:
     name: Build Storybook
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-22.04
     needs: prepare-base-branch
     steps:
       - name: Checkout branch

.storybook/main.js

@@ -53,13 +53,6 @@ module.exports = {
   ],
 
   async webpackFinal(config, { configType }) {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      react: getAbsolutePath('react'),
-      'react-dom': getAbsolutePath('react-dom'),
-      '@storybook/react-dom-shim': '@storybook/react-dom-shim',
-    }
-
     if (configType === 'PRODUCTION') {
       return config
     }

package.json

@@ -104,9 +104,9 @@
     "postcss-loader": "^8.1.1",
     "postcss-syntax": "^0.36.2",
     "prettier": "^2.8.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "storybook": "^8.0.5",
     "storybook-dark-mode": "^4.0.1",
     "style-loader": "^3.3.4",
@@ -125,10 +125,9 @@
   },
   "packageManager": "[email protected]",
   "resolutions": {
-    "react-test-renderer": "17.0.2",
     "node-gyp": "^9.0.0",
     "postcss": "^8.4.16",
-    "@storybook/react-dom-shim": "^7"
+    "@types/react": "^18.3.3"
   },
   "lint-staged": {
     "*": [

packages/icons/package.json

@@ -22,13 +22,14 @@
   },
   "devDependencies": {
     "@storybook/react": "^8.0.5",
-    "@types/jest": "^27.4.0",
-    "@types/react": "^17.0.38",
+    "@types/dompurify": "^2.3.3",
+    "@types/react": "^18.3.3",
+    "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@types/webpack-env": "^1.18.1",
     "@vitejs/plugin-react": "^4.3.1",
     "jsdom": "^24.1.0",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",

packages/react-sandbox/package.json

@@ -28,23 +28,19 @@
     "@storybook/api": "^7.4.1",
     "@storybook/components": "^7.4.1",
     "@storybook/core-events": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/theming": "^7.4.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.4.0",
-    "@types/jest-axe": "^3.5.3",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "jest-axe": "^5.0.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
@@ -64,9 +60,9 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-dom": ">=16.13.1",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "styled-components": ">=5.0.0"
   },
   "files": [
     "src",

packages/react-sandbox/src/_lib/ComponentAbstraction.tsx

@@ -18,8 +18,9 @@ export const DefaultLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
   }
 )
 
+type DefaultLinkProps = LinkProps & React.RefAttributes<HTMLAnchorElement>
 export interface Components {
-  Link: React.ComponentType<React.ComponentPropsWithRef<typeof DefaultLink>>
+  Link: React.ComponentType<React.PropsWithoutRef<DefaultLinkProps>>
 }
 
 const DefaultValue: Components = {

packages/react-sandbox/src/components/Carousel/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from 'react'
 import * as React from 'react'
-import { animated, useSpring } from 'react-spring'
+import { animated, AnimatedComponent, useSpring } from 'react-spring'
 import styled, { css } from 'styled-components'
 import { useDebounceAnimationState } from '../../foundation/hooks'
 import { passiveEvents, isEdge } from '../../foundation/support'
@@ -281,8 +281,6 @@ export default function Carousel({
   return (
     <Container ref={visibleAreaRef}>
       <ScrollArea
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
         ref={ref}
         scrollLeft={styles.scroll}
         onScroll={handleScrollMove}
@@ -360,7 +358,9 @@ const ScrollArea = styled(animated.div)`
   }
 
   scrollbar-width: none;
-`
+` as unknown as React.ComponentType<
+  Omit<React.ComponentProps<AnimatedComponent<'div'>>, 'css'>
+>
 
 const GradientContainer = styled.div<{ fadeInGradient: boolean }>`
   /* NOTE: LeftGradientがはみ出るためhidden */

packages/react-sandbox/src/components/Filter/index.tsx

@@ -109,7 +109,7 @@ interface ButtonCssProps {
   reactive?: boolean
 }
 
-const buttonCss = css`
+const buttonCss = css<ButtonCssProps>`
   display: block;
   outline: none;
   border: none;
@@ -128,13 +128,13 @@ const buttonCss = css`
     color: ${({ theme }) => theme.color.text2};
   }
 
-  ${({ hover = false }: ButtonCssProps) =>
+  ${({ hover = false }) =>
     hover &&
     css`
       color: ${({ theme }) => theme.color.text2};
     `}
 
-  ${({ active = false }: ButtonCssProps) =>
+  ${({ active = false }) =>
     active &&
     css`
       background-color: ${({ theme }) => theme.color.surface3};
@@ -161,18 +161,19 @@ const padding0Css = css`
   }
 `
 
-const ButtonLike = styled.button`
+const ButtonLike = styled.button<ButtonCssProps>`
   ${buttonCss}
 `
 
-const PlainElement = styled.span`
+const PlainElement = styled.span<ButtonCssProps>`
   ${buttonCss}
 `
 
-const StyledButtonLike = styled(ButtonLike)<{
+type StyledButtonLikeProps = {
   buttonWidth: number | undefined
   buttonHeight: number | undefined
-}>`
+}
+const StyledButtonLike = styled(ButtonLike)<StyledButtonLikeProps>`
   ${padding0Css};
   ${(p) => p.buttonWidth !== undefined && `width: ${p.buttonWidth}px;`}
   ${(p) => p.buttonHeight !== undefined && `height: ${p.buttonHeight}px;`}

packages/react-sandbox/src/components/HintText/index.tsx

@@ -13,7 +13,10 @@ interface Props {
 
 export default function HintText({ children, context, className }: Props) {
   return (
-    <Container className={className} context={context}>
+    <Container
+      className={className}
+      {...styledProps({ children, context, className })}
+    >
       <IconWrap>
         <InfoIcon />
       </IconWrap>
@@ -22,9 +25,7 @@ export default function HintText({ children, context, className }: Props) {
   )
 }
 
-const Container = styled.div.attrs<Props, ReturnType<typeof styledProps>>(
-  styledProps
-)`
+const Container = styled.div<ReturnType<typeof styledProps>>`
   ${(p) =>
     theme((o) => [
       o.bg.surface3,

packages/react-sandbox/src/components/Pager/index.tsx

@@ -197,7 +197,7 @@ const PagerContainer = styled.nav`
   align-items: center;
 `
 
-const CircleButton = styled.button`
+const CircleButton = styled.button<{ noBackground?: boolean }>`
   font-size: 1rem;
   line-height: calc(1em + 8px);
   text-decoration: none;
@@ -249,7 +249,7 @@ const CircleButton = styled.button`
     color: ${({ theme }) => theme.color.text5};
   }
 
-  ${({ noBackground = false }: { noBackground?: boolean }) =>
+  ${({ noBackground = false }) =>
     noBackground &&
     css`
       /* stylelint-disable-next-line no-duplicate-selectors */

packages/react-sandbox/src/components/WithIcon/index.tsx

@@ -103,8 +103,13 @@ const forceCenteringCss = css`
   }
 `
 
-const iconAnchorCss = css`
-  ${(p: { show: boolean | 'collapse'; pre: boolean }) =>
+type IconAnchorProps = {
+  show: boolean | 'collapse'
+  pre: boolean
+}
+
+const iconAnchorCss = css<IconAnchorProps>`
+  ${(p) =>
     p.show === 'collapse'
       ? css`
           display: none;
@@ -122,7 +127,7 @@ const iconAnchorCss = css`
         `}
 `
 
-const IconAnchorNaive = styled.div`
+const IconAnchorNaive = styled.div<IconAnchorProps>`
   display: flex;
   align-items: center;
 

packages/react-sandbox/src/type.d.ts

@@ -1,10 +1,9 @@
-import { ThemeProp } from '@charcoal-ui/styled'
 import { CharcoalTheme } from '@charcoal-ui/theme'
-import { CSSProp, DefaultTheme } from 'styled-components'
+import type { CSSProp } from 'styled-components'
 
 declare module 'react' {
   interface Attributes {
-    css?: CSSProp<DefaultTheme> | ThemeProp<DefaultTheme>
+    css?: CSSProp
   }
 }
 

packages/react/package.json

@@ -41,20 +41,17 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^27.4.0",
-    "@types/jest-axe": "^3.5.3",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "^18.3.0",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.19",
-    "jest-axe": "^5.0.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
     "tsup": "^6.5.0",
@@ -83,8 +80,7 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0"
   },
   "files": [
     "src",

packages/react/src/components/Switch/SwitchInput/index.tsx

@@ -23,7 +23,6 @@ const SwitchInput = forwardRef<
     },
     [onChange]
   )
-  props.children
 
   const classNames = useClassNames('charcoal-switch-input', className)
   return (

packages/react/src/components/TextField/__snapshots__/TextField.story.storyshot

@@ -388,9 +388,7 @@ exports[`Storybook Tests > react/TextField > Number 1`] = `
         className="charcoal-field-label"
         htmlFor="test-id"
         id="test-id"
-      >
-
-      </label>
+      />
       <div
         className="charcoal-field-label-sub-label"
       >

packages/react/src/components/TextField/index.tsx

@@ -108,7 +108,9 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           data-invalid={invalid === true}
           ref={containerRef}
         >
-          {prefix && <div className="charcoal-text-field-prefix">{prefix}</div>}
+          {prefix !== null && (
+            <div className="charcoal-text-field-prefix">{prefix}</div>
+          )}
           <input
             className="charcoal-text-field-input"
             aria-describedby={showAssistiveText ? describedbyId : undefined}
@@ -124,7 +126,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             value={value}
             {...props}
           />
-          {(suffix || showCount) && (
+          {(suffix !== null || showCount) && (
             <div className="charcoal-text-field-suffix">
               {suffix}
               {showCount && (

packages/styled/package.json

@@ -21,16 +21,16 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@types/react": "^17.0.38",
-    "@types/react-test-renderer": "^17.0.2",
+    "@types/react": "^18.3.3",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
     "@vitejs/plugin-react": "^4.3.1",
     "jest-styled-components": "^7.1.1",
     "jsdom": "^24.1.0",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "react": "^18.3.1",
+    "react-test-renderer": "^18.3.1",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",
@@ -44,8 +44,8 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "react": ">=17.0.0",
-    "styled-components": ">=5.1.1"
+    "react": ">=18.0.0",
+    "styled-components": ">=5.0.0"
   },
   "files": [
     "src",