upgrade styled-components and react

eslint.config.js

@@ -0,0 +1,19 @@
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+import baseConfig from '@t3n/eslint-config';
+import reactConfig from '@t3n/eslint-config-react';
+import typescriptConfig from '@t3n/eslint-config-typescript';
+
+export default defineConfig([
+  baseConfig,
+  reactConfig,
+  typescriptConfig,
+  globalIgnores([
+    '**/*.d.ts',
+    '!./packages/components/src/types.d.ts',
+    '**/build/',
+    '**/dist/',
+    './packages/icons/src/components/**/*',
+    '**/*.test.tsx.snap',
+  ]),
+]);

package.json

@@ -22,51 +22,46 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@t3n/eslint-config": "^6.2.4",
-    "@t3n/eslint-config-react": "^6.2.4",
-    "@t3n/eslint-config-typescript": "^6.2.4",
-    "@testing-library/react": "^14.2.2",
+    "@eslint-react/eslint-plugin": "^2.7.2",
+    "@t3n/eslint-config": "^7.0.0",
+    "@t3n/eslint-config-react": "^7.0.0",
+    "@t3n/eslint-config-typescript": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^29.5.14",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
-    "ajv": "^8.17.1",
     "babel-jest": "^30.1.2",
     "babel-loader": "^10.0.0",
     "babel-plugin-polished": "^1.1.0",
     "babel-plugin-styled-components": "^2.1.4",
     "buffer": "^6.0.3",
     "core-js": "^3.45.1",
-    "crypto-browserify": "^3.12.1",
-    "eslint": "^8.57.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jest": "^28.12.0",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-jest": "^29.12.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-webpack-plugin": "^4.2.0",
-    "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "eslint-webpack-plugin": "^5.0.2",
+    "globals": "^16.5.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
     "jsdom": "^25.0.1",
     "lerna": "^8.2.4",
+    "lint-staged": "^16.2.6",
     "npm-check-updates": "^18.3.0",
-    "prettier": "^3.6.2",
-    "react-test-renderer": "^18.3.1",
+    "prettier": "^3.8.0",
+    "react-test-renderer": "^19.2.0",
     "regenerator-runtime": "^0.14.1",
     "source-map-loader": "^5.0.0",
     "ts-jest": "^29.4.4",
     "ts-loader": "^9.5.4",
     "ts-node-dev": "^2.0.0",
     "typescript": "^5.9.2",
-    "url-loader": "^4.1.1",
+    "typescript-eslint": "^8.53.1",
     "webpack": "^5.99.9",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
@@ -101,15 +96,9 @@
     "upgrade-interactive": "npm-check-updates --interactive && npm-check-updates --interactive --packageFile packages/components/package.json && npm-check-updates --interactive --packageFile packages/theme/package.json && npm-check-updates --interactive --packageFile packages/storybook/package.json && npm-check-updates --interactive --packageFile packages/configs/package.json && npm-check-updates --interactive --packageFile packages/icons/package.json"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "prettier --write 'packages/components/src/**'",
-      "prettier --write 'packages/theme/src/**'",
-      "prettier --write 'packages/storybook/src/**'",
-      "prettier --write 'packages/icons/src/**'",
-      "eslint './packages/components/src/**'",
-      "eslint './packages/theme/src/**'",
-      "eslint './packages/storybook/src/**'",
-      "eslint './packages/icons/src/**'"
+    "packages/**/*.{js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
     ]
   }
 }

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t3n/components",
-  "version": "0.10.8",
+  "version": "0.10.9-prerelease-35e00137b9.3",
   "description": "t3n react components",
   "repository": {
     "type": "git",
@@ -31,32 +31,31 @@
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@t3n/configs": "^0.7.4",
-    "@t3n/icons": "^0.8.5",
-    "@t3n/theme": "^0.9.1",
+    "@t3n/configs": "^0.7.5-prerelease-35e00137b9.0",
+    "@t3n/icons": "^0.8.6-prerelease-35e00137b9.0",
+    "@t3n/theme": "^0.9.2-prerelease-35e00137b9.0",
     "@types/btoa": "^1.2.5",
-    "@types/react": "^18.3.12",
+    "@types/react": "^19.0.0",
     "@types/react-autosuggest": "^10.1.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^19.0.0",
     "@types/react-slick": "^0.23.13",
-    "@types/styled-components": "^5.1.34",
     "@types/styled-system": "^5.1.24",
     "moment": "^2.30.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "slick-carousel": "^1.8.1",
-    "styled-components": "^5.2.1"
+    "styled-components": "^6.1.19"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
     "@emotion/styled": ">=11",
-    "@t3n/icons": ">=0.5",
-    "@t3n/theme": ">=0.5",
+    "@t3n/icons": "*",
+    "@t3n/theme": "*",
     "moment": ">=2.0",
-    "react": ">=16.8",
-    "react-dom": ">=16.8",
+    "react": ">=19.0",
+    "react-dom": ">=19.0",
     "slick-carousel": ">=1.8",
-    "styled-components": ">=5"
+    "styled-components": ">=6"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/components/src/Accordion/Accordion.d.ts

@@ -1,9 +1,8 @@
-import React, { ReactNode } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { MarginProps } from 'styled-system';
-export interface AccordionProps extends MarginProps {
-    title: string | JSX.Element;
+export interface AccordionProps extends MarginProps, PropsWithChildren {
+    title: string | ReactElement;
     initialOpen?: boolean;
-    children?: ReactNode;
 }
-declare const Accordion: React.FC<AccordionProps>;
+declare const Accordion: ({ children, title, initialOpen, ...rest }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

packages/components/src/Accordion/Accordion.test.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { fireEvent } from '@testing-library/dom';
 
 import { MaterialAddAPhoto } from '@t3n/icons';
@@ -50,13 +49,13 @@ test('Accoridion can be collapsed', () => {
   expect(queryByText(/content/i)).not.toBeNull();
 });
 
-test('Accordion matches snapchot with JSX.Element', () => {
+test('Accordion matches snapchot with React Element', () => {
   const { container } = renderWithTheme(
     <Accordion
       title={
         <Box display="flex">
           <Icon component={MaterialAddAPhoto} mr={2} />
-          <Text bold>Das hier ist ein JSX.Element</Text>
+          <Text bold>Das hier ist ein React Element</Text>
         </Box>
       }
     >

packages/components/src/Accordion/Accordion.tsx

@@ -1,23 +1,21 @@
-import React, { ReactNode, useState } from 'react';
-import styled from 'styled-components';
+import React, { PropsWithChildren, ReactElement, useState } from 'react';
+import { styled } from 'styled-components';
 import { color, MarginProps, space, SpaceProps } from 'styled-system';
 
 import { MaterialArrowDropDown } from '@t3n/icons';
-import { ThemeProps } from '@t3n/theme';
 
 import Box from '../Box';
 import Heading from '../Heading';
 import Icon from '../Icon';
 
-export interface AccordionProps extends MarginProps {
-  title: string | JSX.Element;
+export interface AccordionProps extends MarginProps, PropsWithChildren {
+  title: string | ReactElement;
   initialOpen?: boolean;
-  children?: ReactNode;
 }
 
 const StyledAccordion = styled.div<SpaceProps>`
-  border-radius: ${({ theme }: ThemeProps) => theme.border.radii[1]};
-  border: 1px solid ${({ theme }: ThemeProps) => theme.colors.shades.grey232};
+  border-radius: ${({ theme }) => theme.border.radii[1]};
+  border: 1px solid ${({ theme }) => theme.colors.shades.grey232};
 
   ${({ theme }) => color({ theme, bg: 'shades.white' })};
 
@@ -35,7 +33,9 @@ const StyledAccordionHeadBox = styled(Box)`
   }
 `;
 
-const StyledIconBox = styled(Box)<{ collapsed: boolean }>`
+const StyledIconBox = styled(Box).withConfig({
+  shouldForwardProp: (prop) => prop !== 'collapsed',
+})<{ collapsed: boolean }>`
   border-radius: 50%;
   height: 2rem;
   width: 2rem;
@@ -47,12 +47,12 @@ const StyledIconBox = styled(Box)<{ collapsed: boolean }>`
   }
 `;
 
-const Accordion: React.FC<AccordionProps> = ({
+const Accordion = ({
   children,
   title,
-  initialOpen,
+  initialOpen = false,
   ...rest
-}) => {
+}: AccordionProps) => {
   const [collapsed, setCollapsed] = useState(!initialOpen);
 
   return (