feat: upgrade styled-components to v6

package.json

@@ -109,8 +109,8 @@
 		"@fontsource/roboto": "^5.0.8",
 		"@sentry/browser": "^7.103.0",
 		"@tinymce/tinymce-react": "^4.3.2",
-		"@zextras/carbonio-design-system": "^7.1.1",
-		"@zextras/carbonio-ui-preview": "^2.1.0",
+		"@zextras/carbonio-design-system": "file:../carbonio-design-system/zextras-carbonio-design-system-0.0.0-semantically-released.tgz",
+		"@zextras/carbonio-ui-preview": "file:../carbonio-ui-preview/zextras-carbonio-ui-preview-0.0.0-semantically-released.tgz",
 		"darkreader": "^4.9.79",
 		"history": "^5.3.0",
 		"i18next": "^22.5.1",
@@ -122,21 +122,19 @@
 		"react-dom": "^17.0.2",
 		"react-i18next": "^12.3.1",
 		"react-router-dom": "^5.3.4",
-		"styled-components": "^5.3.11",
+		"styled-components": "^6.1.13",
 		"tinymce": "^6.8.4",
 		"ua-parser-js": "^1.0.37",
 		"zustand": "^4.5.1"
 	},
 	"peerDependencies": {
-		"@zextras/carbonio-design-system": "^7.1.1",
-		"@zextras/carbonio-ui-preview": "^2.1.0",
 		"core-js": "^3.31.1",
 		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
 		"react-i18next": "^12.3.1",
 		"react-router-dom": "^5.3.4",
-		"styled-components": "^5.3.11"
+		"styled-components": "^6.1.13"
 	},
 	"peerDependenciesMeta": {
 		"@zextras/carbonio-design-system": {

src/boot/theme-provider.tsx

@@ -20,7 +20,7 @@ import {
 } from '@zextras/carbonio-design-system';
 import { auto, disable, enable, setFetchMethod } from 'darkreader';
 import { map, reduce } from 'lodash';
-import type { DefaultTheme, SimpleInterpolation } from 'styled-components';
+import type { DefaultTheme } from 'styled-components';
 import { createGlobalStyle, css } from 'styled-components';
 
 import { useGetPrimaryColor } from './use-get-primary-color';
@@ -106,7 +106,7 @@ const GlobalStyle = createGlobalStyle<GlobalStyledProps>`
   html {
     font-size: ${({ baseFontSize }): string => `${baseFontSize}%`};
   }
-  ${({ theme }): SimpleInterpolation =>
+  ${({ theme }): ReturnType<typeof css> =>
 		map(
 			theme.globalCursors,
 			(cursor) => css`

src/settings/components/general-settings/scaling-setting-section.tsx

@@ -15,7 +15,6 @@ import {
 	Tooltip
 } from '@zextras/carbonio-design-system';
 import { useTranslation } from 'react-i18next';
-import type { SimpleInterpolation } from 'styled-components';
 import styled from 'styled-components';
 
 import { BASE_FONT_SIZE, SCALING_OPTIONS } from '../../../constants';
@@ -30,7 +29,7 @@ const ScalingSliderContainer = styled(Container)`
 `;
 
 const ExampleContainer = styled(Container)<{ $fontSize: number | undefined }>`
-	font-size: ${({ $fontSize }): SimpleInterpolation => $fontSize && `${$fontSize}%`};
+	font-size: ${({ $fontSize }): string | undefined | 0 => $fontSize && `${$fontSize}%`};
 `;
 
 const ExampleText = styled(Text)`

src/shell/boards/board-container.tsx

@@ -20,7 +20,6 @@ import {
 	Tooltip
 } from '@zextras/carbonio-design-system';
 import { debounce, isEmpty, map, noop, size } from 'lodash';
-import type { SimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import { AppBoard } from './board';
@@ -57,7 +56,7 @@ export const BOARD_DEFAULT_POSITION: Pick<CSSProperties, 'top' | 'left' | 'right
 	bottom: '0'
 };
 
-const BoardContainerComp = styled.div<{ expanded: boolean; minimized: boolean }>`
+const BoardContainerComp = styled.div<{ $expanded: boolean; $minimized: boolean }>`
 	position: fixed;
 	width: calc(100vw - ${PRIMARY_BAR_WIDTH});
 	height: calc(100vh - ${HEADER_BAR_HEIGHT});
@@ -66,14 +65,14 @@ const BoardContainerComp = styled.div<{ expanded: boolean; minimized: boolean }>
 	background-color: rgba(0, 0, 0, 0);
 	pointer-events: none;
 	z-index: ${BOARD_CONTAINER_ZINDEX};
-	${({ expanded }): SimpleInterpolation =>
-		expanded &&
+	${({ $expanded }): ReturnType<typeof css> | false =>
+		$expanded &&
 		css`
 			background-color: rgba(0, 0, 0, 0.5);
 			pointer-events: auto;
 		`}
-	${({ minimized }): SimpleInterpolation =>
-		minimized &&
+	${({ $minimized }): ReturnType<typeof css> | false =>
+		$minimized &&
 		css`
 			display: none;
 		`}
@@ -83,20 +82,20 @@ const OverflowContainer = styled(Container)`
 	overflow: auto;
 `;
 
-const Board = styled(Container)<{ expanded: boolean }>`
+const Board = styled(Container)<{ $expanded: boolean }>`
 	z-index: 5;
 	position: absolute;
 	${BOARD_DEFAULT_POSITION};
 
-	${({ width }): SimpleInterpolation =>
+	${({ width }): ReturnType<typeof css> | false =>
 		!width &&
 		css`
 			/* default width and aspect ratio */
 			aspect-ratio: 4 / 3;
 			width: auto;
 		`}
 
-	${({ height }): SimpleInterpolation =>
+	${({ height }): ReturnType<typeof css> | false =>
 		!height &&
 		css`
 			/* default height */
@@ -116,8 +115,8 @@ const Board = styled(Container)<{ expanded: boolean }>`
 	pointer-events: auto;
 	max-height: 100%;
 	max-width: 100%;
-	${({ expanded }): SimpleInterpolation =>
-		expanded &&
+	${({ $expanded }): ReturnType<typeof css> | false =>
+		$expanded &&
 		css`
 			height: calc(100% - 1.5rem) !important;
 			width: calc(100% - 3rem) !important;
@@ -347,12 +346,12 @@ export const BoardContainer = (): React.JSX.Element | null => {
 
 	return (
 		(!isBoardEmpty && current && (
-			<BoardContainerComp expanded={expanded} minimized={minimized} ref={boardContainerRef}>
+			<BoardContainerComp $expanded={expanded} $minimized={minimized} ref={boardContainerRef}>
 				<Board
 					data-testid="NewItemContainer"
 					background={'gray6'}
 					crossAlignment="unset"
-					expanded={expanded}
+					$expanded={expanded}
 					ref={boardRef}
 					width={currentBoardSizeAndPosition.width}
 					height={currentBoardSizeAndPosition.height}
@@ -444,7 +443,7 @@ export const BoardContainer = (): React.JSX.Element | null => {
 						<Divider style={{ height: '0.125rem' }} />
 						<BoardDetailContainer takeAvailableSpace>
 							{map(boards, (b) => (
-								<AppBoard key={b.id} board={b} />
+								<AppBoard key={b.id} $board={b} />
 							))}
 						</BoardDetailContainer>
 					</ResizableContainer>

src/shell/boards/board-tab.tsx

@@ -9,14 +9,13 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { RowProps } from '@zextras/carbonio-design-system';
 import { Container, Icon, IconButton, Row, Text, Tooltip } from '@zextras/carbonio-design-system';
-import type { SimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import { closeBoard, setCurrentBoard, useBoardStore } from '../../store/boards';
 import { getT } from '../../store/i18n/hooks';
 import './board-tab.css';
 
-const TabContainer = styled(Row)<RowProps & { active: boolean }>`
+const TabContainer = styled(Row)<RowProps & { $active: boolean }>`
 	container-type: inline-size;
 	container-name: tab;
 	max-width: calc(3rem + 15ch);
@@ -26,15 +25,15 @@ const TabContainer = styled(Row)<RowProps & { active: boolean }>`
 	cursor: pointer;
 	height: 1.75rem;
 	user-select: none;
-	background-color: ${({ theme, active }): string =>
-		active ? theme.palette.gray3.regular : theme.palette.gray5.regular};
+	background-color: ${({ theme, $active }): string =>
+		$active ? theme.palette.gray3.regular : theme.palette.gray5.regular};
 	gap: 0.25rem;
 	border-radius: 0.25rem;
 	margin-left: 0.25rem;
 	margin-right: 0.25rem;
 	overflow: hidden;
-	${({ active }): SimpleInterpolation =>
-		active &&
+	${({ $active }): ReturnType<typeof css> | false =>
+		$active &&
 		css`
 			min-width: calc(3rem + 15ch);
 		`}
@@ -48,9 +47,9 @@ const TabIcon = styled(Icon)`
 	min-width: 1.5rem;
 `;
 
-const CustomText = styled(Text)<{ overflowing: boolean }>`
-	${({ overflowing }): SimpleInterpolation =>
-		overflowing &&
+const CustomText = styled(Text)<{ $overflowing: boolean }>`
+	${({ $overflowing }: { $overflowing: boolean }): ReturnType<typeof css> | false =>
+		$overflowing &&
 		css`
 			mask-image: linear-gradient(90deg, #000 60%, transparent);
 		`}
@@ -120,15 +119,15 @@ export const AppBoardTab: FC<{ id: string; icon: string; title: string; firstTab
 				onClick={onClick}
 				data-testid={`board-tab-${id}`}
 				padding={{ horizontal: 'extrasmall' }}
-				active={current === id}
+				$active={current === id}
 			>
 				<TabIcon icon={icon} size="large" />
 				<Tooltip label={title} placement="top" maxWidth="700px" triggerRef={textRef}>
 					<CustomText
 						size="medium"
 						weight="regular"
 						color={current === id ? 'text' : 'secondary'}
-						overflowing={textOverflowing}
+						$overflowing={textOverflowing}
 						className="tab-text"
 					>
 						{title}

src/shell/boards/board.tsx

@@ -16,8 +16,8 @@ import { BoardProvider, useBoardStore } from '../../store/boards';
 import type { BoardView } from '../../types/apps';
 import type { Board } from '../../types/boards';
 
-const BoardContainer = styled.div<{ show: boolean }>`
-	display: ${(props): string => (props.show ? 'block' : 'none')};
+const BoardContainer = styled.div<{ $show: boolean }>`
+	display: ${(props): string => (props.$show ? 'block' : 'none')};
 	height: 100%;
 	width: 100%;
 	overflow-y: auto;
@@ -49,18 +49,18 @@ const BoardViewComponent = ({
 	</AppContextProvider>
 );
 
-export const AppBoard = ({ board }: { board: Board }): React.JSX.Element => {
+export const AppBoard = ({ $board }: { $board: Board }): React.JSX.Element => {
 	const current = useBoardStore((s) => s.current);
 	const boardViews = useAppStore((s) => s.views.board);
 	const boardView = useMemo(
-		() => find(boardViews, (v) => v.id === board.boardViewId),
-		[board.boardViewId, boardViews]
+		() => find(boardViews, (v) => v.id === $board.boardViewId),
+		[$board.boardViewId, boardViews]
 	);
 
 	return (
-		<BoardContainer show={current === board.id}>
+		<BoardContainer $show={current === $board.id}>
 			{boardView ? (
-				<BoardViewComponent view={boardView} boardId={board.id} />
+				<BoardViewComponent view={boardView} boardId={$board.id} />
 			) : (
 				<Container orientation={'row'} mainAlignment={'center'}>
 					<p>Missing Board View</p>

src/shell/boards/resizable-container.tsx

@@ -8,7 +8,6 @@ import React, { useMemo, useRef } from 'react';
 
 import type { ContainerProps } from '@zextras/carbonio-design-system';
 import { Container } from '@zextras/carbonio-design-system';
-import type { SimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 
 import type { Border } from '../hooks/useResize';
@@ -59,8 +58,8 @@ const BorderWithResize = styled.div<
 	cursor: ${({ $cursor }): CSSProperties['cursor'] => $cursor};
 	width: ${({ $width }): string => $width};
 	height: ${({ $height }): string => $height};
-	${({ $position }): SimpleInterpolation => $position};
-	${({ $translateTransform }): SimpleInterpolation =>
+	${({ $position }): BorderWithResizeProps['$position'] => $position};
+	${({ $translateTransform }): ReturnType<typeof css> | undefined | string =>
 		($translateTransform?.x || $translateTransform?.y) &&
 		css`
 			transform: translate(${$translateTransform?.x ?? 0}, ${$translateTransform?.y ?? 0});

src/shell/shell-secondary-bar.tsx

@@ -21,10 +21,10 @@ import type { AppRoute } from '../types/apps';
 import { useUtilityBarStore } from '../utility-bar/store';
 import { checkRoute } from '../utility-bar/utils';
 
-const SidebarContainer = styled(Container)<ContainerProps & { sidebarIsOpen?: boolean }>`
+const SidebarContainer = styled(Container)<ContainerProps & { $sidebarIsOpen?: boolean }>`
 	min-width: 3rem;
 	max-width: 19.625rem;
-	width: ${({ sidebarIsOpen }): number => (sidebarIsOpen ? 19.625 : 3)}rem;
+	width: ${({ $sidebarIsOpen }): number => ($sidebarIsOpen ? 19.625 : 3)}rem;
 	transition: width 300ms;
 	overflow-x: hidden;
 `;
@@ -51,7 +51,7 @@ const ShellSecondaryBarComponent: FC<{ activeRoute: AppRoute }> = ({ activeRoute
 		<>
 			<SidebarContainer
 				data-testid="SideSecondaryBarContainer"
-				sidebarIsOpen={isOpen}
+				$sidebarIsOpen={isOpen}
 				role="menu"
 				height="fill"
 				orientation="vertical"